@vonage/vivid 3.52.0 → 3.54.0

package/shared/definition22.cjs

@@ -1,70 +1,79 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition26.cjs');
-const icon = require('./icon.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
+const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+let Divider$1 = class Divider extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = aria.Orientation.horizontal;
+    }
 };
-class EmptyState extends index.FoundationElement {
+index.__decorate([
+    index.attr
+], Divider$1.prototype, "role", void 0);
+index.__decorate([
+    index.attr
+], Divider$1.prototype, "orientation", void 0);
+
+const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}\n";
+
+class Divider extends Divider$1 {
 }
-__decorateClass([
-  index.attr
-], EmptyState.prototype, "headline", 2);
-__decorateClass([
-  index.attr
-], EmptyState.prototype, "icon", 2);
-__decorateClass([
-  index.observable
-], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = (x) => classNames.classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
-const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(icon.Icon);
-  return index.html` <div class="${getClasses}">
-		<slot name="graphic">
-			${when.when(
-    (x) => x.icon,
-    index.html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
-				</div>`
-  )}
-		</slot>
-		<div class="content">
-			${when.when(
-    (x) => x.headline,
-    index.html`<header>${(x) => x.headline}</header>`
-  )}
-			<slot></slot>
-		</div>
-		<div class="actions">
-			<slot name="action-items" ${slotted.slotted("slottedActionItems")}></slot>
-		</div>
-	</div>`;
-};
+const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => index.html` <span
+	class="${getClasses}"
+	orientation="${(x) => x.orientation}"
+	role="${(x) => x.role}"
+></span>`;
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: "empty-state",
-  template: EmptyStateTemplate,
+const dividerDefinition = Divider.compose({
+  baseName: "divider",
+  template: DividerTemplate,
   styles
 });
-const emptyStateRegistries = [emptyStateDefinition(), ...definition.iconRegistries];
-const registerEmptyState = index.registerFactory(emptyStateRegistries);
+const dividerRegistries = [dividerDefinition()];
+const registerDivider = index.registerFactory(dividerRegistries);
 
-exports.emptyStateDefinition = emptyStateDefinition;
-exports.emptyStateRegistries = emptyStateRegistries;
-exports.registerEmptyState = registerEmptyState;
+exports.Divider = Divider;
+exports.dividerDefinition = dividerDefinition;
+exports.dividerRegistries = dividerRegistries;
+exports.registerDivider = registerDivider;

package/shared/definition22.js

@@ -1,66 +1,74 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
+import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+let Divider$1 = class Divider extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
 };
-class EmptyState extends FoundationElement {
+__decorate([
+    attr
+], Divider$1.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider$1.prototype, "orientation", void 0);
+
+const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}\n";
+
+class Divider extends Divider$1 {
 }
-__decorateClass([
-  attr
-], EmptyState.prototype, "headline", 2);
-__decorateClass([
-  attr
-], EmptyState.prototype, "icon", 2);
-__decorateClass([
-  observable
-], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = (x) => classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
-const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return html` <div class="${getClasses}">
-		<slot name="graphic">
-			${when(
-    (x) => x.icon,
-    html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
-				</div>`
-  )}
-		</slot>
-		<div class="content">
-			${when(
-    (x) => x.headline,
-    html`<header>${(x) => x.headline}</header>`
-  )}
-			<slot></slot>
-		</div>
-		<div class="actions">
-			<slot name="action-items" ${slotted("slottedActionItems")}></slot>
-		</div>
-	</div>`;
-};
+const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => html` <span
+	class="${getClasses}"
+	orientation="${(x) => x.orientation}"
+	role="${(x) => x.role}"
+></span>`;
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: "empty-state",
-  template: EmptyStateTemplate,
+const dividerDefinition = Divider.compose({
+  baseName: "divider",
+  template: DividerTemplate,
   styles
 });
-const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
-const registerEmptyState = registerFactory(emptyStateRegistries);
+const dividerRegistries = [dividerDefinition()];
+const registerDivider = registerFactory(dividerRegistries);
 
-export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };
+export { Divider as D, dividerRegistries as a, dividerDefinition as d, registerDivider as r };

package/shared/definition23.cjs

