@typesafe-html5/typescript 0.2.61 → 0.2.72

package/{block/details/details.ts → src/block/dt/dt.ts}

@@ -1,16 +1,20 @@
 /**
  * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
  *
- * @generated December 28, 2025 12:26:31
- * @component Details
+ * @generated January 2, 2026 15:45:45
+ * @component Dt
  * @description 
  */
 
-export interface DetailsProps {
+export interface DtProps {
   /**
    * 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 DetailsProps {
    * 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
    */
@@ -51,10 +47,6 @@ export interface DetailsProps {
    * 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
    */
@@ -63,10 +55,6 @@ export interface DetailsProps {
    * 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.
    */
@@ -83,10 +71,22 @@ export interface DetailsProps {
    * 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 DetailsProps {
    * 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 DetailsProps {
    * 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 DetailsProps {
    * 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 DetailsProps {
 }
 
 /**
- * Details - 
+ * Dt - 
  */
-export class Details {
+export class Dt {
   private element: HTMLElement;
 
-  constructor(props: DetailsProps = {}) {
-    this.element = document.createElement('details');
+  constructor(props: DtProps = {}) {
+    this.element = document.createElement('dt');
     this.applyProps(props);
   }
 
-  private applyProps(props: DetailsProps): void {
+  private applyProps(props: DtProps): 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,30 +185,18 @@ export class Details {
     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']);
     }
     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']);
     }
@@ -214,9 +209,23 @@ export class Details {
     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 Details {
     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 Details {
     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 Details {
     }
   }
 
+  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 Details {
     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');
@@ -351,15 +354,6 @@ export class Details {
     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');
@@ -378,15 +372,6 @@ export class Details {
     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 Details {
     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 Details {
     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 Details {
     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 Details {
     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 Details {
     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}/embed/embed.ts

@@ -1,16 +1,24 @@
 /**
  * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
  *
- * @generated December 28, 2025 12:26:31
+ * @generated January 2, 2026 15:45:45
  * @component Embed
  * @description 
  */
 
 export interface EmbedProps {
+  /**
+   * 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;
   /**
    * Represents the autocapitalize behavior of the element
    */
@@ -19,10 +27,22 @@ export interface EmbedProps {
    * 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
    */
@@ -39,6 +59,10 @@ export interface EmbedProps {
    * 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
    */
@@ -59,6 +83,10 @@ export interface EmbedProps {
    * Represents the CSS inline style of the element
    */
   style?: string | null | undefined;
+  /**
+   * Tab order position
+   */
+  tabIndex?: number;
   /**
    * Represents a tab order of the element
    */
@@ -93,18 +121,49 @@ export class Embed {
   }
 
   private applyProps(props: EmbedProps): void {
+    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.autocapitalize !== undefined) {
       this.setAutocapitalize(props.autocapitalize);
     }
     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);
     }
@@ -117,6 +176,9 @@ export class Embed {
     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);
     }
@@ -132,6 +194,9 @@ export class Embed {
     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));
     }
@@ -149,6 +214,15 @@ export class Embed {
     }
   }
 
+  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');
@@ -158,6 +232,25 @@ export class Embed {
     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;
+  }
+
   setAutocapitalize(value: 'none' | 'sentences' | 'words' | 'characters' | null | undefined): this {
     if (value === null || value === undefined) {
       this.element.removeAttribute('autocapitalize');
@@ -176,6 +269,24 @@ export class Embed {
     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');
@@ -185,6 +296,20 @@ export class Embed {
     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');
@@ -221,6 +346,15 @@ export class Embed {
     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');
@@ -266,6 +400,15 @@ export class Embed {
     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');