@c2n/text-field 0.0.6 → 0.0.8

package/dist/chunks/{text-field-DkffSesv.js → text-field-CEaLhsMN.js}

@@ -1,12 +1,13 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
 import { addClasses } from "@c2n/core/css-helper.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
 //#region src/text-field.scss?inline
-var text_field_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--c2-text-field__supporting-text--gap,4px);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-text-field-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-text-field__help-icon--gap,8px);\n}\n\n.c2-text-field {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  align-items: center;\n  box-sizing: border-box;\n  position: relative;\n  cursor: text;\n  text-align: inherit;\n  min-height: var(--c2-text-field--min-height,36px);\n  gap: var(--c2-text-field--gap,8px);\n  padding-top: var(--c2-text-field--padding-top,6px);\n  padding-bottom: var(--c2-text-field--padding-bottom,6px);\n  padding-right: var(--c2-text-field--padding-right,10px);\n  padding-left: var(--c2-text-field--padding-left,12px);\n  border-top: var(--c2-text-field--border-top,1px solid #bcbcc6);\n  border-bottom: var(--c2-text-field--border-bottom,1px solid #bcbcc6);\n  border-right: var(--c2-text-field--border-right,1px solid #bcbcc6);\n  border-left: var(--c2-text-field--border-left,1px solid #bcbcc6);\n  border-top-left-radius: var(--c2-text-field--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-text-field--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-text-field--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-text-field--border-bottom-right-radius,6px);\n  color: var(--c2-text-field--color,#18181b);\n  background: var(--c2-text-field--background,#ffffff);\n  font-size: var(--c2-text-field--font-size,14px);\n  font-weight: var(--c2-text-field--font-weight);\n  font-style: var(--c2-text-field--font-style);\n  font-family: var(--c2-text-field--font-family);\n  line-height: var(--c2-text-field--line-height,20px);\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-color: transparent;\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n  will-change: border, background, outline-color;\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-text-field .input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  caret-color: inherit;\n  font: inherit;\n  line-height: inherit;\n  text-align: inherit;\n}\n.c2-text-field .input::placeholder {\n  font-weight: var(--c2-text-field__placeholder--font-weight);\n  font-style: var(--c2-text-field__placeholder--font-style);\n  color: var(--c2-text-field__placeholder--color,#71717a);\n  opacity: var(--c2-text-field__placeholder--opacity,1);\n}\n.c2-text-field .input::-webkit-search-cancel-button, .c2-text-field .input::-webkit-search-decoration {\n  appearance: none;\n}\n@media (forced-colors: active) {\n  .c2-text-field .input {\n    background: Field;\n  }\n}\n.c2-text-field:hover {\n  border-top: var(--c2-text-field__hover--border-top,var(--c2-text-field--border-top,1px solid #a1a1aa));\n  border-bottom: var(--c2-text-field__hover--border-bottom,var(--c2-text-field--border-bottom,1px solid #a1a1aa));\n  border-right: var(--c2-text-field__hover--border-right,var(--c2-text-field--border-right,1px solid #a1a1aa));\n  border-left: var(--c2-text-field__hover--border-left,var(--c2-text-field--border-left,1px solid #a1a1aa));\n}\n.c2-text-field.focus-within {\n  border-top: var(--c2-text-field__focus--border-top,var(--c2-text-field--border-top,1px solid #476ef9));\n  border-bottom: var(--c2-text-field__focus--border-bottom,var(--c2-text-field--border-bottom,1px solid #476ef9));\n  border-right: var(--c2-text-field__focus--border-right,var(--c2-text-field--border-right,1px solid #476ef9));\n  border-left: var(--c2-text-field__focus--border-left,var(--c2-text-field--border-left,1px solid #476ef9));\n  color: var(--c2-text-field__focus--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__focus--background,var(--c2-text-field--background,#ffffff));\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n}\n.c2-text-field.error {\n  border-top: var(--c2-text-field__error--border-top,1px solid #dc2626);\n  border-bottom: var(--c2-text-field__error--border-bottom,1px solid #dc2626);\n  border-right: var(--c2-text-field__error--border-right,1px solid #dc2626);\n  border-left: var(--c2-text-field__error--border-left,1px solid #dc2626);\n  color: var(--c2-text-field__error--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__error--background,var(--c2-text-field--background,#ffffff));\n}\n.c2-text-field.error.focus-within {\n  outline: var(--c2-text-field__error__focus--outline,3px solid rgba(220, 38, 38, 0.2));\n}\n.c2-text-field.read-only {\n  cursor: default;\n  border-top: var(--c2-text-field__read-only--border-top,1px solid #e4e4e7);\n  border-bottom: var(--c2-text-field__read-only--border-bottom,1px solid #e4e4e7);\n  border-right: var(--c2-text-field__read-only--border-right,1px solid #e4e4e7);\n  border-left: var(--c2-text-field__read-only--border-left,1px solid #e4e4e7);\n  color: var(--c2-text-field__read-only--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__read-only--background,#fafafa);\n}\n.c2-text-field.disabled {\n  cursor: default;\n  opacity: var(--c2-text-field__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n  flex: none;\n  width: var(--c2-text-field__icon--size,16px);\n  height: var(--c2-text-field__icon--size,16px);\n  color: var(--c2-text-field__icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__icon--size,16px);\n}\n\n.clear-button {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: var(--c2-text-field__clear-icon--size,16px);\n  height: var(--c2-text-field__clear-icon--size,16px);\n  color: var(--c2-text-field__clear-icon--color,#a1a1aa);\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.clear-button:hover, .clear-button:focus-visible {\n  color: var(--c2-text-field__clear-icon__hover--color,#18181b);\n}\n.clear-button:focus-visible {\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.clear-button svg,\n.clear-button ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  --c2-feather-icon--size: var(--c2-text-field__clear-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__clear-icon--size,16px);\n}\n\n::slotted([slot=help-icon]) {\n  flex: none;\n  width: var(--c2-text-field__help-icon--size,16px);\n  height: var(--c2-text-field__help-icon--size,16px);\n  color: var(--c2-text-field__help-icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__help-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__help-icon--size,16px);\n}\n\n.supporting-text {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--c2-text-field__supporting-text--font-size,12px);\n  line-height: var(--c2-text-field__supporting-text--line-height,16px);\n  color: var(--c2-text-field__supporting-text--color,#71717a);\n}\n.supporting-text.error {\n  color: var(--c2-text-field__supporting-text__error--color,#dc2626);\n}\n.supporting-text .supporting-text__message {\n  flex: 1;\n  min-width: 0;\n}\n.supporting-text .supporting-text__counter {\n  flex: none;\n  font-variant-numeric: tabular-nums;\n}";
+var text_field_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--c2-text-field__supporting-text--gap,4px);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-text-field-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-text-field__help-icon--gap,8px);\n}\n\n.c2-text-field {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  align-items: center;\n  box-sizing: border-box;\n  position: relative;\n  cursor: text;\n  text-align: inherit;\n  min-height: var(--c2-text-field--min-height,36px);\n  gap: var(--c2-text-field--gap,8px);\n  padding-top: var(--c2-text-field--padding-top,6px);\n  padding-bottom: var(--c2-text-field--padding-bottom,6px);\n  padding-right: var(--c2-text-field--padding-right,10px);\n  padding-left: var(--c2-text-field--padding-left,12px);\n  border-top: var(--c2-text-field--border-top,1px solid #bcbcc6);\n  border-bottom: var(--c2-text-field--border-bottom,1px solid #bcbcc6);\n  border-right: var(--c2-text-field--border-right,1px solid #bcbcc6);\n  border-left: var(--c2-text-field--border-left,1px solid #bcbcc6);\n  border-top-left-radius: var(--c2-text-field--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-text-field--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-text-field--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-text-field--border-bottom-right-radius,6px);\n  color: var(--c2-text-field--color,#18181b);\n  background: var(--c2-text-field--background,#ffffff);\n  font-size: var(--c2-text-field--font-size,14px);\n  font-weight: var(--c2-text-field--font-weight);\n  font-style: var(--c2-text-field--font-style);\n  font-family: var(--c2-text-field--font-family);\n  line-height: var(--c2-text-field--line-height,20px);\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-color: transparent;\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n  will-change: border, background, outline-color;\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-text-field .input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  caret-color: inherit;\n  font: inherit;\n  line-height: inherit;\n  text-align: inherit;\n}\n.c2-text-field .input::placeholder {\n  font-weight: var(--c2-text-field__placeholder--font-weight);\n  font-style: var(--c2-text-field__placeholder--font-style);\n  color: var(--c2-text-field__placeholder--color,#71717a);\n  opacity: var(--c2-text-field__placeholder--opacity,1);\n}\n.c2-text-field .input::-webkit-search-cancel-button, .c2-text-field .input::-webkit-search-decoration {\n  appearance: none;\n}\n@media (forced-colors: active) {\n  .c2-text-field .input {\n    background: Field;\n  }\n}\n.c2-text-field:hover {\n  border-top: var(--c2-text-field__hover--border-top,var(--c2-text-field--border-top,1px solid #a1a1aa));\n  border-bottom: var(--c2-text-field__hover--border-bottom,var(--c2-text-field--border-bottom,1px solid #a1a1aa));\n  border-right: var(--c2-text-field__hover--border-right,var(--c2-text-field--border-right,1px solid #a1a1aa));\n  border-left: var(--c2-text-field__hover--border-left,var(--c2-text-field--border-left,1px solid #a1a1aa));\n}\n.c2-text-field.focus-within {\n  border-top: var(--c2-text-field__focus--border-top,var(--c2-text-field--border-top,1px solid #476ef9));\n  border-bottom: var(--c2-text-field__focus--border-bottom,var(--c2-text-field--border-bottom,1px solid #476ef9));\n  border-right: var(--c2-text-field__focus--border-right,var(--c2-text-field--border-right,1px solid #476ef9));\n  border-left: var(--c2-text-field__focus--border-left,var(--c2-text-field--border-left,1px solid #476ef9));\n  color: var(--c2-text-field__focus--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__focus--background,var(--c2-text-field--background,#ffffff));\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n}\n.c2-text-field.error {\n  border-top: var(--c2-text-field__error--border-top,1px solid #dc2626);\n  border-bottom: var(--c2-text-field__error--border-bottom,1px solid #dc2626);\n  border-right: var(--c2-text-field__error--border-right,1px solid #dc2626);\n  border-left: var(--c2-text-field__error--border-left,1px solid #dc2626);\n  color: var(--c2-text-field__error--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__error--background,var(--c2-text-field--background,#ffffff));\n}\n.c2-text-field.error.focus-within {\n  outline: var(--c2-text-field__error__focus--outline,3px solid rgba(220, 38, 38, 0.2));\n}\n.c2-text-field.read-only {\n  cursor: default;\n  border-top: var(--c2-text-field__read-only--border-top,1px solid #e4e4e7);\n  border-bottom: var(--c2-text-field__read-only--border-bottom,1px solid #e4e4e7);\n  border-right: var(--c2-text-field__read-only--border-right,1px solid #e4e4e7);\n  border-left: var(--c2-text-field__read-only--border-left,1px solid #e4e4e7);\n  color: var(--c2-text-field__read-only--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__read-only--background,#fafafa);\n}\n.c2-text-field.disabled {\n  cursor: default;\n  opacity: var(--c2-text-field__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n  flex: none;\n  color: var(--c2-text-field__icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__icon--size,16px);\n}\n\n::slotted(svg[slot=prefix-icon]),\n::slotted(svg[slot=suffix-icon]) {\n  width: var(--c2-text-field__icon--size,16px);\n  height: var(--c2-text-field__icon--size,16px);\n}\n\n.clear-button {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: var(--c2-text-field__clear-icon--size,16px);\n  height: var(--c2-text-field__clear-icon--size,16px);\n  color: var(--c2-text-field__clear-icon--color,#a1a1aa);\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.clear-button:hover, .clear-button:focus-visible {\n  color: var(--c2-text-field__clear-icon__hover--color,#18181b);\n}\n.clear-button:focus-visible {\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.clear-button svg,\n.clear-button ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  --c2-feather-icon--size: var(--c2-text-field__clear-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__clear-icon--size,16px);\n}\n\n::slotted([slot=help-icon]) {\n  flex: none;\n  width: var(--c2-text-field__help-icon--size,16px);\n  height: var(--c2-text-field__help-icon--size,16px);\n  color: var(--c2-text-field__help-icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__help-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__help-icon--size,16px);\n}\n\n.supporting-text {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--c2-text-field__supporting-text--font-size,12px);\n  line-height: var(--c2-text-field__supporting-text--line-height,16px);\n  color: var(--c2-text-field__supporting-text--color,#71717a);\n}\n.supporting-text.error {\n  color: var(--c2-text-field__supporting-text__error--color,#dc2626);\n}\n.supporting-text .supporting-text__message {\n  flex: 1;\n  min-width: 0;\n}\n.supporting-text .supporting-text__counter {\n  flex: none;\n  font-variant-numeric: tabular-nums;\n}";
 //#endregion
 //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
@@ -20,6 +21,9 @@ function __decorate(decorators, target, key, desc) {
 var TextField = class TextField extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
 		this.readOnly = false;
 		this.disabled = false;
 		this.error = false;
@@ -31,6 +35,7 @@ var TextField = class TextField extends LitElement {
 		this.name = "";
 		this.autocomplete = "";
 		this.placeholder = "";
+		this.ariaLabel = null;
 		this.value = "";
 		this.errorText = "";
 		this.help = "";
@@ -62,15 +67,58 @@ var TextField = class TextField extends LitElement {
 			}));
 		};
 	}
