@vonage/vivid 3.39.0 → 3.41.0

package/shared/definition53.js

@@ -1,8 +1,84 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition58.js';
+import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition58.js';
+import { a as iconRegistries } from './definition26.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
+import { R as Reflector } from './Reflector.js';
+import { m as memoizeWith } from './icon.js';
+import { T as TextField$1 } from './text-field2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { s as styles } from './text-field.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 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}";
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+const generateRandomId = () => v4();
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,126 +91,221 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Tooltip extends FoundationElement {
+const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
+const getSafariWorkaroundStyleSheet = memoizeWith(() => "", () => {
+  const styleSheet = new CSSStyleSheet();
+  const supportsReplaceSync = "replaceSync" in styleSheet;
+  if (supportsReplaceSync) {
+    styleSheet.replaceSync(`
+.${safariWorkaroundClassName}::placeholder {
+	opacity: 1 !important;
+	-webkit-text-fill-color: var(--_low-ink-color) !important;
+}`);
+  }
+  return styleSheet;
+});
+const installSafariWorkaroundStyle = (forElement) => {
+  const root = forElement.getRootNode();
+  const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
+  const supportsAdoptedStyleSheets = "adoptedStyleSheets" in root;
+  if (!supportsAdoptedStyleSheets) {
+    return;
+  }
+  if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, workaroundStyleSheet];
+  }
+};
+let TextField = class extends TextField$1 {
   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;
-    };
-    this.#hide = () => {
-      this.open = false;
-    };
-    this.#closeOnEscape = (e) => {
-      if (e.key === "Escape")
-        this.#hide();
-    };
+    /**
+     * @internal
+     */
+    this._labelEl = null;
   }
-  #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);
+  /**
+   * @internal
+   */
+  labelChanged() {
+    if (this._labelEl) {
+      this.#handleLabelChange(this._labelEl);
     }
   }
-  #observeMissingAnchor;
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#removeEventListener();
-    this.#observer?.disconnect();
-    document.removeEventListener("keydown", this.#closeOnEscape);
-  }
-  #anchorUpdated() {
-    this.#removeEventListener();
-    this.#addEventListener();
+  #handleLabelChange(labelEl) {
+    if (!this.label) {
+      labelEl.remove();
+    } else {
+      labelEl.textContent = this.label;
+      if (!labelEl.isConnected) {
+        this.appendChild(labelEl);
+      }
+    }
   }
