@vonage/vivid 3.40.0 → 3.41.0

package/number-field/index.js

@@ -1,14 +1,14 @@
-import { r as registerNumberField } from '../shared/definition33.js';
+import { r as registerNumberField } from '../shared/definition34.js';
 import '../shared/index.js';
-import '../shared/definition10.js';
-import '../shared/definition25.js';
+import '../shared/definition11.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
-import '../shared/definition36.js';
+import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -21,7 +21,7 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/enums.js';
-import '../shared/definition20.js';
+import '../shared/definition21.js';
 import '../shared/aria.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';

package/option/index.js

@@ -1,11 +1,11 @@
-import { r as registerOption } from '../shared/definition34.js';
+import { r as registerOption } from '../shared/definition35.js';
 import '../shared/index.js';
-import '../shared/definition25.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.40.0",
+  "version": "3.41.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.js",

package/pagination/index.js

@@ -1,14 +1,14 @@
-import { r as registerPagination } from '../shared/definition35.js';
-import '../shared/definition10.js';
+import { r as registerPagination } from '../shared/definition36.js';
+import '../shared/definition11.js';
 import '../shared/index.js';
-import '../shared/definition25.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
-import '../shared/definition36.js';
+import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';

package/popup/index.js

@@ -1,14 +1,14 @@
-import { r as registerPopup } from '../shared/definition59.js';
+import { r as registerPopup } from '../shared/definition60.js';
 import '../shared/index.js';
-import '../shared/definition10.js';
-import '../shared/definition25.js';
+import '../shared/definition11.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
-import '../shared/definition36.js';
+import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -21,6 +21,6 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/enums.js';
-import '../shared/definition58.js';
+import '../shared/definition59.js';
 
 registerPopup();

package/progress/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgress } from '../shared/definition37.js';
+import { r as registerProgress } from '../shared/definition38.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/progress-ring/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgressRing } from '../shared/definition36.js';
+import { r as registerProgressRing } from '../shared/definition37.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/radio/index.js

@@ -1,6 +1,6 @@
-import { b as registerRadio } from '../shared/definition39.js';
+import { b as registerRadio } from '../shared/definition40.js';
 import '../shared/index.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';

package/radio-group/index.js

@@ -1,12 +1,12 @@
-import { b as registerRadioGroup } from '../shared/definition38.js';
+import { b as registerRadioGroup } from '../shared/definition39.js';
 import '../shared/index.js';
 import '../shared/direction.js';
 import '../shared/key-codes.js';
 import '../shared/aria.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';
-import '../shared/aria2.js';
 import '../shared/slotted.js';
 import '../shared/when.js';
+import '../shared/aria2.js';
 
 registerRadioGroup();

package/select/index.js

@@ -1,15 +1,15 @@
-import { r as registerSelect } from '../shared/definition40.js';
+import { r as registerSelect } from '../shared/definition41.js';
 import '../shared/index.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
-import '../shared/definition59.js';
-import '../shared/definition10.js';
-import '../shared/definition25.js';
+import '../shared/definition60.js';
+import '../shared/definition11.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition36.js';
+import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -22,8 +22,8 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/enums.js';
-import '../shared/definition58.js';
-import '../shared/definition34.js';
+import '../shared/definition59.js';
+import '../shared/definition35.js';
 import '../shared/dom.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';

package/selectable-box/index.js

@@ -1,12 +1,12 @@
-import { r as registerSelectableBox } from '../shared/definition41.js';
+import { r as registerSelectableBox } from '../shared/definition42.js';
 import '../shared/index.js';
-import '../shared/definition14.js';
-import '../shared/definition25.js';
+import '../shared/definition15.js';
+import '../shared/definition26.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -16,7 +16,7 @@ import '../shared/form-associated.js';
 import '../shared/key-codes.js';
 import '../shared/apply-mixins.js';
 import '../shared/focus2.js';
-import '../shared/definition39.js';
+import '../shared/definition40.js';
 import '../shared/radio.js';
 import '../shared/enums.js';
 

package/shared/definition.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { S as StartEnd } from './start-end.js';
@@ -76,7 +76,7 @@ __decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins(AccordionItem$1, StartEnd);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button: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.heading-button: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.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus-visible {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\nslot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) slot[name=icon] {\n  font: inherit;\n}\n.heading-button.size-condensed slot[name=icon] {\n  font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) slot[name=icon]:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button: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.heading-button: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.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus-visible {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\nslot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) slot[name=icon] {\n  font: inherit;\n}\n.heading-button.size-condensed slot[name=icon] {\n  font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) slot[name=icon]:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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 };