@vonage/vivid 5.15.1 → 5.16.0

package/bundled/definition10.js

@@ -1,359 +1,180 @@
-import { i as T } from "./definition2.js";
-import { V as _, U as k, w 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";
-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;
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o, u as s } from "./vivid-element.js";
+import { t as c } from "./ref.js";
+import { t as l } from "./slotted.js";
+import { t as u } from "./decorate.js";
+import { t as d } from "./class-names.js";
+import { i as f, s as p, t as m } from "./key-codes.js";
+import { n as h, t as g } from "./delegates-aria.js";
+import { t as _ } from "./dialog.js";
+import { i as v, t as y } from "./definition8.js";
+import { a as b, i as x, r as S, t as C } from "./definition9.js";
+import { n as w, t as T } from "./anchored.js";
+import { t as E } from "./divider.js";
+//#region src/lib/menu/menu.scss?inline
+var D = ":host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}", O = (e) => e instanceof x && e.controlType === "checkbox", k = (e) => e instanceof x && e.controlType === "radio", A = (e) => e instanceof E ? !0 : e.role === "separator", j = (e) => e instanceof x ? !0 : !!(e.role && e.role in b), M = class extends T(g(o)) {
+	constructor(...e) {
+		super(...e), this.offset = null, this.expandedItem = null, this.focusIndex = -1, this.handleFocusOut = (e) => {
+			!this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length && (this.collapseExpandedItem(), this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.menuItems[0].setAttribute("tabindex", "0"), this.focusIndex = 0);
+		}, this.handleItemFocus = (e) => {
+			let t = e.target;
+			this.menuItems !== void 0 && t !== this.menuItems[this.focusIndex] && (this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = this.menuItems.indexOf(t), t.setAttribute("tabindex", "0"));
+		}, this.handleExpandedChanged = (e) => {
+			let t = e.target;
+			this.expandedItem !== null && t === this.expandedItem && t.expanded === !1 && (this.expandedItem = null), t.expanded && (this.expandedItem = t);
+		}, this.removeItemListeners = () => {
+			this.menuItems !== void 0 && this.menuItems.forEach((e) => {
+				e.removeEventListener("expanded-change", this.handleExpandedChanged), e.removeEventListener("focus", this.handleItemFocus);
+			});
+		}, this.setItems = () => {
+			let e = this.domChildren();
+			this.removeItemListeners(), this.menuItems = e.filter(j), this.menuItems.length && (this.focusIndex = 0), this.menuItems.forEach((e, t) => {
+				e instanceof x && (e._isPresentational = !1), e.setAttribute("tabindex", t === 0 ? "0" : "-1"), e.addEventListener("expanded-change", this.handleExpandedChanged), e.addEventListener("focus", this.handleItemFocus);
+			});
+		}, this.placement = "bottom", this.autoDismiss = !1, this.positionStrategy = "fixed", this.open = !1, this._onFocusout = (e) => {
+			let t = e.relatedTarget, n = !this.contains(t) && !this._anchorEl?.contains(t);
+			this.autoDismiss && n && (this.open = !1);
+		};
+	}
+	itemsChanged() {
+		this.$fastController.isConnected && this.menuItems !== void 0 && this.setItems();
+	}
+	connectedCallback() {
+		super.connectedCallback(), e.enqueue(() => {
+			this.setItems();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeItemListeners(), this.menuItems = void 0;
+	}
+	focus() {
+		let e = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
+		e instanceof HTMLElement ? e.focus() : this.setFocus(0);
+	}
+	collapseExpandedItem() {
+		this.expandedItem !== null && (this.expandedItem.expanded = !1, this.expandedItem = null);
+	}
+	handleMenuKeyDown(e) {
+		if (!(e.defaultPrevented || this.menuItems === void 0)) switch (e.key) {
+			case m:
+				this.setFocus(this.focusIndex + 1);
+				return;
+			case f:
+				this.setFocus(this.focusIndex - 1);
+				return;
+			case "End":
+				this.setFocus(this.menuItems.length - 1);
+				return;
+			case p:
+				this.setFocus(0);
+				return;
+			default: return !0;
+		}
+	}
+	domChildren() {
+		return Array.from(this.children).filter((e) => !e.hasAttribute("hidden")).filter((e) => !e.hasAttribute("slot"));
+	}
+	setFocus(e) {
+		if (this.menuItems !== void 0 && e >= 0 && e < this.menuItems.length) {
+			let t = this.menuItems[e];
+			this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1 && this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = e, t.setAttribute("tabindex", "0"), t.focus();
+		}
+	}
+	get #e() {
+		return this.trigger ?? "auto";
+	}
+	openChanged(e, t) {
+		t && this._popupEl?.show().then(() => this.focus()), t ? this.$emit("open", void 0, { bubbles: !1 }) : this.$emit("close", void 0, { bubbles: !1 }), this._anchorEl && this.#n(this._anchorEl);
+	}
+	_anchorElChanged(e, t) {
+		e && this.#r(e), t && this.#t(t);
+	}
+	#t(e) {
+		e.addEventListener("click", this.#i, !0), e.addEventListener("focusout", this._onFocusout), e.ariaHasPopup = "menu", this.#n(e);
+	}
+	#n(e) {
+		e.ariaExpanded = this.open.toString(), e.dataset.expanded = this.open.toString();
+	}
+	#r(e) {
+		e.removeEventListener("click", this.#i, !0), e.removeEventListener("focusout", this._onFocusout), e.ariaHasPopup = null, e.ariaExpanded = null, delete e.dataset.expanded;
+	}
+	#i = () => {
+		if (this.#e === "off" || this.#e === "legacy" && this.open) return;
+		let t = !this.open;
+		e.enqueue(() => this.open = t);
+	};
+	_onBodyChange(e) {
+		if (this.menuItems === void 0 || !(e.target instanceof Element)) return;
+		this.#e === "auto" && !O(e.target) && (this.open = !1);
+		let t = this.domChildren(), n = t.indexOf(e.target);
+		if (n !== -1) {
+			if (k(e.target) && e.target.checked) {
+				for (let e = n - 1; e >= 0; --e) {
+					let n = t[e];
+					if (k(n) && (n.checked = !1), A(n)) break;
+				}
+				for (let e = n + 1; e <= t.length - 1; ++e) {
+					let n = t[e];
+					if (k(n) && (n.checked = !1), A(n)) break;
+				}
+			}
+			return !0;
+		}
 	}
-`
-]), 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 = w();
-  }
-  /**
-   * @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;
-  }
+u([r({
+	attribute: "offset",
+	converter: s
+})], M.prototype, "offset", void 0), u([t], M.prototype, "items", void 0), u([r({ mode: "fromView" })], M.prototype, "placement", void 0), u([r], M.prototype, "trigger", void 0), u([r({
+	mode: "boolean",
+	attribute: "auto-dismiss"
+})], M.prototype, "autoDismiss", void 0), u([r({
+	mode: "fromView",
+	attribute: "position-strategy"
+})], M.prototype, "positionStrategy", void 0), u([r({ mode: "boolean" })], M.prototype, "open", void 0), u([t], M.prototype, "headerSlottedContent", void 0), u([t], M.prototype, "actionItemsSlottedContent", void 0), u([t], M.prototype, "_popupOffset", void 0);
+//#endregion
+//#region src/lib/menu/menu.template.ts
+var N = ({ headerSlottedContent: e, actionItemsSlottedContent: t, items: n }) => d("base", ["hide-header", !e?.length], ["hide-actions", !t?.length], ["hide-body", n && !n.length]);
+function P(e, t) {
+	return e.open && _(t) && (e.open = !1), !0;
 }
-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([
-  b
-], t.prototype, "actionItemsSlottedContent");
-o([
-  b
-], 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: C,
-  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", !C],
-  ["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}">
-			${g(
-    (e) => e.charCount && e.maxlength,
-    (e) => e._getCharCountTemplate(i)
-  )}
-			<div
-				class="label-wrapper"
-				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+//#endregion
+//#region src/lib/menu/definition.ts
+var F = i(S, M, (e) => {
+	let t = e.tagFor(v), r = w();
+	function i(e, t, n) {
+		t.stopPropagation(), e.open = n;
+	}
+	return n`
+		<template @focusout="${(e, t) => e._onFocusout(t.event)}">
+			${r}
+			<${t}
+				${c("_popupEl")}
+				:placement=${(e) => e.placement}
+				:open=${(e) => e.open}
+				:anchor=${(e) => e._anchorEl}
+				:strategy="${(e) => e.positionStrategy}"
+				:offset=${(e) => e.offset || e._popupOffset}
+				@keydown="${(e, t) => P(e, t.event)}"
+				@vwc-popup:open="${(e, t) => i(e, t.event, !0)}"
+				@vwc-popup:close="${(e, t) => i(e, t.event, !1)}"
 			>
-				<slot class="label" name="_label"></slot>
-				<slot
-					name="contextual-help"
-					${d("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			${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 class="${N}">
+				<div class="header">
+					<slot name="header" ${l("headerSlottedContent")}></slot>
 				</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
+					class="body"
+					${h({ role: "menu" })}
+					@change="${(e, t) => e._onBodyChange(t.event)}"
+					@keydown="${(e, t) => e.handleMenuKeyDown(t.event)}"
+					@focusout="${(e, t) => e.handleFocusOut(t.event)}"
+				>
+					<slot ${l("items")}></slot>
 				</div>
+				<footer class="action-items"><slot name="action-items"  ${l("actionItemsSlottedContent")}></slot></footer>
 			</div>
-			${(e) => e._getFeedbackTemplate(i)}
-		</div>
-	`;
-}, ee = M(
-  "text-field",
-  t,
-  Z,
-  [
-    T,
-    F,
-    W,
-    D
-  ],
-  {
-    styles: U,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), xe = H(ee);
-export {
-  t as T,
-  xe as r,
-  ee as t
-};
+		</${t}>
+	</template>`;
+}, [y, C], { styles: D }), I = a(F);
+//#endregion
+export { I as n, M as r, F as t };

package/bundled/definition11.cjs

@@ -1,12 +1,19 @@
-"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=>{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;
+const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./slotted.cjs`),r=require(`./definition2.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./form-associated.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./mixins.cjs`);var f=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,p=class extends o.t(d.t(u.t(l.t(c.t(s.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t==1?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.l({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),i.t([e.l],p.prototype,`connotation`,void 0),i.t([e.l({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),i.t([e.T],p.prototype,`defaultSlottedNodes`,void 0),i.t([e.l({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),i.t([e.T],p.prototype,`slottedContent`,void 0);var m=({connotation:e,readOnly:t,checked:n,disabled:r,indeterminate:i,errorValidationMessage:o,successText:s,label:c,slottedContent:l})=>a.t(`base`,[`connotation-${e}`,!!e],[`readonly`,!!t],[`checked`,!!n||!!i],[`disabled`,!!r],[`error connotation-alert`,!!o],[`success connotation-success`,!!s],[`hide-label`,!c&&!l?.length]),h=e.o(`checkbox`,p,i=>{let a=i.tagFor(r.r);return e.d`<template>
+		<div
+			class="${m}"
+			aria-describedby="${e=>e._feedbackDescribedBy}"
+			${o.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly})}
+			tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
+			@keypress="${(e,t)=>e.keypressHandler(t.event)}"
+			@click="${(e,t)=>e.clickHandler(t.event)}"
+		>
+			<div class="control">
+				${t.t(e=>e.checked&&!e.indeterminate,e.d`<${a} name="check-solid" class="icon"></${a}>`)}
+				${t.t(e=>e.indeterminate,e.d`<${a} name="minus-solid" class="icon"></${a}>`)}
+			</div>
+			${e.d`<label
+				>${e=>e.label}<slot ${n.t(`slottedContent`)}></slot
+			></label>`}
+		</div>
+		${e=>e._getFeedbackTemplate(i)}
+	</template>`},[r.t,d.a],{styles:f,shadowOptions:{delegatesFocus:!0}}),g=e.s(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});