@vonage/vivid 3.39.0 → 3.40.0

package/shared/definition52.js

@@ -1,9 +1,83 @@
-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 './definition58.js';
+import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition57.js';
+import { a as iconRegistries } from './definition25.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 { 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  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}";
+// 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;
@@ -16,135 +90,210 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Toggletip extends FoundationElement {
+const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
+const safariWorkaroundStyleSheet = new CSSStyleSheet();
+safariWorkaroundStyleSheet.replaceSync(`
+.${safariWorkaroundClassName}::placeholder {
+	opacity: 1 !important;
+	-webkit-text-fill-color: var(--_low-ink-color) !important;
+}`);
+const installSafariWorkaroundStyle = (forElement) => {
+  const root = forElement.getRootNode();
+  if (!root.adoptedStyleSheets.includes(safariWorkaroundStyleSheet)) {
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, safariWorkaroundStyleSheet];
+  }
+};
+let TextField = class extends TextField$1 {
   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;
-    };
+    /**
+     * @internal
+     */
+    this._labelEl = null;
   }
-  #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);
+  /**
+   * @internal
+   */
+  labelChanged() {
+    if (this._labelEl) {
+      this.#handleLabelChange(this._labelEl);
     }
   }
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0)
-      return;
-    if (newValue) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
-      this.setAttribute("role", "status");
+  #handleLabelChange(labelEl) {
+    if (!this.label) {
+      labelEl.remove();
     } else {
-      document.removeEventListener("click", this.#closeOnClickOutside);
-      document.removeEventListener("keydown", this.#closeOnEscape);
-      this.removeAttribute("role");
+      labelEl.textContent = this.label;
+      if (!labelEl.isConnected) {
+        this.appendChild(labelEl);
+      }
     }
-    if (this.#anchorEl) {
-      this.#anchorEl.ariaExpanded = this.open.toString();
+  }
+  #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);
     }
   }
   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;
+    this.#reflectToInput.destroy();
   }
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+  focus() {
+    this.control?.focus();
   }
-  #openIfClosed;
-  #closeOnClickOutside;
-  #closeOnEscape;
-}
+};
 __decorateClass([
   attr
-], Toggletip.prototype, "headline", 2);
+], TextField.prototype, "appearance", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate", 2);
+  attr
+], TextField.prototype, "shape", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Toggletip.prototype, "placement", 2);
+  attr
+], TextField.prototype, "autoComplete", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Toggletip.prototype, "anchor", 2);
+  observable
+], TextField.prototype, "actionItemsSlottedContent", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "open", 2);
+  observable
+], TextField.prototype, "leadingActionItemsSlottedContent", 2);
+TextField = __decorateClass([
+  errorText,
+  formElements
+], TextField);
+applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
 
-const getClasses = (_) => classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(Popup);
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent,
+  leadingActionItemsSlottedContent,
+  icon
+}) => classNames(
+  ["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)]
+);
+function renderCharCount() {
   return html`
-		<${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>
-		</${popup}>
+		<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`
+	<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 toggletipDefinition = Toggletip.compose({
-  baseName: "toggletip",
-  template: ToggletipTemplate,
-  styles
+const textFieldDefinition = TextField.compose({
+  baseName: "text-field",
+  template: TextfieldTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
-const registerToggletip = registerFactory(toggletipRegistries);
+const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTextField = registerFactory(textFieldRegistries);
 
-export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };
+export { TextField as T, textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };

package/shared/definition53.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 './definition58.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 './definition59.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 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}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 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;
@@ -15,126 +16,135 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Tooltip extends FoundationElement {
+class Toggletip 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.#setupAnchor(this.#anchorEl);
           this.#observer.disconnect();
           this.#observer = void 0;
         }
       });
       this.#observer.observe(document.body, { childList: true, subtree: true });
     };
-    this.#show = () => {
-      this.open = 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.#hide = () => {
-      this.open = false;
+    this.#closeOnClickOutside = (e) => {
+      if (!this.contains(e.target))
+        this.open = false;
     };
     this.#closeOnEscape = (e) => {
       if (e.key === "Escape")
-        this.#hide();
+        this.open = false;
     };
   }
-  #anchorEl;
   #observer;
+  #anchorEl;
+  #observeMissingAnchor;
+  #ANCHOR_ARIA_LABEL_SUFFIX;
   anchorChanged(_, newValue) {
     if (this.#anchorEl)
-      this.#removeEventListener();
+      this.#cleanupAnchor(this.#anchorEl);
     this.#observer?.disconnect();
     this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
     if (this.#anchorEl) {
-      this.#anchorUpdated();
+      this.#setupAnchor(this.#anchorEl);
     } else {
       this.#observeMissingAnchor(newValue);
     }
   }
-  #observeMissingAnchor;
+  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();
-    this.#removeEventListener();
+    if (this.#anchorEl)
+      this.#cleanupAnchor(this.#anchorEl);
     this.#observer?.disconnect();
     document.removeEventListener("keydown", this.#closeOnEscape);
   }
-  #anchorUpdated() {
-    this.#removeEventListener();
-    this.#addEventListener();
+  #setupAnchor(a) {
+    a.addEventListener("click", this.#openIfClosed, true);
+    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
   }
-  #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);
-    }
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#openIfClosed, true);
+    if (a.ariaLabel)
+      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
   }
-  #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);
-  }
-  #show;
-  #hide;
+  #openIfClosed;
+  #closeOnClickOutside;
   #closeOnEscape;
-  openChanged(_, newValue) {
-    if (_ === void 0)
-      return;
-    if (newValue) {
-      document.addEventListener("keydown", this.#closeOnEscape);
-    } else {
-      document.removeEventListener("keydown", this.#closeOnEscape);
-    }
-  }
 }
 __decorateClass([
   attr
-], Tooltip.prototype, "text", 2);
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tooltip.prototype, "placement", 2);
+], Toggletip.prototype, "headline", 2);
 __decorateClass([
   attr({ mode: "boolean" })
-], Tooltip.prototype, "open", 2);
+], Toggletip.prototype, "alternate", 2);
 __decorateClass([
   attr({ mode: "fromView" })
-], Tooltip.prototype, "anchor", 2);
+], Toggletip.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "anchor", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "open", 2);
 
-const getClasses = ({
-  open
-}) => classNames(
-  "control",
-  ["open", Boolean(open)]
-);
-const TooltipTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
+const getClasses = (_) => classNames("control");
+const ToggletipTemplate = (context) => {
+  const popup = context.tagFor(Popup);
   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}>`;
+		<${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>
+		</${popup}>
+	`;
 };
 
-const tooltipDefinition = Tooltip.compose({
-  baseName: "tooltip",
-  template: TooltipTemplate,
+const toggletipDefinition = Toggletip.compose({
+  baseName: "toggletip",
+  template: ToggletipTemplate,
   styles
 });
-const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
-const registerTooltip = registerFactory(tooltipRegistries);
+const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
+const registerToggletip = registerFactory(toggletipRegistries);
 
-export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
+export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };