@vonage/vivid 5.4.0 → 5.6.0

package/bundled/definition10.js

@@ -1,8 +1,8 @@
 import { i as T } from "./definition2.js";
-import { V as _, U as k, w as E, a, n as h, o as C, h as p, c as H, d as M } from "./vivid-element.js";
-import { a as L, g as F, r as y, f as w } from "./mixins.js";
-import { v as W } from "./definition13.js";
-import { c as D } from "./definition12.js";
+import { U as _, w as k, V as E, a, n as h, o as b, h as p, c as H, d as M } from "./vivid-element.js";
+import { a as L, g as w, r as y, f as F } from "./mixins.js";
+import { v as W } from "./definition14.js";
+import { c as D } from "./definition13.js";
 import { D as S, d as B } from "./delegates-aria.js";
 import { F as O } from "./form-associated.js";
 import { W as A } from "./char-count.js";
@@ -26,7 +26,7 @@ const K = {
    * A text TextField
    */
   text: "text"
-}, Q = "_vvd-3-text-field-safari-workaround", v = new E([
+}, Q = "_vvd-3-text-field-safari-workaround", v = new k([
   `
 	.${Q}::placeholder {
 		opacity: 1 !important;
@@ -42,73 +42,83 @@ class t extends N(
     A(
       z(
         V(
-          q(R(S(O(_))))
+          q(R(S(O(E))))
         )
       )
     )
   )
 ) {
   constructor() {
-    super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = F();
+    super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = w();
   }
   /**
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
   }
   /**
    * @internal
    */
   autofocusChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
   }
   /**
    * @internal
    */
   placeholderChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
   }
   /**
    * @internal
    */
   typeChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
   }
   /**
    * @internal
    */
   listChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
   }
   /**
    * @internal
    */
   maxlengthChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
   }
   /**
    * @internal
    */
   minlengthChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
   }
   /**
    * @internal
    */
   patternChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
   }
   /**
    * @internal
    */
   sizeChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
   }
   /**
    * @internal
    */
   spellcheckChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
   }
   /**
@@ -158,7 +168,7 @@ class t extends N(
     super.validate(this.control);
   }
   connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && k.enqueue(() => {
+    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && _.enqueue(() => {
       this.focus();
     }), this._updateControlValueIfNeeded(), X(this), this._renderCharCountRemaining();
   }
@@ -219,10 +229,10 @@ o([
   a({ attribute: "inputmode" })
 ], t.prototype, "inputMode");
 o([
-  C
+  b
 ], t.prototype, "actionItemsSlottedContent");
 o([
-  C
+  b
 ], t.prototype, "leadingActionItemsSlottedContent");
 const x = (i) => `vvd-text-field-control-${i}`, Y = ({
   errorValidationMessage: i,
@@ -232,7 +242,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
   placeholder: n,
   appearance: l,
   shape: r,
-  label: b,
+  label: C,
   successText: $,
   actionItemsSlottedContent: I,
   leadingActionItemsSlottedContent: u,
@@ -246,7 +256,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
   ["placeholder", !!n],
   [`appearance-${l}`, !!l],
   [`shape-${r}`, !!r],
-  ["no-label", !b],
+  ["no-label", !C],
   ["has-icon", !!m],
   ["success", !!$],
   ["action-items", !!I?.length],
@@ -257,20 +267,20 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
   const s = P(i);
   return p`
 		<div class="base ${Y}">
-			<div
-				class="label-suffix"
-				?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
-			>
-				${g(
+			${g(
     (e) => e.charCount && e.maxlength,
     (e) => e._getCharCountTemplate(i)
   )}
+			<div
+				class="label-wrapper"
+				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
 				<slot
 					name="contextual-help"
 					${d("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			<slot class="label" name="_label"></slot>
 			${y(p`
 				${g(
     (e) => e.label,
@@ -341,7 +351,7 @@ const x = (i) => `vvd-text-field-control-${i}`, Y = ({
   Z,
   [
     T,
-    w,
+    F,
     W,
     D
   ],

package/bundled/definition11.cjs

@@ -1,19 +1,12 @@
-"use strict";const v=require("./definition2.cjs"),t=require("./vivid-element.cjs"),p=require("./affix.cjs"),h=require("./host-semantics.cjs"),f=require("./dom.cjs"),l=require("./when.cjs"),m=require("./class-names.cjs");var x=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,o,i,a)=>{for(var c=a>1?void 0:a?_(o,i):o,s=e.length-1,d;s>=0;s--)(d=e[s])&&(c=(a?d(o,i,c):d(c))||c);return a&&c&&x(o,i,c),c};function y(e){return f.isHTMLElement(e)&&(e.getAttribute("role")==="option"||e instanceof HTMLOptionElement||e instanceof r)}class r extends h.HostSemantics(p.AffixIconWithTrailing(t.VividElement)){constructor(o,i,a,c){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value="",this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText="",this._isNotMatching=!1,o&&(this.text=o),i&&(this.value=i),a&&(this.defaultSelected=a),c&&(this.selected=c),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(o){this.defaultSelected=o}selectedChanged(){this.dirtySelected||(this.dirtySelected=!0),this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!="string"){this.value="";return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(o){this._label=o}set text(o){this._text=o}get text(){return this._text??""}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:""}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){const o=this.matchedText??this._vvdSearchText;if(o){const i=this.text.toLowerCase().indexOf(o.toLowerCase());return i===-1?{from:0,to:0}:{from:i,to:i+o.length}}return{from:0,to:0}}connectedCallback(){super.connectedCallback(),this.dirtySelected||(this.selected=this.defaultSelected,this.dirtySelected=!1)}}n([t.attr({converter:{fromView:e=>{if(e===!0||e==="true")return!0;if(e===!1||e==="false")return!1},toView:e=>e}})],r.prototype,"checked",2);n([t.attr({attribute:"selected",mode:"boolean"})],r.prototype,"defaultSelected",2);n([t.attr({mode:"boolean"})],r.prototype,"disabled",2);n([t.attr({attribute:"current-selected",mode:"boolean"})],r.prototype,"selected",2);n([t.attr({attribute:"value"})],r.prototype,"value",2);n([t.attr({attribute:"label"})],r.prototype,"_label",2);n([t.attr({attribute:"text"})],r.prototype,"_text",2);n([t.attr({attribute:"text-secondary"})],r.prototype,"textSecondary",2);n([t.observable],r.prototype,"_highlighted",2);n([t.observable],r.prototype,"_displayCheckmark",2);n([t.attr({attribute:"matched-text"})],r.prototype,"matchedText",2);n([t.observable],r.prototype,"_vvdSearchText",2);n([t.volatile],r.prototype,"_hasMatchedText",1);n([t.observable],r.prototype,"_isNotMatching",2);n([t.volatile],r.prototype,"_matchedRange",1);n([t.attr({attribute:"tag-connotation"})],r.prototype,"tagConnotation",2);const u=e=>m.classNames("base",["disabled",e.disabled],["selected",!!e.selected],["hover",!!e._highlighted],["active",!!e.checked],["icon",!!e.icon],["two-lines",!!e.text?.length&&!!e.textSecondary?.length]);function g(){return t.html`${l.when(e=>e.text||e.textSecondary,t.html`<span class="text">
-			${l.when(e=>e.text,t.html`<span class="text-primary">
-					${l.when(e=>e._hasMatchedText,t.html`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
-								>${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
-							>`)}${e=>e.text.slice(e._matchedRange.to)}
-				</span>`)}
-			${l.when(e=>e.textSecondary,t.html`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
-		</span>`)}`}const S=e=>{const o=p.affixIconTemplateFactory(e),i=e.tagFor(v.Icon);return t.html`
-		<template
-			${h.applyHostSemantics({role:"option",ariaChecked:a=>a.checked,ariaSelected:a=>a.selected,ariaDisabled:a=>a.disabled})}
-			style="${a=>a._isNotMatching?"display: none":""}"
-		>
-			<div class="${u}">
-				${a=>o(a.icon,p.IconWrapper.Slot)} ${g()}
-				<slot name="trailing-meta"></slot>
-				${l.when(a=>a._displayCheckmark&&a.selected,t.html`<${i} class="checkmark" name="check-line"></${i}>`)}
-			</div>
-		</template>
-	`},w=":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base: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:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}",b=t.defineVividComponent("option",r,S,[v.iconDefinition],{styles:w}),k=t.createRegisterFunction(b);exports.ListboxOption=r;exports.isListboxOption=y;exports.listboxOptionDefinition=b;exports.registerOption=k;
+"use strict";const l=require("./definition9.cjs"),s=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./index.cjs"),v=require("./class-names.cjs");var m=Object.defineProperty,p=(n,e,i,t)=>{for(var o=void 0,a=n.length-1,c;a>=0;a--)(c=n[a])&&(o=c(e,i,o)||o);return o&&m(e,i,o),o};class r extends d.Anchored(s.VividElement){constructor(){super(...arguments),this.open=!1,this.#t=()=>{this.open=!0,this.#i()},this.#e=()=>{this.open=!1,this.#i()},this.#n=e=>{/* v8 ignore else -- @preserve */e.key==="Escape"&&this.#e()}}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#s(i)}#s(e){e.addEventListener("mouseover",this.#t),e.addEventListener("mouseout",this.#e),e.addEventListener("focusin",this.#t),e.addEventListener("focusout",this.#e),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded",String(this.open))}#r(e){e.removeEventListener("mouseover",this.#t),e.removeEventListener("mouseout",this.#e),e.removeEventListener("focusin",this.#t),e.removeEventListener("focusout",this.#e),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded")}#t;#e;#i(){this._anchorEl&&this._anchorEl.setAttribute("aria-expanded",String(this.open))}#o(){document.removeEventListener("keydown",this.#n),this.open&&this.isConnected&&document.addEventListener("keydown",this.#n)}#n;openChanged(e){e!==void 0&&this.#o()}}p([s.attr],r.prototype,"text");p([s.attr({mode:"fromView"})],r.prototype,"placement");p([s.attr({mode:"boolean"})],r.prototype,"open");const f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}",E=({open:n})=>v.classNames("control",["open",!!n]),b=n=>{const e=n.tagFor(l.Popup),i=d.anchorSlotTemplateFactory();return s.html`
+${i}
+<${e} class="${E}" arrow alternate
+	:placement=${t=>t.placement}
+	:anchor="${t=>t._anchorEl}"
+	:open="${t=>t.open}"
+	@keydown="${(t,o)=>{t.open&&u.handleEscapeKeyAndStopPropogation(o.event)&&(t.open=!1)}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${t=>t.text}
+  </div>
+</${e}>`},h=s.defineVividComponent("tooltip",r,b,[l.popupDefinition],{styles:f}),g=s.createRegisterFunction(h);exports.Tooltip=r;exports.registerTooltip=g;exports.tooltipDefinition=h;

package/bundled/definition11.js

@@ -1,225 +1,94 @@
-import { I as b, i as f } from "./definition2.js";
-import { V as m, a as c, o as d, v as h, h as l, c as x, d as _ } from "./vivid-element.js";
-import { A as y, a as u, I as g } from "./affix.js";
-import { H as S, a as k } from "./host-semantics.js";
-import { i as w } from "./dom.js";
-import { w as s } from "./when.js";
-import { c as z } from "./class-names.js";
-var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, a, n, t) => {
-  for (var i = t > 1 ? void 0 : t ? $(a, n) : a, p = e.length - 1, v; p >= 0; p--)
-    (v = e[p]) && (i = (t ? v(a, n, i) : v(i)) || i);
-  return t && i && T(a, n, i), i;
+import { P as d, p as l } from "./definition9.js";
+import { V as h, a, h as v, c as m, d as u } from "./vivid-element.js";
+import { A as f, a as E } from "./anchored.js";
+import { h as b } from "./index.js";
+import { c as x } from "./class-names.js";
+var y = Object.defineProperty, p = (n, e, s, t) => {
+  for (var o = void 0, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (o = c(e, s, o) || o);
+  return o && y(e, s, o), o;
 };
-function V(e) {
-  return w(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof o);
-}
-class o extends S(
-  y(m)
-) {
-  constructor(a, n, t, i) {
-    super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, a && (this.text = a), n && (this.value = n), t && (this.defaultSelected = t), i && (this.selected = i), this.proxy = new Option(
-      this.text,
-      this.value,
-      this.defaultSelected,
-      this.selected
-    ), this.proxy.disabled = this.disabled;
-  }
-  defaultSelectedChanged() {
-    this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
-  }
-  disabledChanged() {
-    this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
-  }
-  /**
-   * @deprecated Use `defaultSelected` instead.
-   */
-  get selectedAttribute() {
-    return this.defaultSelected;
-  }
-  set selectedAttribute(a) {
-    this.defaultSelected = a;
-  }
-  selectedChanged() {
-    this.dirtySelected || (this.dirtySelected = !0), this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
+class i extends f(h) {
+  constructor() {
+    super(...arguments), this.open = !1, this.#t = () => {
+      this.open = !0, this.#s();
+    }, this.#e = () => {
+      this.open = !1, this.#s();
+    }, this.#n = (e) => {
+      /* v8 ignore else -- @preserve */
+      e.key === "Escape" && this.#e();
+    };
   }
-  valueChanged() {
-    if (typeof this.value != "string") {
-      this.value = "";
-      return;
-    }
-    this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(a) {
-    this._label = a;
-  }
-  set text(a) {
-    this._text = a;
+  connectedCallback() {
+    super.connectedCallback(), this.#o();
   }
-  get text() {
-    return this._text ?? "";
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#o();
   }
   /**
-   * Provides an accessible name for use by parent components.
-   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
    * @internal
    */
-  _getAccessibleName() {
-    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+  _anchorElChanged(e, s) {
+    e && this.#r(e), s && this.#i(s);
   }
-  get form() {
-    return null;
+  #i(e) {
+    e.addEventListener("mouseover", this.#t), e.addEventListener("mouseout", this.#e), e.addEventListener("focusin", this.#t), e.addEventListener("focusout", this.#e), e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(this.open));
   }
-  get _hasMatchedText() {
-    return !!(this.matchedText ?? this._vvdSearchText);
+  #r(e) {
+    e.removeEventListener("mouseover", this.#t), e.removeEventListener("mouseout", this.#e), e.removeEventListener("focusin", this.#t), e.removeEventListener("focusout", this.#e), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded");
   }
-  get _matchedRange() {
-    const a = this.matchedText ?? this._vvdSearchText;
-    if (a) {
-      const n = this.text.toLowerCase().indexOf(a.toLowerCase());
-      return n === -1 ? { from: 0, to: 0 } : {
-        from: n,
-        to: n + a.length
-      };
-    }
-    return { from: 0, to: 0 };
+  #t;
+  #e;
+  #s() {
+    this._anchorEl && this._anchorEl.setAttribute("aria-expanded", String(this.open));
   }
+  #o() {
+    document.removeEventListener("keydown", this.#n), this.open && this.isConnected && document.addEventListener("keydown", this.#n);
+  }
+  #n;
   /**
    * @internal
    */
-  connectedCallback() {
-    super.connectedCallback(), this.dirtySelected || (this.selected = this.defaultSelected, this.dirtySelected = !1);
+  openChanged(e) {
+    e !== void 0 && this.#o();
   }
 }
-r([
-  c({
-    converter: {
-      fromView: (e) => {
-        if (e === !0 || e === "true")
-          return !0;
-        if (e === !1 || e === "false")
-          return !1;
-      },
-      toView: (e) => e
-    }
-  })
-], o.prototype, "checked", 2);
-r([
-  c({ attribute: "selected", mode: "boolean" })
-], o.prototype, "defaultSelected", 2);
-r([
-  c({ mode: "boolean" })
-], o.prototype, "disabled", 2);
-r([
-  c({ attribute: "current-selected", mode: "boolean" })
-], o.prototype, "selected", 2);
-r([
-  c({ attribute: "value" })
-], o.prototype, "value", 2);
-r([
-  c({
-    attribute: "label"
-  })
-], o.prototype, "_label", 2);
-r([
-  c({
-    attribute: "text"
-  })
-], o.prototype, "_text", 2);
-r([
-  c({ attribute: "text-secondary" })
-], o.prototype, "textSecondary", 2);
-r([
-  d
-], o.prototype, "_highlighted", 2);
-r([
-  d
-], o.prototype, "_displayCheckmark", 2);
-r([
-  c({ attribute: "matched-text" })
-], o.prototype, "matchedText", 2);
-r([
-  d
-], o.prototype, "_vvdSearchText", 2);
-r([
-  h
-], o.prototype, "_hasMatchedText", 1);
-r([
-  d
-], o.prototype, "_isNotMatching", 2);
-r([
-  h
-], o.prototype, "_matchedRange", 1);
-r([
-  c({ attribute: "tag-connotation" })
-], o.prototype, "tagConnotation", 2);
-const C = (e) => z(
-  "base",
-  ["disabled", e.disabled],
-  ["selected", !!e.selected],
-  ["hover", !!e._highlighted],
-  ["active", !!e.checked],
-  ["icon", !!e.icon],
-  ["two-lines", !!e.text?.length && !!e.textSecondary?.length]
-);
-function O() {
-  return l`${s(
-    (e) => e.text || e.textSecondary,
-    l`<span class="text">
-			${s(
-      (e) => e.text,
-      l`<span class="text-primary">
-					${s(
-        (e) => e._hasMatchedText,
-        l`${(e) => e.text.slice(0, e._matchedRange.from)}<span class="match"
-								>${(e) => e.text.slice(e._matchedRange.from, e._matchedRange.to)}</span
-							>`
-      )}${(e) => e.text.slice(e._matchedRange.to)}
-				</span>`
-    )}
-			${s(
-      (e) => e.textSecondary,
-      l`<span class="text-secondary">${(e) => e.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const L = (e) => {
-  const a = u(e), n = e.tagFor(b);
-  return l`
-		<template
-			${k({
-    role: "option",
-    ariaChecked: (t) => t.checked,
-    ariaSelected: (t) => t.selected,
-    ariaDisabled: (t) => t.disabled
-  })}
-			style="${(t) => t._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${C}">
-				${(t) => a(t.icon, g.Slot)} ${O()}
-				<slot name="trailing-meta"></slot>
-				${s(
-    (t) => t._displayCheckmark && t.selected,
-    l`<${n} class="checkmark" name="check-line"></${n}>`
-  )}
-			</div>
-		</template>
-	`;
-}, M = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base: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:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}", H = _(
-  "option",
-  o,
+p([
+  a
+], i.prototype, "text");
+p([
+  a({ mode: "fromView" })
+], i.prototype, "placement");
+p([
+  a({ mode: "boolean" })
+], i.prototype, "open");
+const g = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}", A = ({ open: n }) => x("control", ["open", !!n]), L = (n) => {
+  const e = n.tagFor(d), s = E();
+  return v`
+${s}
+<${e} class="${A}" arrow alternate
+	:placement=${(t) => t.placement}
+	:anchor="${(t) => t._anchorEl}"
+	:open="${(t) => t.open}"
+	@keydown="${(t, o) => {
+    t.open && b(o.event) && (t.open = !1);
+  }}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${(t) => t.text}
+  </div>
+</${e}>`;
+}, C = u(
+  "tooltip",
+  i,
   L,
-  [f],
+  [l],
   {
-    styles: M
+    styles: g
   }
-), P = x(H);
+), P = m(C);
 export {
-  o as L,
-  V as i,
-  H as l,
-  P as r
+  i as T,
+  P as r,
+  C as t
 };

package/bundled/definition12.cjs

@@ -1,10 +1,19 @@
-"use strict";const l=require("./definition2.cjs"),i=require("./definition16.cjs"),n=require("./vivid-element.cjs"),v=require("./class-names.cjs");var d=Object.defineProperty,u=(o,r,a,x)=>{for(var t=void 0,e=o.length-1,c;e>=0;e--)(c=o[e])&&(t=c(r,a,t)||t);return t&&d(r,a,t),t};class s extends n.VividElement{constructor(){super(...arguments),this.placement="right"}}u([n.attr({mode:"fromView"})],s.prototype,"placement");const f=o=>v.classNames("control"),_=o=>{const r=o.tagFor(i.Toggletip),a=o.tagFor(l.Icon);return n.html`
-		<${r} class="base" exportparts="vvd-theme-alternate">
-			<button class="${f}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${a} name="help-solid"></${a}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${r}>
-	`},b=".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}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
+"use strict";const v=require("./definition2.cjs"),t=require("./vivid-element.cjs"),p=require("./affix.cjs"),h=require("./host-semantics.cjs"),f=require("./dom.cjs"),l=require("./when.cjs"),m=require("./class-names.cjs");var x=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,o,i,a)=>{for(var c=a>1?void 0:a?_(o,i):o,s=e.length-1,d;s>=0;s--)(d=e[s])&&(c=(a?d(o,i,c):d(c))||c);return a&&c&&x(o,i,c),c};function y(e){return f.isHTMLElement(e)&&(e.getAttribute("role")==="option"||e instanceof HTMLOptionElement||e instanceof r)}class r extends h.HostSemantics(p.AffixIconWithTrailing(t.VividElement)){constructor(o,i,a,c){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value="",this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText="",this._isNotMatching=!1,o&&(this.text=o),i&&(this.value=i),a&&(this.defaultSelected=a),c&&(this.selected=c),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(o){this.defaultSelected=o}selectedChanged(){this.dirtySelected||(this.dirtySelected=!0),this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!="string"){this.value="";return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(o){this._label=o}set text(o){this._text=o}get text(){return this._text??""}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:""}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){const o=this.matchedText??this._vvdSearchText;if(o){const i=this.text.toLowerCase().indexOf(o.toLowerCase());return i===-1?{from:0,to:0}:{from:i,to:i+o.length}}return{from:0,to:0}}connectedCallback(){super.connectedCallback(),this.dirtySelected||(this.selected=this.defaultSelected,this.dirtySelected=!1)}}n([t.attr({converter:{fromView:e=>{if(e===!0||e==="true")return!0;if(e===!1||e==="false")return!1},toView:e=>e}})],r.prototype,"checked",2);n([t.attr({attribute:"selected",mode:"boolean"})],r.prototype,"defaultSelected",2);n([t.attr({mode:"boolean"})],r.prototype,"disabled",2);n([t.attr({attribute:"current-selected",mode:"boolean"})],r.prototype,"selected",2);n([t.attr({attribute:"value"})],r.prototype,"value",2);n([t.attr({attribute:"label"})],r.prototype,"_label",2);n([t.attr({attribute:"text"})],r.prototype,"_text",2);n([t.attr({attribute:"text-secondary"})],r.prototype,"textSecondary",2);n([t.observable],r.prototype,"_highlighted",2);n([t.observable],r.prototype,"_displayCheckmark",2);n([t.attr({attribute:"matched-text"})],r.prototype,"matchedText",2);n([t.observable],r.prototype,"_vvdSearchText",2);n([t.volatile],r.prototype,"_hasMatchedText",1);n([t.observable],r.prototype,"_isNotMatching",2);n([t.volatile],r.prototype,"_matchedRange",1);n([t.attr({attribute:"tag-connotation"})],r.prototype,"tagConnotation",2);const u=e=>m.classNames("base",["disabled",e.disabled],["selected",!!e.selected],["hover",!!e._highlighted],["active",!!e.checked],["icon",!!e.icon],["two-lines",!!e.text?.length&&!!e.textSecondary?.length]);function g(){return t.html`${l.when(e=>e.text||e.textSecondary,t.html`<span class="text">
+			${l.when(e=>e.text,t.html`<span class="text-primary">
+					${l.when(e=>e._hasMatchedText,t.html`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
+								>${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
+							>`)}${e=>e.text.slice(e._matchedRange.to)}
+				</span>`)}
+			${l.when(e=>e.textSecondary,t.html`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
+		</span>`)}`}const S=e=>{const o=p.affixIconTemplateFactory(e),i=e.tagFor(v.Icon);return t.html`
+		<template
+			${h.applyHostSemantics({role:"option",ariaChecked:a=>a.checked,ariaSelected:a=>a.selected,ariaDisabled:a=>a.disabled})}
+			style="${a=>a._isNotMatching?"display: none":""}"
+		>
+			<div class="${u}">
+				${a=>o(a.icon,p.IconWrapper.Slot)} ${g()}
+				<slot name="trailing-meta"></slot>
+				${l.when(a=>a._displayCheckmark&&a.selected,t.html`<${i} class="checkmark" name="check-line"></${i}>`)}
+			</div>
+		</template>
+	`},w=":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base: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:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}",b=t.defineVividComponent("option",r,S,[v.iconDefinition],{styles:w}),k=t.createRegisterFunction(b);exports.ListboxOption=r;exports.isListboxOption=y;exports.listboxOptionDefinition=b;exports.registerOption=k;