@vonage/vivid 4.8.0 → 4.10.0

package/shared/definition21.js

@@ -2,10 +2,10 @@ import { F as FoundationElement, a as attr, o as observable, h as html, r as reg
 import { a as iconRegistries } from './definition27.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { I as Icon } from './icon.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
@@ -29,15 +29,20 @@ class Dialog extends FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
+    this.noDismissOnEsc = false;
+    this.noDismissButton = false;
+    this.nonDismissible = false;
     this.modal = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || this.noLightDismiss) {
+      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
         return;
       }
       const rect = this.#dialog.getBoundingClientRect();
       const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      this.open = clickedInDialog;
+      if (!clickedInDialog) {
+        this._handleCloseRequest();
+      }
     };
     this.#handleInternalFormSubmit = (event) => {
       if (event.target.method !== "dialog") {
@@ -96,8 +101,47 @@ class Dialog extends FoundationElement {
       this.$emit("open", void 0, { bubbles: false });
     }
   }
+  get _showDismissButton() {
+    return this.#isDismissibleVia("dismiss-button");
+  }
+  #isDismissibleVia(method) {
+    if (this.nonDismissible) {
+      return false;
+    }
+    switch (method) {
+      case "escape":
+        return !this.noDismissOnEsc;
+      case "dismiss-button":
+        return !this.noDismissButton;
+      case "light-dismiss":
+        return !this.noLightDismiss;
+    }
+  }
   #handleScrimClick;
   #handleInternalFormSubmit;
