@vonage/vivid 5.1.0 → 5.3.0

package/bundled/definition10.js

@@ -1,73 +1,359 @@
-import { I as c, i as l } from "./definition2.js";
-import { h as e, c as i, d as s } from "./vivid-element.js";
-import { L as p } from "./option.js";
-import { a as d, I as v } from "./affix.js";
-import { a as m } from "./host-semantics.js";
-import { c as b } from "./class-names.js";
-import { w as t } from "./when.js";
-const _ = (a) => b(
-  "base",
-  ["disabled", a.disabled],
-  ["selected", !!a.selected],
-  ["hover", !!a._highlighted],
-  ["active", !!a.checked],
-  ["icon", !!a.icon],
-  ["two-lines", !!a.text?.length && !!a.textSecondary?.length]
-);
-function x() {
-  return e`${t(
-    (a) => a.text || a.textSecondary,
-    e`<span class="text">
-			${t(
-      (a) => a.text,
-      e`<span class="text-primary">
-					${t(
-        (a) => a._hasMatchedText,
-        e`${(a) => a.text.slice(0, a._matchedRange.from)}<span class="match"
-								>${(a) => a.text.slice(a._matchedRange.from, a._matchedRange.to)}</span
-							>`
-      )}${(a) => a.text.slice(a._matchedRange.to)}
-				</span>`
-    )}
-			${t(
-      (a) => a.textSecondary,
-      e`<span class="text-secondary">${(a) => a.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
+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 { 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";
+import { W as N } from "./with-contextual-help.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 U } from "./text-field.js";
+import { w as g } from "./when.js";
+import { s as d } from "./slotted.js";
+import { r as j } from "./ref.js";
+import { c as G } from "./class-names.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 = new E([
+  `
+	.${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 N(
+  L(
+    A(
+      z(
+        V(
+          q(R(S(O(_))))
+        )
+      )
+    )
+  )
+) {
+  constructor() {
+    super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = F();
+  }
+  /**
+   * @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.enqueue(() => {
+      this.focus();
+    }), this._updateControlValueIfNeeded(), X(this), this._renderCharCountRemaining();
+  }
+  focus() {
+    this.control?.focus();
+  }
+  #e;
+  /**
+   * @internal
+   */
+  get _uniqueId() {
+    return this.id || this.#e;
+  }
 }
-const f = (a) => {
-  const r = d(a), n = a.tagFor(c);
-  return e`
-		<template
-			${m({
-    role: "option",
-    ariaChecked: (o) => o.checked,
-    ariaSelected: (o) => o.selected,
-    ariaDisabled: (o) => o.disabled
-  })}
-			style="${(o) => o._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${_}">
-				${(o) => r(o.icon, v.Slot)} ${x()}
-				<slot name="trailing-meta"></slot>
-				${t(
-    (o) => o._displayCheckmark && o.selected,
-    e`<${n} class="checkmark" name="check-line"></${n}>`
+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
+}) => G(
+  ["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}"
+							${B()}
+							${j("control")}
+						/>`
   )}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${d("actionItemsSlottedContent")}
+					></slot>
+				</div>
 			</div>
-		</template>
+			${(e) => e._getFeedbackTemplate(i)}
+		</div>
 	`;
-}, y = ":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 = s(
-  "option",
-  p,
-  f,
-  [l],
+}, ee = M(
+  "text-field",
+  t,
+  Z,
+  [
+    T,
+    w,
+    W,
+    D
+  ],
   {
-    styles: y
+    styles: U,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
   }
-), B = i(h);
+), xe = H(ee);
 export {
-  h as l,
-  B as r
+  t as T,
+  xe as r,
+  ee as t
 };

package/bundled/definition11.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 c=require("./definition2.cjs"),e=require("./vivid-element.cjs"),s=require("./option.cjs"),r=require("./affix.cjs"),p=require("./host-semantics.cjs"),n=require("./when.cjs"),d=require("./class-names.cjs"),v=a=>d.classNames("base",["disabled",a.disabled],["selected",!!a.selected],["hover",!!a._highlighted],["active",!!a.checked],["icon",!!a.icon],["two-lines",!!a.text?.length&&!!a.textSecondary?.length]);function b(){return e.html`${n.when(a=>a.text||a.textSecondary,e.html`<span class="text">
+			${n.when(a=>a.text,e.html`<span class="text-primary">
+					${n.when(a=>a._hasMatchedText,e.html`${a=>a.text.slice(0,a._matchedRange.from)}<span class="match"
+								>${a=>a.text.slice(a._matchedRange.from,a._matchedRange.to)}</span
+							>`)}${a=>a.text.slice(a._matchedRange.to)}
+				</span>`)}
+			${n.when(a=>a.textSecondary,e.html`<span class="text-secondary">${a=>a.textSecondary}</span>`)}
+		</span>`)}`}const m=a=>{const i=r.affixIconTemplateFactory(a),t=a.tagFor(c.Icon);return e.html`
+		<template
+			${p.applyHostSemantics({role:"option",ariaChecked:o=>o.checked,ariaSelected:o=>o.selected,ariaDisabled:o=>o.disabled})}
+			style="${o=>o._isNotMatching?"display: none":""}"
+		>
+			<div class="${v}">
+				${o=>i(o.icon,r.IconWrapper.Slot)} ${b()}
+				<slot name="trailing-meta"></slot>
+				${n.when(o=>o._displayCheckmark&&o.selected,e.html`<${t} class="checkmark" name="check-line"></${t}>`)}
+			</div>
+		</template>
+	`},_=":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)}",l=e.defineVividComponent("option",s.ListboxOption,m,[c.iconDefinition],{styles:_}),h=e.createRegisterFunction(l);exports.listboxOptionDefinition=l;exports.registerOption=h;

package/bundled/definition11.js

@@ -1,44 +1,73 @@
-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";
-  }
+import { I as c, i as l } from "./definition2.js";
+import { h as e, c as i, d as s } from "./vivid-element.js";
+import { L as p } from "./option.js";
+import { a as d, I as v } from "./affix.js";
+import { a as m } from "./host-semantics.js";
+import { w as t } from "./when.js";
+import { c as b } from "./class-names.js";
+const _ = (a) => b(
+  "base",
+  ["disabled", a.disabled],
+  ["selected", !!a.selected],
+  ["hover", !!a._highlighted],
+  ["active", !!a.checked],
+  ["icon", !!a.icon],
+  ["two-lines", !!a.text?.length && !!a.textSecondary?.length]
+);
+function x() {
+  return e`${t(
+    (a) => a.text || a.textSecondary,
+    e`<span class="text">
+			${t(
+      (a) => a.text,
+      e`<span class="text-primary">
+					${t(
+        (a) => a._hasMatchedText,
+        e`${(a) => a.text.slice(0, a._matchedRange.from)}<span class="match"
+								>${(a) => a.text.slice(a._matchedRange.from, a._matchedRange.to)}</span
+							>`
+      )}${(a) => a.text.slice(a._matchedRange.to)}
+				</span>`
+    )}
+			${t(
+      (a) => a.textSecondary,
+      e`<span class="text-secondary">${(a) => a.textSecondary}</span>`
+    )}
+		</span>`
+  )}`;
 }
-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}>
+const f = (a) => {
+  const r = d(a), n = a.tagFor(c);
+  return e`
+		<template
+			${m({
+    role: "option",
+    ariaChecked: (o) => o.checked,
+    ariaSelected: (o) => o.selected,
+    ariaDisabled: (o) => o.disabled
+  })}
+			style="${(o) => o._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${_}">
+				${(o) => r(o.icon, v.Slot)} ${x()}
+				<slot name="trailing-meta"></slot>
+				${t(
+    (o) => o._displayCheckmark && o.selected,
+    e`<${n} class="checkmark" name="check-line"></${n}>`
+  )}
+			</div>
+		</template>
 	`;
-}, 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],
+}, y = ":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 = s(
+  "option",
+  p,
+  f,
+  [l],
   {
     styles: y
   }
-), H = f(
-  k
-);
+), B = i(h);
 export {
-  k as c,
-  H as r
+  h as l,
+  B as r
 };

package/bundled/definition12.cjs

@@ -1 +1,10 @@
-"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;
+"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;