@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/cre8-element.js

@@ -1,58 +1,59 @@
-import l from "classnames";
-import { LitElement as m, html as i } from "lit";
-class c extends m {
-  /**
-   * Abstraction of `classnames` that automatically includes any style modifier
-   * as well as any set variants.
-   *
-   * It is expected that `variant` would be overridden in a subclass with more
-   * specific types, `@property() variant?: 'foo' | 'bar'`
-   *
-   * @param baseClassName
+import classnames from 'classnames';
+import { html, LitElement } from 'lit';
+/**
+ * A base element.
+ */
+export class Cre8Element extends LitElement {
+    /**
+     * Abstraction of `classnames` that automatically includes any style modifier
+     * as well as any set variants.
+     *
+     * It is expected that `variant` would be overridden in a subclass with more
+     * specific types, `@property() variant?: 'foo' | 'bar'`
+     *
+     * @param baseClassName
+     */
+    componentClassNames(baseClassName, additionalClassNames = {}) {
+        return classnames(baseClassName, additionalClassNames);
+    }
+    /**
+     * Check if a slot is empty
+     *
+     * @param slotName
+     */
+    slotEmpty(slotName) {
+        return !this.querySelector(`[slot="${slotName}"]`);
+    }
+    /**
+     * Check if a slot is not empty
+     *
+     * @param slotName
+     */
+    slotNotEmpty(slotName) {
+        if (!this.slotEmpty(slotName) !== false) {
+            return !this.slotEmpty(slotName);
+        }
+        return null;
+    }
+    /**
+   * Dispatch a custom event.
    */
-  componentClassNames(t, e = {}) {
-    return l(t, e);
-  }
-  /**
-   * Check if a slot is empty
-   *
-   * @param slotName
-   */
-  slotEmpty(t) {
-    return !this.querySelector(`[slot="${t}"]`);
-  }
-  /**
-   * Check if a slot is not empty
-   *
-   * @param slotName
-   */
-  slotNotEmpty(t) {
-    return this.slotEmpty(t) ? null : !this.slotEmpty(t);
-  }
-  /**
-  * Dispatch a custom event.
-  */
-  dispatch({
-    e: t,
-    eventName: e,
-    detailObj: r = {},
-    optionsObj: n = {}
-  }) {
-    const o = {
-      bubbles: !0,
-      composed: !0,
-      ...n,
-      detail: { ...t && { originalEvent: t }, ...r }
-    }, s = new CustomEvent(e, o);
-    return this.dispatchEvent(s), s;
-  }
-  /**
-   * Example render, should not be used
-   */
-  render() {
-    return i`<slot></slot>`;
-  }
+    dispatch({ e, eventName, detailObj = {}, optionsObj = {}, }) {
+        const options = {
+            bubbles: true,
+            composed: true,
+            ...optionsObj,
+            detail: { ...(e && { originalEvent: e }), ...detailObj },
+        };
+        const event = new CustomEvent(eventName, options);
+        this.dispatchEvent(event);
+        return event;
+    }
+    /**
+     * Example render, should not be used
+     */
+    render() {
+        return html `<slot></slot>`;
+    }
 }
-export {
-  c as Cre8Element
-};
+//# sourceMappingURL=cre8-element.js.map

package/lib/components/cre8-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cre8-element.js","sourceRoot":"","sources":["../../components/cre8-element.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAoBvC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,UAAU;IACzC;;;;;;;;OAQG;IACD,mBAAmB,CAAC,aAAqB,EAAE,oBAAoB,GAAG,EAAE;QAChE,OAAO,UAAU,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAEH;;;;OAIG;IACD,SAAS,CAAC,QAAgB;QACtB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;IACvD,CAAC;IAEH;;;;OAIG;IACD,YAAY,CAAC,QAAgB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,KAAK,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;KAEC;IACD,QAAQ,CAAC,EACL,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,GAC7B;QAChB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,GAAG,UAAU;YACb,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE;SAC3D,CAAC;QACF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACjB,CAAC;IAEH;;OAEG;IACD,MAAM;QACF,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;CACJ","sourcesContent":["import classnames from 'classnames';\nimport { html, LitElement } from 'lit';\n\nexport interface DetailObj {\n  [key: string]: unknown;\n}\n\nexport interface Cre8DispatchProps {\n  e?: Event;\n  eventName: string;\n  detailObj?: DetailObj;\n  optionsObj?: { [key: string]: unknown };\n}\n\nexport interface Cre8Event extends Event {\n  detail: {\n    originalEvent: Event;\n    detailObj: DetailObj;\n  };\n}\n\n/**\n * A base element.\n */\nexport class Cre8Element extends LitElement {\n  /**\n   * Abstraction of `classnames` that automatically includes any style modifier\n   * as well as any set variants.\n   *\n   * It is expected that `variant` would be overridden in a subclass with more\n   * specific types, `@property() variant?: 'foo' | 'bar'`\n   *\n   * @param baseClassName\n   */\n    componentClassNames(baseClassName: string, additionalClassNames = {}) {\n        return classnames(baseClassName, additionalClassNames);\n    }\n\n  /**\n   * Check if a slot is empty\n   *\n   * @param slotName\n   */\n    slotEmpty(slotName: string) {\n        return !this.querySelector(`[slot=\"${slotName}\"]`);\n    }\n\n  /**\n   * Check if a slot is not empty\n   *\n   * @param slotName\n   */\n    slotNotEmpty(slotName: string) {\n        if (!this.slotEmpty(slotName) !== false) {\n            return !this.slotEmpty(slotName);\n        }\n        return null;\n    }\n\n    /**\n   * Dispatch a custom event.\n   */\n    dispatch({\n        e, eventName, detailObj = {}, optionsObj = {},\n    }: Cre8DispatchProps): CustomEvent {\n        const options = {\n            bubbles: true,\n            composed: true,\n            ...optionsObj,\n            detail: { ...(e && { originalEvent: e }), ...detailObj },\n        };\n        const event = new CustomEvent(eventName, options);\n        this.dispatchEvent(event);\n        return event;\n    }\n\n  /**\n   * Example render, should not be used\n   */\n    render() {\n        return html`<slot></slot>`;\n    }\n}\n"]}

package/lib/components/cre8-form-element.js

@@ -1,246 +1,214 @@
-import { property as h } from "lit/decorators.js";
-import { Cre8Element as f } from "./cre8-element.js";
-let b = class extends Event {
-  constructor(t, s, i, e) {
-    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = i, this.subscribe = e ?? !1;
-  }
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class v {
-  get value() {
-    return this.o;
-  }
-  set value(t) {
-    this.setValue(t);
-  }
-  setValue(t, s = !1) {
-    const i = s || !Object.is(t, this.o);
-    this.o = t, i && this.updateObservers();
-  }
-  constructor(t) {
-    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
-      for (const [s, { disposer: i }] of this.subscriptions) s(this.o, i);
-    }, t !== void 0 && (this.value = t);
-  }
-  addCallback(t, s, i) {
-    if (!i) return void t(this.value);
-    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
-      this.subscriptions.delete(t);
-    }, consumerHost: s });
-    const { disposer: e } = this.subscriptions.get(t);
-    t(this.value, e);
-  }
-  clearCallbacks() {
-    this.subscriptions.clear();
-  }
-}
-let x = class extends Event {
-  constructor(t, s) {
-    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
-  }
-};
-class d extends v {
-  constructor(t, s, i) {
-    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (e) => {
-      if (e.context !== this.context) return;
-      const a = e.contextTarget ?? e.composedPath()[0];
-      a !== this.host && (e.stopPropagation(), this.addCallback(e.callback, a, e.subscribe));
-    }, this.onProviderRequest = (e) => {
-      if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
-      const a = /* @__PURE__ */ new Set();
-      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new b(this.context, l, r, !0)));
-      e.stopPropagation();
-    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController?.(this);
-  }
-  attachListeners() {
-    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
-  }
-  hostConnected() {
-    this.host.dispatchEvent(new x(this.context, this.host));
-  }
-}
-function p({ context: n }) {
-  return (t, s) => {
-    const i = /* @__PURE__ */ new WeakMap();
-    if (typeof s == "object") return { get() {
-      return t.get.call(this);
-    }, set(e) {
-      return i.get(this).setValue(e), t.set.call(this, e);
-    }, init(e) {
-      return i.set(this, new d(this, { context: n, initialValue: e })), e;
-    } };
-    {
-      t.constructor.addInitializer(((r) => {
-        i.set(r, new d(r, { context: n }));
-      }));
-      const e = Object.getOwnPropertyDescriptor(t, s);
-      let a;
-      if (e === void 0) {
-        const r = /* @__PURE__ */ new WeakMap();
-        a = { get() {
-          return r.get(this);
-        }, set(l) {
-          i.get(this).setValue(l), r.set(this, l);
-        }, configurable: !0, enumerable: !0 };
-      } else {
-        const r = e.set;
-        a = { ...e, set(l) {
-          i.get(this).setValue(l), r?.call(this, l);
-        } };
-      }
-      return void Object.defineProperty(t, s, a);
-    }
-  };
+import { property } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { Cre8Element } from './cre8-element';
+import { formInternalsContext, formStateContext } from './contexts/form-internals-context';
+/**
+ * Base class for form-associated custom elements.
+ * Provides ElementInternals context to descendant components.
+ */
+export class Cre8FormElement extends Cre8Element {
+    /**
+     * The value of the form field.
+     */
+    get value() {
+        return this.internalValue;
+    }
+    /**
+     * Sets the value of the form field.
+     * 1. Stores the new value so it can be retrieved by the getter.
+     * 2. Sets the current value of the control via ElementInternals.
+     * 3. Updates the actual field element.
+     * 4. Updates the form state context.
+     * 5. Triggers a re-render.
+     */
+    set value(newValue) {
+        const oldValue = this.value;
+        this.internalValue = newValue;
+        // Update form value for non-checkbox/radio types
+        if (this.type !== 'checkbox' && this.type !== 'radio') {
+            this._internals?.setFormValue(newValue);
+        }
+        this.updateField();
+        this.updateFormState();
+        this.requestUpdate('value', oldValue);
+    }
+    /**
+     * Updates the form state context for descendant consumption
+     */
+    updateFormState() {
+        this._formState = {
+            value: this.internalValue,
+            disabled: this.disabled ?? false,
+            required: this.required ?? false,
+            isError: this.isError ?? false,
+            isSuccess: this.isSuccess ?? false,
+            name: this.name,
+        };
+    }
+    /**
+     * Updates the actual field element's value
+     */
+    updateField() {
+        if (this.field && this.internalValue !== undefined) {
+            this.field.value = this.internalValue ?? '';
+        }
+    }
+    /**
+     * Lifecycle hook called after first render
+     */
+    firstUpdated() {
+        if (this.type !== 'checkbox' && this.type !== 'radio') {
+            this.defaultValue = this.value || this.getAttribute('value') || '';
+        }
+        this.updateField();
+        this.updateFormState();
+    }
+    /**
+     * Called when properties change
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update form state context when relevant properties change
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('isError') ||
+            changedProperties.has('isSuccess') ||
+            changedProperties.has('name')) {
+            this.updateFormState();
+        }
+    }
+    /**
+     * Form lifecycle callback - called when the form is reset
+     */
+    formResetCallback() {
+        this.value = this.defaultValue;
+        this.updateField();
+    }
+    /**
+     * Form lifecycle callback - called when the element is disabled via fieldset
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form lifecycle callback - called when form state is restored
+     */
+    formStateRestoreCallback(state, _mode) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+    }
+    /**
+     * Gets the form associated with this element
+     */
+    get form() {
+        return this._internals?.form ?? null;
+    }
+    /**
+     * Gets the validation message
+     */
+    get validationMessage() {
+        return this._internals?.validationMessage ?? '';
+    }
+    /**
+     * Gets the validity state
+     */
+    get validity() {
+        return this._internals?.validity;
+    }
+    /**
+     * Gets whether the element will be validated
+     */
+    get willValidate() {
+        return this._internals?.willValidate ?? false;
+    }
+    /**
+     * Checks validity and reports to the user
+     */
+    reportValidity() {
+        return this._internals?.reportValidity() ?? true;
+    }
+    /**
+     * Checks validity without reporting
+     */
+    checkValidity() {
+        return this._internals?.checkValidity() ?? true;
+    }
+    /**
+     * Sets a custom validity message
+     */
+    setCustomValidity(message) {
+        if (this._internals && this.field) {
+            if (message) {
+                this._internals.setValidity({ customError: true }, message, this.field);
+            }
+            else {
+                this._internals.setValidity({});
+            }
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * @protected
+         * @internal
+         * Stores the value for the `value` getter and setter.
+         */
+        this.internalValue = '';
+        /**
+         * @internal
+         * Stores the initial value for form reset functionality
+         */
+        this.defaultValue = '';
+        /**
+         * Provides form element state to descendants via context.
+         * Useful for nested components that need to react to form state.
+         */
+        this._formState = {
+            value: '',
+            disabled: false,
+            required: false,
+            isError: false,
+            isSuccess: false,
+        };
+        this._internals = this.attachInternals();
+    }
 }
-const m = Symbol("cre8-form-internals"), y = Symbol("cre8-form-state");
-var V = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (n, t, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? _(t, s) : t, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
-  return i && e && V(t, s, e), e;
-};
-const c = class c extends f {
-  constructor() {
-    super(), this.internalValue = "", this.defaultValue = "", this._formState = {
-      value: "",
-      disabled: !1,
-      required: !1,
-      isError: !1,
-      isSuccess: !1
-    }, this._internals = this.attachInternals();
-  }
-  get value() {
-    return this.internalValue;
-  }
-  /**
-   * Sets the value of the form field.
-   * 1. Stores the new value so it can be retrieved by the getter.
-   * 2. Sets the current value of the control via ElementInternals.
-   * 3. Updates the actual field element.
-   * 4. Updates the form state context.
-   * 5. Triggers a re-render.
-   */
-  set value(t) {
-    const s = this.value;
-    this.internalValue = t, this.type !== "checkbox" && this.type !== "radio" && this._internals?.setFormValue(t), this.updateField(), this.updateFormState(), this.requestUpdate("value", s);
-  }
-  /**
-   * Updates the form state context for descendant consumption
-   */
-  updateFormState() {
-    this._formState = {
-      value: this.internalValue,
-      disabled: this.disabled ?? !1,
-      required: this.required ?? !1,
-      isError: this.isError ?? !1,
-      isSuccess: this.isSuccess ?? !1,
-      name: this.name
-    };
-  }
-  /**
-   * Updates the actual field element's value
-   */
-  updateField() {
-    this.field && this.internalValue !== void 0 && (this.field.value = this.internalValue ?? "");
-  }
-  /**
-   * Lifecycle hook called after first render
-   */
-  firstUpdated() {
-    this.type !== "checkbox" && this.type !== "radio" && (this.defaultValue = this.value || this.getAttribute("value") || ""), this.updateField(), this.updateFormState();
-  }
-  /**
-   * Called when properties change
-   */
-  updated(t) {
-    super.updated(t), (t.has("disabled") || t.has("required") || t.has("isError") || t.has("isSuccess") || t.has("name")) && this.updateFormState();
-  }
-  /**
-   * Form lifecycle callback - called when the form is reset
-   */
-  formResetCallback() {
-    this.value = this.defaultValue, this.updateField();
-  }
-  /**
-   * Form lifecycle callback - called when the element is disabled via fieldset
-   */
-  formDisabledCallback(t) {
-    this.disabled = t;
-  }
-  /**
-   * Form lifecycle callback - called when form state is restored
-   */
-  formStateRestoreCallback(t, s) {
-    typeof t == "string" && (this.value = t);
-  }
-  /**
-   * Gets the form associated with this element
-   */
-  get form() {
-    return this._internals?.form ?? null;
-  }
-  /**
-   * Gets the validation message
-   */
-  get validationMessage() {
-    return this._internals?.validationMessage ?? "";
-  }
-  /**
-   * Gets the validity state
-   */
-  get validity() {
-    return this._internals?.validity;
-  }
-  /**
-   * Gets whether the element will be validated
-   */
-  get willValidate() {
-    return this._internals?.willValidate ?? !1;
-  }
-  /**
-   * Checks validity and reports to the user
-   */
-  reportValidity() {
-    return this._internals?.reportValidity() ?? !0;
-  }
-  /**
-   * Checks validity without reporting
-   */
-  checkValidity() {
-    return this._internals?.checkValidity() ?? !0;
-  }
-  /**
-   * Sets a custom validity message
-   */
-  setCustomValidity(t) {
-    this._internals && this.field && (t ? this._internals.setValidity({ customError: !0 }, t, this.field) : this._internals.setValidity({}));
-  }
-};
-c.formAssociated = !0;
-let o = c;
-u([
-  p({ context: m })
-], o.prototype, "_internals", 2);
-u([
-  p({ context: y })
-], o.prototype, "_formState", 2);
-u([
-  h()
-], o.prototype, "name", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "isError", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "isSuccess", 2);
-u([
-  h()
-], o.prototype, "value", 1);
-export {
-  o as Cre8FormElement,
-  o as default
-};
+/**
+ * @internal
+ * Tells the browser to treat the element like a form field.
+ * Ties the element to the HTML form it is in.
+ */
+Cre8FormElement.formAssociated = true;
+__decorate([
+    provide({ context: formInternalsContext })
+], Cre8FormElement.prototype, "_internals", void 0);
+__decorate([
+    provide({ context: formStateContext })
+], Cre8FormElement.prototype, "_formState", void 0);
+__decorate([
+    property()
+], Cre8FormElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8FormElement.prototype, "value", null);
+export default Cre8FormElement;
+//# sourceMappingURL=cre8-form-element.js.map

package/lib/components/cre8-form-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cre8-form-element.js","sourceRoot":"","sources":["../../components/cre8-form-element.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { provide } from '@lit/context';\nimport { Cre8Element } from './cre8-element';\nimport {\n    formInternalsContext,\n    formStateContext,\n    type Cre8ElementInternals,\n    type FormElementState\n} from './contexts/form-internals-context';\n\nexport { type Cre8ElementInternals, type FormElementState } from './contexts/form-internals-context';\n\n/**\n * Base class for form-associated custom elements.\n * Provides ElementInternals context to descendant components.\n */\nexport abstract class Cre8FormElement extends Cre8Element {\n    /**\n     * @internal\n     * Tells the browser to treat the element like a form field.\n     * Ties the element to the HTML form it is in.\n     */\n    static formAssociated = true;\n\n    /**\n     * The type of form control (text, checkbox, radio, etc.)\n     */\n    abstract type: string;\n\n    /**\n     * @protected\n     * @internal\n     * Stores the value for the `value` getter and setter.\n     */\n    protected internalValue: string = '';\n\n    /**\n     * The underlying HTML form field element.\n     * Should be implemented with `@query` in extending classes.\n     */\n    protected field?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;\n\n    /**\n     * @internal\n     * Stores the initial value for form reset functionality\n     */\n    protected defaultValue: string | boolean = '';\n\n    /**\n     * Provides ElementInternals to descendant components via context.\n     * Descendants can consume this to access form participation APIs.\n     */\n    @provide({ context: formInternalsContext })\n    _internals: Cre8ElementInternals;\n\n    /**\n     * Provides form element state to descendants via context.\n     * Useful for nested components that need to react to form state.\n     */\n    @provide({ context: formStateContext })\n    _formState: FormElementState = {\n        value: '',\n        disabled: false,\n        required: false,\n        isError: false,\n        isSuccess: false,\n    };\n\n    /**\n     * The name of the form field\n     */\n    @property()\n    name?: string;\n\n    /**\n     * Whether the field is disabled\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Whether the field is required\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Whether the field is in an error state\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Whether the field is in a success state\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * The value of the form field.\n     */\n    @property()\n    get value(): string {\n        return this.internalValue;\n    }\n\n    /**\n     * Sets the value of the form field.\n     * 1. Stores the new value so it can be retrieved by the getter.\n     * 2. Sets the current value of the control via ElementInternals.\n     * 3. Updates the actual field element.\n     * 4. Updates the form state context.\n     * 5. Triggers a re-render.\n     */\n    set value(newValue: string) {\n        const oldValue = this.value;\n        this.internalValue = newValue;\n\n        // Update form value for non-checkbox/radio types\n        if (this.type !== 'checkbox' && this.type !== 'radio') {\n            this._internals?.setFormValue(newValue);\n        }\n\n        this.updateField();\n        this.updateFormState();\n        this.requestUpdate('value', oldValue);\n    }\n\n    /**\n     * Updates the form state context for descendant consumption\n     */\n    protected updateFormState(): void {\n        this._formState = {\n            value: this.internalValue,\n            disabled: this.disabled ?? false,\n            required: this.required ?? false,\n            isError: this.isError ?? false,\n            isSuccess: this.isSuccess ?? false,\n            name: this.name,\n        };\n    }\n\n    /**\n     * Updates the actual field element's value\n     */\n    protected updateField(): void {\n        if (this.field && this.internalValue !== undefined) {\n            this.field.value = this.internalValue ?? '';\n        }\n    }\n\n    /**\n     * Lifecycle hook called after first render\n     */\n    protected firstUpdated(): void {\n        if (this.type !== 'checkbox' && this.type !== 'radio') {\n            this.defaultValue = this.value || this.getAttribute('value') || '';\n        }\n        this.updateField();\n        this.updateFormState();\n    }\n\n    /**\n     * Called when properties change\n     */\n    protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n        super.updated(changedProperties);\n\n        // Update form state context when relevant properties change\n        if (\n            changedProperties.has('disabled') ||\n            changedProperties.has('required') ||\n            changedProperties.has('isError') ||\n            changedProperties.has('isSuccess') ||\n            changedProperties.has('name')\n        ) {\n            this.updateFormState();\n        }\n    }\n\n    /**\n     * Form lifecycle callback - called when the form is reset\n     */\n    formResetCallback(): void {\n        this.value = this.defaultValue as string;\n        this.updateField();\n    }\n\n    /**\n     * Form lifecycle callback - called when the element is disabled via fieldset\n     */\n    formDisabledCallback(disabled: boolean): void {\n        this.disabled = disabled;\n    }\n\n    /**\n     * Form lifecycle callback - called when form state is restored\n     */\n    formStateRestoreCallback(state: string | FormData | null, _mode: 'restore' | 'autocomplete'): void {\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    /**\n     * Gets the form associated with this element\n     */\n    get form(): HTMLFormElement | null {\n        return this._internals?.form ?? null;\n    }\n\n    /**\n     * Gets the validation message\n     */\n    get validationMessage(): string {\n        return this._internals?.validationMessage ?? '';\n    }\n\n    /**\n     * Gets the validity state\n     */\n    get validity(): ValidityState | undefined {\n        return this._internals?.validity;\n    }\n\n    /**\n     * Gets whether the element will be validated\n     */\n    get willValidate(): boolean {\n        return this._internals?.willValidate ?? false;\n    }\n\n    /**\n     * Checks validity and reports to the user\n     */\n    reportValidity(): boolean {\n        return this._internals?.reportValidity() ?? true;\n    }\n\n    /**\n     * Checks validity without reporting\n     */\n    checkValidity(): boolean {\n        return this._internals?.checkValidity() ?? true;\n    }\n\n    /**\n     * Sets a custom validity message\n     */\n    setCustomValidity(message: string): void {\n        if (this._internals && this.field) {\n            if (message) {\n                this._internals.setValidity({ customError: true }, message, this.field);\n            } else {\n                this._internals.setValidity({});\n            }\n        }\n    }\n\n    constructor() {\n        super();\n        this._internals = this.attachInternals() as Cre8ElementInternals;\n    }\n}\n\nexport default Cre8FormElement;\n"]}