@vonage/vivid 5.4.0 → 5.5.0

package/bundled/definition17.cjs

@@ -1,13 +1,19 @@
-"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_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.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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),r.Updates.enqueue(this.validate),this.parentElement.getAttribute("data-vvd-component")!=="radio-group"&&this.getAttribute("tabindex")===null&&(this.disabled||this.setAttribute("tabindex","0")),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest('[data-vvd-component="radio-group"]')!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
-	aria-checked="${a=>a?.checked}"
-	aria-disabled="${a=>a?.disabled}"
-	aria-required="${a=>a?.required}"
-	@keypress="${(a,e)=>a?.keypressHandler(e.event)}"
-	@click="${(a,e)=>a?.clickHandler(e.event)}"
-	role="radio"
->
-	<div class="${_}">
-		<div class="control"></div>
-		${b.when(a=>a?.label,r.html`<label class="label">${a=>a?.label}</label>`)}
-	</div>
-</template>`,d=r.defineVividComponent("radio",n,k,[],{styles:f}),x=r.createRegisterFunction(d);exports.Radio=n;exports.radioDefinition=d;exports.registerRadio=x;
+"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>v.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
+		${i}
+		<${e}
+			@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
+			class="${y}"
+			arrow
+			:anchor="${t=>t._anchorEl}"
+			:open="${t=>t.open}"
+			?alternate="${t=>!t.alternate}"
+			placement="${t=>t.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${m.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${e}>
+	`},h=n.defineVividComponent("toggletip",a,k,[p.popupDefinition],{styles:f}),E=n.createRegisterFunction(h);exports.Toggletip=a;exports.registerToggletip=E;exports.toggletipDefinition=h;

package/bundled/definition17.js

@@ -1,137 +1,103 @@
-import { V as p, U as s, a as v, o as h, h as d, c as u, d as m } from "./vivid-element.js";
-import { C as b } from "./form-associated.js";
-import { W as f } from "./with-error-text.js";
-import { F as y } from "./form-element.js";
-import { l as _ } from "./key-codes.js";
-import { w as x } from "./when.js";
-import { c as k } from "./class-names.js";
-const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_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.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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
-var C = Object.defineProperty, c = (a, e, o, t) => {
-  for (var r = void 0, n = a.length - 1, l; n >= 0; n--)
-    (l = a[n]) && (r = l(e, o, r) || r);
-  return r && C(e, o, r), r;
+import { P as d, p as h } from "./definition9.js";
+import { V as m, U as u, a, h as c, c as f, d as g } from "./vivid-element.js";
+import { A as v, a as b } from "./anchored.js";
+import { L as y } from "./localized.js";
+import { h as k } from "./index.js";
+import { w as L } from "./when.js";
+import { c as E } from "./class-names.js";
+const x = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
+var A = Object.defineProperty, r = (n, e, i, t) => {
+  for (var o = void 0, l = n.length - 1, p; l >= 0; l--)
+    (p = n[l]) && (o = p(e, i, o) || o);
+  return o && A(e, i, o), o;
 };
-class i extends f(
-  y(b(p))
-) {
+class s extends y(v(m)) {
   constructor() {
-    super(), this.initialValue = "on", this.defaultSlottedNodes = [], this.keypressHandler = (e) => {
-      switch (e.key) {
-        case _:
-          !this.checked && !this.readOnly && (this.checked = !0);
-          return;
-      }
-      return !0;
-    }, this.proxy = document.createElement("input"), this.#o = () => {
-      const e = this.#e, o = this.#a;
-      e && e.length > 1 && e.some((r) => r.checked) && (this.setValidity({ valueMissing: !1 }), this.errorValidationMessage = "", o && (o.errorValidationMessage = ""));
-    }, this.#r = () => {
-      if (this.elementInternals && !this.validity.valueMissing) {
-        const e = this.#e, o = this.#a;
-        e && e.length > 1 && e.forEach((t) => {
-          t.elementInternals.setValidity({ valueMissing: !1 }), t.errorValidationMessage = "", o && (o.errorValidationMessage = "");
-        });
-      }
-    }, this.proxy.setAttribute("type", "radio"), this.proxy.setAttribute("name", this.name), this.checked = this.defaultChecked, this.dirtyChecked = !1;
+    super(...arguments), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#t = () => {
+      this.open || u.enqueue(() => this.open = !0);
+    }, this.#o = (e) => {
+      const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
+      (i || t) && (this.open = !1);
+    }, this.#n = (e) => {
+      e.key === "Escape" && (this.open = !1);
+    };
   }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
