@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition10.js

@@ -1,167 +1,98 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { P as ProgressRing, a as progressRingRegistries } from './definition36.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { B as Button$1 } from './button.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { b as Size } from './enums.js';
-import { r as ref } from './ref.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
+import { s as slotted, e as elements } from './slotted.js';
+import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
 
-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 Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+let Breadcrumb$1 = class Breadcrumb extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem$1) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * Finds href on childnodes in the light DOM or shadow DOM.
+     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            return null;
+    }
+    /**
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem$1) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
 };
-class Button extends Button$1 {
-  constructor() {
-    super();
-    this.stacked = false;
-    this.pending = false;
-    this.title = "";
-  }
-}
-__decorateClass([
-  attr({ converter: { fromView: (value) => value || null, toView: (value) => value || null } })
-], Button.prototype, "title", 2);
-__decorateClass([
-  attr
-], Button.prototype, "connotation", 2);
-__decorateClass([
-  attr
-], Button.prototype, "shape", 2);
-__decorateClass([
-  attr
-], Button.prototype, "appearance", 2);
-__decorateClass([
-  attr
-], Button.prototype, "size", 2);
-__decorateClass([
-  attr({
-    mode: "boolean",
-    attribute: "stacked"
-  })
-], Button.prototype, "stacked", 2);
-__decorateClass([
-  attr({
-    mode: "boolean",
-    attribute: "pending"
-  })
-], Button.prototype, "pending", 2);
-__decorateClass([
-  attr
-], Button.prototype, "label", 2);
-applyMixins(Button, AffixIconWithTrailing);
-
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  /* Shape */\n  /* Size */\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control .text {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--button-line-clamp, 1);\n  max-inline-size: 100%;\n}\n.control:not(.icon-only) {\n  inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_button-block-size);\n  }\n}\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n.control.shape-pill:not(.icon-only, .stacked) {\n  border-radius: 24px;\n}\n.control.shape-pill.stacked {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n.control:not(.stacked).size-super-condensed {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-super-condensed:not(.icon-only) {\n  --_button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control:not(.stacked).size-condensed {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n}\n.control.stacked.size-super-condensed {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  --_button-block-size: calc(var(--stacked-size) + 20px);\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-super-condensed:not(.icon-only) {\n  --_button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control.stacked.size-condensed {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  --_button-block-size: calc(var(--stacked-size) + 24px);\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-condensed:not(.icon-only) {\n  --_button-icon-gap: 6px;\n  padding-inline: 12px;\n}\n.control.stacked.size-expanded {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  --_button-block-size: calc(var(--stacked-size) + 32px);\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control.stacked.size-expanded:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  --_button-block-size: calc(var(--stacked-size) + 28px);\n  font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n\n/* Icon */\nslot[name=icon] {\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}\n.control.stacked > slot[name=icon] {\n  font-size: calc(var(--stacked-size) / 2);\n}\n.control:not(.stacked) > slot[name=icon] {\n  font-size: calc(var(--_button-block-size) / 2);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.appearance-filled .focus-indicator {\n  --focus-stroke-gap-color: unset;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n\n:host(:not([icon])) .pending {\n  position: absolute;\n}\n:host(:not([icon])) .pending + .text {\n  visibility: hidden;\n}";
+__decorate([
+    observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
-const getAppearanceClassName = (appearance, disabled) => {
-  let className = `appearance-${appearance}`;
-  disabled && (className += " disabled");
-  return className;
-};
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  iconTrailing,
-  icon,
-  label,
-  disabled,
-  stacked,
-  size
-}) => classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [getAppearanceClassName(appearance, disabled), Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!icon],
-  ["icon-trailing", iconTrailing],
-  ["stacked", Boolean(stacked)]
-);
-function renderIconOrPending(context, icon, pending, size = Size.Normal) {
-  if (pending && size != Size.SuperCondensed) {
-    const progressTag = context.tagFor(ProgressRing);
-    const progressSize = {
-      [Size.Condensed]: "-6",
-      [Size.Normal]: "-5",
-      [Size.Expanded]: "-4"
-    };
-    return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
-  } else {
-    const affixIconTemplate = affixIconTemplateFactory(context);
-    return affixIconTemplate(icon, IconWrapper.Slot);
-  }
-}
-const buttonTemplate = (context) => {
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-	<button
-		class="${getClasses}"
-		?autofocus="${(x) => x.autofocus}"
-		?disabled="${(x) => x.disabled || x.pending}"
-		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-controls="${(x) => x.ariaControls}"
-		aria-current="${(x) => x.ariaCurrent}"
-		aria-describedby="${(x) => x.ariaDescribedby}"
-		aria-details="${(x) => x.ariaDetails}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-errormessage="${(x) => x.ariaErrormessage}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-flowto="${(x) => x.ariaFlowto}"
-		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-labelledby="${(x) => x.ariaLabelledby}"
-		aria-live="${(x) => x.ariaLive}"
-		aria-owns="${(x) => x.ariaOwns}"
-		aria-pressed="${(x) => x.ariaPressed}"
-		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
-		title="${(x) => x.title}"
-		${ref("control")}
-	>
-		${() => focusTemplate}
+const breadcrumbTemplate = () => html`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${slotted({
+  property: "slottedBreadcrumbItems",
+  filter: elements()
+})}
+      ></slot>
+    </div>
+	</nav>
+`;
 
-		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+const styles = ".list {\n  display: flex;\n}";
 
-		${when((x) => x.label, html`<span class="text">${(x) => x.label}</span>`)}
-	</button>
-`;
-};
+class Breadcrumb extends Breadcrumb$1 {
+}
 
-const buttonDefinition = Button.compose({
-  baseName: "button",
-  baseClass: Button$1,
-  template: buttonTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const breadcrumbDefinition = Breadcrumb.compose({
+  baseName: "breadcrumb",
+  template: breadcrumbTemplate,
+  styles
 });
-const buttonRegistries = [buttonDefinition(), ...iconRegistries, ...focusRegistries, ...progressRingRegistries];
-const registerButton = registerFactory(buttonRegistries);
+const breadcrumbRegistries = [breadcrumbDefinition()];
+const registerBreadcrumb = registerFactory(breadcrumbRegistries);
 
-export { Button as B, buttonRegistries as a, buttonDefinition as b, registerButton as r };
+export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };

package/shared/definition11.js

@@ -1,46 +1,168 @@
-import { h as html, r as registerFactory } from './index.js';
-import { C as CalendarEvent } from './calendar-event.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { P as ProgressRing, a as progressRingRegistries } from './definition37.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { B as Button$1 } from './button.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { b as Size } from './enums.js';
+import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
+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;
+};
+class Button extends Button$1 {
+  constructor() {
+    super();
+    this.stacked = false;
+    this.pending = false;
+    this.title = "";
+  }
+}
+__decorateClass([
+  attr({ converter: { fromView: (value) => value || null, toView: (value) => value || null } })
+], Button.prototype, "title", 2);
+__decorateClass([
+  attr
+], Button.prototype, "connotation", 2);
+__decorateClass([
+  attr
+], Button.prototype, "shape", 2);
+__decorateClass([
+  attr
+], Button.prototype, "appearance", 2);
+__decorateClass([
+  attr
+], Button.prototype, "size", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "stacked"
+  })
+], Button.prototype, "stacked", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "pending"
+  })
+], Button.prototype, "pending", 2);
+__decorateClass([
+  attr
+], Button.prototype, "label", 2);
+applyMixins(Button, AffixIconWithTrailing);
 
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  /* Shape */\n  /* Size */\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control .text {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--button-line-clamp, 1);\n  max-inline-size: 100%;\n}\n.control:not(.icon-only) {\n  inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_button-block-size);\n  }\n}\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n.control.shape-pill:not(.icon-only, .stacked) {\n  border-radius: 24px;\n}\n.control.shape-pill.stacked {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n.control:not(.stacked).size-super-condensed {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-super-condensed:not(.icon-only) {\n  --_button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control:not(.stacked).size-condensed {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n}\n.control.stacked.size-super-condensed {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  --_button-block-size: calc(var(--stacked-size) + 20px);\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-super-condensed:not(.icon-only) {\n  --_button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control.stacked.size-condensed {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  --_button-block-size: calc(var(--stacked-size) + 24px);\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-condensed:not(.icon-only) {\n  --_button-icon-gap: 6px;\n  padding-inline: 12px;\n}\n.control.stacked.size-expanded {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  --_button-block-size: calc(var(--stacked-size) + 32px);\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control.stacked.size-expanded:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  --_button-block-size: calc(var(--stacked-size) + 28px);\n  font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n\n/* Icon */\nslot[name=icon] {\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}\n.control.stacked > slot[name=icon] {\n  font-size: calc(var(--stacked-size) / 2);\n}\n.control:not(.stacked) > slot[name=icon] {\n  font-size: calc(var(--_button-block-size) / 2);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.appearance-filled .focus-indicator {\n  --focus-stroke-gap-color: unset;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n\n:host(:not([icon])) .pending {\n  position: absolute;\n}\n:host(:not([icon])) .pending + .text {\n  visibility: hidden;\n}";
+
+const getAppearanceClassName = (appearance, disabled) => {
+  let className = `appearance-${appearance}`;
+  disabled && (className += " disabled");
+  return className;
+};
 const getClasses = ({
   connotation,
-  appearance
+  appearance,
+  shape,
+  iconTrailing,
+  icon,
+  label,
+  disabled,
+  stacked,
+  size,
+  iconSlottedContent
 }) => classNames(
-  "base",
+  "control",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)]
+  [getAppearanceClassName(appearance, disabled), Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  ["icon-trailing", iconTrailing],
+  ["stacked", Boolean(stacked)]
 );
-const getStyles = ({ start, duration, overlapCount }) => {
-  const stylesObj = {
-    ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
-    ...start && { "--vvd-calendar-event--start": start },
-    ...duration && { "--vvd-calendar-event--duration": duration }
-  };
-  return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
+function renderIconOrPending(context, icon, pending, size = Size.Normal) {
+  if (pending && size != Size.SuperCondensed) {
+    const progressTag = context.tagFor(ProgressRing);
+    const progressSize = {
+      [Size.Condensed]: "-6",
+      [Size.Normal]: "-5",
+      [Size.Expanded]: "-4"
+    };
+    return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
+  } else {
+    const affixIconTemplate = affixIconTemplateFactory(context);
+    return affixIconTemplate(icon, IconWrapper.Slot);
+  }
+}
+const buttonTemplate = (context) => {
+  const focusTemplate = focusTemplateFactory(context);
+  return html`
+	<button
+		class="${getClasses}"
+		?autofocus="${(x) => x.autofocus}"
+		?disabled="${(x) => x.disabled || x.pending}"
+		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-controls="${(x) => x.ariaControls}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-describedby="${(x) => x.ariaDescribedby}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-flowto="${(x) => x.ariaFlowto}"
+		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-labelledby="${(x) => x.ariaLabelledby}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-owns="${(x) => x.ariaOwns}"
+		aria-pressed="${(x) => x.ariaPressed}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		title="${(x) => x.title}"
+		${ref("control")}
+	>
+		${() => focusTemplate}
+
+		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+
+		${when((x) => x.label, html`<span class="text">${(x) => x.label}</span>`)}
+	</button>
+`;
 };
-const CalendarEventTemplate = () => html`
-<div
-  style="${getStyles}"
-  class="${getClasses}"
-  role="button"
-  tabindex="0"
->
-  ${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
-  ${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
-</div>`;
 
-const calendarEventDefinition = CalendarEvent.compose({
-  baseName: "calendar-event",
-  template: CalendarEventTemplate,
+const buttonDefinition = Button.compose({
+  baseName: "button",
+  baseClass: Button$1,
+  template: buttonTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const calendarEventRegistries = [calendarEventDefinition()];
-const registerCalendarEvent = registerFactory(calendarEventRegistries);
+const buttonRegistries = [buttonDefinition(), ...iconRegistries, ...focusRegistries, ...progressRingRegistries];
+const registerButton = registerFactory(buttonRegistries);
 
-export { calendarEventRegistries as a, calendarEventDefinition as c, registerCalendarEvent as r };
+export { Button as B, buttonRegistries as a, buttonDefinition as b, registerButton as r };