@@ -1,14 +1,13 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition26.cjs');
-const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const button = require('./button.cjs');
-const ref = require('./ref.cjs');
+const definition = require('./definition27.cjs');
+const icon = require('./icon.cjs');
+const when = require('./when.cjs');
+const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".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.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{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,: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:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}\n";
+const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,84 +20,51 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Fab extends button.Button {
+class EmptyState extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], Fab.prototype, "connotation", 2);
+], EmptyState.prototype, "headline", 2);
 __decorateClass([
   index.attr
-], Fab.prototype, "size", 2);
+], EmptyState.prototype, "icon", 2);
 __decorateClass([
-  index.attr
-], Fab.prototype, "label", 2);
-applyMixins.applyMixins(Fab, affix.AffixIconWithTrailing);
+  index.observable
+], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled,
-  iconSlottedContent
-}) => classNames.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 index.html`
-		<button
-			class="${getClasses} "
-			?autofocus="${(x) => x.autofocus}"
-			?disabled="${(x) => x.disabled}"
-			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}"
-			aria-atomic="${(x) => x.ariaAtomic}"
-			aria-busy="${(x) => x.ariaBusy}"
-			aria-current="${(x) => x.ariaCurrent}"
-			aria-details="${(x) => x.ariaDetails}"
-			aria-disabled="${(x) => x.ariaDisabled}"
-			aria-expanded="${(x) => x.ariaExpanded}"
-			aria-haspopup="${(x) => x.ariaHaspopup}"
-			aria-hidden="${(x) => x.ariaHidden}"
-			aria-invalid="${(x) => x.ariaInvalid}"
-			aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-live="${(x) => x.ariaLive}"
-			aria-pressed="${(x) => x.ariaPressed}"
-			aria-relevant="${(x) => x.ariaRelevant}"
-			aria-roledescription="${(x) => x.ariaRoledescription}"
-			${ref.ref("control")}
-		>
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-		</button>
-	`;
+const getClasses = (x) => classNames.classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
+const EmptyStateTemplate = (context) => {
+  const iconTag = context.tagFor(icon.Icon);
+  return index.html` <div class="${getClasses}">
+		<slot name="graphic">
+			${when.when(
+    (x) => x.icon,
+    index.html`<div class="icon-container">
+					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
+				</div>`
+  )}
+		</slot>
+		<div class="content">
+			${when.when(
+    (x) => x.headline,
+    index.html`<header>${(x) => x.headline}</header>`
+  )}
+			<slot></slot>
+		</div>
+		<div class="actions">
+			<slot name="action-items" ${slotted.slotted("slottedActionItems")}></slot>
+		</div>
+	</div>`;
 };
 
-const fabDefinition = Fab.compose({
-  baseName: "fab",
-  template: FabTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const emptyStateDefinition = EmptyState.compose({
+  baseName: "empty-state",
+  template: EmptyStateTemplate,
+  styles
 });
-const fabRegistries = [fabDefinition(), ...definition.iconRegistries];
-const registerFab = index.registerFactory(fabRegistries);
+const emptyStateRegistries = [emptyStateDefinition(), ...definition.iconRegistries];
+const registerEmptyState = index.registerFactory(emptyStateRegistries);
 
-exports.fabDefinition = fabDefinition;
-exports.fabRegistries = fabRegistries;
-exports.registerFab = registerFab;
+exports.emptyStateDefinition = emptyStateDefinition;
+exports.emptyStateRegistries = emptyStateRegistries;
+exports.registerEmptyState = registerEmptyState;

package/shared/definition23.js

@@ -1,12 +1,11 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { B as Button$1 } from './button.js';
-import { r as ref } from './ref.js';
+import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition27.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".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.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{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,: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:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@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:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: 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)}\n";
+const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,82 +18,49 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Fab extends Button$1 {
+class EmptyState extends FoundationElement {
 }
 __decorateClass([
   attr
-], Fab.prototype, "connotation", 2);
+], EmptyState.prototype, "headline", 2);
 __decorateClass([
   attr
-], Fab.prototype, "size", 2);
+], EmptyState.prototype, "icon", 2);
 __decorateClass([
-  attr
-], Fab.prototype, "label", 2);
-applyMixins(Fab, AffixIconWithTrailing);
+  observable
+], EmptyState.prototype, "slottedActionItems", 2);
 
-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}"
-			?disabled="${(x) => x.disabled}"
-			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}"
-			aria-atomic="${(x) => x.ariaAtomic}"
-			aria-busy="${(x) => x.ariaBusy}"
-			aria-current="${(x) => x.ariaCurrent}"
-			aria-details="${(x) => x.ariaDetails}"
-			aria-disabled="${(x) => x.ariaDisabled}"
-			aria-expanded="${(x) => x.ariaExpanded}"
-			aria-haspopup="${(x) => x.ariaHaspopup}"
-			aria-hidden="${(x) => x.ariaHidden}"
-			aria-invalid="${(x) => x.ariaInvalid}"
-			aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-live="${(x) => x.ariaLive}"
-			aria-pressed="${(x) => x.ariaPressed}"
-			aria-relevant="${(x) => x.ariaRelevant}"
-			aria-roledescription="${(x) => x.ariaRoledescription}"
-			${ref("control")}
-		>
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-		</button>
-	`;
+const getClasses = (x) => classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
+const EmptyStateTemplate = (context) => {
+  const iconTag = context.tagFor(Icon);
+  return html` <div class="${getClasses}">
+		<slot name="graphic">
+			${when(
+    (x) => x.icon,
+    html`<div class="icon-container">
+					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
+				</div>`
+  )}
+		</slot>
+		<div class="content">
+			${when(
+    (x) => x.headline,
+    html`<header>${(x) => x.headline}</header>`
+  )}
+			<slot></slot>
+		</div>
+		<div class="actions">
+			<slot name="action-items" ${slotted("slottedActionItems")}></slot>
+		</div>
+	</div>`;
 };
 
-const fabDefinition = Fab.compose({
-  baseName: "fab",
-  template: FabTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const emptyStateDefinition = EmptyState.compose({
+  baseName: "empty-state",
+  template: EmptyStateTemplate,
+  styles
 });
-const fabRegistries = [fabDefinition(), ...iconRegistries];
-const registerFab = registerFactory(fabRegistries);
+const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
+const registerEmptyState = registerFactory(emptyStateRegistries);
 
-export { fabRegistries as a, fabDefinition as f, registerFab as r };
+export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };