@vonage/vivid 5.15.1 → 5.17.0

package/empty-state/definition.cjs

@@ -1,86 +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 fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50));--_connotation-color-primary: var(--vvd-empty-state-cta-primary, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50));--_connotation-color-primary: var(--vvd-empty-state-success-primary, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50));--_connotation-color-primary: var(--vvd-empty-state-alert-primary, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50));--_connotation-color-primary: var(--vvd-empty-state-warning-primary, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50));--_connotation-color-primary: var(--vvd-empty-state-information-primary, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-primary: var(--vvd-empty-state-announcement-primary, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-primary: var(--vvd-empty-state-accent-primary, var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb,var(--_connotation-color-primary),transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
-
-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 EmptyState extends vividElement.VividElement {
-}
-__decorateClass([
-  fastElement.attr
-], EmptyState.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], EmptyState.prototype, "headline");
-__decorateClass([
-  fastElement.attr
-], EmptyState.prototype, "icon");
-__decorateClass([
-  fastElement.attr({ attribute: "icon-decoration" })
-], EmptyState.prototype, "iconDecoration");
-__decorateClass([
-  fastElement.observable
-], EmptyState.prototype, "slottedActionItems");
-
-const getClasses = ({ connotation, slottedActionItems }) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["no-actions", slottedActionItems?.length === 0]
-);
-const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html` <div
-		class="${getClasses}"
-		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
-	>
-		<slot name="graphic">
-			${fastElement.when(
-    (x) => x.icon,
-    fastElement.html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
-				</div>`
-  )}
-		</slot>
-		<div class="content">
-			${fastElement.when(
-    (x) => x.headline,
-    fastElement.html`<header id="empty-state-headline">
-					${(x) => x.headline}
-				</header>`
-  )}
-			<slot></slot>
-		</div>
-		<div class="actions">
-			<slot name="action-items" ${fastElement.slotted("slottedActionItems")}></slot>
-		</div>
-	</div>`;
-};
-
-const emptyStateDefinition = vividElement.defineVividComponent(
-  "empty-state",
-  EmptyState,
-  EmptyStateTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerEmptyState = vividElement.createRegisterFunction(emptyStateDefinition);
-
-exports.VwcEmptyStateElement = EmptyState;
-exports.emptyStateDefinition = emptyStateDefinition;
-exports.registerEmptyState = registerEmptyState;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition40.cjs");
+exports.VwcEmptyStateElement = require_definition$1.EmptyState;
+exports.emptyStateDefinition = require_definition$1.emptyStateDefinition;
+exports.registerEmptyState = require_definition$1.registerEmptyState;

package/empty-state/definition.js

@@ -1,80 +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, observable, when, html, slotted } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50));--_connotation-color-primary: var(--vvd-empty-state-cta-primary, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50));--_connotation-color-primary: var(--vvd-empty-state-success-primary, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50));--_connotation-color-primary: var(--vvd-empty-state-alert-primary, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50));--_connotation-color-primary: var(--vvd-empty-state-warning-primary, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50));--_connotation-color-primary: var(--vvd-empty-state-information-primary, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-primary: var(--vvd-empty-state-announcement-primary, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-primary: var(--vvd-empty-state-accent-primary, var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb,var(--_connotation-color-primary),transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
-
-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 EmptyState extends VividElement {
-}
-__decorateClass([
-  attr
-], EmptyState.prototype, "connotation");
-__decorateClass([
-  attr
-], EmptyState.prototype, "headline");
-__decorateClass([
-  attr
-], EmptyState.prototype, "icon");
-__decorateClass([
-  attr({ attribute: "icon-decoration" })
-], EmptyState.prototype, "iconDecoration");
-__decorateClass([
-  observable
-], EmptyState.prototype, "slottedActionItems");
-
-const getClasses = ({ connotation, slottedActionItems }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["no-actions", slottedActionItems?.length === 0]
-);
-const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return html` <div
-		class="${getClasses}"
-		aria-labelledby="${(x) => x.headline ? "empty-state-headline" : null}"
-	>
-		<slot name="graphic">
-			${when(
-    (x) => x.icon,
-    html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
-				</div>`
-  )}
-		</slot>
-		<div class="content">
-			${when(
-    (x) => x.headline,
-    html`<header id="empty-state-headline">
-					${(x) => x.headline}
-				</header>`
-  )}
-			<slot></slot>
-		</div>
-		<div class="actions">
-			<slot name="action-items" ${slotted("slottedActionItems")}></slot>
-		</div>
-	</div>`;
-};
-
-const emptyStateDefinition = defineVividComponent(
-  "empty-state",
-  EmptyState,
-  EmptyStateTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerEmptyState = createRegisterFunction(emptyStateDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerEmptyState, r as EmptyState, t as emptyStateDefinition } from "../unbundled/definition40.js";
 export { EmptyState as VwcEmptyStateElement, emptyStateDefinition, registerEmptyState };

package/empty-state/index.cjs

@@ -1,19 +1,19 @@
-"use strict";const s=require("../bundled/definition2.cjs"),t=require("../bundled/vivid-element.cjs"),l=require("../bundled/when.cjs"),d=require("../bundled/slotted.cjs"),m=require("../bundled/class-names.cjs"),p=":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50));--_connotation-color-primary: var(--vvd-empty-state-cta-primary, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50));--_connotation-color-primary: var(--vvd-empty-state-success-primary, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50));--_connotation-color-primary: var(--vvd-empty-state-alert-primary, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50));--_connotation-color-primary: var(--vvd-empty-state-warning-primary, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50));--_connotation-color-primary: var(--vvd-empty-state-information-primary, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-primary: var(--vvd-empty-state-announcement-primary, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-primary: var(--vvd-empty-state-accent-primary, var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb,var(--_connotation-color-primary),transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";var y=Object.defineProperty,i=(n,a,o,g)=>{for(var r=void 0,c=n.length-1,v;c>=0;c--)(v=n[c])&&(r=v(a,o,r)||r);return r&&y(a,o,r),r};class e extends t.VividElement{}i([t.attr],e.prototype,"connotation");i([t.attr],e.prototype,"headline");i([t.attr],e.prototype,"icon");i([t.attr({attribute:"icon-decoration"})],e.prototype,"iconDecoration");i([t.observable],e.prototype,"slottedActionItems");const f=({connotation:n,slottedActionItems:a})=>m.classNames("base",[`connotation-${n}`,!!n],["no-actions",a?.length===0]),u=n=>{const a=n.tagFor(s.Icon);return t.html` <div
-		class="${f}"
-		aria-labelledby="${o=>o.headline?"empty-state-headline":null}"
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/class-names.cjs`);var o=`:host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}`,s=class extends e.t{};i.t([e.l],s.prototype,`connotation`,void 0),i.t([e.l],s.prototype,`headline`,void 0),i.t([e.l],s.prototype,`icon`,void 0),i.t([e.l({attribute:`icon-decoration`})],s.prototype,`iconDecoration`,void 0),i.t([e.T],s.prototype,`slottedActionItems`,void 0);var c=({connotation:e,slottedActionItems:t})=>a.t(`base`,[`connotation-${e}`,!!e],[`no-actions`,t?.length===0]),l=e.o(`empty-state`,s,i=>{let a=i.tagFor(r.r);return e.d` <div
+		class="${c}"
+		aria-labelledby="${e=>e.headline?`empty-state-headline`:null}"
 	>
 		<slot name="graphic">
-			${l.when(o=>o.icon,t.html`<div class="icon-container">
-					<${a} class="icon" name="${o=>o.icon}"></${a}>
+			${t.t(e=>e.icon,e.d`<div class="icon-container">
+					<${a} class="icon" name="${e=>e.icon}"></${a}>
 				</div>`)}
 		</slot>
 		<div class="content">
-			${l.when(o=>o.headline,t.html`<header id="empty-state-headline">
-					${o=>o.headline}
+			${t.t(e=>e.headline,e.d`<header id="empty-state-headline">
+					${e=>e.headline}
 				</header>`)}
 			<slot></slot>
 		</div>
 		<div class="actions">
-			<slot name="action-items" ${d.slotted("slottedActionItems")}></slot>
+			<slot name="action-items" ${n.t(`slottedActionItems`)}></slot>
 		</div>
-	</div>`},_=t.defineVividComponent("empty-state",e,u,[s.iconDefinition],{styles:p}),b=t.createRegisterFunction(_);b();
+	</div>`},[r.t],{styles:o});e.s(l)();

package/empty-state/index.js

@@ -1,69 +1,37 @@
-import { I as m, i as d } from "../bundled/definition2.js";
-import { V as p, a as i, o as y, h as v, c as f, d as _ } from "../bundled/vivid-element.js";
-import { w as s } from "../bundled/when.js";
-import { s as u } from "../bundled/slotted.js";
-import { c as b } from "../bundled/class-names.js";
-const g = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50));--_connotation-color-primary: var(--vvd-empty-state-cta-primary, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50));--_connotation-color-primary: var(--vvd-empty-state-success-primary, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50));--_connotation-color-primary: var(--vvd-empty-state-alert-primary, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50));--_connotation-color-primary: var(--vvd-empty-state-warning-primary, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50));--_connotation-color-primary: var(--vvd-empty-state-information-primary, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-primary: var(--vvd-empty-state-announcement-primary, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-primary: var(--vvd-empty-state-accent-primary, var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb,var(--_connotation-color-primary),transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
-var x = Object.defineProperty, e = (t, n, o, k) => {
-  for (var a = void 0, c = t.length - 1, l; c >= 0; c--)
-    (l = t[c]) && (a = l(n, o, a) || a);
-  return a && x(n, o, a), a;
-};
-class r extends p {
-}
-e([
-  i
-], r.prototype, "connotation");
-e([
-  i
-], r.prototype, "headline");
-e([
-  i
-], r.prototype, "icon");
-e([
-  i({ attribute: "icon-decoration" })
-], r.prototype, "iconDecoration");
-e([
-  y
-], r.prototype, "slottedActionItems");
-const h = ({ connotation: t, slottedActionItems: n }) => b(
-  "base",
-  [`connotation-${t}`, !!t],
-  ["no-actions", n?.length === 0]
-), w = (t) => {
-  const n = t.tagFor(m);
-  return v` <div
-		class="${h}"
-		aria-labelledby="${(o) => o.headline ? "empty-state-headline" : null}"
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/when.js";
+import { t as s } from "../bundled/slotted.js";
+import { r as c, t as l } from "../bundled/definition2.js";
+import { t as u } from "../bundled/decorate.js";
+import { t as d } from "../bundled/class-names.js";
+//#region src/lib/empty-state/empty-state.scss?inline
+var f = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}", p = class extends a {};
+u([n], p.prototype, "connotation", void 0), u([n], p.prototype, "headline", void 0), u([n], p.prototype, "icon", void 0), u([n({ attribute: "icon-decoration" })], p.prototype, "iconDecoration", void 0), u([e], p.prototype, "slottedActionItems", void 0);
+//#endregion
+//#region src/lib/empty-state/empty-state.template.ts
+var m = ({ connotation: e, slottedActionItems: t }) => d("base", [`connotation-${e}`, !!e], ["no-actions", t?.length === 0]);
+//#endregion
+//#region src/lib/empty-state/index.ts
+i(r("empty-state", p, (e) => {
+	let n = e.tagFor(c);
+	return t` <div
+		class="${m}"
+		aria-labelledby="${(e) => e.headline ? "empty-state-headline" : null}"
 	>
 		<slot name="graphic">
-			${s(
-    (o) => o.icon,
-    v`<div class="icon-container">
-					<${n} class="icon" name="${(o) => o.icon}"></${n}>
-				</div>`
-  )}
+			${o((e) => e.icon, t`<div class="icon-container">
+					<${n} class="icon" name="${(e) => e.icon}"></${n}>
+				</div>`)}
 		</slot>
 		<div class="content">
-			${s(
-    (o) => o.headline,
-    v`<header id="empty-state-headline">
-					${(o) => o.headline}
-				</header>`
-  )}
+			${o((e) => e.headline, t`<header id="empty-state-headline">
+					${(e) => e.headline}
+				</header>`)}
 			<slot></slot>
 		</div>
 		<div class="actions">
-			<slot name="action-items" ${u("slottedActionItems")}></slot>
+			<slot name="action-items" ${s("slottedActionItems")}></slot>
 		</div>
 	</div>`;
-}, $ = _(
-  "empty-state",
-  r,
-  w,
-  [d],
-  {
-    styles: g
-  }
-), z = f($);
-z();
+}, [l], { styles: f }))();
+//#endregion

package/fab/definition.cjs

@@ -1,105 +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 affix = require('../unbundled/affix.cjs');
-const button = require('../unbundled/button.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-
-const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media(hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));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%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media(hover:hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
-
-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 Fab extends affix.AffixIconWithTrailing(button.VividFoundationButton) {
-  /**
-   * Handles click events.
-   * Prevents interaction when disabled.
-   */
-  clickHandler(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      return;
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Fab.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Fab.prototype, "size");
-__decorateClass([
-  fastElement.attr
-], Fab.prototype, "label");
-
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled,
-  iconSlottedContent
-}) => fastWebUtilities.classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
-  ["icon-trailing", iconTrailing],
-  ["disabled", disabled]
-);
-const FabTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return fastElement.html`
-		<button
-			class="${getClasses} "
-			?autofocus="${(x) => x.autofocus}"
-			form="${(x) => x.formId}"
-			formaction="${(x) => x.formaction}"
-			formenctype="${(x) => x.formenctype}"
-			formmethod="${(x) => x.formmethod}"
-			formnovalidate="${(x) => x.formnovalidate}"
-			formtarget="${(x) => x.formtarget}"
-			name="${(x) => x.name}"
-			type="${(x) => x.type}"
-			value="${(x) => x.value}"
-			${delegatesAria.delegateAria({
-    ariaDisabled: (x) => x.disabled
-  })}
-			${fastElement.ref("control")}
-			@click="${(x, c) => x.clickHandler(c.event)}"
-		>
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-		</button>
-	`;
-};
-
-const fabDefinition = vividElement.defineVividComponent(
-  "fab",
-  Fab,
-  FabTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerFab = vividElement.createRegisterFunction(fabDefinition);
-
-exports.VwcFabElement = Fab;
-exports.fabDefinition = fabDefinition;
-exports.registerFab = registerFab;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition41.cjs");
+exports.VwcFabElement = require_definition$1.Fab;
+exports.fabDefinition = require_definition$1.fabDefinition;
+exports.registerFab = require_definition$1.registerFab;

package/fab/definition.js

@@ -1,99 +1,3 @@
-import { iconDefinition } from '../icon/definition.js';
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, ref, html } from '@microsoft/fast-element';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { V as VividFoundationButton } from '../unbundled/button.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { d as delegateAria } from '../unbundled/delegates-aria.js';
-
-const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media(hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));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%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media(hover:hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
-
-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 Fab extends AffixIconWithTrailing(VividFoundationButton) {
-  /**
-   * Handles click events.
-   * Prevents interaction when disabled.
-   */
-  clickHandler(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      return;
-    }
-  }
-}
-__decorateClass([
-  attr
-], Fab.prototype, "connotation");
-__decorateClass([
-  attr
-], Fab.prototype, "size");
-__decorateClass([
-  attr
-], Fab.prototype, "label");
-
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled,
-  iconSlottedContent
-}) => classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
-  ["icon-trailing", iconTrailing],
-  ["disabled", disabled]
-);
-const FabTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-		<button
-			class="${getClasses} "
-			?autofocus="${(x) => x.autofocus}"
-			form="${(x) => x.formId}"
-			formaction="${(x) => x.formaction}"
-			formenctype="${(x) => x.formenctype}"
-			formmethod="${(x) => x.formmethod}"
-			formnovalidate="${(x) => x.formnovalidate}"
-			formtarget="${(x) => x.formtarget}"
-			name="${(x) => x.name}"
-			type="${(x) => x.type}"
-			value="${(x) => x.value}"
-			${delegateAria({
-    ariaDisabled: (x) => x.disabled
-  })}
-			${ref("control")}
-			@click="${(x, c) => x.clickHandler(c.event)}"
-		>
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-		</button>
-	`;
-};
-
-const fabDefinition = defineVividComponent(
-  "fab",
-  Fab,
-  FabTemplate,
-  [iconDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerFab = createRegisterFunction(fabDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerFab, r as Fab, t as fabDefinition } from "../unbundled/definition41.js";
 export { Fab as VwcFabElement, fabDefinition, registerFab };