@vonage/vivid 5.15.1 → 5.16.0

package/bundled/form-associated.cjs

@@ -1 +1 @@
-"use strict";const a=require("./vivid-element.cjs"),m=require("./key-codes.cjs");var f=Object.defineProperty,l=(r,i,o,e)=>{for(var t=void 0,s=r.length-1,n;s>=0;s--)(n=r[s])&&(t=n(i,o,t)||t);return t&&f(i,o,t),t};const h="form-associated-proxy",d="ElementInternals",c=d in window&&"setFormValue"in window[d].prototype,u=new WeakMap,p=r=>{class i extends r{constructor(...e){super(...e),this.dirtyValue=!1,this.disabled=!1,this.proxyEventsToBlock=["change","click"],this.proxyInitialized=!1,this.required=!1,this.initialValue=this.initialValue||"",this.elementInternals||(this.formResetCallback=this.formResetCallback.bind(this))}static get formAssociated(){return c}get validity(){return this.elementInternals?this.elementInternals.validity:this.proxy.validity}get form(){return this.elementInternals?this.elementInternals.form:this.proxy.form}get validationMessage(){return this.elementInternals?this.elementInternals.validationMessage:this.proxy.validationMessage}get willValidate(){return this.elementInternals?this.elementInternals.willValidate:this.proxy.willValidate}get labels(){if(this.elementInternals)return Object.freeze(Array.from(this.elementInternals.labels));if(this.proxy instanceof HTMLElement&&this.proxy.ownerDocument&&this.id){const e=this.proxy.labels,t=Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));return Object.freeze(t.concat(Array.from(e)))}else return a.emptyArray}valueChanged(e,t){this.dirtyValue=!0,this.proxy instanceof HTMLElement&&(this.proxy.value=this.value),this.setFormValue(this.value),this.validate()}get currentValue(){return this.value}set currentValue(e){this.value=e}initialValueChanged(e,t){this.dirtyValue||(this.value=this.initialValue,this.dirtyValue=!1)}disabledChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.disabled=this.disabled),a.Updates.enqueue(()=>this.classList.toggle("disabled",this.disabled))}nameChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.name=this.name)}requiredChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.required=this.required),a.Updates.enqueue(()=>this.classList.toggle("required",this.required)),this.validate()}get elementInternals(){if(!c)return null;let e=u.get(this);return e||(e=this.attachInternals(),u.set(this,e)),e}connectedCallback(){super.connectedCallback(),this.addEventListener("keypress",this._keypressHandler),this.value||(this.value=this.initialValue,this.dirtyValue=!1),this.elementInternals||(this.attachProxy(),this.form&&this.form.addEventListener("reset",this.formResetCallback))}disconnectedCallback(){super.disconnectedCallback(),this.proxyEventsToBlock.forEach(e=>this.proxy.removeEventListener(e,this.stopPropagation)),!this.elementInternals&&this.form&&this.form.removeEventListener("reset",this.formResetCallback)}checkValidity(){return this.elementInternals?this.elementInternals.checkValidity():this.proxy.checkValidity()}reportValidity(){return this.elementInternals?this.elementInternals.reportValidity():this.proxy.reportValidity()}setValidity(e,t,s){if("valid"in e&&this.disabled){const{valid:n,...y}=e;e=y}this.elementInternals?this.elementInternals.setValidity(e,t,s):typeof t=="string"&&this.proxy.setCustomValidity(t)}formDisabledCallback(e){this.disabled=e}formResetCallback(){this.value=this.initialValue,this.dirtyValue=!1}attachProxy(){this.proxyInitialized||(this.proxyInitialized=!0,this.proxy.style.display="none",this.proxyEventsToBlock.forEach(e=>this.proxy.addEventListener(e,this.stopPropagation)),this.proxy.disabled=this.disabled,this.proxy.required=this.required,typeof this.name=="string"&&(this.proxy.name=this.name),typeof this.value=="string"&&(this.proxy.value=this.value),this.proxy.setAttribute("slot",h),this.proxySlot=document.createElement("slot"),this.proxySlot.setAttribute("name",h)),this.shadowRoot.appendChild(this.proxySlot),this.appendChild(this.proxy)}detachProxy(){this.removeChild(this.proxy),this.shadowRoot.removeChild(this.proxySlot)}validate(e){if(this.proxy instanceof HTMLElement&&this.elementInternals){const t=this.proxy.validity.valid,s=this.control,n=s&&s.validity&&!s.validity.valid&&(s.validity.tooShort||s.validity.tooLong);t&&n?this.setValidity(s.validity,s.validationMessage,e):this.setValidity(this.proxy.validity,this.proxy.validationMessage,e)}}setFormValue(e,t){this.elementInternals&&this.elementInternals.setFormValue(e,t||e)}_keypressHandler(e){e.key===m.keyEnter&&this.form instanceof HTMLFormElement&&this.form.querySelector("[type=submit]")?.click()}stopPropagation(e){e.stopPropagation()}}return l([a.attr({attribute:"current-value"})],i.prototype,"value"),l([a.attr({mode:"fromView",attribute:"value"})],i.prototype,"initialValue"),l([a.attr({mode:"boolean"})],i.prototype,"disabled"),l([a.attr],i.prototype,"name"),l([a.attr({mode:"boolean"})],i.prototype,"required"),i},v={fromView(r){return typeof r=="string"?r.toLowerCase()==="true":!!r},toView(r){return r?"true":"false"}},k=r=>{class i extends p(r){constructor(){super(...arguments),this.dirtyChecked=!1,this.defaultChecked=!1}defaultCheckedChanged(){this.dirtyChecked||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}checkedChanged(e,t){this.dirtyChecked||(this.dirtyChecked=!0),this.updateForm(),this.proxy instanceof HTMLInputElement&&(this.proxy.checked=this.checked),e!==void 0&&this.$emit("change"),this.validate()}get checkedAttribute(){return this.defaultChecked}set checkedAttribute(e){this.defaultChecked=e}get currentChecked(){return this.checked}set currentChecked(e){this.checked=e}updateForm(){const e=this.checked?this.value:null;this.setFormValue(e,e)}connectedCallback(){super.connectedCallback(),this.updateForm()}formResetCallback(){super.formResetCallback(),this.checked=!!this.defaultChecked,this.dirtyChecked=!1}}return l([a.attr({attribute:"checked",mode:"boolean"})],i.prototype,"defaultChecked"),l([a.attr({attribute:"current-checked",converter:v})],i.prototype,"checked"),i};exports.CheckableFormAssociated=k;exports.FormAssociated=p;
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`);var r=`form-associated-proxy`,i=`ElementInternals`,a=i in window&&`setFormValue`in window[i].prototype,o=new WeakMap,s=i=>{class s extends i{static get formAssociated(){return a}get validity(){return this.elementInternals?this.elementInternals.validity:this.proxy.validity}get form(){return this.elementInternals?this.elementInternals.form:this.proxy.form}get validationMessage(){return this.elementInternals?this.elementInternals.validationMessage:this.proxy.validationMessage}get willValidate(){return this.elementInternals?this.elementInternals.willValidate:this.proxy.willValidate}get labels(){if(this.elementInternals)return Object.freeze(Array.from(this.elementInternals.labels));if(this.proxy instanceof HTMLElement&&this.proxy.ownerDocument&&this.id){let e=this.proxy.labels,t=Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));return Object.freeze(t.concat(Array.from(e)))}else return e.A}valueChanged(e,t){this.dirtyValue=!0,this.proxy instanceof HTMLElement&&(this.proxy.value=this.value),this.setFormValue(this.value),this.validate()}get currentValue(){return this.value}set currentValue(e){this.value=e}initialValueChanged(e,t){this.dirtyValue||=(this.value=this.initialValue,!1)}disabledChanged(t,n){this.proxy instanceof HTMLElement&&(this.proxy.disabled=this.disabled),e.O.enqueue(()=>this.classList.toggle(`disabled`,this.disabled))}nameChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.name=this.name)}requiredChanged(t,n){this.proxy instanceof HTMLElement&&(this.proxy.required=this.required),e.O.enqueue(()=>this.classList.toggle(`required`,this.required)),this.validate()}get elementInternals(){if(!a)return null;let e=o.get(this);return e||(e=this.attachInternals(),o.set(this,e)),e}constructor(...e){super(...e),this.dirtyValue=!1,this.disabled=!1,this.proxyEventsToBlock=[`change`,`click`],this.proxyInitialized=!1,this.required=!1,this.initialValue=this.initialValue||``,this.elementInternals||(this.formResetCallback=this.formResetCallback.bind(this))}connectedCallback(){super.connectedCallback(),this.addEventListener(`keypress`,this._keypressHandler),this.value||(this.value=this.initialValue,this.dirtyValue=!1),this.elementInternals||(this.attachProxy(),this.form&&this.form.addEventListener(`reset`,this.formResetCallback))}disconnectedCallback(){super.disconnectedCallback(),this.proxyEventsToBlock.forEach(e=>this.proxy.removeEventListener(e,this.stopPropagation)),!this.elementInternals&&this.form&&this.form.removeEventListener(`reset`,this.formResetCallback)}checkValidity(){return this.elementInternals?this.elementInternals.checkValidity():this.proxy.checkValidity()}reportValidity(){return this.elementInternals?this.elementInternals.reportValidity():this.proxy.reportValidity()}setValidity(e,t,n){if(`valid`in e&&this.disabled){let{valid:t,...n}=e;e=n}this.elementInternals?this.elementInternals.setValidity(e,t,n):typeof t==`string`&&this.proxy.setCustomValidity(t)}formDisabledCallback(e){this.disabled=e}formResetCallback(){this.value=this.initialValue,this.dirtyValue=!1}attachProxy(){this.proxyInitialized||(this.proxyInitialized=!0,this.proxy.style.display=`none`,this.proxyEventsToBlock.forEach(e=>this.proxy.addEventListener(e,this.stopPropagation)),this.proxy.disabled=this.disabled,this.proxy.required=this.required,typeof this.name==`string`&&(this.proxy.name=this.name),typeof this.value==`string`&&(this.proxy.value=this.value),this.proxy.setAttribute(`slot`,r),this.proxySlot=document.createElement(`slot`),this.proxySlot.setAttribute(`name`,r)),this.shadowRoot.appendChild(this.proxySlot),this.appendChild(this.proxy)}detachProxy(){this.removeChild(this.proxy),this.shadowRoot.removeChild(this.proxySlot)}validate(e){if(this.proxy instanceof HTMLElement&&this.elementInternals){let t=this.proxy.validity.valid,n=this.control,r=n&&n.validity&&!n.validity.valid&&(n.validity.tooShort||n.validity.tooLong);t&&r?this.setValidity(n.validity,n.validationMessage,e):this.setValidity(this.proxy.validity,this.proxy.validationMessage,e)}}setFormValue(e,t){this.elementInternals&&this.elementInternals.setFormValue(e,t||e)}_keypressHandler(e){switch(e.key){case n.a:this.form instanceof HTMLFormElement&&this.form.querySelector(`[type=submit]`)?.click();break}}stopPropagation(e){e.stopPropagation()}}return t.t([e.l({attribute:`current-value`})],s.prototype,`value`,void 0),t.t([e.l({mode:`fromView`,attribute:`value`})],s.prototype,`initialValue`,void 0),t.t([e.l({mode:`boolean`})],s.prototype,`disabled`,void 0),t.t([e.l],s.prototype,`name`,void 0),t.t([e.l({mode:`boolean`})],s.prototype,`required`,void 0),s},c={fromView(e){return typeof e==`string`?e.toLowerCase()===`true`:!!e},toView(e){return e?`true`:`false`}},l=n=>{class r extends s(n){constructor(...e){super(...e),this.dirtyChecked=!1,this.defaultChecked=!1}defaultCheckedChanged(){this.dirtyChecked||=(this.checked=this.defaultChecked,!1)}checkedChanged(e,t){this.dirtyChecked||=!0,this.updateForm(),this.proxy instanceof HTMLInputElement&&(this.proxy.checked=this.checked),e!==void 0&&this.$emit(`change`),this.validate()}get checkedAttribute(){return this.defaultChecked}set checkedAttribute(e){this.defaultChecked=e}get currentChecked(){return this.checked}set currentChecked(e){this.checked=e}updateForm(){let e=this.checked?this.value:null;this.setFormValue(e,e)}connectedCallback(){super.connectedCallback(),this.updateForm()}formResetCallback(){super.formResetCallback(),this.checked=!!this.defaultChecked,this.dirtyChecked=!1}}return t.t([e.l({attribute:`checked`,mode:`boolean`})],r.prototype,`defaultChecked`,void 0),t.t([e.l({attribute:`current-checked`,converter:c})],r.prototype,`checked`,void 0),r};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/bundled/form-associated.js

@@ -1,319 +1,166 @@
-import { a, e as m, U as h } from "./vivid-element.js";
-import { f } from "./key-codes.js";
-var v = Object.defineProperty, l = (r, i, o, e) => {
-  for (var t = void 0, s = r.length - 1, n; s >= 0; s--)
-    (n = r[s]) && (t = n(i, o, t) || t);
-  return t && v(i, o, t), t;
-};
-const d = "form-associated-proxy", c = "ElementInternals", u = c in window && "setFormValue" in window[c].prototype, p = /* @__PURE__ */ new WeakMap(), k = (r) => {
-  class i extends r {
-    constructor(...e) {
-      super(...e), this.dirtyValue = !1, this.disabled = !1, this.proxyEventsToBlock = ["change", "click"], this.proxyInitialized = !1, this.required = !1, this.initialValue = this.initialValue || "", this.elementInternals || (this.formResetCallback = this.formResetCallback.bind(this));
-    }
-    /**
-     * Must evaluate to true to enable elementInternals.
-     * Feature detects API support and resolve respectively
-     *
-     * @internal
-     */
-    static get formAssociated() {
-      return u;
-    }
-    /**
-     * Returns the validity state of the element
-     */
-    get validity() {
-      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
-    }
-    /**
-     * Retrieve a reference to the associated form.
-     * Returns null if not associated to any form.
-     */
-    get form() {
-      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
-    }
-    /**
-     * Retrieve the localized validation message,
-     * or custom validation message if set.
-     */
-    get validationMessage() {
-      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
-    }
-    /**
-     * Whether the element will be validated when the
-     * form is submitted
-     */
-    get willValidate() {
-      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
-    }
-    /**
-     * A reference to all associated label elements
-     */
-    get labels() {
-      if (this.elementInternals)
-        return Object.freeze(Array.from(this.elementInternals.labels));
-      if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
-        const e = this.proxy.labels, t = Array.from(
-          this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`)
-        );
-        return Object.freeze(t.concat(Array.from(e)));
-      } else
-        return m;
-    }
-    /**
-     * @internal
-     */
-    valueChanged(e, t) {
-      this.dirtyValue = !0, this.proxy instanceof HTMLElement && (this.proxy.value = this.value), this.setFormValue(this.value), this.validate();
-    }
-    /**
-     * @internal
-     * @deprecated Use `value` instead.
-     */
-    get currentValue() {
-      return this.value;
-    }
-    set currentValue(e) {
-      this.value = e;
-    }
-    /**
-     * @internal
-     */
-    initialValueChanged(e, t) {
-      this.dirtyValue || (this.value = this.initialValue, this.dirtyValue = !1);
-    }
-    /**
-     * @internal
-     */
-    disabledChanged(e, t) {
-      this.proxy instanceof HTMLElement && (this.proxy.disabled = this.disabled), h.enqueue(() => this.classList.toggle("disabled", this.disabled));
-    }
-    /**
-     * @internal
-     */
-    nameChanged(e, t) {
-      this.proxy instanceof HTMLElement && (this.proxy.name = this.name);
-    }
-    /**
-     * @internal
-     */
-    requiredChanged(e, t) {
-      this.proxy instanceof HTMLElement && (this.proxy.required = this.required), h.enqueue(() => this.classList.toggle("required", this.required)), this.validate();
-    }
-    /**
-     * The element internals object. Will only exist
-     * in browsers supporting the attachInternals API
-     * @internal
-     */
-    get elementInternals() {
-      if (!u)
-        return null;
-      let e = p.get(this);
-      return e || (e = this.attachInternals(), p.set(this, e)), e;
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback(), this.addEventListener("keypress", this._keypressHandler), this.value || (this.value = this.initialValue, this.dirtyValue = !1), this.elementInternals || (this.attachProxy(), this.form && this.form.addEventListener("reset", this.formResetCallback));
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.proxyEventsToBlock.forEach(
-        (e) => this.proxy.removeEventListener(e, this.stopPropagation)
-      ), !this.elementInternals && this.form && this.form.removeEventListener("reset", this.formResetCallback);
-    }
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
-    }
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
-    }
-    /**
-     * Set the validity of the control. In cases when the elementInternals object is not
-     * available (and the proxy element is used to report validity), this function will
-     * do nothing unless a message is provided, at which point the setCustomValidity method
-     * of the proxy element will be invoked with the provided message.
-     * @param flags - Validity flags
-     * @param message - Optional message to supply
-     * @param anchor - Optional element used by UA to display an interactive validation UI
-     * @internal
-     */
-    setValidity(e, t, s) {
-      if ("valid" in e && this.disabled) {
-        const { valid: n, ...y } = e;
-        e = y;
-      }
-      this.elementInternals ? this.elementInternals.setValidity(e, t, s) : typeof t == "string" && this.proxy.setCustomValidity(t);
-    }
-    /**
-     * Invoked when a connected component's form or fieldset has its disabled
-     * state changed.
-     * @param disabled - the disabled value of the form / fieldset
-     * @internal
-     */
-    formDisabledCallback(e) {
-      this.disabled = e;
-    }
-    /**
-     * @internal
-     */
-    formResetCallback() {
-      this.value = this.initialValue, this.dirtyValue = !1;
-    }
-    /**
-     * Attach the proxy element to the DOM
-     * @internal
-     */
-    attachProxy() {
-      this.proxyInitialized || (this.proxyInitialized = !0, this.proxy.style.display = "none", this.proxyEventsToBlock.forEach(
-        (e) => this.proxy.addEventListener(e, this.stopPropagation)
-      ), this.proxy.disabled = this.disabled, this.proxy.required = this.required, typeof this.name == "string" && (this.proxy.name = this.name), typeof this.value == "string" && (this.proxy.value = this.value), this.proxy.setAttribute("slot", d), this.proxySlot = document.createElement("slot"), this.proxySlot.setAttribute("name", d)), this.shadowRoot.appendChild(this.proxySlot), this.appendChild(this.proxy);
-    }
-    /**
-     * Detach the proxy element from the DOM
-     * @internal
-     */
-    detachProxy() {
-      this.removeChild(this.proxy), this.shadowRoot.removeChild(this.proxySlot);
-    }
-    /**
-     * Sets the validity of the custom element. By default this uses the proxy element to determine
-     * validity, but this can be extended or replaced in implementation.
-     *
-     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
-     * @internal
-     */
-    validate(e) {
-      if (this.proxy instanceof HTMLElement && this.elementInternals) {
-        const t = this.proxy.validity.valid, s = this.control, n = s && s.validity && !s.validity.valid && (s.validity.tooShort || s.validity.tooLong);
-        t && n ? this.setValidity(s.validity, s.validationMessage, e) : this.setValidity(
-          this.proxy.validity,
-          this.proxy.validationMessage,
-          e
-        );
-      }
-    }
-    /**
-     * Associates the provided value (and optional state) with the parent form.
-     * @param value - The value to set
-     * @param state - The state object provided to during session restores and when autofilling.
-     * @internal
-     */
-    setFormValue(e, t) {
-      this.elementInternals && this.elementInternals.setFormValue(e, t || e);
-    }
-    /**
-     * @internal
-     */
-    _keypressHandler(e) {
-      e.key === f && this.form instanceof HTMLFormElement && this.form.querySelector(
-        "[type=submit]"
-      )?.click();
-    }
-    /**
-     * Used to stop propagation of proxy element events
-     * @param e - Event object
-     * @internal
-     */
-    stopPropagation(e) {
-      e.stopPropagation();
-    }
-  }
-  return l([
-    a({ attribute: "current-value" })
-  ], i.prototype, "value"), l([
-    a({ mode: "fromView", attribute: "value" })
-  ], i.prototype, "initialValue"), l([
-    a({ mode: "boolean" })
-  ], i.prototype, "disabled"), l([
-    a
-  ], i.prototype, "name"), l([
-    a({ mode: "boolean" })
-  ], i.prototype, "required"), i;
-}, x = {
-  fromView(r) {
-    return typeof r == "string" ? r.toLowerCase() === "true" : !!r;
-  },
-  toView(r) {
-    return r ? "true" : "false";
-  }
-}, V = (r) => {
-  class i extends k(r) {
-    constructor() {
-      super(...arguments), this.dirtyChecked = !1, this.defaultChecked = !1;
-    }
-    /**
-     * @internal
-     */
-    defaultCheckedChanged() {
-      this.dirtyChecked || (this.checked = this.defaultChecked, this.dirtyChecked = !1);
-    }
-    /**
-     * @internal
-     */
-    checkedChanged(e, t) {
-      this.dirtyChecked || (this.dirtyChecked = !0), this.updateForm(), this.proxy instanceof HTMLInputElement && (this.proxy.checked = this.checked), e !== void 0 && this.$emit("change"), this.validate();
-    }
-    /**
-     * @internal
-     * @deprecated Use `defaultChecked` instead.
-     */
-    get checkedAttribute() {
-      return this.defaultChecked;
-    }
-    set checkedAttribute(e) {
-      this.defaultChecked = e;
-    }
-    /**
-     * @internal
-     * @deprecated Use `checked` instead.
-     */
-    get currentChecked() {
-      return this.checked;
-    }
-    set currentChecked(e) {
-      this.checked = e;
-    }
-    /**
-     * @internal
-     */
-    updateForm() {
-      const e = this.checked ? this.value : null;
-      this.setFormValue(e, e);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback(), this.updateForm();
-    }
-    /**
-     * @internal
-     */
-    formResetCallback() {
-      super.formResetCallback(), this.checked = !!this.defaultChecked, this.dirtyChecked = !1;
-    }
-  }
-  return l([
-    a({
-      attribute: "checked",
-      mode: "boolean"
-    })
-  ], i.prototype, "defaultChecked"), l([
-    a({ attribute: "current-checked", converter: x })
-  ], i.prototype, "checked"), i;
-};
-export {
-  V as C,
-  k as F
+import { A as e, O as t, l as n } from "./vivid-element.js";
+import { t as r } from "./decorate.js";
+import { a as i } from "./key-codes.js";
+//#region src/shared/foundation/form-associated/form-associated.ts
+var a = "form-associated-proxy", o = "ElementInternals", s = o in window && "setFormValue" in window[o].prototype, c = /* @__PURE__ */ new WeakMap(), l = (o) => {
+	class l extends o {
+		static get formAssociated() {
+			return s;
+		}
+		get validity() {
+			return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+		}
+		get form() {
+			return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+		}
+		get validationMessage() {
+			return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+		}
+		get willValidate() {
+			return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+		}
+		get labels() {
+			if (this.elementInternals) return Object.freeze(Array.from(this.elementInternals.labels));
+			if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
+				let e = this.proxy.labels, t = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+				return Object.freeze(t.concat(Array.from(e)));
+			} else return e;
+		}
+		valueChanged(e, t) {
+			this.dirtyValue = !0, this.proxy instanceof HTMLElement && (this.proxy.value = this.value), this.setFormValue(this.value), this.validate();
+		}
+		get currentValue() {
+			return this.value;
+		}
+		set currentValue(e) {
+			this.value = e;
+		}
+		initialValueChanged(e, t) {
+			this.dirtyValue ||= (this.value = this.initialValue, !1);
+		}
+		disabledChanged(e, n) {
+			this.proxy instanceof HTMLElement && (this.proxy.disabled = this.disabled), t.enqueue(() => this.classList.toggle("disabled", this.disabled));
+		}
+		nameChanged(e, t) {
+			/* v8 ignore if -- @preserve */
+			this.proxy instanceof HTMLElement && (this.proxy.name = this.name);
+		}
+		requiredChanged(e, n) {
+			this.proxy instanceof HTMLElement && (this.proxy.required = this.required), t.enqueue(() => this.classList.toggle("required", this.required)), this.validate();
+		}
+		get elementInternals() {
+			if (!s) return null;
+			let e = c.get(this);
+			return e || (e = this.attachInternals(), c.set(this, e)), e;
+		}
+		constructor(...e) {
+			super(...e), this.dirtyValue = !1, this.disabled = !1, this.proxyEventsToBlock = ["change", "click"], this.proxyInitialized = !1, this.required = !1, this.initialValue = this.initialValue || "", this.elementInternals || (this.formResetCallback = this.formResetCallback.bind(this));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.addEventListener("keypress", this._keypressHandler), this.value || (this.value = this.initialValue, this.dirtyValue = !1), this.elementInternals || (this.attachProxy(), this.form && this.form.addEventListener("reset", this.formResetCallback));
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.proxyEventsToBlock.forEach((e) => this.proxy.removeEventListener(e, this.stopPropagation)), !this.elementInternals && this.form && this.form.removeEventListener("reset", this.formResetCallback);
+		}
+		checkValidity() {
+			return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
+		}
+		reportValidity() {
+			return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
+		}
+		setValidity(e, t, n) {
+			if ("valid" in e && this.disabled) {
+				let { valid: t, ...n } = e;
+				e = n;
+			}
+			/* v8 ignore else -- @preserve */
+			this.elementInternals ? this.elementInternals.setValidity(e, t, n) : typeof t == "string" && this.proxy.setCustomValidity(t);
+		}
+		formDisabledCallback(e) {
+			this.disabled = e;
+		}
+		formResetCallback() {
+			this.value = this.initialValue, this.dirtyValue = !1;
+		}
+		attachProxy() {
+			this.proxyInitialized || (this.proxyInitialized = !0, this.proxy.style.display = "none", this.proxyEventsToBlock.forEach((e) => this.proxy.addEventListener(e, this.stopPropagation)), this.proxy.disabled = this.disabled, this.proxy.required = this.required, typeof this.name == "string" && (this.proxy.name = this.name), typeof this.value == "string" && (this.proxy.value = this.value), this.proxy.setAttribute("slot", a), this.proxySlot = document.createElement("slot"), this.proxySlot.setAttribute("name", a)), this.shadowRoot.appendChild(this.proxySlot), this.appendChild(this.proxy);
+		}
+		detachProxy() {
+			this.removeChild(this.proxy), this.shadowRoot.removeChild(this.proxySlot);
+		}
+		validate(e) {
+			if (this.proxy instanceof HTMLElement && this.elementInternals) {
+				let t = this.proxy.validity.valid, n = this.control, r = n && n.validity && !n.validity.valid && (n.validity.tooShort || n.validity.tooLong);
+				t && r ? this.setValidity(n.validity, n.validationMessage, e) : this.setValidity(this.proxy.validity, this.proxy.validationMessage, e);
+			}
+		}
+		setFormValue(e, t) {
+			this.elementInternals && this.elementInternals.setFormValue(e, t || e);
+		}
+		_keypressHandler(e) {
+			switch (e.key) {
+				case i:
+					this.form instanceof HTMLFormElement && this.form.querySelector("[type=submit]")?.click();
+					break;
+			}
+		}
+		stopPropagation(e) {
+			e.stopPropagation();
+		}
+	}
+	return r([n({ attribute: "current-value" })], l.prototype, "value", void 0), r([n({
+		mode: "fromView",
+		attribute: "value"
+	})], l.prototype, "initialValue", void 0), r([n({ mode: "boolean" })], l.prototype, "disabled", void 0), r([n], l.prototype, "name", void 0), r([n({ mode: "boolean" })], l.prototype, "required", void 0), l;
+}, u = {
+	fromView(e) {
+		return typeof e == "string" ? e.toLowerCase() === "true" : !!e;
+	},
+	toView(e) {
+		return e ? "true" : "false";
+	}
+}, d = (e) => {
+	class t extends l(e) {
+		constructor(...e) {
+			super(...e), this.dirtyChecked = !1, this.defaultChecked = !1;
+		}
+		defaultCheckedChanged() {
+			/* v8 ignore else -- @preserve */
+			this.dirtyChecked ||= (this.checked = this.defaultChecked, !1);
+		}
+		checkedChanged(e, t) {
+			this.dirtyChecked ||= !0, this.updateForm(), this.proxy instanceof HTMLInputElement && (this.proxy.checked = this.checked), e !== void 0 && this.$emit("change"), this.validate();
+		}
+		get checkedAttribute() {
+			return this.defaultChecked;
+		}
+		set checkedAttribute(e) {
+			this.defaultChecked = e;
+		}
+		get currentChecked() {
+			return this.checked;
+		}
+		set currentChecked(e) {
+			this.checked = e;
+		}
+		updateForm() {
+			let e = this.checked ? this.value : null;
+			this.setFormValue(e, e);
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.updateForm();
+		}
+		formResetCallback() {
+			super.formResetCallback(), this.checked = !!this.defaultChecked, this.dirtyChecked = !1;
+		}
+	}
+	return r([n({
+		attribute: "checked",
+		mode: "boolean"
+	})], t.prototype, "defaultChecked", void 0), r([n({
+		attribute: "current-checked",
+		converter: u
+	})], t.prototype, "checked", void 0), t;
 };
