@typesafe-html5/typescript 0.2.58

package/inline/textarea/textarea.ts

@@ -0,0 +1,874 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Textarea
+ * @description 
+ */
+
+export interface TextareaProps {
+  /**
+   * Child content or elements
+   */
+  children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * specifies a shortcut key (or keys) to activate or focus an element
+   */
+  accesskey?: string | null | undefined;
+  /**
+   * Indicates whether assistive technologies should present the entire region as a whole when changes occur.
+   */
+  'aria-atomic'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Specifies autocomplete behavior for input fields.
+   */
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | null | undefined;
+  /**
+   * Identifies the element(s) whose contents or presence are controlled by this element. Value is a list of IDs separated by a space
+   */
+  'aria-controls'?: string | null | undefined;
+  /**
+   * Identifies the element(s) that describes the object. Value is a list of IDs separated by a space
+   */
+  'aria-describedby'?: string | null | undefined;
+  /**
+   * References an element that provides additional details about the current element.
+   */
+  'aria-details'?: string | null | undefined;
+  /**
+   * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+   */
+  'aria-disabled'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Indicates whether a collapsible UI element is expanded (true) or collapsed (false).
+   */
+  'aria-expanded'?: 'false' | 'true' | 'undefined' | boolean | null | undefined;
+  /**
+   * Indicates that an element has an associated popup menu, listbox, tree, grid, or dialog.
+   */
+  'aria-haspopup'?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean | null | undefined;
+  /**
+   * Indicates that the value entered does not conform to the expected format.
+   */
+  'aria-invalid'?: 'false' | 'true' | 'grammar' | 'spelling' | boolean | null | undefined;
+  /**
+   * Defines keyboard shortcuts available for the element.
+   */
+  'aria-keyshortcuts'?: string | null | undefined;
+  /**
+   * Defines a string value that labels the current element for assistive technologies.
+   */
+  'aria-label'?: string | null | undefined;
+  /**
+   * Identifies the element(s) that labels the current element. Value is a list of IDs separated by a space
+   */
+  'aria-labelledby'?: string | null | undefined;
+  /**
+   * Defines how updates to the element should be announced to screen readers.
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive' | null | undefined;
+  /**
+   * Indicates whether the input allows multiple lines of text.
+   */
+  'aria-multiline'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Provides a placeholder hint for an input field.
+   */
+  'aria-placeholder'?: string | null | undefined;
+  /**
+   * Indicates whether a toggle button is pressed (true, false, or mixed).
+   */
+  'aria-pressed'?: 'false' | 'true' | 'mixed' | 'undefined' | boolean | null | undefined;
+  /**
+   * Marks an input field as read-only but still selectable and focusable.
+   */
+  'aria-readonly'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Indicates what content changes should be announced in a live region.
+   */
+  'aria-relevant'?: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined;
+  /**
+   * Specifies that an input field is required before form submission.
+   */
+  'aria-required'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Provides a human-readable custom role description for assistive technologies.
+   */
+  'aria-roledescription'?: string | null | undefined;
+  /**
+   * Represents the autocapitalize behavior of the element
+   */
+  autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | null | undefined;
+  /**
+   * 
+   */
+  autocomplete?: 'off' | 'on' | null | undefined;
+  /**
+   * Specifies controls whether autocorrection of editable text is enabled for spelling and/or punctuation errors. Default is on.
+   */
+  autocorrect?: 'off' | 'on' | null | undefined;
+  /**
+   * Indicates whether the element is hidden
+   */
+  autofocus?: boolean | null | undefined;
+  /**
+   * Specifies the visible width of a text area, in average character widths.
+   */
+  cols?: number | null | undefined;
+  /**
+   * Indicates whether the element can be edited in place
+   */
+  contenteditable?: 'true' | 'false' | 'inherit' | boolean | null | undefined;
+  /**
+   * Represents the text direction of the element
+   */
+  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
+  /**
+   * Specifies the name of the field that will contain the text direction (ltr or rtl) of the input or textarea when the form is submitted
+   */
+  dirname?: string | null | undefined;
+  /**
+   * When present, it specifies that an input element should be disabled.
+   */
+  disabled?: boolean | null | undefined;
+  /**
+   * Indicates whether the element is draggable
+   */
+  draggable?: boolean | null | undefined;
+  /**
+   * Associates the button with a form element by ID. Allows buttons to be associated with forms anywhere in the document, not just inside a form element. Can override ancestor form association. Element-specific to button, input, object, select, textarea, and fieldset.
+   */
+  form?: string | null | undefined;
+  /**
+   * Indicates whether the element is hidden
+   */
+  hidden?: boolean | null | undefined;
+  /**
+   * used to specify the data entry mode for an input. It helps guide on-screen keyboards (especially on mobile devices) to show the appropriate layout for the expected input type
+   */
+  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined;
+  /**
+   * Specifies the primary language for the element's content
+   */
+  lang?: string | null | undefined;
+  /**
+   * Specifies the maximum number of characters allowed in an input field.
+   */
+  maxlength?: number | null | undefined;
+  /**
+   * Specifies the minimum number of characters required in an input field.
+   */
+  minlength?: number | null | undefined;
+  /**
+   * Specifies the name associated with the element. The meaning may vary depending on the context.
+   */
+  name?: string | null | undefined;
+  /**
+   * Specifies a short hint that describes the expected value of an input field.
+   */
+  placeholder?: string | null | undefined;
+  /**
+   * 
+   */
+  popover?: 'auto' | 'hint' | 'manual' | null | undefined;
+  /**
+   * When present, it specifies that an input element is read-only.
+   */
+  readonly?: boolean | null | undefined;
+  /**
+   * When present, it specifies that an input field must be filled out before submitting the form.
+   */
+  required?: boolean | null | undefined;
+  /**
+   * Defines the semantic purpose of an element for assistive technologies.
+   */
+  role?: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined;
+  /**
+   * Specifies the visible number of lines in a text area.
+   */
+  rows?: number | null | undefined;
+  /**
+   * Represents a slot in a shadow DOM
+   */
+  slot?: string | null | undefined;
+  /**
+   * Represents the spellchecking behavior of the element
+   */
+  spellcheck?: 'true' | 'false' | boolean | null | undefined;
+  /**
+   * Represents the CSS inline style of the element
+   */
+  style?: string | null | undefined;
+  /**
+   * Represents a tab order of the element
+   */
+  tabindex?: number | null | undefined;
+  /**
+   * Represents a title or tooltip for the element
+   */
+  title?: string | null | undefined;
+  /**
+   * used to tell user agents whether the content should be translated.
+   */
+  translate?: 'yes' | 'no' | null | undefined;
+  /**
+   * 
+   */
+  wrap?: 'hard' | 'off' | 'soft' | null | undefined;
+}
+
+/**
+ * Textarea - 
+ */
+export class Textarea {
+  private element: HTMLElement;
+
+  constructor(props: TextareaProps = {}) {
+    this.element = document.createElement('textarea');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: TextareaProps): void {
+    if (props.children !== undefined) {
+      this.setChildren(props.children);
+    }
+    if (props.accesskey !== undefined) {
+      this.element.setAttribute('accesskey', String(props.accesskey));
+    }
+    if (props['aria-atomic'] !== undefined) {
+      this.setAriaAtomic(props['aria-atomic']);
+    }
+    if (props['aria-autocomplete'] !== undefined) {
+      this.setAriaAutocomplete(props['aria-autocomplete']);
+    }
+    if (props['aria-controls'] !== undefined) {
+      this.element.setAttribute('aria-controls', String(props['aria-controls']));
+    }
+    if (props['aria-describedby'] !== undefined) {
+      this.element.setAttribute('aria-describedby', String(props['aria-describedby']));
+    }
+    if (props['aria-details'] !== undefined) {
+      this.element.setAttribute('aria-details', String(props['aria-details']));
+    }
+    if (props['aria-disabled'] !== undefined) {
+      this.setAriaDisabled(props['aria-disabled']);
+    }
+    if (props['aria-expanded'] !== undefined) {
+      this.setAriaExpanded(props['aria-expanded']);
+    }
+    if (props['aria-haspopup'] !== undefined) {
+      this.setAriaHaspopup(props['aria-haspopup']);
+    }
+    if (props['aria-invalid'] !== undefined) {
+      this.setAriaInvalid(props['aria-invalid']);
+    }
+    if (props['aria-keyshortcuts'] !== undefined) {
+      this.element.setAttribute('aria-keyshortcuts', String(props['aria-keyshortcuts']));
+    }
+    if (props['aria-label'] !== undefined) {
+      this.element.setAttribute('aria-label', String(props['aria-label']));
+    }
+    if (props['aria-labelledby'] !== undefined) {
+      this.element.setAttribute('aria-labelledby', String(props['aria-labelledby']));
+    }
+    if (props['aria-live'] !== undefined) {
+      this.setAriaLive(props['aria-live']);
+    }
+    if (props['aria-multiline'] !== undefined) {
+      this.setAriaMultiline(props['aria-multiline']);
+    }
+    if (props['aria-placeholder'] !== undefined) {
+      this.element.setAttribute('aria-placeholder', String(props['aria-placeholder']));
+    }
+    if (props['aria-pressed'] !== undefined) {
+      this.setAriaPressed(props['aria-pressed']);
+    }
+    if (props['aria-readonly'] !== undefined) {
+      this.setAriaReadonly(props['aria-readonly']);
+    }
+    if (props['aria-relevant'] !== undefined) {
+      this.setAriaRelevant(props['aria-relevant']);
+    }
+    if (props['aria-required'] !== undefined) {
+      this.setAriaRequired(props['aria-required']);
+    }
+    if (props['aria-roledescription'] !== undefined) {
+      this.element.setAttribute('aria-roledescription', String(props['aria-roledescription']));
+    }
+    if (props.autocapitalize !== undefined) {
+      this.setAutocapitalize(props.autocapitalize);
+    }
+    if (props.autocomplete !== undefined) {
+      this.setAutocomplete(props.autocomplete);
+    }
+    if (props.autocorrect !== undefined) {
+      this.setAutocorrect(props.autocorrect);
+    }
+    if (props.autofocus !== undefined) {
+      this.element.setAttribute('autofocus', String(props.autofocus));
+    }
+    if (props.cols !== undefined) {
+      this.element.setAttribute('cols', String(props.cols));
+    }
+    if (props.contenteditable !== undefined) {
+      this.setContenteditable(props.contenteditable);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    if (props.dirname !== undefined) {
+      this.element.setAttribute('dirname', String(props.dirname));
+    }
+    if (props.disabled !== undefined) {
+      this.element.setAttribute('disabled', String(props.disabled));
+    }
+    if (props.draggable !== undefined) {
+      this.element.setAttribute('draggable', String(props.draggable));
+    }
+    if (props.form !== undefined) {
+      this.element.setAttribute('form', String(props.form));
+    }
+    if (props.hidden !== undefined) {
+      this.element.setAttribute('hidden', String(props.hidden));
+    }
+    if (props.inputmode !== undefined) {
+      this.setInputmode(props.inputmode);
+    }
+    if (props.lang !== undefined) {
+      this.element.setAttribute('lang', String(props.lang));
+    }
+    if (props.maxlength !== undefined) {
+      this.element.setAttribute('maxlength', String(props.maxlength));
+    }
+    if (props.minlength !== undefined) {
+      this.element.setAttribute('minlength', String(props.minlength));
+    }
+    if (props.name !== undefined) {
+      this.element.setAttribute('name', String(props.name));
+    }
+    if (props.placeholder !== undefined) {
+      this.element.setAttribute('placeholder', String(props.placeholder));
+    }
+    if (props.popover !== undefined) {
+      this.setPopover(props.popover);
+    }
+    if (props.readonly !== undefined) {
+      this.element.setAttribute('readonly', String(props.readonly));
+    }
+    if (props.required !== undefined) {
+      this.element.setAttribute('required', String(props.required));
+    }
+    if (props.role !== undefined) {
+      this.setRole(props.role);
+    }
+    if (props.rows !== undefined) {
+      this.element.setAttribute('rows', String(props.rows));
+    }
+    if (props.slot !== undefined) {
+      this.element.setAttribute('slot', String(props.slot));
+    }
+    if (props.spellcheck !== undefined) {
+      this.setSpellcheck(props.spellcheck);
+    }
+    if (props.style !== undefined) {
+      this.element.setAttribute('style', String(props.style));
+    }
+    if (props.tabindex !== undefined) {
+      this.element.setAttribute('tabindex', String(props.tabindex));
+    }
+    if (props.title !== undefined) {
+      this.element.setAttribute('title', String(props.title));
+    }
+    if (props.translate !== undefined) {
+      this.setTranslate(props.translate);
+    }
+    if (props.wrap !== undefined) {
+      this.setWrap(props.wrap);
+    }
+  }
+
+  setAccesskey(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accesskey');
+    } else {
+      this.element.setAttribute('accesskey', String(value));
+    }
+    return this;
+  }
+
+  setAriaAtomic(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-atomic');
+    } else {
+      this.element.setAttribute('aria-atomic', String(value));
+    }
+    return this;
+  }
+
+  setAriaAutocomplete(value: 'none' | 'inline' | 'list' | 'both' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-autocomplete');
+    } else {
+      this.element.setAttribute('aria-autocomplete', String(value));
+    }
+    return this;
+  }
+
+  setAriaControls(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-controls');
+    } else {
+      this.element.setAttribute('aria-controls', String(value));
+    }
+    return this;
+  }
+
+  setAriaDescribedby(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-describedby');
+    } else {
+      this.element.setAttribute('aria-describedby', String(value));
+    }
+    return this;
+  }
+
+  setAriaDetails(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-details');
+    } else {
+      this.element.setAttribute('aria-details', String(value));
+    }
+    return this;
+  }
+
+  setAriaDisabled(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-disabled');
+    } else {
+      this.element.setAttribute('aria-disabled', String(value));
+    }
+    return this;
+  }
+
+  setAriaExpanded(value: 'false' | 'true' | 'undefined' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-expanded');
+    } else {
+      this.element.setAttribute('aria-expanded', String(value));
+    }
+    return this;
+  }
+
+  setAriaHaspopup(value: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-haspopup');
+    } else {
+      this.element.setAttribute('aria-haspopup', String(value));
+    }
+    return this;
+  }
+
+  setAriaInvalid(value: 'false' | 'true' | 'grammar' | 'spelling' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-invalid');
+    } else {
+      this.element.setAttribute('aria-invalid', String(value));
+    }
+    return this;
+  }
+
+  setAriaKeyshortcuts(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-keyshortcuts');
+    } else {
+      this.element.setAttribute('aria-keyshortcuts', String(value));
+    }
+    return this;
+  }
+
+  setAriaLabel(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-label');
+    } else {
+      this.element.setAttribute('aria-label', String(value));
+    }
+    return this;
+  }
+
+  setAriaLabelledby(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-labelledby');
+    } else {
+      this.element.setAttribute('aria-labelledby', String(value));
+    }
+    return this;
+  }
+
+  setAriaLive(value: 'off' | 'polite' | 'assertive' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-live');
+    } else {
+      this.element.setAttribute('aria-live', String(value));
+    }
+    return this;
+  }
+
+  setAriaMultiline(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-multiline');
+    } else {
+      this.element.setAttribute('aria-multiline', String(value));
+    }
+    return this;
+  }
+
+  setAriaPlaceholder(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-placeholder');
+    } else {
+      this.element.setAttribute('aria-placeholder', String(value));
+    }
+    return this;
+  }
+
+  setAriaPressed(value: 'false' | 'true' | 'mixed' | 'undefined' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-pressed');
+    } else {
+      this.element.setAttribute('aria-pressed', String(value));
+    }
+    return this;
+  }
+
+  setAriaReadonly(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-readonly');
+    } else {
+      this.element.setAttribute('aria-readonly', String(value));
+    }
+    return this;
+  }
+
+  setAriaRelevant(value: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-relevant');
+    } else {
+      this.element.setAttribute('aria-relevant', String(value));
+    }
+    return this;
+  }
+
+  setAriaRequired(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-required');
+    } else {
+      this.element.setAttribute('aria-required', String(value));
+    }
+    return this;
+  }
+
+  setAriaRoledescription(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-roledescription');
+    } else {
+      this.element.setAttribute('aria-roledescription', String(value));
+    }
+    return this;
+  }
+
+  setAutocapitalize(value: 'none' | 'sentences' | 'words' | 'characters' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('autocapitalize');
+    } else {
+      this.element.setAttribute('autocapitalize', String(value));
+    }
+    return this;
+  }
+
+  setAutocomplete(value: 'off' | 'on' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('autocomplete');
+    } else {
+      this.element.setAttribute('autocomplete', String(value));
+    }
+    return this;
+  }
+
+  setAutocorrect(value: 'off' | 'on' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('autocorrect');
+    } else {
+      this.element.setAttribute('autocorrect', String(value));
+    }
+    return this;
+  }
+
+  setAutofocus(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('autofocus', '');
+    } else {
+      this.element.removeAttribute('autofocus');
+    }
+    return this;
+  }
+
+  setCols(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('cols');
+    } else {
+      this.element.setAttribute('cols', String(value));
+    }
+    return this;
+  }
+
+  setContenteditable(value: 'true' | 'false' | 'inherit' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('contenteditable');
+    } else {
+      this.element.setAttribute('contenteditable', String(value));
+    }
+    return this;
+  }
+
+  setDir(value: 'ltr' | 'rtl' | 'auto' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('dir');
+    } else {
+      this.element.setAttribute('dir', String(value));
+    }
+    return this;
+  }
+
+  setDirname(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('dirname');
+    } else {
+      this.element.setAttribute('dirname', String(value));
+    }
+    return this;
+  }
+
+  setDisabled(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('disabled', '');
+    } else {
+      this.element.removeAttribute('disabled');
+    }
+    return this;
+  }
+
+  setDraggable(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('draggable', '');
+    } else {
+      this.element.removeAttribute('draggable');
+    }
+    return this;
+  }
+
+  setForm(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('form');
+    } else {
+      this.element.setAttribute('form', String(value));
+    }
+    return this;
+  }
+
+  setHidden(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('hidden', '');
+    } else {
+      this.element.removeAttribute('hidden');
+    }
+    return this;
+  }
+
+  setInputmode(value: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('inputmode');
+    } else {
+      this.element.setAttribute('inputmode', String(value));
+    }
+    return this;
+  }
+
+  setLang(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('lang');
+    } else {
+      this.element.setAttribute('lang', String(value));
+    }
+    return this;
+  }
+
+  setMaxlength(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('maxlength');
+    } else {
+      this.element.setAttribute('maxlength', String(value));
+    }
+    return this;
+  }
+
+  setMinlength(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('minlength');
+    } else {
+      this.element.setAttribute('minlength', String(value));
+    }
+    return this;
+  }
+
+  setName(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('name');
+    } else {
+      this.element.setAttribute('name', String(value));
+    }
+    return this;
+  }
+
+  setPlaceholder(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('placeholder');
+    } else {
+      this.element.setAttribute('placeholder', String(value));
+    }
+    return this;
+  }
+
+  setPopover(value: 'auto' | 'hint' | 'manual' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('popover');
+    } else {
+      this.element.setAttribute('popover', String(value));
+    }
+    return this;
+  }
+
+  setReadonly(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('readonly', '');
+    } else {
+      this.element.removeAttribute('readonly');
+    }
+    return this;
+  }
+
+  setRequired(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('required', '');
+    } else {
+      this.element.removeAttribute('required');
+    }
+    return this;
+  }
+
+  setRole(value: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('role');
+    } else {
+      this.element.setAttribute('role', String(value));
+    }
+    return this;
+  }
+
+  setRows(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('rows');
+    } else {
+      this.element.setAttribute('rows', String(value));
+    }
+    return this;
+  }
+
+  setSlot(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('slot');
+    } else {
+      this.element.setAttribute('slot', String(value));
+    }
+    return this;
+  }
+
+  setSpellcheck(value: 'true' | 'false' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('spellcheck');
+    } else {
+      this.element.setAttribute('spellcheck', String(value));
+    }
+    return this;
+  }
+
+  setStyle(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('style');
+    } else {
+      this.element.setAttribute('style', String(value));
+    }
+    return this;
+  }
+
+  setTabindex(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('tabindex');
+    } else {
+      this.element.setAttribute('tabindex', String(value));
+    }
+    return this;
+  }
+
+  setTitle(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('title');
+    } else {
+      this.element.setAttribute('title', String(value));
+    }
+    return this;
+  }
+
+  setTranslate(value: 'yes' | 'no' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('translate');
+    } else {
+      this.element.setAttribute('translate', String(value));
+    }
+    return this;
+  }
+
+  setWrap(value: 'hard' | 'off' | 'soft' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('wrap');
+    } else {
+      this.element.setAttribute('wrap', String(value));
+    }
+    return this;
+  }
+
+  setChildren(children: string | HTMLElement | (string | HTMLElement)[]): this {
+    // Clear existing children
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild);
+    }
+    
+    if (typeof children === 'string') {
+      this.element.textContent = children;
+    } else if (Array.isArray(children)) {
+      children.forEach(child => {
+        if (typeof child === 'string') {
+          this.element.appendChild(document.createTextNode(child));
+        } else {
+          this.element.appendChild(child);
+        }
+      });
+    } else {
+      this.element.appendChild(children);
+    }
+    return this;
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+}