+	static {
+		this.formAssociated = true;
+	}
 	static {
 		this.styles = unsafeCSS(text_field_default);
 	}
+	/** The containing form, when this control is associated with one. */
+	get form() {
+		return this.internals.form;
+	}
+	/** Labels associated with this form control. */
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
 	/** Restores the initial value (the `value` attribute) and clears the dirty and error flags. */
 	reset() {
 		this.dirty = false;
 		this.value = this.getAttribute("value") ?? "";
 		this.error = false;
 	}
+	formResetCallback() {
+		this.reset();
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	/** Checks all current constraints and fires `invalid` on this element when they fail. */
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	/** Checks all current constraints and asks the browser to show validation feedback. */
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	/** Sets or clears a custom validation error. */
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.input?.setCustomValidity(message);
+		this.syncFormState();
+	}
 	/** True once the user has typed in the field. */
 	isDirty() {
 		return this.dirty;
@@ -123,7 +171,7 @@ var TextField = class TextField extends LitElement {
 		return html`<slot name="help-icon"></slot>`;
 	}
 	renderClearButton() {
-		if (!this.clearable || !this.value || this.disabled || this.readOnly) return nothing;
+		if (!this.clearable || !this.value || this.effectiveDisabled || this.readOnly) return nothing;
 		return html`<button class="clear-button" type="button" aria-label="Clear" tabindex="-1" @click=${this.handleClear}>
       <slot name="clear-icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -150,11 +198,24 @@ var TextField = class TextField extends LitElement {
 	}
 	updated(changed) {
 		if (changed.has("disabled") || changed.has("error") || changed.has("readOnly") || changed.has("focused")) addClasses(this, this.stateClasses);
+		this.syncFormState();
+	}
+	syncFormState() {
+		this.internals.setFormValue(this.value, this.value);
+		if (!this.input || this.effectiveDisabled) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.input.setCustomValidity(this.customValidityMessage);
+		this.internals.setValidity(this.input.validity, this.input.validationMessage, this.input);
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
 	}
 	get stateClasses() {
 		return {
-			disabled: this.disabled,
-			error: !this.disabled && this.error,
+			disabled: this.effectiveDisabled,
+			error: !this.effectiveDisabled && this.error,
 			"read-only": this.readOnly,
 			"focus-within": this.focused
 		};
@@ -165,6 +226,7 @@ var TextField = class TextField extends LitElement {
         <div class="c2-text-field ${classMap(classes)}" @click=${this.forwardFocusin}>
           ${this.renderPrefixSlot()}
           <input
+            aria-label=${ifDefined(this.ariaLabel || void 0)}
             type=${this.type}
             class="input"
             name=${ifDefined(this.name || void 0)}
@@ -172,7 +234,7 @@ var TextField = class TextField extends LitElement {
             maxlength=${ifDefined(this.maxLength > -1 ? this.maxLength : void 0)}
             minlength=${ifDefined(this.minLength > -1 ? this.minLength : void 0)}
             pattern=${ifDefined(this.pattern || void 0)}
-            ?disabled=${this.disabled}
+            ?disabled=${this.effectiveDisabled}
             ?readonly=${this.readOnly}
             ?required=${this.required}
             aria-invalid=${this.error ? "true" : nothing}
@@ -191,6 +253,7 @@ var TextField = class TextField extends LitElement {
       ${this.renderSupportingText()}`;
 	}
 };
