@vonage/vivid 5.1.0 → 5.3.0

package/bundled/definition12.js

@@ -1,20 +1,44 @@
-import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
-const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-class l extends i {
+import { I as l, i } from "./definition2.js";
+import { T as s, t as p } from "./definition16.js";
+import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
+import { c as m } from "./class-names.js";
+var b = Object.defineProperty, x = (o, r, t, w) => {
+  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
+    (e = o[n]) && (a = e(r, t, a) || a);
+  return a && b(r, t, a), a;
+};
+class c extends v {
+  constructor() {
+    super(...arguments), this.placement = "right";
+  }
 }
-const o = () => s`<slot></slot>`, a = t(
-  "visually-hidden",
-  l,
-  o,
-  [],
+x([
+  d({ mode: "fromView" })
+], c.prototype, "placement");
+const g = (o) => m("control"), h = (o) => {
+  const r = o.tagFor(s), t = o.tagFor(l);
+  return u`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${g}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${t} name="help-solid"></${t}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`;
+}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
+  "contextual-help",
+  c,
+  h,
+  [i, p],
   {
-    styles: n
+    styles: y
   }
-), p = e(
-  a
+), H = f(
+  k
 );
 export {
-  l as V,
-  p as r,
-  a as v
+  k as c,
+  H as r
 };

package/bundled/definition13.cjs

@@ -1,73 +1 @@
-"use strict";const T=require("./definition2.cjs"),t=require("./vivid-element.cjs"),d=require("./mixins.cjs"),_=require("./definition12.cjs"),q=require("./definition11.cjs"),x=require("./delegates-aria.cjs"),k=require("./form-associated.cjs"),E=require("./with-contextual-help.cjs"),M=require("./char-count.cjs"),H=require("./with-error-text.cjs"),F=require("./with-success-text.cjs"),L=require("./form-element.cjs"),v=require("./affix.cjs"),w=require("./text-field.cjs"),D=require("./class-names.cjs"),m=require("./when.cjs"),c=require("./slotted.cjs"),S=require("./ref.cjs");var N=Object.defineProperty,i=(n,a,e,h)=>{for(var l=void 0,s=n.length-1,r;s>=0;s--)(r=n[s])&&(l=r(a,e,l)||l);return l&&N(a,e,l),l};const O={text:"text"},A="_vvd-3-text-field-safari-workaround",y=t.ElementStyles.create([`
-	.${A}::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`]),B=n=>{const a=n.getRootNode();y.isAttachedTo(a)||y.addStylesTo(a)};class o extends E.WithContextualHelp(d.WithLightDOMFeedback(M.WithCharCount(H.WithErrorText(F.WithSuccessText(L.FormElement(v.AffixIcon(x.DelegatesAria(k.FormAssociated(t.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.type=O.text,this.#e=d.generateRandomId()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute("list",this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(a,e){super.valueChanged(a,e),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(){this.value=this.control.value}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.validate(),this.autofocus&&t.DOM.queueUpdate(()=>{this.focus()}),this._updateControlValueIfNeeded(),B(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}}i([t.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly");i([t.attr({mode:"boolean"})],o.prototype,"autofocus");i([t.attr],o.prototype,"placeholder");i([t.attr],o.prototype,"type");i([t.attr],o.prototype,"list");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"maxlength");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"minlength");i([t.attr],o.prototype,"pattern");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"size");i([t.attr({mode:"boolean"})],o.prototype,"spellcheck");i([t.attr],o.prototype,"appearance");i([t.attr],o.prototype,"shape");i([t.attr],o.prototype,"autoComplete");i([t.attr()],o.prototype,"scale");i([t.attr({attribute:"inputmode"})],o.prototype,"inputMode");i([t.observable],o.prototype,"actionItemsSlottedContent");i([t.observable],o.prototype,"leadingActionItemsSlottedContent");const g=n=>`vvd-text-field-control-${n}`,W=({errorValidationMessage:n,disabled:a,value:e,readOnly:h,placeholder:l,appearance:s,shape:r,label:C,successText:$,actionItemsSlottedContent:I,leadingActionItemsSlottedContent:p,icon:u,scale:f})=>D.classNames(["error",!!n],["disabled",a],["has-value",!!e],["readonly",h],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${r}`,!!r],["no-label",!C],["has-icon",!!u],["success",!!$],["action-items",!!I?.length],["leading-action-items",!!p?.length],["no-leading",!(p?.length||u)],[`size-${f}`,!!f]),z=n=>{const a=v.affixIconTemplateFactory(n);return t.html`
-		<div class="base ${W}">
-			<div
-				class="label-suffix"
-				?hidden=${e=>!(e.charCount&&e.maxlength)&&!e._hasContextualHelp}
-			>
-				${m.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(n))}
-				<slot
-					name="contextual-help"
-					${c.slotted("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			<slot class="label" name="_label"></slot>
-			${d.renderInLightDOM(t.html`
-				${m.when(e=>e.label,t.html`
-						<label slot="_label" for="${e=>g(e._uniqueId)}">
-							${e=>e.label}
-						</label>
-					`)}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${c.slotted("leadingActionItemsSlottedContent")}
-					></slot>
-					${e=>a(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${d.renderInLightDOM(t.html`<input
-							slot="_control"
-							id="${e=>g(e._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${e=>e.handleTextInput()}"
-							@change="${e=>e.handleChange()}"
-							@blur="${e=>{e.$emit("blur",void 0,{bubbles:!1})}}"
-							@focus="${e=>{e.$emit("focus",void 0,{bubbles:!1})}}"
-							?autofocus="${e=>e.autofocus}"
-							?disabled="${e=>e.disabled}"
-							?readonly="${e=>e.readOnly}"
-							?required="${e=>e.required}"
-							?spellcheck="${e=>e.spellcheck}"
-							list="${e=>e.list}"
-							maxlength="${e=>e.maxlength}"
-							minlength="${e=>e.minlength}"
-							pattern="${e=>e.pattern}"
-							placeholder="${e=>e.placeholder}"
-							size="${e=>e.size}"
-							autocomplete="${e=>e.autoComplete}"
-							type="${e=>e.type}"
-							inputmode="${e=>e.inputMode}"
-							aria-describedby="${e=>e._feedbackDescribedBy} ${e=>e.charCount&&e.maxlength?e._charCountDescribedBy:null}"
-							value="${e=>e.initialValue}"
-							${x.delegateAria()}
-							${S.ref("control")}
-						/>`)}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${c.slotted("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${e=>e._getFeedbackTemplate(n)}
-		</div>
-	`},b=t.defineVividComponent("text-field",o,z,[T.iconDefinition,d.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:w.styles,shadowOptions:{delegatesFocus:!0}}),V=t.createRegisterFunction(b);exports.TextField=o;exports.registerTextField=V;exports.textFieldDefinition=b;
+"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;

package/bundled/definition13.js

@@ -1,359 +1,20 @@
-import { i as T } from "./definition2.js";
-import { V as _, D as k, E, a, n as h, o as C, h as p, c as M, d as H } from "./vivid-element.js";
-import { a as L, g as D, r as y, f as F } from "./mixins.js";
-import { v as W } from "./definition12.js";
-import { c as S } from "./definition11.js";
-import { D as w, d as O } from "./delegates-aria.js";
-import { F as B } from "./form-associated.js";
-import { W as A } from "./with-contextual-help.js";
-import { W as N } from "./char-count.js";
-import { W as z } from "./with-error-text.js";
-import { W as V } from "./with-success-text.js";
-import { F as q } from "./form-element.js";
-import { b as R, a as P } from "./affix.js";
-import { s as j } from "./text-field.js";
-import { c as U } from "./class-names.js";
-import { w as g } from "./when.js";
-import { s as d } from "./slotted.js";
-import { r as G } from "./ref.js";
-var J = Object.defineProperty, o = (i, s, e, c) => {
-  for (var n = void 0, l = i.length - 1, r; l >= 0; l--)
-    (r = i[l]) && (n = r(s, e, n) || n);
-  return n && J(s, e, n), n;
-};
-const K = {
-  /**
-   * A text TextField
-   */
-  text: "text"
-}, Q = "_vvd-3-text-field-safari-workaround", v = E.create([
-  `
-	.${Q}::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`
-]), X = (i) => {
-  const s = i.getRootNode();
-  v.isAttachedTo(s) || v.addStylesTo(s);
-};
-class t extends A(
-  L(
-    N(
-      z(
-        V(
-          q(R(w(B(_))))
-        )
-      )
-    )
-  )
-) {
-  constructor() {
-    super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = D();
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
-  }
-  /**
-   * @internal
-   */
-  autofocusChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
-  }
-  /**
-   * @internal
-   */
-  placeholderChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
-  }
-  /**
-   * @internal
-   */
-  typeChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
-  }
-  /**
-   * @internal
-   */
-  listChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
-  }
-  /**
-   * @internal
-   */
-  maxlengthChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
-  }
-  /**
-   * @internal
-   */
-  minlengthChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
-  }
-  /**
-   * @internal
-   */
-  patternChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
-  }
-  /**
-   * @internal
-   */
-  sizeChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
-  }
-  /**
-   * @internal
-   */
-  spellcheckChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
-  }
-  /**
-   * @internal
-   */
-  valueChanged(s, e) {
-    super.valueChanged(s, e), this._updateControlValueIfNeeded(), this.charCount && this.maxlength && this._updateCharCountRemaining();
-  }
-  /**
-   * Update the controls value only if it is actually different from the actual value.
-   * This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
-   * constraints.
-   * @internal
-   */
-  _updateControlValueIfNeeded() {
-    this.control && this.control.value !== this.value && (this.control.value = this.value);
-  }
-  /**
-   * Selects all the text in the text field
-   *
-   * @public
-   */
-  select() {
-    this.control.select();
-  }
-  /**
-   * Handles the internal control's `input` event
-   * @internal
-   */
-  handleTextInput() {
-    this.value = this.control.value;
-  }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * "Change" events are not `composable` so they will not
-   * permeate the shadow DOM boundary. This fn effectively proxies
-   * the change event, emitting a `change` event whenever the internal
-   * control emits a `change` event
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && k.queueUpdate(() => {
-      this.focus();
-    }), this._updateControlValueIfNeeded(), X(this), this._renderCharCountRemaining();
-  }
-  focus() {
-    this.control?.focus();
-  }
-  #e;
-  /**
-   * @internal
-   */
-  get _uniqueId() {
-    return this.id || this.#e;
-  }
+import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
+const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+class l extends i {
 }
-o([
-  a({ attribute: "readonly", mode: "boolean" })
-], t.prototype, "readOnly");
-o([
-  a({ mode: "boolean" })
-], t.prototype, "autofocus");
-o([
-  a
-], t.prototype, "placeholder");
-o([
-  a
-], t.prototype, "type");
-o([
-  a
-], t.prototype, "list");
-o([
-  a({ converter: h })
-], t.prototype, "maxlength");
-o([
-  a({ converter: h })
-], t.prototype, "minlength");
-o([
-  a
-], t.prototype, "pattern");
-o([
-  a({ converter: h })
-], t.prototype, "size");
-o([
-  a({ mode: "boolean" })
-], t.prototype, "spellcheck");
-o([
-  a
-], t.prototype, "appearance");
-o([
-  a
-], t.prototype, "shape");
-o([
-  a
-], t.prototype, "autoComplete");
-o([
-  a()
-], t.prototype, "scale");
-o([
-  a({ attribute: "inputmode" })
-], t.prototype, "inputMode");
-o([
-  C
-], t.prototype, "actionItemsSlottedContent");
-o([
-  C
-], t.prototype, "leadingActionItemsSlottedContent");
-const x = (i) => `vvd-text-field-control-${i}`, Y = ({
-  errorValidationMessage: i,
-  disabled: s,
-  value: e,
-  readOnly: c,
-  placeholder: n,
-  appearance: l,
-  shape: r,
-  label: b,
-  successText: $,
-  actionItemsSlottedContent: I,
-  leadingActionItemsSlottedContent: u,
-  icon: m,
-  scale: f
-}) => U(
-  ["error", !!i],
-  ["disabled", s],
-  ["has-value", !!e],
-  ["readonly", c],
-  ["placeholder", !!n],
-  [`appearance-${l}`, !!l],
-  [`shape-${r}`, !!r],
-  ["no-label", !b],
-  ["has-icon", !!m],
-  ["success", !!$],
-  ["action-items", !!I?.length],
-  ["leading-action-items", !!u?.length],
-  ["no-leading", !(u?.length || m)],
-  [`size-${f}`, !!f]
-), Z = (i) => {
-  const s = P(i);
-  return p`
-		<div class="base ${Y}">
-			<div
-				class="label-suffix"
-				?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
-			>
-				${g(
-    (e) => e.charCount && e.maxlength,
-    (e) => e._getCharCountTemplate(i)
-  )}
-				<slot
-					name="contextual-help"
-					${d("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			<slot class="label" name="_label"></slot>
-			${y(p`
-				${g(
-    (e) => e.label,
-    p`
-						<label slot="_label" for="${(e) => x(e._uniqueId)}">
-							${(e) => e.label}
-						</label>
-					`
-  )}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${d("leadingActionItemsSlottedContent")}
-					></slot>
-					${(e) => s(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${y(
-    p`<input
-							slot="_control"
-							id="${(e) => x(e._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${(e) => e.handleTextInput()}"
-							@change="${(e) => e.handleChange()}"
-							@blur="${(e) => {
-      e.$emit("blur", void 0, { bubbles: !1 });
-    }}"
-							@focus="${(e) => {
-      e.$emit("focus", void 0, { bubbles: !1 });
-    }}"
-							?autofocus="${(e) => e.autofocus}"
-							?disabled="${(e) => e.disabled}"
-							?readonly="${(e) => e.readOnly}"
-							?required="${(e) => e.required}"
-							?spellcheck="${(e) => e.spellcheck}"
-							list="${(e) => e.list}"
-							maxlength="${(e) => e.maxlength}"
-							minlength="${(e) => e.minlength}"
-							pattern="${(e) => e.pattern}"
-							placeholder="${(e) => e.placeholder}"
-							size="${(e) => e.size}"
-							autocomplete="${(e) => e.autoComplete}"
-							type="${(e) => e.type}"
-							inputmode="${(e) => e.inputMode}"
-							aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
-							value="${(e) => e.initialValue}"
-							${O()}
-							${G("control")}
-						/>`
-  )}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${d("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${(e) => e._getFeedbackTemplate(i)}
-		</div>
-	`;
-}, ee = H(
-  "text-field",
-  t,
-  Z,
-  [
-    T,
-    F,
-    W,
-    S
-  ],
+const o = () => s`<slot></slot>`, a = t(
+  "visually-hidden",
+  l,
+  o,
+  [],
   {
-    styles: j,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
+    styles: n
   }
-), xe = M(ee);
+), p = e(
+  a
+);
 export {
-  t as T,
-  xe as r,
-  ee as t
+  l as V,
+  p as r,
+  a as v
 };

package/bundled/definition15.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),m=require("./class-names.cjs"),c=require("./when.cjs"),f=":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";var z=Object.defineProperty,l=(r,a,i,b)=>{for(var s=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(s=o(a,i,s)||s);return s&&z(a,i,s),s};class n extends v.DelegatesAria(g.BaseProgress){}l([e.attr],n.prototype,"connotation");l([e.attr],n.prototype,"size");const x=({connotation:r,size:a,paused:i})=>m.classNames("base",["disabled",!!i],[`connotation-${r}`,!!r],[`size-${a}`,!!a]),p=44,u=e.html`<template>
+"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),c=require("./when.cjs"),m=require("./class-names.cjs"),f=":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";var z=Object.defineProperty,l=(r,a,i,b)=>{for(var s=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(s=o(a,i,s)||s);return s&&z(a,i,s),s};class n extends v.DelegatesAria(g.BaseProgress){}l([e.attr],n.prototype,"connotation");l([e.attr],n.prototype,"size");const x=({connotation:r,size:a,paused:i})=>m.classNames("base",["disabled",!!i],[`connotation-${r}`,!!r],[`size-${a}`,!!a]),p=44,u=e.html`<template>
 	<div
 		class="${r=>r.paused?"paused":""} ${x}"
 		${v.delegateAria({role:"progressbar",ariaValueNow:r=>r.value,ariaValueMin:r=>r.min,ariaValueMax:r=>r.max})}

package/bundled/definition15.js

@@ -1,8 +1,8 @@
 import { a as v, h as o, c as d, d as g } from "./vivid-element.js";
 import { B as m } from "./base-progress.js";
 import { D as f, d as z } from "./delegates-aria.js";
-import { c as x } from "./class-names.js";
 import { w as c } from "./when.js";
+import { c as x } from "./class-names.js";
 const _ = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
 var u = Object.defineProperty, l = (r, a, s, w) => {
   for (var e = void 0, i = r.length - 1, t; i >= 0; i--)

package/bundled/definition16.cjs

@@ -1,4 +1,4 @@
-"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./class-names.cjs"),v=require("./when.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.DOM.queueUpdate(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>m.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
+"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>v.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
 		${i}
 		<${e}
 			@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
@@ -11,7 +11,7 @@
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${v.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
+				${m.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>

package/bundled/definition16.js

@@ -1,10 +1,10 @@
 import { P as d, p as h } from "./definition9.js";
-import { V as m, D as u, a, h as c, c as f, d as g } from "./vivid-element.js";
+import { V as m, U as u, a, h as c, c as f, d as g } from "./vivid-element.js";
 import { A as v, a as b } from "./anchored.js";
 import { L as y } from "./localized.js";
 import { h as k } from "./index.js";
-import { c as L } from "./class-names.js";
-import { w as E } from "./when.js";
+import { w as L } from "./when.js";
+import { c as E } from "./class-names.js";
 const x = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 var A = Object.defineProperty, r = (n, e, i, t) => {
   for (var o = void 0, l = n.length - 1, p; l >= 0; l--)
@@ -14,7 +14,7 @@ var A = Object.defineProperty, r = (n, e, i, t) => {
 class s extends y(v(m)) {
   constructor() {
     super(...arguments), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#t = () => {
-      this.open || u.queueUpdate(() => this.open = !0);
+      this.open || u.enqueue(() => this.open = !0);
     }, this.#o = (e) => {
       const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
       (i || t) && (this.open = !1);
@@ -66,7 +66,7 @@ r([
 r([
   a({ mode: "boolean" })
 ], s.prototype, "open");
-const C = (n) => L("control"), _ = (n) => {
+const C = (n) => E("control"), _ = (n) => {
   const e = n.tagFor(d), i = b();
   return c`
 		${i}
@@ -81,7 +81,7 @@ const C = (n) => L("control"), _ = (n) => {
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${E((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
+				${L((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
@@ -95,9 +95,9 @@ const C = (n) => L("control"), _ = (n) => {
   {
     styles: x
   }
-), F = f($);
+), j = f($);
 export {
   s as T,
-  F as r,
+  j as r,
   $ as t
 };