@typesafe-html5/typescript 0.2.58

package/inline/button/button.ts

@@ -0,0 +1,826 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Button
+ * @description 
+ */
+
+export interface ButtonProps {
+  /**
+   * 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;
+  /**
+   * The aria-busy attribute is used to indicate whether an element is currently busy or not.
+   */
+  'aria-busy'?: 'true' | 'false' | boolean | 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;
+  /**
+   * 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 a toggle button is pressed (true, false, or mixed).
+   */
+  'aria-pressed'?: 'false' | 'true' | 'mixed' | 'undefined' | boolean | null | undefined;
+  /**
+   * Indicates what content changes should be announced in a live region.
+   */
+  'aria-relevant'?: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | 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;
+  /**
+   * 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 action to be performed on an element controlled via commandfor attribute. Supports dialog operations (show-modal, close, request-close), popover operations (show-popover, hide-popover, toggle-popover), and custom commands prefixed with "--". Provides declarative element control without JavaScript. Element-specific to button element.
+   */
+  command?: string | null | undefined;
+  /**
+   * Turns the button into a command button by specifying the ID of the element to control. Works with the command attribute to define the action. A more general version of popovertarget. Enables declarative control of interactive elements. Element-specific to button element.
+   */
+  commandfor?: string | 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;
+  /**
+   * 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;
+  /**
+   * 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 name associated with the element. The meaning may vary depending on the context.
+   */
+  name?: 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Specifies the type of the button.
+   */
+  type?: 'submit' | 'reset' | 'button' | null | undefined;
+  /**
+   * Specifies the value associated with the element. The meaning and usage may vary depending on the element type.
+   */
+  value?: string | null | undefined;
+}
+
+/**
+ * Button - 
+ */
+export class Button {
+  private element: HTMLElement;
+
+  constructor(props: ButtonProps = {}) {
+    this.element = document.createElement('button');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: ButtonProps): 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-busy'] !== undefined) {
+      this.setAriaBusy(props['aria-busy']);
+    }
+    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-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-pressed'] !== undefined) {
+      this.setAriaPressed(props['aria-pressed']);
+    }
+    if (props['aria-relevant'] !== undefined) {
+      this.setAriaRelevant(props['aria-relevant']);
+    }
+    if (props['aria-roledescription'] !== undefined) {
+      this.element.setAttribute('aria-roledescription', String(props['aria-roledescription']));
+    }
+    if (props.autocapitalize !== undefined) {
+      this.setAutocapitalize(props.autocapitalize);
+    }
+    if (props.autocorrect !== undefined) {
+      this.setAutocorrect(props.autocorrect);
+    }
+    if (props.autofocus !== undefined) {
+      this.element.setAttribute('autofocus', String(props.autofocus));
+    }
+    if (props.command !== undefined) {
+      this.element.setAttribute('command', String(props.command));
+    }
+    if (props.commandfor !== undefined) {
+      this.element.setAttribute('commandfor', String(props.commandfor));
+    }
+    if (props.contenteditable !== undefined) {
+      this.setContenteditable(props.contenteditable);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    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.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.name !== undefined) {
+      this.element.setAttribute('name', String(props.name));
+    }
+    if (props.popovertarget !== undefined) {
+      this.element.setAttribute('popovertarget', String(props.popovertarget));
+    }
+    if (props.popovertargetaction !== undefined) {
+      this.setPopovertargetaction(props.popovertargetaction);
+    }
+    if (props.role !== undefined) {
+      this.setRole(props.role);
+    }
+    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.type !== undefined) {
+      this.setType(props.type);
+    }
+    if (props.value !== undefined) {
+      this.element.setAttribute('value', String(props.value));
+    }
+  }
+
+  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;
+  }
+
+  setAriaBusy(value: 'true' | 'false' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-busy');
+    } else {
+      this.element.setAttribute('aria-busy', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setCommand(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('command');
+    } else {
+      this.element.setAttribute('command', String(value));
+    }
+    return this;
+  }
+
+  setCommandfor(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('commandfor');
+    } else {
+      this.element.setAttribute('commandfor', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setName(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('name');
+    } else {
+      this.element.setAttribute('name', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setType(value: 'submit' | 'reset' | 'button' | 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;
+  }
+
+  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;
+  }
+}