+  /**
+   * @internal
+   */
+  _onKeyDown(event) {
+    if (handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
+      if (this.#isDismissibleVia("escape")) {
+        this._handleCloseRequest();
+      }
+      return false;
+    }
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
   close() {
     this.open = false;
   }
@@ -174,6 +218,15 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+], Dialog.prototype, "noDismissOnEsc");
+__decorateClass([
+  attr({ attribute: "no-dismiss-button", mode: "boolean" })
+], Dialog.prototype, "noDismissButton");
+__decorateClass([
+  attr({ attribute: "non-dismissible", mode: "boolean" })
+], Dialog.prototype, "nonDismissible");
 __decorateClass([
   attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
@@ -225,17 +278,9 @@ function renderDismissButton(buttonTag) {
 		size="condensed"
 		class="dismiss-button"
 		icon="close-line"
-		@click="${(x) => x.open = false}"
+		@click="${(x) => x._handleCloseRequest()}"
 	></${buttonTag}>`;
 }
-function handleEscapeKey(dialog, event) {
-  if (handleEscapeKeyAndStopPropogation(event) && dialog._openedAsModal) {
-    dialog.open = false;
-    return false;
-  } else {
-    return true;
-  }
-}
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
   const iconTag = context.tagFor(Icon);
@@ -243,7 +288,7 @@ const DialogTemplate = (context) => {
   return html`
 	<${elevationTag} dp="8">
 		<dialog class="${getClasses}"
-				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
+				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
 				aria-label="${(x) => x.ariaLabel}"
 				?aria-modal="${(x) => x._openedAsModal}"
@@ -256,7 +301,7 @@ const DialogTemplate = (context) => {
 							</slot>
 							${when((x) => x.headline, headline())}
 							${when((x) => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
+							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
 						<slot name="body" ${slotted("bodySlottedContent")}></slot>

package/shared/definition22.cjs

@@ -1,62 +1,43 @@
 'use strict';
 
 const index = require('./index.cjs');
-const aria = require('./aria2.cjs');
+const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
 
-/**
- * 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",
-};
-
-/**
- * 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;
-    }
-};
-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}";
 
-class Divider extends Divider$1 {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
+};
+class Divider extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.role = DividerRole.separator;
+    this.orientation = aria.Orientation.horizontal;
+  }
 }
+__decorateClass([
+  index.attr
+], Divider.prototype, "role");
+__decorateClass([
+  index.attr
+], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
 const DividerTemplate = () => index.html` <span

package/shared/definition22.js

@@ -1,60 +1,41 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria2.js';
+import { F as FoundationElement, 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';
 
-/**
- * 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",
-};
-
-/**
- * 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;
-    }
-};
-__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}";
 
-class Divider extends Divider$1 {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
+};
+class Divider extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.role = DividerRole.separator;
+    this.orientation = Orientation.horizontal;
+  }
 }
+__decorateClass([
+  attr
+], Divider.prototype, "role");
+__decorateClass([
+  attr
+], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
 const DividerTemplate = () => html` <span

package/shared/definition29.cjs

@@ -571,7 +571,7 @@ index.__decorate([
     index.observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition29.js

@@ -569,7 +569,7 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition30.cjs

@@ -8,7 +8,7 @@ const index$1 = require('./index2.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,

package/shared/definition30.js

@@ -6,7 +6,7 @@ import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,

package/shared/definition46.cjs

@@ -36,6 +36,28 @@ class SideDrawer extends index.FoundationElement {
   #open() {
     this.$emit("open", void 0, { bubbles: false });
   }
+  /**
+   * @internal
+   */
+  _onKeydown(event) {
+    if (index$1.handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
 }
 __decorateClass([
   index.attr({
@@ -72,7 +94,7 @@ const sideDrawerTemplate = () => index.html`
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
 		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(x, c) => handleKeydown(x, c.event)}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
 	>
 		<slot></slot>
 	</div>
@@ -85,17 +107,10 @@ const sideDrawerTemplate = () => index.html`
   (x) => x.modal,
   index.html`<div
 			class="${getScrimClasses}"
-			@click="${(x) => x.open = false}"
+			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
-const handleKeydown = (x, event) => {
-  if (index$1.handleEscapeKeyAndStopPropogation(event)) {
-    x.open = false;
-  } else {
-    return true;
-  }
-};
 
 const sideDrawerDefinition = SideDrawer.compose({
   baseName: "side-drawer",

package/shared/definition46.js

@@ -34,6 +34,28 @@ class SideDrawer extends FoundationElement {
   #open() {
     this.$emit("open", void 0, { bubbles: false });
   }
+  /**
+   * @internal
+   */
+  _onKeydown(event) {
+    if (handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
 }
 __decorateClass([
   attr({
@@ -70,7 +92,7 @@ const sideDrawerTemplate = () => html`
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
 		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(x, c) => handleKeydown(x, c.event)}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
 	>
 		<slot></slot>
 	</div>
@@ -83,17 +105,10 @@ const sideDrawerTemplate = () => html`
   (x) => x.modal,
   html`<div
 			class="${getScrimClasses}"
-			@click="${(x) => x.open = false}"
+			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
-const handleKeydown = (x, event) => {
-  if (handleEscapeKeyAndStopPropogation(event)) {
-    x.open = false;
-  } else {
-    return true;
-  }
-};
 
 const sideDrawerDefinition = SideDrawer.compose({
   baseName: "side-drawer",

package/shared/definition5.cjs

@@ -319,7 +319,7 @@ const AudioPlayerTemplate = (context) => {
 			${when.when(
     (x) => Boolean(x.playbackRates),
     index.html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition5.js

@@ -317,7 +317,7 @@ const AudioPlayerTemplate = (context) => {
 			${when(
     (x) => Boolean(x.playbackRates),
     html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition56.cjs

@@ -189,6 +189,7 @@ exports.TextField = class TextField extends textField.TextField {
     __privateGet(this, _reflectToInput).attribute("size", "size");
     __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
     __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("inputMode", "inputmode");
     __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
     __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
     __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
@@ -294,6 +295,9 @@ __decorateClass([
 __decorateClass([
   index.attr()
 ], exports.TextField.prototype, "scale", 2);
+__decorateClass([
+  index.attr({ attribute: "inputmode" })
+], exports.TextField.prototype, "inputMode", 2);
 __decorateClass([
   index.observable
 ], exports.TextField.prototype, "actionItemsSlottedContent", 2);

package/shared/definition56.js

@@ -187,6 +187,7 @@ let TextField = class extends TextField$1 {
     __privateGet(this, _reflectToInput).attribute("size", "size");
     __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
     __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("inputMode", "inputmode");
     __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
     __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
     __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
@@ -292,6 +293,9 @@ __decorateClass([
 __decorateClass([
   attr()
 ], TextField.prototype, "scale", 2);
+__decorateClass([
+  attr({ attribute: "inputmode" })
+], TextField.prototype, "inputMode", 2);
 __decorateClass([
   observable
 ], TextField.prototype, "actionItemsSlottedContent", 2);

package/shared/definition9.cjs

@@ -10,24 +10,6 @@ const classNames = require('./class-names.cjs');
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.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));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class BreadcrumbItem extends breadcrumbItem.BreadcrumbItem {
-  constructor() {
-    super();
-  }
-}
-__decorateClass([
-  index.attr
-], BreadcrumbItem.prototype, "text");
-
 const getClasses = (_) => classNames.classNames("base");
 const BreadcrumbItemTemplate = (context, definition) => {
   const iconTag = context.tagFor(icon.Icon);
@@ -44,7 +26,7 @@ const BreadcrumbItemTemplate = (context, definition) => {
 	</div>`;
 };
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
+const breadcrumbItemDefinition = breadcrumbItem.BreadcrumbItem.compose({
   baseName: "breadcrumb-item",
   template: BreadcrumbItemTemplate,
   styles,

package/shared/definition9.js

@@ -1,6 +1,6 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
+import { h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { B as BreadcrumbItem } from './breadcrumb-item.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
@@ -8,24 +8,6 @@ import { c as classNames } from './class-names.js';
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.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));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class BreadcrumbItem extends BreadcrumbItem$1 {
-  constructor() {
-    super();
-  }
-}
-__decorateClass([
-  attr
-], BreadcrumbItem.prototype, "text");
-
 const getClasses = (_) => classNames("base");
 const BreadcrumbItemTemplate = (context, definition) => {
   const iconTag = context.tagFor(Icon);