+  #e;
+  openChanged(e, i) {
+    e !== void 0 && (i ? this.setAttribute("role", "status") : this.removeAttribute("role"), this.#i(), this._anchorEl && this.#s(this._anchorEl));
   }
-  /**
-   * @internal
-   */
-  defaultCheckedChanged() {
-    this.$fastController.isConnected && !this.dirtyChecked && (this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1));
+  connectedCallback() {
+    super.connectedCallback(), this.#i();
   }
-  /**
-   * @internal
-   */
-  nameChanged(e, o) {
-    super.nameChanged(e, o), o !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name"), s.enqueue(this.validate);
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#i();
   }
   /**
    * @internal
    */
-  connectedCallback() {
-    super.connectedCallback(), s.enqueue(this.validate), this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null && (this.disabled || this.setAttribute("tabindex", "0")), this.defaultChecked && (this.dirtyChecked || this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1));
+  _anchorElChanged(e, i) {
+    e && this.#r(e), i && this.#a(i);
   }
-  isInsideRadioGroup() {
-    return this.closest(
-      '[data-vvd-component="radio-group"]'
-    ) !== null;
+  #a(e) {
+    e.addEventListener("click", this.#t, !0), this.#e = e.ariaLabel, e.ariaLabel = `${this.locale.toggletip.anchorLabel(e.ariaLabel || "")}`, this.#s(e);
   }
-  /**
-   * @internal
-   */
-  clickHandler(e) {
-    !this.disabled && !this.readOnly && !this.checked && (this.checked = !0);
+  #s(e) {
+    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
   }
-  get #e() {
-    const e = this.parentElement?.querySelectorAll(
-      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
-    );
-    return e ? Array.from(e) : [];
+  #r(e) {
+    e.removeEventListener("click", this.#t, !0), e.ariaLabel && (e.ariaLabel = this.#e), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded");
   }
-  get #a() {
-    const e = this.closest(
-      `${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`
-    );
-    return e || null;
+  #t;
+  #i() {
+    document.removeEventListener("click", this.#o), document.removeEventListener("keydown", this.#n), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#n));
   }
   #o;
-  #r;
-  /**
-   * @internal
-   */
-  validate(e) {
-    super.validate(e), this.proxy && (this.errorValidationMessage = this.validationMessage || "", this.validity.valueMissing ? this.#o() : this.#r());
-  }
+  #n;
 }
-c([
-  v
-], i.prototype, "connotation");
-c([
-  v({ attribute: "readonly", mode: "boolean" })
-], i.prototype, "readOnly");
-c([
-  h
-], i.prototype, "defaultSlottedNodes");
-const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
-  "base",
-  [`connotation-${a}`, !!a],
-  ["checked", !!e],
-  ["readonly", !!o],
-  ["disabled", !!t]
-), $ = d`<template
-	aria-checked="${(a) => a?.checked}"
-	aria-disabled="${(a) => a?.disabled}"
-	aria-required="${(a) => a?.required}"
-	@keypress="${(a, e) => a?.keypressHandler(e.event)}"
-	@click="${(a, e) => a?.clickHandler(e.event)}"
-	role="radio"
->
-	<div class="${w}">
-		<div class="control"></div>
-		${x(
-  (a) => a?.label,
-  d`<label class="label">${(a) => a?.label}</label>`
-)}
-	</div>
-</template>`, V = m(
-  "radio",
-  i,
-  $,
-  [],
+r([
+  a
+], s.prototype, "headline");
+r([
+  a({ mode: "boolean" })
+], s.prototype, "alternate");
+r([
+  a({ mode: "fromView" })
+], s.prototype, "placement");
+r([
+  a({ mode: "boolean" })
+], s.prototype, "open");
+const C = (n) => E("control"), _ = (n) => {
+  const e = n.tagFor(d), i = b();
+  return c`
+		${i}
+		<${e}
+			@keydown="${(t, { event: o }) => !(t.open && k(o))}"
+			class="${C}"
+			arrow
+			:anchor="${(t) => t._anchorEl}"
+			:open="${(t) => t.open}"
+			?alternate="${(t) => !t.alternate}"
+			placement="${(t) => t.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${L((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${e}>
+	`;
+}, $ = g(
+  "toggletip",
+  s,
+  _,
+  [h],
   {
-    styles: g
+    styles: x
   }
-), q = u(V);
+), j = f($);
 export {
-  i as R,
-  V as a,
-  q as r
+  s as T,
+  j as r,
+  $ as t
 };

package/bundled/definition18.cjs

@@ -1,12 +1,13 @@
-"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"),m=":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)}";var f=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&&f(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 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:m}),g=s.createRegisterFunction(h);exports.Tooltip=r;exports.registerTooltip=g;exports.tooltipDefinition=h;
+"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_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.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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),r.Updates.enqueue(this.validate),this.parentElement.getAttribute("data-vvd-component")!=="radio-group"&&this.getAttribute("tabindex")===null&&(this.disabled||this.setAttribute("tabindex","0")),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest('[data-vvd-component="radio-group"]')!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
+	aria-checked="${a=>a?.checked}"
+	aria-disabled="${a=>a?.disabled}"
+	aria-required="${a=>a?.required}"
+	@keypress="${(a,e)=>a?.keypressHandler(e.event)}"
+	@click="${(a,e)=>a?.clickHandler(e.event)}"
+	role="radio"
+>
+	<div class="${_}">
+		<div class="control"></div>
+		${b.when(a=>a?.label,r.html`<label class="label">${a=>a?.label}</label>`)}
+	</div>
+</template>`,d=r.defineVividComponent("radio",n,k,[],{styles:f}),x=r.createRegisterFunction(d);exports.Radio=n;exports.radioDefinition=d;exports.registerRadio=x;

package/bundled/definition18.js

@@ -1,94 +1,137 @@
-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";
-const y = ":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)}";
-var g = 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 && g(e, s, o), o;
+import { V as p, U as s, a as v, o as h, h as d, c as u, d as m } from "./vivid-element.js";
+import { C as b } from "./form-associated.js";
+import { W as f } from "./with-error-text.js";
+import { F as y } from "./form-element.js";
+import { l as _ } from "./key-codes.js";
+import { w as x } from "./when.js";
+import { c as k } from "./class-names.js";
+const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_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.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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
+var C = Object.defineProperty, c = (a, e, o, t) => {
+  for (var r = void 0, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (r = l(e, o, r) || r);
+  return r && C(e, o, r), r;
 };
-class i extends f(h) {
+class i extends f(
+  y(b(p))
+) {
   constructor() {
-    super(...arguments), this.open = !1, this.#t = () => {
-      this.open = !0, this.#s();
-    }, this.#e = () => {
-      this.open = !1, this.#s();
-    }, this.#n = (e) => {
-      e.key === "Escape" && this.#e();
-    };
+    super(), this.initialValue = "on", this.defaultSlottedNodes = [], this.keypressHandler = (e) => {
+      switch (e.key) {
+        case _:
+          !this.checked && !this.readOnly && (this.checked = !0);
+          return;
+      }
+      return !0;
+    }, this.proxy = document.createElement("input"), this.#o = () => {
+      const e = this.#e, o = this.#a;
+      e && e.length > 1 && e.some((r) => r.checked) && (this.setValidity({ valueMissing: !1 }), this.errorValidationMessage = "", o && (o.errorValidationMessage = ""));
+    }, this.#r = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const e = this.#e, o = this.#a;
+        e && e.length > 1 && e.forEach((t) => {
+          t.elementInternals.setValidity({ valueMissing: !1 }), t.errorValidationMessage = "", o && (o.errorValidationMessage = "");
+        });
+      }
+    }, this.proxy.setAttribute("type", "radio"), this.proxy.setAttribute("name", this.name), this.checked = this.defaultChecked, this.dirtyChecked = !1;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.#o();
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#o();
+  /**
+   * @internal
+   */
+  defaultCheckedChanged() {
+    this.$fastController.isConnected && !this.dirtyChecked && (this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1));
   }
   /**
    * @internal
    */
-  _anchorElChanged(e, s) {
-    e && this.#r(e), s && this.#i(s);
+  nameChanged(e, o) {
+    super.nameChanged(e, o), o !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name"), s.enqueue(this.validate);
   }
-  #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));
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), s.enqueue(this.validate), this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null && (this.disabled || this.setAttribute("tabindex", "0")), this.defaultChecked && (this.dirtyChecked || this.isInsideRadioGroup() || (this.checked = this.defaultChecked, this.dirtyChecked = !1));
+  }
+  isInsideRadioGroup() {
+    return this.closest(
+      '[data-vvd-component="radio-group"]'
+    ) !== null;
   }
-  #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");
+  /**
+   * @internal
+   */
+  clickHandler(e) {
+    !this.disabled && !this.readOnly && !this.checked && (this.checked = !0);
   }
-  #t;
-  #e;
-  #s() {
-    this._anchorEl && this._anchorEl.setAttribute("aria-expanded", String(this.open));
+  get #e() {
+    const e = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    return e ? Array.from(e) : [];
   }
-  #o() {
-    document.removeEventListener("keydown", this.#n), this.open && this.isConnected && document.addEventListener("keydown", this.#n);
+  get #a() {
+    const e = this.closest(
+      `${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`
+    );
+    return e || null;
   }
-  #n;
+  #o;
+  #r;
   /**
    * @internal
    */
-  openChanged(e) {
-    e !== void 0 && this.#o();
+  validate(e) {
+    super.validate(e), this.proxy && (this.errorValidationMessage = this.validationMessage || "", this.validity.valueMissing ? this.#o() : this.#r());
   }
 }
-p([
-  a
-], i.prototype, "text");
-p([
-  a({ mode: "fromView" })
-], i.prototype, "placement");
-p([
-  a({ mode: "boolean" })
-], i.prototype, "open");
-const 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",
+c([
+  v
+], i.prototype, "connotation");
+c([
+  v({ attribute: "readonly", mode: "boolean" })
+], i.prototype, "readOnly");
+c([
+  h
+], i.prototype, "defaultSlottedNodes");
+const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
+  "base",
+  [`connotation-${a}`, !!a],
+  ["checked", !!e],
+  ["readonly", !!o],
+  ["disabled", !!t]
+), $ = d`<template
+	aria-checked="${(a) => a?.checked}"
+	aria-disabled="${(a) => a?.disabled}"
+	aria-required="${(a) => a?.required}"
+	@keypress="${(a, e) => a?.keypressHandler(e.event)}"
+	@click="${(a, e) => a?.clickHandler(e.event)}"
+	role="radio"
+>
+	<div class="${w}">
+		<div class="control"></div>
+		${x(
+  (a) => a?.label,
+  d`<label class="label">${(a) => a?.label}</label>`
+)}
+	</div>
+</template>`, V = m(
+  "radio",
   i,
-  L,
-  [l],
+  $,
+  [],
   {
-    styles: y
+    styles: g
   }
-), P = m(C);
+), q = u(V);
 export {
-  i as T,
-  P as r,
-  C as t
+  i as R,
+  V as a,
+  q as r
 };