@typesafe-html5/typescript 0.2.61 → 0.2.72

package/{block/dialog/dialog.ts → src/block/dd/dd.ts}

@@ -1,16 +1,20 @@
 /**
  * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
  *
- * @generated December 28, 2025 12:26:31
- * @component Dialog
+ * @generated January 2, 2026 15:45:45
+ * @component Dd
  * @description 
  */
 
-export interface DialogProps {
+export interface DdProps {
   /**
    * Child content or elements
    */
   children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * Keyboard shortcut to activate or focus the element
+   */
+  accessKey?: string;
   /**
    * specifies a shortcut key (or keys) to activate or focus an element
    */
@@ -35,14 +39,6 @@ export interface DialogProps {
    * References an element that provides additional details about the current element.
    */
   'aria-details'?: string | 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 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
    */
@@ -59,14 +55,6 @@ export interface DialogProps {
    * Defines how updates to the element should be announced to screen readers.
    */
   'aria-live'?: 'off' | 'polite' | 'assertive' | null | undefined;
-  /**
-   * Specifies whether an element is a modal dialog that blocks interaction with other content.
-   */
-  'aria-modal'?: 'false' | 'true' | boolean | 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.
    */
@@ -83,10 +71,22 @@ export interface DialogProps {
    * Indicates whether the element is hidden
    */
   autofocus?: boolean | null | undefined;
+  /**
+   * CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the element is editable
+   */
+  contentEditable?: boolean | "true" | "false" | "inherit";
   /**
    * Indicates whether the element can be edited in place
    */
   contenteditable?: 'true' | 'false' | 'inherit' | boolean | null | undefined;
+  /**
+   * Mapping of data-* attributes to their values (e.g., {"test":"value"} -> data-test="value")
+   */
+  'data-attributes'?: Record<string, string> | null | undefined;
   /**
    * Represents the text direction of the element
    */
@@ -99,6 +99,10 @@ export interface DialogProps {
    * Indicates whether the element is hidden
    */
   hidden?: boolean | null | undefined;
+  /**
+   * Unique identifier
+   */
+  id?: string;
   /**
    * 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
    */
@@ -107,10 +111,6 @@ export interface DialogProps {
    * Specifies the primary language for the element's content
    */
   lang?: string | null | undefined;
-  /**
-   * When present, it specifies that the details should be visible (open) to the user.
-   */
-  open?: boolean | null | undefined;
   /**
    * 
    */
@@ -131,6 +131,10 @@ export interface DialogProps {
    * Represents the CSS inline style of the element
    */
   style?: string | null | undefined;
+  /**
+   * Tab order position
+   */
+  tabIndex?: number;
   /**
    * Represents a tab order of the element
    */
@@ -146,20 +150,23 @@ export interface DialogProps {
 }
 
 /**
- * Dialog - 
+ * Dd - 
  */
-export class Dialog {
+export class Dd {
   private element: HTMLElement;
 
-  constructor(props: DialogProps = {}) {
-    this.element = document.createElement('dialog');
+  constructor(props: DdProps = {}) {
+    this.element = document.createElement('dd');
     this.applyProps(props);
   }
 
-  private applyProps(props: DialogProps): void {
+  private applyProps(props: DdProps): void {
     if (props.children !== undefined) {
       this.setChildren(props.children);
     }
+    if (props.accessKey !== undefined) {
+      this.element.setAttribute('accessKey', String(props.accessKey));
+    }
     if (props.accesskey !== undefined) {
       this.element.setAttribute('accesskey', String(props.accesskey));
     }
@@ -178,12 +185,6 @@ export class Dialog {
     if (props['aria-details'] !== undefined) {
       this.element.setAttribute('aria-details', String(props['aria-details']));
     }
-    if (props['aria-expanded'] !== undefined) {
-      this.setAriaExpanded(props['aria-expanded']);
-    }
-    if (props['aria-haspopup'] !== undefined) {
-      this.setAriaHaspopup(props['aria-haspopup']);
-    }
     if (props['aria-hidden'] !== undefined) {
       this.setAriaHidden(props['aria-hidden']);
     }
@@ -196,12 +197,6 @@ export class Dialog {
     if (props['aria-live'] !== undefined) {
       this.setAriaLive(props['aria-live']);
     }
-    if (props['aria-modal'] !== undefined) {
-      this.setAriaModal(props['aria-modal']);
-    }
-    if (props['aria-pressed'] !== undefined) {
-      this.setAriaPressed(props['aria-pressed']);
-    }
     if (props['aria-relevant'] !== undefined) {
       this.setAriaRelevant(props['aria-relevant']);
     }
@@ -214,9 +209,23 @@ export class Dialog {
     if (props.autofocus !== undefined) {
       this.element.setAttribute('autofocus', String(props.autofocus));
     }
+    if (props.className !== undefined) {
+      this.element.setAttribute('className', String(props.className));
+    }
+    if (props.contentEditable !== undefined) {
+      this.element.setAttribute('contentEditable', String(props.contentEditable));
+    }
     if (props.contenteditable !== undefined) {
       this.setContenteditable(props.contenteditable);
     }
+    if (props['data-attributes'] !== undefined) {
+      const __map = props['data-attributes'];
+      if (__map !== null && __map !== undefined) {
+        for (const __k in __map) {
+          this.element.setAttribute(`data-${__k}`, String((__map as any)[__k]));
+        }
+      }
+    }
     if (props.dir !== undefined) {
       this.setDir(props.dir);
     }
@@ -226,15 +235,15 @@ export class Dialog {
     if (props.hidden !== undefined) {
       this.element.setAttribute('hidden', String(props.hidden));
     }
+    if (props.id !== undefined) {
+      this.element.setAttribute('id', String(props.id));
+    }
     if (props.inputmode !== undefined) {
       this.setInputmode(props.inputmode);
     }
     if (props.lang !== undefined) {
       this.element.setAttribute('lang', String(props.lang));
     }
-    if (props.open !== undefined) {
-      this.element.setAttribute('open', String(props.open));
-    }
     if (props.popover !== undefined) {
       this.setPopover(props.popover);
     }
@@ -250,6 +259,9 @@ export class Dialog {
     if (props.style !== undefined) {
       this.element.setAttribute('style', String(props.style));
     }
+    if (props.tabIndex !== undefined) {
+      this.element.setAttribute('tabIndex', String(props.tabIndex));
+    }
     if (props.tabindex !== undefined) {
       this.element.setAttribute('tabindex', String(props.tabindex));
     }
@@ -261,6 +273,15 @@ export class Dialog {
     }
   }
 
+  setAccessKey(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accessKey');
+    } else {
+      this.element.setAttribute('accessKey', String(value));
+    }
+    return this;
+  }
+
   setAccesskey(value: string | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('accesskey');
@@ -315,24 +336,6 @@ export class Dialog {
     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;
-  }
-
   setAriaHidden(value: 'false' | 'true' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-hidden');
@@ -369,24 +372,6 @@ export class Dialog {
     return this;
   }
 
-  setAriaModal(value: 'false' | 'true' | boolean | null | undefined): this {
-    if (value === null || value === undefined) {
-      this.element.removeAttribute('aria-modal');
-    } else {
-      this.element.setAttribute('aria-modal', 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');
@@ -423,6 +408,24 @@ export class Dialog {
     return this;
   }
 
+  setClassName(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('className');
+    } else {
+      this.element.setAttribute('className', String(value));
+    }
+    return this;
+  }
+
+  setContentEditable(value: boolean | "true" | "false" | "inherit"): this {
+    if (value === true) {
+      this.element.setAttribute('contentEditable', '');
+    } else {
+      this.element.removeAttribute('contentEditable');
+    }
+    return this;
+  }
+
   setContenteditable(value: 'true' | 'false' | 'inherit' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('contenteditable');
@@ -432,6 +435,20 @@ export class Dialog {
     return this;
   }
 
+  setDataAttributes(value: Record<string, string>): this {
+    if (value === null || value === undefined) {
+      // Remove all data-* attributes (best-effort)
+      for (const __a of Array.from(this.element.attributes)) {
+        if ((__a as Attr).name.startsWith('data-')) { (this.element as HTMLElement).removeAttribute((__a as Attr).name); }
+      }
+    } else {
+      for (const __k in value as Record<string, string>) {
+        this.element.setAttribute(`data-${__k}`, String((value as any)[__k]));
+      }
+    }
+    return this;
+  }
+
   setDir(value: 'ltr' | 'rtl' | 'auto' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('dir');
@@ -459,6 +476,15 @@ export class Dialog {
     return this;
   }
 
+  setId(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('id');
+    } else {
+      this.element.setAttribute('id', String(value));
+    }
+    return this;
+  }
+
   setInputmode(value: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('inputmode');
@@ -477,15 +503,6 @@ export class Dialog {
     return this;
   }
 
-  setOpen(value: boolean | null | undefined): this {
-    if (value === true) {
-      this.element.setAttribute('open', '');
-    } else {
-      this.element.removeAttribute('open');
-    }
-    return this;
-  }
-
   setPopover(value: 'auto' | 'hint' | 'manual' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('popover');
@@ -531,6 +548,15 @@ export class Dialog {
     return this;
   }
 
+  setTabIndex(value: number): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('tabIndex');
+    } else {
+      this.element.setAttribute('tabIndex', String(value));
+    }
+    return this;
+  }
+
   setTabindex(value: number | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('tabindex');

package/{block → src/block}/del/del.ts

@@ -1,7 +1,7 @@
 /**
  * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
  *
- * @generated December 28, 2025 12:26:31
+ * @generated January 2, 2026 15:45:45
  * @component Del
  * @description 
  */
@@ -11,10 +11,18 @@ export interface DelProps {
    * Child content or elements
    */
   children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * Keyboard shortcut to activate or focus the element
+   */
+  accessKey?: string;
   /**
    * specifies a shortcut key (or keys) to activate or focus an element
    */
   accesskey?: string | null | undefined;
+  /**
+   * Mapping of Alpine.js directives (shorthand or full) to their values (e.g., {@click: "do()"} or {"x-on:click":"do()"})
+   */
+  'alpine-attributes'?: Record<string, string> | null | undefined;
   /**
    * Indicates whether assistive technologies should present the entire region as a whole when changes occur.
    */
@@ -71,10 +79,22 @@ export interface DelProps {
    * Specifies the URL of the cited work or the name of the cited creative work.
    */
   cite?: string | null | undefined;
+  /**
+   * CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the element is editable
+   */
+  contentEditable?: boolean | "true" | "false" | "inherit";
   /**
    * Indicates whether the element can be edited in place
    */
   contenteditable?: 'true' | 'false' | 'inherit' | boolean | null | undefined;
+  /**
+   * Mapping of data-* attributes to their values (e.g., {"test":"value"} -> data-test="value")
+   */
+  'data-attributes'?: Record<string, string> | null | undefined;
   /**
    * Specifies the date and time of the change in the format 'YYYY-MM-DDThh:mm:ss' or a subset of it.
    */
@@ -91,6 +111,10 @@ export interface DelProps {
    * Indicates whether the element is hidden
    */
   hidden?: boolean | null | undefined;
+  /**
+   * Unique identifier
+   */
+  id?: string;
   /**
    * 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
    */
@@ -119,6 +143,10 @@ export interface DelProps {
    * Represents the CSS inline style of the element
    */
   style?: string | null | undefined;
+  /**
+   * Tab order position
+   */
+  tabIndex?: number;
   /**
    * Represents a tab order of the element
    */
@@ -148,9 +176,26 @@ export class Del {
     if (props.children !== undefined) {
       this.setChildren(props.children);
     }
+    if (props.accessKey !== undefined) {
+      this.element.setAttribute('accessKey', String(props.accessKey));
+    }
     if (props.accesskey !== undefined) {
       this.element.setAttribute('accesskey', String(props.accesskey));
     }
+    if (props['alpine-attributes'] !== undefined) {
+      const __map = props['alpine-attributes'];
+      if (__map !== null && __map !== undefined) {
+        for (const __k in __map) {
+          const __v = (__map as any)[__k];
+          let __attr = __k;
+          if (__k.startsWith('@')) { __attr = 'x-on:' + __k.slice(1); }
+          else if (__k.startsWith(':')) { __attr = 'x-bind:' + __k.slice(1); }
+          else if (__k.startsWith('.')) { __attr = 'x-model' + __k; }
+          else if (!__k.startsWith('x-') && ['show','text','html','if','for','cloak','init','data','effect','ignore','ref','transition','teleport'].includes(__k)) { __attr = 'x-' + __k; }
+          this.element.setAttribute(__attr, String(__v));
+        }
+      }
+    }
     if (props['aria-atomic'] !== undefined) {
       this.setAriaAtomic(props['aria-atomic']);
     }
@@ -193,9 +238,23 @@ export class Del {
     if (props.cite !== undefined) {
       this.element.setAttribute('cite', String(props.cite));
     }
+    if (props.className !== undefined) {
+      this.element.setAttribute('className', String(props.className));
+    }
+    if (props.contentEditable !== undefined) {
+      this.element.setAttribute('contentEditable', String(props.contentEditable));
+    }
     if (props.contenteditable !== undefined) {
       this.setContenteditable(props.contenteditable);
     }
+    if (props['data-attributes'] !== undefined) {
+      const __map = props['data-attributes'];
+      if (__map !== null && __map !== undefined) {
+        for (const __k in __map) {
+          this.element.setAttribute(`data-${__k}`, String((__map as any)[__k]));
+        }
+      }
+    }
     if (props.datetime !== undefined) {
       this.element.setAttribute('datetime', String(props.datetime));
     }
@@ -208,6 +267,9 @@ export class Del {
     if (props.hidden !== undefined) {
       this.element.setAttribute('hidden', String(props.hidden));
     }
+    if (props.id !== undefined) {
+      this.element.setAttribute('id', String(props.id));
+    }
     if (props.inputmode !== undefined) {
       this.setInputmode(props.inputmode);
     }
@@ -229,6 +291,9 @@ export class Del {
     if (props.style !== undefined) {
       this.element.setAttribute('style', String(props.style));
     }
+    if (props.tabIndex !== undefined) {
+      this.element.setAttribute('tabIndex', String(props.tabIndex));
+    }
     if (props.tabindex !== undefined) {
       this.element.setAttribute('tabindex', String(props.tabindex));
     }
@@ -240,6 +305,15 @@ export class Del {
     }
   }
 
+  setAccessKey(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accessKey');
+    } else {
+      this.element.setAttribute('accessKey', String(value));
+    }
+    return this;
+  }
+
   setAccesskey(value: string | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('accesskey');
@@ -249,6 +323,25 @@ export class Del {
     return this;
   }
 
+  setAlpineAttributes(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      // Remove all x-* Alpine attributes (best-effort)
+      for (const __a of Array.from(this.element.attributes)) {
+        if ((__a as Attr).name.startsWith('x-')) { (this.element as HTMLElement).removeAttribute((__a as Attr).name); }
+      }
+    } else {
+      for (const __k in value as Record<string, string>) {
+        let __attr = __k;
+        if (__k.startsWith('@')) { __attr = 'x-on:' + __k.slice(1); }
+        else if (__k.startsWith(':')) { __attr = 'x-bind:' + __k.slice(1); }
+        else if (__k.startsWith('.')) { __attr = 'x-model' + __k; }
+        else if (!__k.startsWith('x-') && ['show','text','html','if','for','cloak','init','data','effect','ignore','ref','transition','teleport'].includes(__k)) { __attr = 'x-' + __k; }
+        this.element.setAttribute(__attr, String((value as any)[__k]));
+      }
+    }
+    return this;
+  }
+
   setAriaAtomic(value: 'false' | 'true' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('aria-atomic');
@@ -375,6 +468,24 @@ export class Del {
     return this;
   }
 
+  setClassName(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('className');
+    } else {
+      this.element.setAttribute('className', String(value));
+    }
+    return this;
+  }
+
+  setContentEditable(value: boolean | "true" | "false" | "inherit"): this {
+    if (value === true) {
+      this.element.setAttribute('contentEditable', '');
+    } else {
+      this.element.removeAttribute('contentEditable');
+    }
+    return this;
+  }
+
   setContenteditable(value: 'true' | 'false' | 'inherit' | boolean | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('contenteditable');
@@ -384,6 +495,20 @@ export class Del {
     return this;
   }
 
+  setDataAttributes(value: Record<string, string>): this {
+    if (value === null || value === undefined) {
+      // Remove all data-* attributes (best-effort)
+      for (const __a of Array.from(this.element.attributes)) {
+        if ((__a as Attr).name.startsWith('data-')) { (this.element as HTMLElement).removeAttribute((__a as Attr).name); }
+      }
+    } else {
+      for (const __k in value as Record<string, string>) {
+        this.element.setAttribute(`data-${__k}`, String((value as any)[__k]));
+      }
+    }
+    return this;
+  }
+
   setDatetime(value: string | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('datetime');
@@ -420,6 +545,15 @@ export class Del {
     return this;
   }
 
+  setId(value: string): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('id');
+    } else {
+      this.element.setAttribute('id', String(value));
+    }
+    return this;
+  }
+
   setInputmode(value: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('inputmode');
@@ -483,6 +617,15 @@ export class Del {
     return this;
   }
 
+  setTabIndex(value: number): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('tabIndex');
+    } else {
+      this.element.setAttribute('tabIndex', String(value));
+    }
+    return this;
+  }
+
   setTabindex(value: number | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('tabindex');