+//#endregion
+export { l as n, d as t };

package/bundled/form-element.cjs

@@ -1 +1 @@
-"use strict";const n=require("./vivid-element.cjs");var d=Object.defineProperty,o=(s,e,i,r)=>{for(var t=void 0,a=s.length-1,l;a>=0;a--)(l=s[a])&&(t=l(e,i,t)||t);return t&&d(e,i,t),t};const h=s=>{class e extends s{constructor(...r){super(...r),this.errorValidationMessage="",this.forceErrorDisplay=!1,this.hasBeenTouched=!1,this.#e=()=>{this.forceErrorDisplay=!0,this.validate()},this.addEventListener("blur",()=>{this.hasBeenTouched=!0,this.forceErrorDisplay=!1,this.validate()}),this.addEventListener("focus",()=>{this.hasBeenTouched=!1}),this.addEventListener("invalid",()=>{this.proxy.dispatchEvent(new Event("invalid"))})}connectedCallback(){super.connectedCallback(),this.proxy.addEventListener("invalid",this.#e)}#e;disconnectedCallback(){super.disconnectedCallback(),this.proxy.removeEventListener("invalid",this.#e)}formResetCallback(){this.forceErrorDisplay=!1,super.formResetCallback(),this.validate()}validate(){super.validate();const r=this.forceErrorDisplay||this.hasBeenTouched&&this.dirtyValue;this.errorValidationMessage=r?this.validationMessage:""}}return o([n.attr],e.prototype,"label"),o([n.observable],e.prototype,"errorValidationMessage"),e};exports.FormElement=h;
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`);var n=n=>{class r extends n{constructor(...e){super(...e),this.errorValidationMessage=``,this.forceErrorDisplay=!1,this.hasBeenTouched=!1,this.addEventListener(`blur`,()=>{this.hasBeenTouched=!0,this.forceErrorDisplay=!1,this.validate()}),this.addEventListener(`focus`,()=>{this.hasBeenTouched=!1}),this.addEventListener(`invalid`,()=>{this.proxy.dispatchEvent(new Event(`invalid`))})}connectedCallback(){super.connectedCallback(),this.proxy.addEventListener(`invalid`,this.#e)}#e=()=>{this.forceErrorDisplay=!0,this.validate()};disconnectedCallback(){super.disconnectedCallback(),this.proxy.removeEventListener(`invalid`,this.#e)}formResetCallback(){this.forceErrorDisplay=!1,super.formResetCallback(),this.validate()}validate(){super.validate(),this.errorValidationMessage=this.forceErrorDisplay||this.hasBeenTouched&&this.dirtyValue?this.validationMessage:``}}return t.t([e.l],r.prototype,`label`,void 0),t.t([e.T],r.prototype,`errorValidationMessage`,void 0),r};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});

package/bundled/form-element.js

@@ -1,56 +1,34 @@
-import { a as n, o as d } from "./vivid-element.js";
-var h = Object.defineProperty, l = (s, e, r, a) => {
-  for (var t = void 0, i = s.length - 1, o; i >= 0; i--)
-    (o = s[i]) && (t = o(e, r, t) || t);
-  return t && h(e, r, t), t;
-};
-const v = (s) => {
-  class e extends s {
-    constructor(...a) {
-      super(...a), this.errorValidationMessage = "", this.forceErrorDisplay = !1, this.hasBeenTouched = !1, this.#e = () => {
-        this.forceErrorDisplay = !0, this.validate();
-      }, this.addEventListener("blur", () => {
-        this.hasBeenTouched = !0, this.forceErrorDisplay = !1, this.validate();
-      }), this.addEventListener("focus", () => {
-        this.hasBeenTouched = !1;
-      }), this.addEventListener("invalid", () => {
-        this.proxy.dispatchEvent(new Event("invalid"));
-      });
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback(), this.proxy.addEventListener("invalid", this.#e);
-    }
-    #e;
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.proxy.removeEventListener("invalid", this.#e);
-    }
-    /**
-     * @internal
-     */
-    formResetCallback() {
-      this.forceErrorDisplay = !1, super.formResetCallback(), this.validate();
-    }
-    /**
-     * @internal
-     */
-    validate() {
-      super.validate();
-      const a = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;
-      this.errorValidationMessage = a ? this.validationMessage : "";
-    }
-  }
-  return l([
-    n
-  ], e.prototype, "label"), l([
-    d
-  ], e.prototype, "errorValidationMessage"), e;
-};
-export {
-  v as F
+import { T as e, l as t } from "./vivid-element.js";
+import { t as n } from "./decorate.js";
+//#region src/shared/patterns/form-elements/form-element.ts
+var r = (r) => {
+	class i extends r {
+		constructor(...e) {
+			super(...e), this.errorValidationMessage = "", this.forceErrorDisplay = !1, this.hasBeenTouched = !1, this.addEventListener("blur", () => {
+				this.hasBeenTouched = !0, this.forceErrorDisplay = !1, this.validate();
+			}), this.addEventListener("focus", () => {
+				this.hasBeenTouched = !1;
+			}), this.addEventListener("invalid", () => {
+				this.proxy.dispatchEvent(new Event("invalid"));
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.proxy.addEventListener("invalid", this.#e);
+		}
+		#e = () => {
+			this.forceErrorDisplay = !0, this.validate();
+		};
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.proxy.removeEventListener("invalid", this.#e);
+		}
+		formResetCallback() {
+			this.forceErrorDisplay = !1, super.formResetCallback(), this.validate();
+		}
+		validate() {
+			super.validate(), this.errorValidationMessage = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue ? this.validationMessage : "";
+		}
+	}
+	return n([t], i.prototype, "label", void 0), n([e], i.prototype, "errorValidationMessage", void 0), i;
 };
+//#endregion
+export { r as t };

package/bundled/host-semantics.cjs

@@ -1 +1 @@
-"use strict";const s=require("./vivid-element.cjs"),d=require("./attribute-binding-behaviour.cjs");class h{constructor(t,e){this.target=null,this.bindingBehaviours=[],this.target=t,this.boundProperties=e.boundProperties}bind(t){const e=t.source;if(this.target!==e)throw new Error("Target element must be the same as the source element");this.bindPropertiesToTarget(e,this.boundProperties,this.target)}bindPropertiesToTarget(t,e,o){for(const[i,n]of Object.entries(e)){const c=n instanceof Function?n:u=>u[i]??n;this.bindingBehaviours.push(new d.AttributeBindingBehavior(o,s.oneWay(c),!0,s.ariaAttributeName(i)))}for(const i of this.bindingBehaviours)i.bind({source:t,context:t.$fastController.context})}}class a extends s.StatelessAttachedAttributeDirective{constructor(t){super("vvd-host-semantics"),this.boundProperties=t,this.targetNodeId=""}bind(t){const e=t.targets[this.targetNodeId];new h(e,{boundProperties:this.boundProperties,forwardedProperties:new Set(s.ariaMixinProperties.filter(i=>!(i in this.boundProperties)))}).bind(t)}}s.HTMLDirective.define(a);function b(r={}){return new a(r)}const p=r=>{class t extends r{constructor(){super(...arguments),this._vividAriaBehaviour="host"}}return t};exports.HostSemantics=p;exports.applyHostSemantics=b;
+const e=require(`./vivid-element.cjs`),t=require(`./attribute-binding-behaviour.cjs`);var n=class{constructor(e,t){this.target=null,this.bindingBehaviours=[],this.target=e,this.boundProperties=t.boundProperties}bind(e){let t=e.source;if(this.target!==t)throw Error(`Target element must be the same as the source element`);this.bindPropertiesToTarget(t,this.boundProperties,this.target)}bindPropertiesToTarget(n,r,i){for(let[n,a]of Object.entries(r)){let r=a instanceof Function?a:e=>e[n]??a;this.bindingBehaviours.push(new t.t(i,e.x(r),!0,e.r(n)))}for(let e of this.bindingBehaviours)e.bind({source:n,context:n.$fastController.context})}},r=class extends e.h{constructor(e){super(`vvd-host-semantics`),this.boundProperties=e,this.targetNodeId=``}bind(t){let r=t.targets[this.targetNodeId];new n(r,{boundProperties:this.boundProperties,forwardedProperties:new Set(e.i.filter(e=>!(e in this.boundProperties)))}).bind(t)}};e.m.define(r);function i(e={}){return new r(e)}var a=e=>{class t extends e{constructor(...e){super(...e),this._vividAriaBehaviour=`host`}}return t};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});