+__decorate([state()], TextField.prototype, "disabledByForm", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -214,6 +277,7 @@ __decorate([property({ type: String })], TextField.prototype, "type", void 0);
 __decorate([property({ type: String })], TextField.prototype, "name", void 0);
 __decorate([property({ type: String })], TextField.prototype, "autocomplete", void 0);
 __decorate([property({ type: String })], TextField.prototype, "placeholder", void 0);
+__decorate([property({ attribute: "aria-label" })], TextField.prototype, "ariaLabel", void 0);
 __decorate([property({ type: String })], TextField.prototype, "value", void 0);
 __decorate([property({ attribute: "error-text" })], TextField.prototype, "errorText", void 0);
 __decorate([property({ type: String })], TextField.prototype, "help", void 0);

package/dist/text-field-clear.js

@@ -1,6 +1,7 @@
-import { n as __decorate, t as TextField } from "./chunks/text-field-DkffSesv.js";
+import { n as __decorate, t as TextField } from "./chunks/text-field-CEaLhsMN.js";
 import { html, nothing, unsafeCSS } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 //#region src/text-field-clear.scss?inline
 var text_field_clear_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n.clear-icon {\n  cursor: pointer;\n  width: var(--c2-text-field-clear__clear-icon--size,24px);\n  color: var(--c2-text-field-clear__clear-icon--color,rgb(70, 70, 70));\n  display: flex;\n  align-items: center;\n}";
 //#endregion

package/dist/text-field.js

@@ -1,2 +1,2 @@
-import { t as TextField } from "./chunks/text-field-DkffSesv.js";
+import { t as TextField } from "./chunks/text-field-CEaLhsMN.js";
 export { TextField };

package/package.json

@@ -1,22 +1,34 @@
 {
   "name": "@c2n/text-field",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/text-field.js",
   "exports": {
     ".": {
-      "default": "./dist/text-field.js",
-      "types": "./types/src/text-field.d.ts"
+      "types": "./types/src/text-field.d.ts",
+      "default": "./dist/text-field.js"
     },
     "./text-field-clear.js": {
-      "default": "./dist/text-field-clear.js",
-      "types": "./types/src/text-field-clear.d.ts"
+      "types": "./types/src/text-field-clear.d.ts",
+      "default": "./dist/text-field-clear.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "text-field",
@@ -52,12 +64,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/text-field. Import once, anywhere in the program:
+//
+//     import '@c2n/text-field/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { TextField } from '@c2n/text-field'
+import type { TextFieldClear } from '@c2n/text-field/text-field-clear.js'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-text-field': C2Props<TextField>
+      'c2-text-field-clear': C2Props<TextFieldClear>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/text-field-clear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-clear.d.ts","sourceRoot":"","sources":["../../src/text-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAA;AAIzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAAqD;IAE3F,SAAS,UAAQ;cAEP,WAAW,CAAC,KAAK,EAAE,UAAU;IAKhD,SAAS,CAAC,WAAW,aAGpB;IAED,eAAe;cAqBI,gBAAgB;CAGpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAA;KACtC;CACF"}
+{"version":3,"file":"text-field-clear.d.ts","sourceRoot":"","sources":["../../src/text-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAA;AAKzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAAqD;IAE3F,SAAS,UAAQ;cAEP,WAAW,CAAC,KAAK,EAAE,UAAU;IAKhD,SAAS,CAAC,WAAW,aAGpB;IAED,eAAe;cAqBI,gBAAgB;CAGpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAA;KACtC;CACF"}

package/types/src/text-field.d.ts

@@ -1,5 +1,16 @@
 import { CSSResult, LitElement, nothing, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 export type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+/** Events fired by {@link TextField}, keyed for `addEventListener`. */
+export interface TextFieldEventMap {
+    input: InputEvent;
+    change: Event;
+    clear: Event;
+}
+export interface TextField {
+    addEventListener: TypedAddEventListener<TextField, TextFieldEventMap>;
+    removeEventListener: TypedRemoveEventListener<TextField, TextFieldEventMap>;
+}
 /**
  * A single-line input wrapped in a themeable field. The native `<input>` keeps its behaviour (`type`, `name`,
  * `autocomplete`, `maxlength`, `pattern`, `input`/`change` events); the field adds `prefix-icon` / `suffix-icon` slots
@@ -9,7 +20,7 @@ export type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | '
  *
  * @tag c2-text-field
  *
- * @slot prefix-icon - Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`.
+ * @slot prefix-icon - Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`. Icons are sized by `--c2-text-field__icon--size`; an adornment keeps its own width.
  * @slot suffix-icon - Icon or adornment at the end of the field, after the clear button.
  * @slot clear-icon - Replaces the default cross of the clear button.
  * @slot help-icon - Icon shown beside the field, outside the border, e.g. a tooltip trigger.
@@ -100,7 +111,11 @@ export type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | '
  * @cssproperty {color} [--c2-text-field__supporting-text__error--color=#dc2626]
  */
 export declare class TextField extends LitElement {
+    static formAssociated: boolean;
     static styles: CSSResult | CSSResult[];
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
     /** Shows the value but refuses edits. Rendered on a light grey background. */
     readOnly: boolean;
     /** Disables the input and dims the field. */
@@ -123,6 +138,8 @@ export declare class TextField extends LitElement {
     autocomplete: string;
     /** Text shown while the field is empty. */
     placeholder: string;
+    /** Accessible name forwarded to the native input. */
+    ariaLabel: string | null;
     /** The current text. Setting the attribute after the user has typed no longer updates it, like a native input. */
     value: string;
     /** Message shown under the field while `error` is set. */
@@ -135,8 +152,24 @@ export declare class TextField extends LitElement {
     private focused;
     private hasSupportingSlot;
     private readonly input?;
+    /** The containing form, when this control is associated with one. */
+    get form(): HTMLFormElement | null;
+    /** Labels associated with this form control. */
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     /** Restores the initial value (the `value` attribute) and clears the dirty and error flags. */
     reset(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    /** Checks all current constraints and fires `invalid` on this element when they fail. */
+    checkValidity(): boolean;
+    /** Checks all current constraints and asks the browser to show validation feedback. */
+    reportValidity(): boolean;
+    /** Sets or clears a custom validation error. */
+    setCustomValidity(message: string): void;
     handleFocus: () => void;
     /** True once the user has typed in the field. */
     isDirty(): boolean;
@@ -159,6 +192,8 @@ export declare class TextField extends LitElement {
     protected renderSupportingText(): import("lit-html").TemplateResult<1>;
     private redispatchEvent;
     protected updated(changed: PropertyValues): void;
+    private syncFormState;
+    private get effectiveDisabled();
     private get stateClasses();
     render(): import("lit-html").TemplateResult<1>;
 }

package/types/src/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAQ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAS1F,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAAoB;IAInE,8EAA8E;IAClC,QAAQ,UAAQ;IAE5D,6CAA6C;IACD,QAAQ,UAAQ;IAE5D,gGAAgG;IACpD,KAAK,UAAQ;IAIzD,6GAA6G;IACjF,SAAS,SAAK;IAE1C,4DAA4D;IAChC,SAAS,SAAK;IAE1C,uEAAuE;IAC3C,OAAO,SAAK;IAExC,6GAA6G;IACjE,QAAQ,UAAQ;IAI5D,mFAAmF;IACvD,IAAI,EAAE,aAAa,CAAS;IAExD,8CAA8C;IAClB,IAAI,SAAK;IAErC,sFAAsF;IAC1D,YAAY,SAAK;IAE7C,2CAA2C;IACf,WAAW,SAAK;IAE5C,kHAAkH;IACtF,KAAK,SAAK;IAEtC,0DAA0D;IACnB,SAAS,SAAK;IAIrD,yCAAyC;IACb,IAAI,SAAK;IAErC,yEAAyE;IAC7B,SAAS,UAAQ;IAGpD,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,iBAAiB,CAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAyB;IAEjE,+FAA+F;IAC/F,KAAK;IAML,WAAW,aAEV;IAED,iDAAiD;IACjD,OAAO;IAIE,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAU5F,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAK/C,IAAI,IAAI,IAAI;IAKrB,8BAA8B;IAC9B,MAAM,IAAI,IAAI;IAId,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU;IAMvC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK;IAKpC,wEAAwE;IACxE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAKrC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAKrC,SAAS,CAAC,WAAW,GAAI,OAAO,KAAK,UAUpC;IAED,OAAO,CAAC,0BAA0B;IAKlC,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,kBAAkB;IAI5B,SAAS,CAAC,iBAAiB;IAa3B,SAAS,CAAC,oBAAoB;IAe9B,OAAO,CAAC,eAAe;cAIJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzD,OAAO,KAAK,YAAY,GAOvB;IAEQ,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,47 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/text-field. Import once, anywhere in the program:
+//
+//     import '@c2n/text-field/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { TextField, TextFieldEventMap } from '@c2n/text-field'
+import type { TextFieldClear, TextFieldClearEventMap } from '@c2n/text-field/text-field-clear.js'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-text-field': DefineComponent<
+      C2Props<TextField> & {
+        'aria-label'?: unknown
+        'error-text'?: unknown
+        onInput?: (event: TextFieldEventMap['input']) => void
+        onChange?: (event: TextFieldEventMap['change']) => void
+        onClear?: (event: TextFieldEventMap['clear']) => void
+      }
+    >
+    'c2-text-field-clear': DefineComponent<
+      C2Props<TextFieldClear> & {
+        'aria-label'?: unknown
+        'error-text'?: unknown
+        onInput?: (event: TextFieldClearEventMap['input']) => void
+        onChange?: (event: TextFieldClearEventMap['change']) => void
+        onClear?: (event: TextFieldClearEventMap['clear']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}