@vonage/vivid 3.44.0 → 3.46.0

package/shared/definition55.js

@@ -1,8 +1,9 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { P as Popup, p as popupRegistries } from './definition60.js';
+import { a as anchored } from './anchored.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,23 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Tooltip extends FoundationElement {
+let Tooltip = class extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.#anchorEl = null;
     this.open = false;
-    this.#observeMissingAnchor = (anchorId) => {
-      this.#observer = new MutationObserver(() => {
-        const anchor = document.getElementById(anchorId);
-        if (anchor) {
-          this.#anchorEl = anchor;
-          this.#anchorUpdated();
-          this.#observer.disconnect();
-          this.#observer = void 0;
-        }
-      });
-      this.#observer.observe(document.body, { childList: true, subtree: true });
-    };
     this.#show = () => {
       this.open = true;
     };
@@ -43,57 +31,53 @@ class Tooltip extends FoundationElement {
         this.#hide();
     };
   }
-  #anchorEl;
-  #observer;
-  anchorChanged(_, newValue) {
-    if (this.#anchorEl)
-      this.#removeEventListener();
-    this.#observer?.disconnect();
-    this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
-    if (this.#anchorEl) {
-      this.#anchorUpdated();
-    } else {
-      this.#observeMissingAnchor(newValue);
-    }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateListeners();
   }
-  #observeMissingAnchor;
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#removeEventListener();
-    this.#observer?.disconnect();
-    document.removeEventListener("keydown", this.#closeOnEscape);
+    this.#updateListeners();
   }
-  #anchorUpdated() {
-    this.#removeEventListener();
-    this.#addEventListener();
+  /**
+   * @internal
+   */
+  _anchorElChanged(oldValue, newValue) {
+    if (oldValue)
+      this.#cleanupAnchor(oldValue);
+    if (newValue)
+      this.#setupAnchor(newValue);
   }
-  #addEventListener() {
-    if (this.#anchorEl) {
-      this.#anchorEl.addEventListener("mouseover", this.#show);
-      this.#anchorEl.addEventListener("mouseout", this.#hide);
-      this.#anchorEl.addEventListener("focusin", this.#show);
-      this.#anchorEl.addEventListener("focusout", this.#hide);
-    }
+  #setupAnchor(a) {
+    a.addEventListener("mouseover", this.#show);
+    a.addEventListener("mouseout", this.#hide);
+    a.addEventListener("focusin", this.#show);
+    a.addEventListener("focusout", this.#hide);
   }
-  #removeEventListener() {
-    this.#anchorEl?.removeEventListener("mouseover", this.#show);
-    this.#anchorEl?.removeEventListener("mouseout", this.#hide);
-    this.#anchorEl?.removeEventListener("focusin", this.#show);
-    this.#anchorEl?.removeEventListener("focusout", this.#hide);
+  #cleanupAnchor(a) {
+    a.removeEventListener("mouseover", this.#show);
+    a.removeEventListener("mouseout", this.#hide);
+    a.removeEventListener("focusin", this.#show);
+    a.removeEventListener("focusout", this.#hide);
   }
   #show;
   #hide;
-  #closeOnEscape;
-  openChanged(_, newValue) {
-    if (_ === void 0)
-      return;
-    if (newValue) {
+  #updateListeners() {
+    document.removeEventListener("keydown", this.#closeOnEscape);
+    if (this.open && this.isConnected) {
       document.addEventListener("keydown", this.#closeOnEscape);
-    } else {
-      document.removeEventListener("keydown", this.#closeOnEscape);
     }
   }
-}
+  #closeOnEscape;
+  /**
+   * @internal
+   */
+  openChanged(oldValue) {
+    if (oldValue === void 0)
+      return;
+    this.#updateListeners();
+  }
+};
 __decorateClass([
   attr
 ], Tooltip.prototype, "text", 2);
@@ -103,9 +87,9 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], Tooltip.prototype, "open", 2);
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tooltip.prototype, "anchor", 2);
+Tooltip = __decorateClass([
+  anchored
+], Tooltip);
 
 const getClasses = ({
   open
@@ -118,7 +102,7 @@ const TooltipTemplate = (context) => {
   return html`
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
-	:anchor="${(x) => x.anchor}"
+	:anchor="${(x) => x._anchorEl}"
 	:open=${(x) => x.open}
   exportparts="vvd-theme-alternate">
   <div class="tooltip" role="tooltip">

package/shared/definition56.js

@@ -12,7 +12,7 @@ import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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(: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(: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(: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:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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 {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-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  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 8px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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(: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(: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(: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:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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 {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-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  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition58.js

@@ -1,7 +1,7 @@
 import { h as html, r as registerFactory } from './index.js';
 import { F as Focus } from './focus.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
 
 const focusTemplate = () => html`
         <span class="control"></span>`;

package/shared/definition6.js

@@ -4,7 +4,7 @@ import { I as Icon } from './icon.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 Thu, 21 Dec 2023 10:43:18 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));\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-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\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.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  border-radius: var(--_avatar-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));\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-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\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.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  --_avatar-border-radius: 8px;\n}\n.base:not(.shape-pill).size-condensed {\n  --_avatar-border-radius: 4px;\n}\n.base.shape-pill {\n  --_avatar-border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition60.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition59.js';
 import { r as ref } from './ref.js';
@@ -818,6 +818,88 @@ const offset = function (options) {
   };
 };
 
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const overflowAvailableHeight = height - overflow[heightSide];
+      const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if (isYAxis) {
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
+      } else {
+        const maximumClippingHeight = height - overflow.top - overflow.bottom;
+        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -1559,7 +1641,14 @@ class Popup extends FoundationElement {
     this.strategy = "fixed";
   }
   get #middleware() {
-    let middleware = [inline(), flip(), hide()];
+    let middleware = [inline(), flip(), hide(), size({
+      apply({ availableWidth, availableHeight, elements }) {
+        Object.assign(elements.floating.style, {
+          maxWidth: `${availableWidth}px`,
+          maxHeight: `${availableHeight}px`
+        });
+      }
+    })];
     if (this.arrow) {
       middleware = [offset(12), ...middleware, arrow({ element: this.arrowEl, padding: 10 })];
     }
@@ -1568,15 +1657,25 @@ class Popup extends FoundationElement {
   #cleanup;
   openChanged(_, newValue) {
     newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
+    this.#updateAutoUpdate();
+  }
+  /**
+   * @internal
+   */
+  anchorChanged() {
+    this.#updateAutoUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateAutoUpdate();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#cleanup?.();
+    this.#updateAutoUpdate();
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
+  #updateAutoUpdate() {
     this.#cleanup?.();
-    if (this.anchorEl && this.popupEl) {
+    if (this.anchorEl && this.open && this.popupEl) {
       this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
     }
   }
@@ -1622,11 +1721,8 @@ class Popup extends FoundationElement {
       top: arrowY ? `${arrowY}px` : styles[staticAxis]
     });
   }
-  /**
-   * Gets the anchor element by id
-   */
   get anchorEl() {
-    return this.anchor instanceof HTMLElement ? this.anchor : document.getElementById(this.anchor ? this.anchor : "");
+    return this.anchor ?? null;
   }
   show() {
     this.open = true;
@@ -1662,10 +1758,10 @@ __decorateClass([
   attr({ mode: "fromView" })
 ], Popup.prototype, "strategy", 2);
 __decorateClass([
-  attr
+  observable
 ], Popup.prototype, "anchor", 2);
 
-const styles = ".control {\n  background: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  z-index: 10;\n  border-radius: 6px;\n  inline-size: fit-content;\n}\n.popup-wrapper:not(.absolute) {\n  position: fixed;\n}\n.popup-wrapper.absolute {\n  position: absolute;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible-button {\n  align-self: flex-start;\n  margin-block-start: 4px;\n  margin-inline-end: 4px;\n}";
+const styles = ".control {\n  background: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  z-index: 10;\n  border-radius: 8px;\n  inline-size: max-content;\n}\n.popup-wrapper:not(.absolute) {\n  position: fixed;\n}\n.popup-wrapper.absolute {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible-button {\n  align-self: flex-start;\n  margin-block-start: 4px;\n  margin-inline-end: 4px;\n}";
 
 const getClasses = ({
   open,

package/shared/definition7.js

@@ -32,7 +32,7 @@ __decorateClass([
 ], Badge.prototype, "text", 2);
 applyMixins(Badge, AffixIconWithTrailing);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n  /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */\n  --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n  /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */\n  --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));\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-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\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.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n  /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */\n  --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n  /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */\n  --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));\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-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\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.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}";
 
 const getClasses = ({
   connotation,

package/shared/definition8.js

@@ -10,7 +10,7 @@ import { s as slotted } from './slotted.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 Thu, 21 Dec 2023 10:43:18 GMT\n */\n:host {\n  display: block;\n}\n\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\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.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: block;\n}\n\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\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.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -119,8 +119,7 @@ const BannerTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const buttonTag = context.tagFor(Button);
   return html`
-	  <div class="${getClasses}" 
-	  tabindex="${(x) => x.removable || x.actionItemsSlottedContent && x.actionItemsSlottedContent.length ? "0" : null}">
+	  <div class="${getClasses}">
 		  <header class="header">
 					<div class="content">
             ${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}

package/shared/definition9.js

@@ -7,7 +7,7 @@ import { I as Icon } from './icon.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 Thu, 21 Dec 2023 10:43:18 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 8px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/enums.js

@@ -50,6 +50,10 @@ var LayoutSize = /* @__PURE__ */ ((LayoutSize2) => {
   LayoutSize2["Large"] = "large";
   return LayoutSize2;
 })(LayoutSize || {});
+var TabsSize = /* @__PURE__ */ ((TabsSize2) => {
+  TabsSize2["Small"] = "small";
+  return TabsSize2;
+})(TabsSize || {});
 var Position = /* @__PURE__ */ ((Position2) => {
   Position2["Top"] = "TOP";
   Position2["Bottom"] = "BOTTOM";
@@ -69,4 +73,4 @@ var AriaLive = /* @__PURE__ */ ((AriaLive2) => {
   return AriaLive2;
 })(AriaLive || {});
 
-export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, ConnotationDecorative as a, Size as b, AriaLive as c };
+export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, TabsSize as T, ConnotationDecorative as a, Size as b, AriaLive as c };

package/shared/form-associated.js

@@ -246,6 +246,7 @@ function FormAssociated(BaseCtor) {
          * @internal
          */
         disconnectedCallback() {
+            super.disconnectedCallback();
             this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
             if (!this.elementInternals && this.form) {
                 this.form.removeEventListener("reset", this.formResetCallback);

package/shared/index2.js

@@ -3,7 +3,7 @@ import { a as attr, o as observable, h as html } from './index.js';
 import { w as when } from './when.js';
 import enUS from '../locales/en-US.js';
 
-const messageStyles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;

package/shared/patterns/anchored.d.ts

@@ -0,0 +1,22 @@
+type AnchorType = string | HTMLElement;
+export interface Anchored {
+    anchor?: AnchorType;
+    _anchorEl?: HTMLElement | null;
+}
+export declare function anchored<T extends {
+    new (...args: any[]): Record<string, any>;
+}>(constructor: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        anchor?: AnchorType | undefined;
+        anchorChanged(): void;
+        _anchorEl?: HTMLElement | undefined;
+        "__#17@#updateAnchorEl": () => void;
+        "__#17@#observer"?: MutationObserver | undefined;
+        "__#17@#observeMissingAnchor": (anchorId: string) => void;
+        "__#17@#cleanupObserverIfNeeded": () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+    };
+} & T;
+export {};

package/shared/presentationDate.js

@@ -14,7 +14,7 @@ import { L as Localized } from './localized.js';
 import { F as FormAssociated } from './form-associated.js';
 import { a as applyMixins } from './apply-mixins.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.segments {\n  display: flex;\n  gap: 24px;\n}\n\n.segment {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.segment .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.segment .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.segment .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.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.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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.segments {\n  display: flex;\n  gap: 24px;\n}\n\n.segment {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.segment .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.segment .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.segment .title-action {\n  block-size: 24px;\n  border-radius: 8px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.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.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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";