@typesafe-html5/typescript 0.2.58

package/block/fieldset/fieldset.ts

@@ -0,0 +1,570 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Fieldset
+ * @description 
+ */
+
+export interface FieldsetProps {
+  /**
+   * 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;
+  /**
+   * 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 the element is exposed to an accessibility API. Use with caution on interactive elements. Set to true only on decorative elements such as icons, or when nav isnt visible
+   */
+  'aria-hidden'?: 'false' | 'true' | 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;
+  /**
+   * 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 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 
+   */
+  popover?: 'auto' | 'hint' | 'manual' | 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;
+  /**
+   * 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;
+}
+
+/**
+ * Fieldset - 
+ */
+export class Fieldset {
+  private element: HTMLElement;
+
+  constructor(props: FieldsetProps = {}) {
+    this.element = document.createElement('fieldset');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: FieldsetProps): 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-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-hidden'] !== undefined) {
+      this.setAriaHidden(props['aria-hidden']);
+    }
+    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-labelledby'] !== undefined) {
+      this.element.setAttribute('aria-labelledby', String(props['aria-labelledby']));
+    }
+    if (props['aria-live'] !== undefined) {
+      this.setAriaLive(props['aria-live']);
+    }
+    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.contenteditable !== undefined) {
+      this.setContenteditable(props.contenteditable);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    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.popover !== undefined) {
+      this.setPopover(props.popover);
+    }
+    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);
+    }
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setAriaHidden(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-hidden');
+    } else {
+      this.element.setAttribute('aria-hidden', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+}