-  #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);
+  #reflectToInput;
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.control) {
+      const uniqueId = this.id || generateRandomId();
+      const controlId = `vvd-text-field-control-${uniqueId}`;
+      const input = document.createElement("input");
+      input.slot = "_control";
+      input.id = controlId;
+      input.className = safariWorkaroundClassName;
+      this.control = input;
+      this.#reflectToInput = new Reflector(this, input);
+      this.#reflectToInput.booleanAttribute("autofocus", "autofocus");
+      this.#reflectToInput.booleanAttribute("disabled", "disabled");
+      this.#reflectToInput.booleanAttribute("readOnly", "readonly");
+      this.#reflectToInput.booleanAttribute("required", "required");
+      this.#reflectToInput.booleanAttribute("spellcheck", "spellcheck");
+      this.#reflectToInput.attribute("list", "list");
+      this.#reflectToInput.attribute("maxlength", "maxlength");
+      this.#reflectToInput.attribute("minlength", "minlength");
+      this.#reflectToInput.attribute("pattern", "pattern");
+      this.#reflectToInput.attribute("placeholder", "placeholder");
+      this.#reflectToInput.attribute("size", "size");
+      this.#reflectToInput.attribute("autoComplete", "autocomplete");
+      this.#reflectToInput.attribute("type", "type");
+      this.#reflectToInput.attribute("ariaAtomic", "aria-atomic");
+      this.#reflectToInput.attribute("ariaBusy", "aria-busy");
+      this.#reflectToInput.attribute("ariaControls", "aria-controls");
+      this.#reflectToInput.attribute("ariaCurrent", "aria-current");
+      this.#reflectToInput.attribute("ariaDescribedby", "aria-describedby");
+      this.#reflectToInput.attribute("ariaDetails", "aria-details");
+      this.#reflectToInput.attribute("ariaDisabled", "aria-disabled");
+      this.#reflectToInput.attribute("ariaErrormessage", "aria-errormessage");
+      this.#reflectToInput.attribute("ariaFlowto", "aria-flowto");
+      this.#reflectToInput.attribute("ariaHaspopup", "aria-haspopup");
+      this.#reflectToInput.attribute("ariaHidden", "aria-hidden");
+      this.#reflectToInput.attribute("ariaInvalid", "aria-invalid");
+      this.#reflectToInput.attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+      this.#reflectToInput.attribute("ariaLabel", "aria-label");
+      this.#reflectToInput.attribute("ariaLabelledby", "aria-labelledby");
+      this.#reflectToInput.attribute("ariaLive", "aria-live");
+      this.#reflectToInput.attribute("ariaOwns", "aria-owns");
+      this.#reflectToInput.attribute("ariaRelevant", "aria-relevant");
+      this.#reflectToInput.attribute("ariaRoledescription", "aria-roledescription");
+      this.#reflectToInput.property("value", "value", true);
+      input.addEventListener("input", () => {
+        this.handleTextInput();
+      });
+      input.addEventListener("change", () => {
+        this.handleChange();
+      });
+      input.addEventListener("blur", () => {
+        this.$emit("blur");
+      });
+      input.addEventListener("focus", () => {
+        this.$emit("focus");
+      });
+      this.appendChild(input);
+      const label = document.createElement("label");
+      label.slot = "_label";
+      label.htmlFor = controlId;
+      this._labelEl = label;
+      this.#handleLabelChange(label);
+      installSafariWorkaroundStyle(this);
     }
   }
-  #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);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#reflectToInput.destroy();
   }
-  #show;
-  #hide;
-  #closeOnEscape;
-  openChanged(_, newValue) {
-    if (_ === void 0)
-      return;
-    if (newValue) {
-      document.addEventListener("keydown", this.#closeOnEscape);
-    } else {
-      document.removeEventListener("keydown", this.#closeOnEscape);
-    }
+  focus() {
+    this.control?.focus();
   }
-}
+};
 __decorateClass([
   attr
-], Tooltip.prototype, "text", 2);
+], TextField.prototype, "appearance", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Tooltip.prototype, "placement", 2);
+  attr
+], TextField.prototype, "shape", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Tooltip.prototype, "open", 2);
+  attr
+], TextField.prototype, "autoComplete", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Tooltip.prototype, "anchor", 2);
+  observable
+], TextField.prototype, "actionItemsSlottedContent", 2);
+__decorateClass([
+  observable
+], TextField.prototype, "leadingActionItemsSlottedContent", 2);
+TextField = __decorateClass([
+  errorText,
+  formElements
+], TextField);
+applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
 
-const getClasses = ({
-  open
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent,
+  leadingActionItemsSlottedContent,
+  icon
 }) => classNames(
-  "control",
-  ["open", Boolean(open)]
+  ["error connotation-alert", Boolean(errorValidationMessage)],
+  ["disabled", disabled],
+  ["has-value", Boolean(value)],
+  ["readonly", readOnly],
+  ["placeholder", Boolean(placeholder)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["no-label", !label],
+  ["has-icon", !!icon],
+  ["success connotation-success", Boolean(successText)],
+  ["action-items", !!actionItemsSlottedContent?.length],
+  ["leading-action-items", !!leadingActionItemsSlottedContent?.length],
+  ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)]
 );
