@typesafe-html5/typescript 0.2.58

package/inline/input/input.ts

@@ -0,0 +1,1197 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Input
+ * @description 
+ */
+
+export interface InputProps {
+  /**
+   * Specifies a comma-separated list of file types that the server accepts.
+   */
+  accept?: string | null | undefined;
+  /**
+   * specifies a shortcut key (or keys) to activate or focus an element
+   */
+  accesskey?: string | null | undefined;
+  /**
+   * Specifies alternative text to be displayed when the image cannot be rendered.
+   */
+  alt?: 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;
+  /**
+   * Defines the checked state for checkboxes, radio buttons, or toggle switches.
+   */
+  'aria-checked'?: 'false' | 'true' | 'mixed' | 'undefined' | boolean | 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;
+  /**
+   * Indicates the current item within a container or set of related elements.
+   */
+  'aria-current'?: 'false' | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | boolean | 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;
+  /**
+   * 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;
+  /**
+   * Defines the maximum value for a range input.
+   */
+  'aria-valuemax'?: number | null | undefined;
+  /**
+   * Defines the minimum value for a range input.
+   */
+  'aria-valuemin'?: number | null | undefined;
+  /**
+   * Specifies the current value for a range input.
+   */
+  'aria-valuenow'?: number | null | undefined;
+  /**
+   * Provides a human-readable representation of the current value.
+   */
+  'aria-valuetext'?: 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;
+  /**
+   * When present, it indicates that an input element should be pre-selected (checked) when the page loads.
+   */
+  checked?: boolean | 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 direction of the text.
+   */
+  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;
+  /**
+   * The URL that processes the form submission. Overrides the action attribute of the button's form owner. Only applies to submit buttons. Element-specific to button and input elements with type submit or image.
+   */
+  formaction?: string | null | undefined;
+  /**
+   * Specifies how form data should be encoded when submitting to the server. Only for submit buttons. Overrides the form's enctype attribute. Element-specific to button and input elements with type submit or image.
+   */
+  formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null | undefined;
+  /**
+   * Specifies the HTTP method to use when submitting the form. Only for submit buttons. Overrides the form's method attribute. Use "post" for sensitive data, "get" for idempotent operations, "dialog" to close dialog without submission. Element-specific to button and input elements with type submit or image.
+   */
+  formmethod?: 'get' | 'post' | 'dialog' | null | undefined;
+  /**
+   * When present, specifies that the form should not be validated when submitted. Only applies to submit buttons. Overrides the form's novalidate attribute. Element-specific to button and input elements with type submit or image.
+   */
+  formnovalidate?: boolean | null | undefined;
+  /**
+   * 
+   */
+  formtarget?: '_self' | '_blank' | '_parent' | '_top' | string | null | undefined;
+  /**
+   * Specifies the height of the element. The meaning may vary depending on the element type. Accepts integers, pixels (px), and percentages (%).
+   */
+  height?: 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;
+  /**
+   * Refers to a <datalist> element that contains pre-defined options for an input element.
+   */
+  list?: string | null | undefined;
+  /**
+   * Specifies the maximum value for an input element, meter, or progress element.
+   */
+  max?: number | null | undefined;
+  /**
+   * Specifies the maximum number of characters allowed in an input field.
+   */
+  maxlength?: number | null | undefined;
+  /**
+   * Specifies the minimum value for an input element or a meter element.
+   */
+  min?: string | null | undefined;
+  /**
+   * Specifies the minimum number of characters required in an input field.
+   */
+  minlength?: number | null | undefined;
+  /**
+   * When present, it specifies that the user is allowed to enter more than one value in an input element.
+   */
+  multiple?: boolean | null | undefined;
+  /**
+   * Specifies the name associated with the element. The meaning may vary depending on the context.
+   */
+  name?: string | null | undefined;
+  /**
+   * Specifies a regular expression that the <input> element's value is checked against.
+   */
+  pattern?: string | null | undefined;
+  /**
+   * Specifies a short hint that describes the expected value of an input field.
+   */
+  placeholder?: string | null | undefined;
+  /**
+   * Turns the button into a popover control by specifying the ID of the popover element to control. Creates implicit aria-details and aria-expanded relationships, establishes anchor positioning reference, and improves accessibility. Part of the Popover API. Element-specific to button and input elements.
+   */
+  popovertarget?: string | null | undefined;
+  /**
+   * Specifies the action to perform on the popover element controlled by popovertarget. "show" displays a hidden popover, "hide" hides a visible popover, "toggle" (default) switches between states. Part of the Popover API. Element-specific to button and input elements.
+   */
+  popovertargetaction?: 'show' | 'hide' | 'toggle' | 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;
+  /**
+   * The role attribute is used to define the purpose of an element.
+   */
+  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 height of a hr element in pixels.
+   */
+  size?: number | null | undefined;
+  /**
+   * Represents the spellchecking behavior of the element
+   */
+  spellcheck?: 'true' | 'false' | boolean | null | undefined;
+  /**
+   * Specifies the URL of the external resource to be embedded or referenced. Required if input type is image
+   */
+  src?: string | null | undefined;
+  /**
+   * Specifies the legal number intervals for an input element.
+   */
+  step?: string | 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;
+  /**
+   * Specifies the type of the input. Defaults to text if the attribute is omitted
+   */
+  type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | null | undefined;
+  /**
+   * Specifies the value associated with the element. The meaning and usage may vary depending on the element type.
+   */
+  value?: string | null | undefined;
+  /**
+   * Specifies the width of the element. The meaning may vary depending on the element type. Accepts integers, pixels (px), and percentages (%).
+   */
+  width?: string | null | undefined;
+}
+
+/**
+ * Input - 
+ */
+export class Input {
+  private element: HTMLElement;
+
+  constructor(props: InputProps = {}) {
+    this.element = document.createElement('input');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: InputProps): void {
+    if (props.accept !== undefined) {
+      this.element.setAttribute('accept', String(props.accept));
+    }
+    if (props.accesskey !== undefined) {
+      this.element.setAttribute('accesskey', String(props.accesskey));
+    }
+    if (props.alt !== undefined) {
+      this.element.setAttribute('alt', String(props.alt));
+    }
+    if (props['aria-atomic'] !== undefined) {
+      this.setAriaAtomic(props['aria-atomic']);
+    }
+    if (props['aria-autocomplete'] !== undefined) {
+      this.setAriaAutocomplete(props['aria-autocomplete']);
+    }
+    if (props['aria-checked'] !== undefined) {
+      this.setAriaChecked(props['aria-checked']);
+    }
+    if (props['aria-controls'] !== undefined) {
+      this.element.setAttribute('aria-controls', String(props['aria-controls']));
+    }
+    if (props['aria-current'] !== undefined) {
+      this.setAriaCurrent(props['aria-current']);
+    }
+    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-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['aria-valuemax'] !== undefined) {
+      this.element.setAttribute('aria-valuemax', String(props['aria-valuemax']));
+    }
+    if (props['aria-valuemin'] !== undefined) {
+      this.element.setAttribute('aria-valuemin', String(props['aria-valuemin']));
+    }
+    if (props['aria-valuenow'] !== undefined) {
+      this.element.setAttribute('aria-valuenow', String(props['aria-valuenow']));
+    }
+    if (props['aria-valuetext'] !== undefined) {
+      this.element.setAttribute('aria-valuetext', String(props['aria-valuetext']));
+    }
+    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.checked !== undefined) {
+      this.element.setAttribute('checked', String(props.checked));
+    }
+    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.formaction !== undefined) {
+      this.element.setAttribute('formaction', String(props.formaction));
+    }
+    if (props.formenctype !== undefined) {
+      this.setFormenctype(props.formenctype);
+    }
+    if (props.formmethod !== undefined) {
+      this.setFormmethod(props.formmethod);
+    }
+    if (props.formnovalidate !== undefined) {
+      this.element.setAttribute('formnovalidate', String(props.formnovalidate));
+    }
+    if (props.formtarget !== undefined) {
+      this.setFormtarget(props.formtarget);
+    }
+    if (props.height !== undefined) {
+      this.element.setAttribute('height', String(props.height));
+    }
+    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.list !== undefined) {
+      this.element.setAttribute('list', String(props.list));
+    }
+    if (props.max !== undefined) {
+      this.element.setAttribute('max', String(props.max));
+    }
+    if (props.maxlength !== undefined) {
+      this.element.setAttribute('maxlength', String(props.maxlength));
+    }
+    if (props.min !== undefined) {
+      this.element.setAttribute('min', String(props.min));
+    }
+    if (props.minlength !== undefined) {
+      this.element.setAttribute('minlength', String(props.minlength));
+    }
+    if (props.multiple !== undefined) {
+      this.element.setAttribute('multiple', String(props.multiple));
+    }
+    if (props.name !== undefined) {
+      this.element.setAttribute('name', String(props.name));
+    }
+    if (props.pattern !== undefined) {
+      this.element.setAttribute('pattern', String(props.pattern));
+    }
+    if (props.placeholder !== undefined) {
+      this.element.setAttribute('placeholder', String(props.placeholder));
+    }
+    if (props.popovertarget !== undefined) {
+      this.element.setAttribute('popovertarget', String(props.popovertarget));
+    }
+    if (props.popovertargetaction !== undefined) {
+      this.setPopovertargetaction(props.popovertargetaction);
+    }
+    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.size !== undefined) {
+      this.element.setAttribute('size', String(props.size));
+    }
+    if (props.spellcheck !== undefined) {
+      this.setSpellcheck(props.spellcheck);
+    }
+    if (props.src !== undefined) {
+      this.element.setAttribute('src', String(props.src));
+    }
+    if (props.step !== undefined) {
+      this.element.setAttribute('step', String(props.step));
+    }
+    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.type !== undefined) {
+      this.setType(props.type);
+    }
+    if (props.value !== undefined) {
+      this.element.setAttribute('value', String(props.value));
+    }
+    if (props.width !== undefined) {
+      this.element.setAttribute('width', String(props.width));
+    }
+  }
+
+  setAccept(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accept');
+    } else {
+      this.element.setAttribute('accept', String(value));
+    }
+    return this;
+  }
+
+  setAccesskey(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accesskey');
+    } else {
+      this.element.setAttribute('accesskey', String(value));
+    }
+    return this;
+  }
+
+  setAlt(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('alt');
+    } else {
+      this.element.setAttribute('alt', 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;
+  }
+
+  setAriaChecked(value: 'false' | 'true' | 'mixed' | 'undefined' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-checked');
+    } else {
+      this.element.setAttribute('aria-checked', 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;
+  }
+
+  setAriaCurrent(value: 'false' | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-current');
+    } else {
+      this.element.setAttribute('aria-current', 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;
+  }
+
+  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;
+  }
+
+  setAriaValuemax(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-valuemax');
+    } else {
+      this.element.setAttribute('aria-valuemax', String(value));
+    }
+    return this;
+  }
+
+  setAriaValuemin(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-valuemin');
+    } else {
+      this.element.setAttribute('aria-valuemin', String(value));
+    }
+    return this;
+  }
+
+  setAriaValuenow(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-valuenow');
+    } else {
+      this.element.setAttribute('aria-valuenow', String(value));
+    }
+    return this;
+  }
+
+  setAriaValuetext(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-valuetext');
+    } else {
+      this.element.setAttribute('aria-valuetext', 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;
+  }
+
+  setChecked(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('checked', '');
+    } else {
+      this.element.removeAttribute('checked');
+    }
+    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;
+  }
+
+  setFormaction(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('formaction');
+    } else {
+      this.element.setAttribute('formaction', String(value));
+    }
+    return this;
+  }
+
+  setFormenctype(value: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('formenctype');
+    } else {
+      this.element.setAttribute('formenctype', String(value));
+    }
+    return this;
+  }
+
+  setFormmethod(value: 'get' | 'post' | 'dialog' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('formmethod');
+    } else {
+      this.element.setAttribute('formmethod', String(value));
+    }
+    return this;
+  }
+
+  setFormnovalidate(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('formnovalidate', '');
+    } else {
+      this.element.removeAttribute('formnovalidate');
+    }
+    return this;
+  }
+
+  setFormtarget(value: '_self' | '_blank' | '_parent' | '_top' | string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('formtarget');
+    } else {
+      this.element.setAttribute('formtarget', String(value));
+    }
+    return this;
+  }
+
+  setHeight(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('height');
+    } else {
+      this.element.setAttribute('height', 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;
+  }
+
+  setList(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('list');
+    } else {
+      this.element.setAttribute('list', String(value));
+    }
+    return this;
+  }
+
+  setMax(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('max');
+    } else {
+      this.element.setAttribute('max', 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;
+  }
+
+  setMin(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('min');
+    } else {
+      this.element.setAttribute('min', 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;
+  }
+
+  setMultiple(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('multiple', '');
+    } else {
+      this.element.removeAttribute('multiple');
+    }
+    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;
+  }
+
+  setPattern(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('pattern');
+    } else {
+      this.element.setAttribute('pattern', 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;
+  }
+
+  setPopovertarget(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('popovertarget');
+    } else {
+      this.element.setAttribute('popovertarget', String(value));
+    }
+    return this;
+  }
+
+  setPopovertargetaction(value: 'show' | 'hide' | 'toggle' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('popovertargetaction');
+    } else {
+      this.element.setAttribute('popovertargetaction', 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;
+  }
+
+  setSize(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('size');
+    } else {
+      this.element.setAttribute('size', 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;
+  }
+
+  setSrc(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('src');
+    } else {
+      this.element.setAttribute('src', String(value));
+    }
+    return this;
+  }
+
+  setStep(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('step');
+    } else {
+      this.element.setAttribute('step', 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;
+  }
+
+  setType(value: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('type');
+    } else {
+      this.element.setAttribute('type', String(value));
+    }
+    return this;
+  }
+
+  setValue(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('value');
+    } else {
+      this.element.setAttribute('value', String(value));
+    }
+    return this;
+  }
+
+  setWidth(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('width');
+    } else {
+      this.element.setAttribute('width', String(value));
+    }
+    return this;
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+}