-const TooltipTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
+function renderCharCount() {
+  return html`
+		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
+	`;
+}
+const TextfieldTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html`
-<${popupTag} class="${getClasses}" arrow alternate
-	:placement=${(x) => x.placement}
-	:anchor="${(x) => x.anchor}"
-	:open=${(x) => x.open}
-  exportparts="vvd-theme-alternate">
-  <div class="tooltip" role="tooltip">
-    <header part="vvd-theme-alternate" class="tooltip-header">
-      <div class="tooltip-text">${(x) => x.text}</div>
-    </header>
-  </div>
-</${popupTag}>`;
+	<div class="base ${getStateClasses}">
+    ${when((x) => x.charCount && x.maxlength, renderCharCount())}
+    <slot class="label" name="_label"></slot>
+    <div class="fieldset">
+			<div class="leading-items-wrapper">
+				<slot name="leading-action-items"  ${slotted("leadingActionItemsSlottedContent")}></slot>
+				${(x) => affixIconTemplate(x.icon)}
+			</div>
+
+			<div class="wrapper">
+				<slot class="control" name="_control"></slot>
+				${() => focusTemplate}
+			</div>
+			<div class="action-items-wrapper">
+				<slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot>
+			</div>
+
+    </div>
+	  ${when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
+	  ${when((x) => !x.successText && x.errorValidationMessage, getFeedbackTemplate("error", context))}
+	  ${when((x) => x.successText, getFeedbackTemplate("success", context))}
+	</div>`;
 };
 
-const tooltipDefinition = Tooltip.compose({
-  baseName: "tooltip",
-  template: TooltipTemplate,
-  styles
+const textFieldDefinition = TextField.compose({
+  baseName: "text-field",
+  template: TextfieldTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
-const registerTooltip = registerFactory(tooltipRegistries);
+const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTextField = registerFactory(textFieldRegistries);
 
-export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
+export { TextField as T, textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };

package/shared/definition54.js

@@ -1,18 +1,9 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition56.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { T as TreeItem$1 } from './tree-item.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { I as Icon } from './icon.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { e as elements, s as slotted } from './slotted.js';
-import { c as children } from './children.js';
+import { a as attr, F as FoundationElement, D as DOM, h as html, r as registerFactory } from './index.js';
+import { P as Popup, p as popupRegistries } from './definition60.js';
 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 Tue, 17 Oct 2023 15:27:52 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, :hover, .hover)) {\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) {\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 Wed, 22 Nov 2023 16:09:43 GMT\n */\n.control {\n  display: inline-block;\n}\n\n.content-wrapper {\n  width: var(--toggletip-inline-size, auto);\n  padding: 16px;\n}\n\n.headline {\n  font: var(--vvd-typography-base-bold);\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n::slotted([slot=action-items]) {\n  margin-block-start: 16px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,71 +16,135 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class TreeItem extends TreeItem$1 {
+class Toggletip extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.#anchorEl = null;
+    this.#observeMissingAnchor = (anchorId) => {
+      this.#observer = new MutationObserver(() => {
+        const anchor = document.getElementById(anchorId);
+        if (anchor) {
+          this.#anchorEl = anchor;
+          this.#setupAnchor(this.#anchorEl);
+          this.#observer.disconnect();
+          this.#observer = void 0;
+        }
+      });
+      this.#observer.observe(document.body, { childList: true, subtree: true });
+    };
+    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.alternate = false;
+    this.placement = "right";
+    this.anchor = "";
+    this.open = false;
+    this.#openIfClosed = () => {
+      if (!this.open)
+        DOM.queueUpdate(() => this.open = true);
+    };
+    this.#closeOnClickOutside = (e) => {
+      if (!this.contains(e.target))
+        this.open = false;
+    };
+    this.#closeOnEscape = (e) => {
+      if (e.key === "Escape")
+        this.open = false;
+    };
+  }
+  #observer;
+  #anchorEl;
+  #observeMissingAnchor;
+  #ANCHOR_ARIA_LABEL_SUFFIX;
+  anchorChanged(_, newValue) {
+    if (this.#anchorEl)
+      this.#cleanupAnchor(this.#anchorEl);
+    this.#observer?.disconnect();
+    this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
+    if (this.#anchorEl) {
+      this.#setupAnchor(this.#anchorEl);
+    } else {
+      this.#observeMissingAnchor(newValue);
+    }
+  }
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0)
+      return;
+    if (newValue) {
+      document.addEventListener("click", this.#closeOnClickOutside);
+      document.addEventListener("keydown", this.#closeOnEscape);
+      this.setAttribute("role", "status");
+    } else {
+      document.removeEventListener("click", this.#closeOnClickOutside);
+      document.removeEventListener("keydown", this.#closeOnEscape);
+      this.removeAttribute("role");
+    }
+    if (this.#anchorEl) {
+      this.#anchorEl.ariaExpanded = this.open.toString();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#anchorEl)
+      this.#cleanupAnchor(this.#anchorEl);
+    this.#observer?.disconnect();
+    document.removeEventListener("keydown", this.#closeOnEscape);
+  }
+  #setupAnchor(a) {
+    a.addEventListener("click", this.#openIfClosed, true);
+    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+  }
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#openIfClosed, true);
+    if (a.ariaLabel)
+      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+  }
+  #openIfClosed;
+  #closeOnClickOutside;
+  #closeOnEscape;
 }
 __decorateClass([
   attr
-], TreeItem.prototype, "text", 2);
-applyMixins(TreeItem, AffixIcon);
+], Toggletip.prototype, "headline", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "alternate", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "anchor", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "open", 2);
 
-const getClasses = ({
-  disabled,
-  selected
-}) => classNames(
-  "control",
-  ["disabled", disabled],
-  ["selected", Boolean(selected)]
-);
-const expandCollapseButton = (context) => {
-  const iconTag = context.tagFor(Icon);
+const getClasses = (_) => classNames("control");
+const ToggletipTemplate = (context) => {
+  const popup = context.tagFor(Popup);
   return html`
-	<div aria-hidden="true"
-		class="expandCollapseButton"
-		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
-			${ref("expandCollapseButton")}
-	>
-		<${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
-	</div>`;
-};
-const TreeItemTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-	<template
-			role="treeitem"
-			slot="${(x) => x.isNestedItem() ? "item" : void 0}"
-			tabindex="-1"
-			aria-expanded="${(x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
-			aria-selected="${(x) => x.selected}"
-			aria-disabled="${(x) => x.disabled}"
-			@focusin="${(x, c) => x.handleFocus(c.event)}"
-			@focusout="${(x, c) => x.handleBlur(c.event)}"
-			${children({ property: "childItems", filter: elements(context.tagFor(TreeItem)) })}
-			>
-			<div class="${getClasses}">
-				${() => focusTemplate}
-				${when((x) => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				${(x) => x.text}
+		<${popup}
+			class="${getClasses}"
+			arrow
+			:anchor="${(x) => x.anchor}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${when((x) => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
+				<slot></slot>
+				<footer class="action-items"><slot name="action-items"></slot></footer>
 			</div>
-			${when(
-    (x) => x.childItems && x.childItems.length > 0 && x.expanded,
-    html`
-				<div role="group" class="items">
-					<slot name="item" ${slotted("items")}></slot>
-				</div>`
-  )}
-		</template>`;
+		</${popup}>
+	`;
 };
 
-const treeItemDefinition = TreeItem.compose(
-  {
-    baseName: "tree-item",
-    template: TreeItemTemplate,
-    styles
-  }
-);
-const treeItemRegistries = [treeItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTreeItem = registerFactory(treeItemRegistries);
+const toggletipDefinition = Toggletip.compose({
+  baseName: "toggletip",
+  template: ToggletipTemplate,
+  styles
+});
+const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
+const registerToggletip = registerFactory(toggletipRegistries);
 
-export { treeItemRegistries as a, registerTreeItem as r, treeItemDefinition as t };
+export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };