@neptune3d/dom 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,22 +1,74 @@
 import { PropertiesFallback, Property, Property as CssProperty } from "csstype";
 
-//#region src/MediaRule.d.ts
-declare class MediaRule {
-  constructor(index: number, rule: CSSMediaRule);
-  protected _index: number;
-  protected _rule: CSSMediaRule;
-  protected cssMap: Map<string, number>;
-  get index(): number;
-  get rule(): CSSMediaRule;
-  get length(): number;
-  getCssRule(selector: string): CSSStyleRule;
-  delete(index: number): void;
+//#region src/InputCheckbox.d.ts
+declare class InputCheckbox extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  checked(value: boolean): this;
+  isChecked(): boolean;
+}
+//#endregion
+//#region src/InputColor.d.ts
+declare class InputColor extends DomElement<"input"> {
+  constructor();
+  protected _rgb: {
+    r: number;
+    g: number;
+    b: number;
+  };
+  name(value: string): this;
+  value(value: string): this;
+  getValue(): string;
+  getRGB(): {
+    r: number;
+    g: number;
+    b: number;
+  };
+  getNormalizedRGB(): {
+    r: number;
+    g: number;
+    b: number;
+  };
+}
+//#endregion
+//#region src/InputNumber.d.ts
+declare class InputNumber extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: number): this;
+  getValue(): number;
+  min(value: number): this;
+  max(value: number): this;
+  step(value: number): this;
+  placeholder(value: string): this;
+}
+//#endregion
+//#region src/InputRange.d.ts
+declare class InputRange extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: number): this;
+  getValue(): number;
+  min(value: number): this;
+  max(value: number): this;
+  step(value: number): this;
+}
+//#endregion
+//#region src/InputText.d.ts
+declare class InputText extends DomElement<"input"> {
+  constructor();
+  name(value: string): this;
+  value(value: string): this;
+  getValue(): string;
+  placeholder(value: string): this;
 }
 //#endregion
 //#region src/types.d.ts
-type CssProperties = PropertiesFallback<string | number>;
+type CssProperties = PropertiesFallback<string | number> & {
+  [key: `--${string}`]: string | number | undefined;
+};
 type Autocomplete<T$1 extends string> = T$1 | (string & {});
-type DomElementChild = DomElement<any> | string | number;
+type DomElementChild = DomElement<any> | Node | string | number;
 type DomElementTagNameMap = HTMLElementTagNameMap & SvgElementTagNameMap;
 type SvgElementTagNameMap = {
   svgA: SVGAElement;
@@ -84,445 +136,829 @@ type SvgElementTagNameMap = {
   view: SVGViewElement;
 };
 type DomElementEventMap = HTMLElementEventMap & SVGElementEventMap;
+type InputElementMap = {
+  color: InputColor;
+  text: InputText;
+  number: InputNumber;
+  range: InputRange;
+  checkbox: InputCheckbox;
+};
 //#endregion
-//#region src/StyleSheet.d.ts
-/**
- * Manages a dedicated `<style>` element and provides programmatic access to its CSS rules.
- * Supports dynamic insertion, retrieval, and deletion of both standard and media-specific rules,
- * with internal indexing for fast lookup and reuse.
- *
- * This class ensures a single shared stylesheet instance via `StyleSheet.getSheet()`,
- * and maintains selector-to-index and media-to-rule maps on the global `window` object.
- *
- * Designed for use with component-level styling systems or DOM abstractions that require
- * granular control over rule injection without relying on inline styles.
- */
-declare class StyleSheet {
-  constructor(el: HTMLStyleElement);
-  protected _dom: HTMLStyleElement;
-  get dom(): HTMLStyleElement;
-  get sheet(): CSSStyleSheet;
-  get length(): number;
-  /**
-   * Inserts or updates a global CSS rule for a given selector.
-   * @param selector - A global class selector (e.g., ".list-item").
-   * @param props - The CSS properties to apply.
-   */
-  globalCss(selector: string, props: CssProperties): void;
-  /**
-   * Inserts or updates a global CSS rule inside a media query.
-   * @param mediaText - The media query condition (e.g., "max-width: 600px").
-   * @param selector - The global class selector.
-   * @param props - The CSS properties to apply.
-   */
-  globalMediaCss(mediaText: string, selector: string, props: CssProperties): void;
-  getCssRule(selector: string): CSSStyleRule;
-  deleteCssRule(selector: string): void;
-  getMediaRule(mediaText: string): MediaRule;
-  deleteMediaRule(mediaText: string): void;
-  static getSheet(): StyleSheet;
-  setRuleCss(rule: CSSStyleRule, props: CssProperties): void;
-  getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
-  protected getCssMap(): Map<string, number>;
-  protected getMediaMap(): Map<string, MediaRule>;
-  static STYLE_ID: string;
-}
-//#endregion
-//#region src/DomElement.d.ts
-/**
- * A unified wrapper for HTML and SVG elements that provides a fluent, type-safe API
- * for DOM manipulation, styling, and event handling.
- *
- * Supports both `HTMLElementTagNameMap` and `SVGElementTagNameMap` via the generic `Tag`,
- * and automatically handles namespace creation for SVG elements.
- *
- * Provides ergonomic methods for setting styles, attributes, classes, and event listeners,
- * while abstracting away platform-specific quirks (e.g., `className` vs `setAttribute("class")`).
- *
- * @template Tag - The tag name of the element, inferred from `DomElementTagNameMap`.
- */
-declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomElementTagNameMap> {
+//#region src/BaseStyle.d.ts
+declare abstract class BaseStyle {
+  protected abstract setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
   /**
-   * Creates a new DomElement instance for the specified tag.
-   * Automatically detects whether the tag is an SVG element and uses the appropriate namespace.
-   * Optionally wraps an existing DOM element instead of creating a new one.
+   * Sets or clears the `padding` style of the element.
+   * Accepts any valid CSS padding shorthand (e.g., "10px", "1em 2em").
+   * Passing `undefined` removes the padding style.
    *
-   * @param tag - The tag name of the element (e.g., "div", "circle", "svg").
-   * @param el - An optional existing DOM element to wrap. If omitted, a new element is created.
-   */
-  constructor(tag: Tag, el?: DomElementTagNameMap[Tag]);
-  protected _tag: Tag extends "svgA" ? {
-    svgA: "a";
-  }[Tag] : Tag;
-  protected _isSvg: boolean;
-  protected _dom: DomElementTagNameMap[Tag];
-  protected _sheet: StyleSheet;
-  protected _cssClassName: string | undefined;
-  protected _userClassName: string | undefined;
-  /**
-   * Gets the tag name of the element (e.g., "div", "svg", "circle").
-   */
-  get tag(): Tag extends "svgA" ? {
-    svgA: "a";
-  }[Tag] : Tag;
-  /**
-   * Indicates whether the element is an SVG element.
-   * Returns `true` for tags like "svg", "circle", "path", etc.
-   */
-  get isSvg(): boolean;
-  /**
-   * Gets the underlying DOM element instance.
-   * This will be either an `HTMLElement` or `SVGElement` depending on the tag.
+   * @param value - The padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  get dom(): DomElementTagNameMap[Tag];
-  get cssClassName(): string;
-  getText(): string;
-  text(txt: any): this;
-  add(...nodes: DomElementChild[]): this;
+  p(value: Property.Padding | undefined): this;
   /**
-   * Inserts one or more DomElements into a parent at the specified index.
-   * Each node is inserted sequentially starting from the given index.
+   * Sets or clears the `padding-top` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes the top padding.
    *
-   * @param index - The zero-based index at which to start inserting.
-   * @param nodes - One or more DomElements to insert.
-   * @return This DomElement instance.
+   * @param value - The top padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  insertAtIndex(index: number, ...nodes: DomElementChild[]): this;
+  pt(value: Property.PaddingTop | undefined): this;
   /**
-   * Replaces all existing child elements of this DOM node with the provided ones.
-   * Internally clears the current children and appends the new nodes in order.
+   * Sets or clears the `padding-right` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes the right padding.
    *
-   * @param nodes - One or more DomElement instances to set as children.
-   * @return This DomElement instance.
+   * @param value - The right padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  setChildren(...nodes: DomElementChild[]): this;
+  pr(value: Property.PaddingRight | undefined): this;
   /**
-   * Replaces child elements starting from the specified index with the provided nodes.
-   * All children before the index are preserved.
+   * Sets or clears the `padding-bottom` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes the bottom padding.
    *
-   * @param index - The zero-based index at which replacement begins.
-   * @param nodes - One or more DomElement instances to insert.
-   * @return This DomElement instance.
+   * @param value - The bottom padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  setChildrenFromIndex(index: number, ...nodes: DomElementChild[]): this;
-  remove(): void;
+  pb(value: Property.PaddingBottom | undefined): this;
   /**
-   * Removes child elements within the specified index range.
-   * If no range is provided, removes all children.
+   * Sets or clears the `padding-left` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes the left padding.
    *
-   * @param from - The starting index (inclusive). Defaults to 0.
-   * @param to - The ending index (exclusive). Defaults to all children.
-   * @returns This DomElement instance.
-   */
-  clear(from?: number, to?: number): this;
-  /**
-   * Adds an event listener to the element.
-   * Supports both HTML and SVG elements.
-   * @param type - The event type (e.g., "click", "input", "mouseenter").
-   * @param handler - The event handler function.
-   * @param options - Optional event listener options.
-   * @return This DomElement instance for chaining.
-   */
-  on<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T] & {
-    currentTarget: DomElementTagNameMap[Tag];
-  }) => void, options?: boolean | AddEventListenerOptions): this;
-  /**
-   * Removes an event listener from the element.
-   * Supports both HTML and SVG elements.
-   * @param type - The event type to remove.
-   * @param handler - The original handler function.
-   * @param options - Optional event listener options.
-   */
-  off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
-  /**
-   * Retrieves the value of a single attribute.
-   * @param name - The attribute name to read (e.g. "aria-label", "role").
-   * @return The attribute value as a string, or null if not present.
-   */
-  getAttr(name: string): string | null;
-  /**
-   * Sets a single attribute on the element.
-   * @param name - The attribute name (e.g. "aria-label", "role", "disabled").
-   * @param value - The attribute value. If undefined, the attribute is removed.
-   * @return This DomElement instance for chaining.
-   */
-  attr(name: string, value: string | number | boolean | undefined): this;
-  /**
-   * Sets multiple attributes on the element.
-   * @param attributes - An object mapping attribute names to values.
-   *                     Attributes with undefined values are removed.
-   * @return This DomElement instance for chaining.
+   * @param value - The left padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  attrs(attributes: Record<string, string | number | boolean | undefined>): this;
+  pl(value: Property.PaddingLeft | undefined): this;
   /**
-   * Retrieves the value of a single property.
-   * @param name - The property name to read (e.g. "value", "checked", "disabled").
-   * @return The property value, or undefined if not present.
+   * Sets or clears horizontal padding (`padding-left` and `padding-right`) simultaneously.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes both left and right padding.
+   *
+   * @param value - The horizontal padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  getProp(name: string): any;
+  px(value: Property.PaddingLeft | undefined): this;
   /**
-   * Sets a single property on the element.
-   * @param name - The property name (e.g. "checked", "value", "disabled").
-   * @param value - The property value. If undefined, the property is deleted.
-   * @return This DomElement instance for chaining.
+   * Sets or clears vertical padding (`padding-top` and `padding-bottom`) simultaneously.
+   * Accepts any valid CSS value (e.g., "10px", "1em").
+   * Passing `undefined` removes both top and bottom padding.
+   *
+   * @param value - The vertical padding value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  prop(name: string, value: any): this;
+  py(value: Property.PaddingTop | undefined): this;
   /**
-   * Sets multiple properties on the element.
-   * @param properties - An object mapping property names to values.
-   *                     Properties with undefined values are deleted.
-   * @return This DomElement instance for chaining.
+   * Sets or clears the `margin` style of the element.
+   * Accepts any valid CSS margin shorthand (e.g., "10px", "1em 2em").
+   * Passing `undefined` removes the margin style.
+   *
+   * @param value - The margin value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  props(properties: Record<string, any>): this;
-  style(obj: CssProperties): this;
-  id(value: string): this;
+  m(value: Property.Margin | undefined): this;
   /**
-   * Sets the user-defined class name and applies it alongside the internal CSS class.
-   * For SVG elements, uses `setAttribute("class", ...)`.
-   * @param value - The user-defined class name.
-   * @return This DomElement instance for chaining.
+   * Sets or clears the `margin-top` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "auto").
+   * Passing `undefined` removes the top margin.
+   *
+   * @param value - The top margin value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  className(value: string): this;
-  htmlFor(value: string): this;
+  mt(value: Property.MarginTop | undefined): this;
   /**
-   * Sets the title of the element.
-   * For HTML elements, sets the `title` property.
-   * For SVG elements, sets the `title` attribute.
-   * @param value - The tooltip text to show on hover.
-   * @return This DomElement instance for chaining.
+   * Sets or clears the `margin-right` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "auto").
+   * Passing `undefined` removes the right margin.
+   *
+   * @param value - The right margin value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  title(value: string): this;
+  mr(value: Property.MarginRight | undefined): this;
   /**
-   * Sets the `disabled` attribute to disable the element.
-   * Applicable to form controls like <button>, <input>, <select>, etc.
-   * @return This DomElement instance for chaining.
+   * Sets or clears the `margin-bottom` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "auto").
+   * Passing `undefined` removes the bottom margin.
+   *
+   * @param value - The bottom margin value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  disable(): this;
+  mb(value: Property.MarginBottom | undefined): this;
   /**
-   * Removes the `disabled` attribute to enable the element.
-   * @return This DomElement instance for chaining.
+   * Sets or clears the `margin-left` style of the element.
+   * Accepts any valid CSS value (e.g., "10px", "auto").
+   * Passing `undefined` removes the left margin.
+   *
+   * @param value - The left margin value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  enable(): this;
-  p(value: Property.Padding | undefined): this;
-  pt(value: Property.PaddingTop | undefined): this;
-  pr(value: Property.PaddingRight | undefined): this;
-  pb(value: Property.PaddingBottom | undefined): this;
-  pl(value: Property.PaddingLeft | undefined): this;
-  px(value: Property.PaddingLeft | undefined): this;
-  py(value: Property.PaddingTop | undefined): this;
-  m(value: Property.Margin | undefined): this;
-  mt(value: Property.MarginTop | undefined): this;
-  mr(value: Property.MarginRight | undefined): this;
-  mb(value: Property.MarginBottom | undefined): this;
   ml(value: Property.MarginLeft | undefined): this;
   /**
    * Sets the overall border radius.
    * @param value - The CSS border-radius value (e.g., "8px", "50%").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radius(value: Property.BorderRadius | undefined): this;
   /**
    * Sets the top-left corner border radius.
    * @param value - The CSS border-top-left-radius value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusTopLeft(value: Property.BorderTopLeftRadius | undefined): this;
   /**
    * Sets the top-right corner border radius.
    * @param value - The CSS border-top-right-radius value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusTopRight(value: Property.BorderTopRightRadius | undefined): this;
   /**
    * Sets the bottom-left corner border radius.
    * @param value - The CSS border-bottom-left-radius value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusBottomLeft(value: Property.BorderBottomLeftRadius | undefined): this;
   /**
    * Sets the bottom-right corner border radius.
    * @param value - The CSS border-bottom-right-radius value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusBottomRight(value: Property.BorderBottomRightRadius | undefined): this;
   /**
    * Sets the border radius for both top corners.
    * @param value - The CSS border-radius value to apply to top-left and top-right corners.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusTop(value: Property.BorderTopLeftRadius | undefined): this;
   /**
    * Sets the border radius for both bottom corners.
    * @param value - The CSS border-radius value to apply to bottom-left and bottom-right corners.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusBottom(value: Property.BorderBottomLeftRadius | undefined): this;
   /**
    * Sets the border radius for both left corners.
    * @param value - The CSS border-radius value to apply to top-left and bottom-left corners.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusLeft(value: Property.BorderTopLeftRadius | undefined): this;
   /**
    * Sets the border radius for both right corners.
    * @param value - The CSS border-radius value to apply to top-right and bottom-right corners.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusRight(value: Property.BorderTopRightRadius | undefined): this;
   /**
    * Sets the border radius for both left and right sides (horizontal corners).
    * Applies to top-left, top-right, bottom-left, and bottom-right corners on the X axis.
    * @param value - The CSS border-radius value to apply horizontally.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusX(value: Property.BorderRadius | undefined): this;
   /**
    * Sets the border radius for both top and bottom sides (vertical corners).
    * Applies to top-left, top-right, bottom-left, and bottom-right corners on the Y axis.
    * @param value - The CSS border-radius value to apply vertically.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   radiusY(value: Property.BorderRadius | undefined): this;
-  display(value: Property.Display | undefined): this;
+  /**
+   * Sets the `display` style of the element.
+   * Common values include "block", "inline", "flex", "grid", or "none".
+   * Controls the element's layout behavior in the document flow.
+   *
+   * @param value - The CSS display value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  display(value: Property.Display | undefined): this;
+  /**
+   * Sets the `flex-shrink` style of the element.
+   * Defines how much the element should shrink relative to its siblings in a flex container.
+   *
+   * @param value - A numeric shrink factor (e.g., 0, 1), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   flexShrink(value: Property.FlexShrink | undefined): this;
+  /**
+   * Sets the `flex` shorthand style of the element.
+   * Combines `flex-grow`, `flex-shrink`, and `flex-basis` into a single declaration.
+   *
+   * @param value - A flex shorthand value (e.g., "1 0 auto"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   flex(value: Property.Flex | undefined): this;
+  /**
+   * Sets the `background-color` style of the element.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   *
+   * @param value - The background color value (e.g., "#fff", "rgba(0,0,0,0.5)"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   bgColor(value: Property.BackgroundColor | undefined): this;
+  /**
+   * Sets the `color` style of the element.
+   * Defines the foreground text color using named colors, hex codes, RGB/RGBA values, or CSS variables.
+   *
+   * @param value - The text color value (e.g., "black", "#333"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   color(value: Property.Color | undefined): this;
-  h(value: Property.Height | number | undefined): this;
+  /**
+   * Sets or clears the `width` style of the element.
+   * Accepts CSS width values (e.g., "100px", "50%") or numeric pixel values.
+   * Passing `undefined` removes the width style.
+   *
+   * @param value - The width value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   w(value: Property.Width | number | undefined): this;
+  /**
+   * Sets or clears the `height` style of the element.
+   * Accepts CSS height values (e.g., "100px", "auto") or numeric pixel values.
+   * Passing `undefined` removes the height style.
+   *
+   * @param value - The height value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  h(value: Property.Height | number | undefined): this;
   /**
    * Sets the full border style.
    * @param value - The CSS border value (e.g., "1px solid #ccc").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   b(value: Property.Border | undefined): this;
   /**
    * Sets the top border style.
    * @param value - The CSS border-top value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bt(value: Property.BorderTop | undefined): this;
   /**
    * Sets the right border style.
    * @param value - The CSS border-right value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   br(value: Property.BorderRight | undefined): this;
   /**
    * Sets the bottom border style.
    * @param value - The CSS border-bottom value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bb(value: Property.BorderBottom | undefined): this;
   /**
    * Sets the left border style.
    * @param value - The CSS border-left value.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bl(value: Property.BorderLeft | undefined): this;
   /**
    * Sets the left and right border styles.
    * @param value - The CSS border value to apply to both left and right sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bx(value: Property.BorderLeft | Property.BorderRight | undefined): this;
   /**
    * Sets the top and bottom border styles.
    * @param value - The CSS border value to apply to both top and bottom sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   by(value: Property.BorderTop | Property.BorderBottom | undefined): this;
   /**
    * Sets the top and left border styles.
    * @param value - The CSS border value to apply to both top and left sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   btl(value: Property.BorderTop | Property.BorderLeft | undefined): this;
   /**
    * Sets the top and right border styles.
    * @param value - The CSS border value to apply to both top and right sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   btr(value: Property.BorderTop | Property.BorderRight | undefined): this;
   /**
    * Sets the bottom and left border styles.
    * @param value - The CSS border value to apply to both bottom and left sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bbl(value: Property.BorderBottom | Property.BorderLeft | undefined): this;
   /**
    * Sets the bottom and right border styles.
    * @param value - The CSS border value to apply to both bottom and right sides.
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   bbr(value: Property.BorderBottom | Property.BorderRight | undefined): this;
+  /**
+   * Sets the `overflow` style of the element.
+   * Controls how content that exceeds the element's bounds is handled on both axes.
+   * Common values include "visible", "hidden", "scroll", and "auto".
+   *
+   * @param value - The overflow behavior for both axes, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   overflow(value: Property.Overflow | undefined): this;
+  /**
+   * Sets the `overflow-y` style of the element.
+   * Controls vertical overflow behavior independently of horizontal overflow.
+   * Common values include "visible", "hidden", "scroll", and "auto".
+   *
+   * @param value - The vertical overflow behavior, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   overflowY(value: Property.OverflowY | undefined): this;
+  /**
+   * Sets the `overflow-x` style of the element.
+   * Controls horizontal overflow behavior independently of vertical overflow.
+   * Common values include "visible", "hidden", "scroll", and "auto".
+   *
+   * @param value - The horizontal overflow behavior, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   overflowX(value: Property.OverflowX | undefined): this;
+  /**
+   * Sets the `font-size` style of the element.
+   * Accepts absolute units (e.g., "16px", "1rem") or relative keywords (e.g., "small", "larger").
+   *
+   * @param value - The font size value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   fontSize(value: Property.FontSize | undefined): this;
+  /**
+   * Sets the `font-weight` style of the element.
+   * Accepts numeric weights (e.g., 400, 700) or keywords like "bold", "normal", "lighter".
+   *
+   * @param value - The font weight value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   fontWeight(value: Property.FontWeight | undefined): this;
+  /**
+   * Sets the `font-family` style of the element.
+   * Accepts a comma-separated list of font names or CSS variables.
+   *
+   * @param value - The font family string (e.g., "Arial, sans-serif"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   fontFamily(value: Property.FontFamily | undefined): this;
+  /**
+   * Sets the `font-style` style of the element.
+   * Common values include "normal", "italic", or "oblique".
+   *
+   * @param value - The font style value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   fontStyle(value: Property.FontStyle | undefined): this;
+  /**
+   * Sets the `text-align` style of the element.
+   * Controls horizontal alignment of inline content. Common values include "left", "right", "center", or "justify".
+   *
+   * @param value - The text alignment value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   textAlign(value: Property.TextAlign | undefined): this;
+  /**
+   * Sets the `text-decoration` style of the element.
+   * Common values include "underline", "line-through", "none", or combinations like "underline overline".
+   *
+   * @param value - The text decoration value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   textDecoration(value: Property.TextDecoration | undefined): this;
   /**
    * Sets the CSS `position` property.
    * @param value - The positioning mode (e.g., "absolute", "relative", "fixed").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   pos(value: Property.Position | undefined): this;
   /**
    * Sets the CSS `top` offset.
    * @param value - The top offset value (e.g., "10px", "50%").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
-  posTop(value: Property.Top | undefined): this;
+  posTop(value: Property.Top | number | undefined): this;
   /**
    * Sets the CSS `bottom` offset.
    * @param value - The bottom offset value (e.g., "0", "2rem").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
-  posBottom(value: Property.Bottom | undefined): this;
+  posBottom(value: Property.Bottom | number | undefined): this;
   /**
    * Sets the CSS `left` offset.
    * @param value - The left offset value (e.g., "5px", "auto").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
-  posLeft(value: Property.Left | undefined): this;
+  posLeft(value: Property.Left | number | undefined): this;
   /**
    * Sets the CSS `right` offset.
    * @param value - The right offset value (e.g., "1em", "0").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
+   */
+  posRight(value: Property.Right | number | undefined): this;
+  /**
+   * Sets the `cursor` style of the element.
+   * Controls the mouse cursor appearance when hovering over the element.
+   * Common values include "pointer", "default", "text", "move", or "not-allowed".
+   *
+   * @param value - The cursor style value, or `undefined` to remove it.
+   * @return This instance for chaining.
    */
-  posRight(value: Property.Right | undefined): this;
   cursor(value: Property.Cursor | undefined): this;
+  /**
+   * Sets the `align-items` style of the element.
+   * Defines how flex or grid children are aligned along the cross axis.
+   * Common values include "flex-start", "center", "baseline", or "stretch".
+   *
+   * @param value - The alignment value for child items, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   alignItems(value: Property.AlignItems | undefined): this;
+  /**
+   * Sets the `justify-content` style of the element.
+   * Defines how flex or grid children are distributed along the main axis.
+   * Common values include "flex-start", "center", "space-between", or "space-around".
+   *
+   * @param value - The justification value for child items, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   justifyContent(value: Property.JustifyContent | undefined): this;
+  /**
+   * Sets the `gap` style of the element.
+   * Defines spacing between flex or grid children, supporting both row and column gaps.
+   * Accepts length units (e.g., "10px", "1rem") or shorthand values.
+   *
+   * @param value - The gap size between child elements, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   gap(value: Property.Gap | undefined): this;
+  /**
+   * Sets the `flex-direction` style of the element.
+   * Controls the direction of child elements in a flex container.
+   * Common values include "row", "column", "row-reverse", or "column-reverse".
+   *
+   * @param value - The flex direction value, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   flexDirection(value: Property.FlexDirection | undefined): this;
+  /**
+   * Sets the `grid-template-columns` style of the element.
+   * Defines the column structure of a CSS grid container using track sizes, repeat(), or auto-fit/auto-fill.
+   * For example: "1fr 2fr", "repeat(3, 100px)", or "auto-fit, minmax(200px, 1fr)".
+   *
+   * @param value - The grid column template string, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   templateColumns(value: Property.GridTemplateColumns | undefined): this;
+  /**
+   * Sets the `grid-template-rows` style of the element.
+   * Defines the row structure of a CSS grid container using track sizes, repeat(), or auto-fit/auto-fill.
+   * For example: "100px auto", "repeat(2, 1fr)", or "minmax(50px, auto)".
+   *
+   * @param value - The grid row template string, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   templateRows(value: Property.GridTemplateRows | undefined): this;
+  /**
+   * Sets the `appearance` style of the element.
+   * Controls native platform styling of UI elements like buttons and inputs.
+   * Common values include "none" to remove default styling, or platform-specific keywords.
+   *
+   * @param value - The appearance value (e.g., "none", "auto"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
   appearance(value: Property.Appearance | undefined): this;
   /**
    * Sets the CSS `user-select` property to control text selection behavior.
    * @param value - The user-select value (e.g., "none", "text", "auto", "contain", "all").
-   * @return This DomElement instance for chaining.
+   * @return This instance for chaining.
    */
   userSelect(value: Property.UserSelect | undefined): this;
+  /**
+   * Sets the vertical alignment of the element.
+   * Common values include "middle", "top", "bottom", "baseline", or pixel/em units.
+   *
+   * @param value - The CSS vertical-align value (e.g., "middle", "top", "10px").
+   * @return This instance for chaining.
+   */
+  verticalAlign(value: Property.VerticalAlign | undefined): this;
+  /**
+   * Sets the `white-space` style of the element.
+   * Common values include "normal", "nowrap", "pre", "pre-wrap", or "pre-line".
+   * Controls how whitespace and line breaks are handled within the element.
+   *
+   * @param value - The CSS white-space value (e.g., "nowrap", "pre-wrap"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  whiteSpace(value: Property.WhiteSpace | undefined): this;
+  /**
+   * Sets the `text-overflow` style of the element.
+   * Common values include "ellipsis", "clip", or "string" for custom overflow indicators.
+   * Controls how overflowed inline content is rendered when it exceeds the container bounds.
+   *
+   * @param value - The CSS text-overflow value (e.g., "ellipsis", "clip"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  textOverflow(value: Property.TextOverflow | undefined): this;
+  /**
+   * Sets the `z-index` style of the element.
+   * Controls the stacking order of positioned elements. Higher values appear in front of lower ones.
+   * Only applies to elements with a position other than `static`.
+   *
+   * @param value - The z-index value (e.g., 10, 1000), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  zIndex(value: Property.ZIndex | undefined): this;
+  /**
+   * Applies CSS styles to truncate overflowing text with an ellipsis.
+   * Ensures the text stays on a single line and hides overflow.
+   *
+   * Equivalent to:
+   * ```css
+   * overflow: hidden;
+   * white-space: nowrap;
+   * text-overflow: ellipsis;
+   * ```
+   *
+   * @return This instance for chaining.
+   */
   overflowEllipsis(): this;
+  /**
+   * Applies a batch of CSS style properties to the element.
+   * Delegates each property to `setStyleProp`, which handles value normalization and kebab-case conversion.
+   *
+   * - Properties with `undefined` values are removed from the inline style.
+   * - Numeric values are passed through the style sheet for unit resolution.
+   * - Supports chainable usage for fluent DOM composition.
+   *
+   * @param props - A partial map of CSS properties and their values.
+   * @returns This instance for chaining.
+   */
+  style(props: CssProperties): this;
+}
+//#endregion
+//#region src/BaseDom.d.ts
+/**
+ * Base class for DOM-backed elements with style and event utilities.
+ * Supports both HTML and SVG elements via generic parameter `E`.
+ */
+declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseStyle {
+  abstract dom: E;
+  /**
+   * Sets or removes the user-defined class name and applies it alongside the internal CSS class.
+   * Uses `setAttribute("class", ...)` for both HTML and SVG elements.
+   *
+   * Passing `undefined` removes the user-defined class name entirely.
+   *
+   * @param value - The user-defined class name, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
+  className(value: string | undefined): this;
+  /**
+   * Adds an event listener to the element.
+   * @param type - The event type (e.g., "click", "input", "mouseenter").
+   * @param handler - The event handler function.
+   * @param options - Optional event listener options.
+   * @return This DomElement instance for chaining.
+   */
+  on<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T] & {
+    currentTarget: E;
+  }) => void, options?: boolean | AddEventListenerOptions): this;
+  /**
+   * Removes an event listener from the element.
+   * @param type - The event type to remove.
+   * @param handler - The original handler function.
+   * @param options - Optional event listener options.
+   */
+  off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  /**
+   * Appends one or more child nodes to the element.
+   * Accepts DomElement instances, regular DOM Nodes, strings, or numbers.
+   *
+   * - Strings and numbers are coerced to text nodes.
+   * - DomElement instances are unwrapped to their native DOM nodes.
+   * - DOM Nodes are appended directly.
+   *
+   * @param nodes - One or more child elements or text values to append.
+   * @return This DomElement instance for chaining.
+   */
+  add(...nodes: DomElementChild[]): this;
+  /**
+   * Inserts one or more DomElements into a parent at the specified index.
+   * Each node is inserted sequentially starting from the given index.
+   *
+   * @param index - The zero-based index at which to start inserting.
+   * @param nodes - One or more DomElements to insert.
+   * @return This DomElement instance.
+   */
+  insertAtIndex(index: number, ...nodes: DomElementChild[]): this;
+  /**
+   * Replaces all existing child elements of this DOM node with the provided ones.
+   * Internally clears the current children and appends the new nodes in order.
+   *
+   * @param nodes - One or more DomElement instances to set as children.
+   * @return This DomElement instance.
+   */
+  setChildren(...nodes: DomElementChild[]): this;
+  /**
+   * Replaces child elements starting from the specified index with the provided nodes.
+   * All children before the index are preserved.
+   *
+   * @param index - The zero-based index at which replacement begins.
+   * @param nodes - One or more DomElement instances to insert.
+   * @return This DomElement instance.
+   */
+  setChildrenFromIndex(index: number, ...nodes: DomElementChild[]): this;
+  /**
+   * Removes child elements within the specified index range.
+   * If no range is provided, removes all children.
+   *
+   * @param from - The starting index (inclusive). Defaults to 0.
+   * @param to - The ending index (exclusive). Defaults to all children.
+   * @returns This DomElement instance.
+   */
+  clear(from?: number, to?: number): this;
   ref(refFn: (el: this) => void): this;
-  rootCss(props: CssProperties): this;
-  hoverCss(props: CssProperties): this;
-  activeCss(props: CssProperties): this;
-  focusCss(props: CssProperties): this;
-  css(selector: string, props: CssProperties): this;
-  mediaCss(mediaText: string, selector: string, props: CssProperties): this;
-  mediaRootCss(mediaText: string, props: CssProperties): this;
-  minWidthCss(minWidth: number | string, props: CssProperties): this;
-  maxWidthCss(maxWidth: number | string, props: CssProperties): this;
-  protected resolveNode(child: DomElementChild): any;
+  protected resolveNode(child: DomElementChild): Node;
   protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
-  protected setCssClassName(): this;
+}
+//#endregion
+//#region src/DomElement.d.ts
+/**
+ * A unified wrapper for HTML and SVG elements that provides a fluent, type-safe API
+ * for DOM manipulation, styling, and event handling.
+ *
+ * Supports both `HTMLElementTagNameMap` and `SVGElementTagNameMap` via the generic `Tag`,
+ * and automatically handles namespace creation for SVG elements.
+ *
+ * Provides ergonomic methods for setting styles, attributes, classes, and event listeners,
+ * while abstracting away platform-specific quirks (e.g., `className` vs `setAttribute("class")`).
+ *
+ * @template Tag - The tag name of the element, inferred from `DomElementTagNameMap`.
+ */
+declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomElementTagNameMap> extends BaseDom<DomElementTagNameMap[Tag]> {
+  /**
+   * Creates a new DomElement instance for the specified tag.
+   * Automatically detects whether the tag is an SVG element and uses the appropriate namespace.
+   * Optionally wraps an existing DOM element instead of creating a new one.
+   *
+   * @param tag - The tag name of the element (e.g., "div", "circle", "svg").
+   * @param el - An optional existing DOM element to wrap. If omitted, a new element is created.
+   */
+  constructor(tag: Tag, el?: DomElementTagNameMap[Tag]);
+  protected _tag: Tag extends "svgA" ? {
+    svgA: "a";
+  }[Tag] : Tag;
+  protected _isSvg: boolean;
+  protected _dom: DomElementTagNameMap[Tag];
+  /**
+   * Gets the tag name of the element (e.g., "div", "svg", "circle").
+   */
+  get tag(): Tag extends "svgA" ? {
+    svgA: "a";
+  }[Tag] : Tag;
+  /**
+   * Indicates whether the element is an SVG element.
+   * Returns `true` for tags like "svg", "circle", "path", etc.
+   */
+  get isSvg(): boolean;
+  /**
+   * Gets the underlying DOM element instance.
+   * This will be either an `HTMLElement` or `SVGElement` depending on the tag.
+   */
+  get dom(): DomElementTagNameMap[Tag];
+  /**
+   * Gets the textContent property of the DOM element.
+   */
+  getText(): string;
+  /**
+   * Sets or clears the text content of the element.
+   * Converts any value to a string before assignment.
+   * Passing `undefined` or `null` removes the text by setting it to an empty string.
+   *
+   * @param value - The text content to set, or `undefined`/`null` to clear it.
+   * @return This DomElement instance for chaining.
+   */
+  text(value: any): this;
+  /**
+   * Removes the element from the DOM tree.
+   * Equivalent to calling `element.remove()` on the native DOM node.
+   *
+   * This does not dispose internal state or event listeners — use `dispose()` if cleanup is needed.
+   *
+   * @return This DomElement instance for chaining.
+   */
+  remove(): void;
+  /**
+   * Retrieves the value of a single attribute.
+   * @param name - The attribute name to read (e.g. "aria-label", "role").
+   * @return The attribute value as a string, or null if not present.
+   */
+  getAttr(name: string): string | null;
+  /**
+   * Sets a single attribute on the element.
+   * @param name - The attribute name (e.g. "aria-label", "role", "disabled").
+   * @param value - The attribute value. If undefined, the attribute is removed.
+   * @return This DomElement instance for chaining.
+   */
+  attr(name: string, value: string | number | boolean | undefined): this;
+  /**
+   * Sets multiple attributes on the element.
+   * @param attributes - An object mapping attribute names to values.
+   *                     Attributes with undefined values are removed.
+   * @return This DomElement instance for chaining.
+   */
+  attrs(attributes: Record<string, string | number | boolean | undefined>): this;
+  /**
+   * Retrieves the value of a single property.
+   * @param name - The property name to read (e.g. "value", "checked", "disabled").
+   * @return The property value, or undefined if not present.
+   */
+  getProp(name: string): any;
+  /**
+   * Sets a single property on the element.
+   * @param name - The property name (e.g. "checked", "value", "disabled").
+   * @param value - The property value. If undefined, the property is deleted.
+   * @return This DomElement instance for chaining.
+   */
+  prop(name: string, value: any): this;
+  /**
+   * Sets multiple properties on the element.
+   * @param props - An object mapping property names to values.
+   *                     Properties with undefined values are deleted.
+   * @return This DomElement instance for chaining.
+   */
+  props(props: Record<string, any>): this;
+  /**
+   * Sets or removes the `id` of the element.
+   * Passing `undefined` clears the ID by setting it to an empty string.
+   *
+   * @param value - The element's ID, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
+  id(value: string | undefined): this;
+  /**
+   * Sets or removes the `htmlFor` property on a <label> element.
+   * This links the label to a form control by its ID.
+   *
+   * Passing `undefined` removes the association.
+   * Has no effect if the element is not a <label>.
+   *
+   * @param value - The ID of the target form control, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
+  htmlFor(value: string | undefined): this;
+  /**
+   * Sets or removes the `title` attribute on the element.
+   * Applies to both HTML and SVG elements. Passing `undefined` removes the attribute.
+   *
+   * @param value - The tooltip text to show on hover, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
+  title(value: string | undefined): this;
+  /**
+   * Sets or removes the `disabled` attribute on the element.
+   * Applicable to form controls like <button>, <input>, <select>, etc.
+   *
+   * @param value - If true, sets the `disabled` attribute; if false, removes it.
+   * @return This DomElement instance for chaining.
+   */
+  disabled(value: boolean): this;
+  /**
+   * Sets the `disabled` attribute to disable the element.
+   * Applicable to form controls like <button>, <input>, <select>, etc.
+   * @return This DomElement instance for chaining.
+   */
+  disable(): this;
+  /**
+   * Removes the `disabled` attribute to enable the element.
+   * @return This DomElement instance for chaining.
+   */
+  enable(): this;
+  /**
+   * Sets or removes the `popover` attribute on the element.
+   * Applies to HTML elements that support the popover API (e.g., `<div popover>`).
+   * Passing `undefined` removes the attribute.
+   *
+   * Common values include:
+   * - `"auto"` → Automatically shows/hides based on user interaction.
+   * - `"manual"` → Requires explicit show/hide via JavaScript.
+   *
+   * @param value - The popover mode (`"auto"` or `"manual"`), or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
+  popover(value: "auto" | "manual" | undefined): this;
+  /**
+   * Shows the popover on this element.
+   * Requires the element to have a `popover="manual"` attribute and be in the DOM.
+   *
+   * @return This DomElement instance for chaining.
+   */
+  showPopover(): this;
+  /**
+   * Hides the popover on this element.
+   * Requires the element to have a `popover="manual"` attribute and be in the DOM.
+   *
+   * @return This DomElement instance for chaining.
+   */
+  hidePopover(): this;
 }
 /**
  * Creates a new DomElement instance for the given tag name.
@@ -543,12 +979,14 @@ declare class AnchorElement extends DomElement<"a"> {
   constructor();
   href(value: string): this;
 }
+declare function $a(): AnchorElement;
 //#endregion
 //#region src/Button.d.ts
 declare class Button extends DomElement<"button"> {
   constructor();
   type(value: "button" | "submit" | "reset"): this;
 }
+declare function $btn(): Button;
 //#endregion
 //#region src/Canvas.d.ts
 declare class Canvas extends DomElement<"canvas"> {
@@ -577,6 +1015,7 @@ declare class Canvas extends DomElement<"canvas"> {
     z: number;
   };
 }
+declare function $canvas(): Canvas;
 //#endregion
 //#region src/constants.d.ts
 declare const UNITLESS_CSS_PROPS: Record<string, 1>;
@@ -587,16 +1026,266 @@ declare const TAG_ALIAS: {
 };
 type TagAlias = typeof TAG_ALIAS;
 //#endregion
+//#region src/MediaRule.d.ts
+declare class MediaRule {
+  constructor(sheet: StyleSheet, index: number, rule: CSSMediaRule);
+  protected _sheet: StyleSheet;
+  protected _index: number;
+  protected _rule: CSSMediaRule;
+  /**
+   * Returns the StyleSheet instance that owns this media rule.
+   * Useful for accessing shared rule management and stylesheet-level operations.
+   */
+  get sheet(): StyleSheet;
+  /**
+   * Returns the index of this media rule within its parent stylesheet.
+   * This index is used for rule lookup, insertion, and removal.
+   */
+  get index(): number;
+  /**
+   * Returns the underlying CSSMediaRule object.
+   * Provides direct access to the media query and its nested CSS rules.
+   */
+  get rule(): CSSMediaRule;
+  /**
+   * Returns the number of CSS rules contained within this media block.
+   * Useful for determining insertion index or iterating over nested rules.
+   */
+  get length(): number;
+  /**
+   * Returns the media query string associated with this rule.
+   * For example: "screen and (max-width: 600px)".
+   */
+  get mediaText(): string;
+  /**
+   * Inserts a new CSSStyleRule into this media block at the end of its rule list.
+   * The rule is created with an empty declaration block and wrapped in a CssRule instance for programmatic styling.
+   *
+   * For example, calling `cssRule(".box:hover")` will generate:
+   * ```css
+   * @media ... {
+   *   .box:hover {}
+   * }
+   * ```
+   *
+   * @param selector - The CSS selector to target (e.g., ".box", ":hover", "div > span").
+   * @return A CssRule instance representing the newly inserted rule.
+   */
+  cssRule(selector: string): CssRule;
+  /**
+   * Removes this media rule from its parent stylesheet.
+   * Delegates to the StyleSheet instance, which handles cleanup and index management.
+   */
+  remove(): void;
+  /**
+   * Removes a nested CSSStyleRule from this media block.
+   * Uses the rule's index to delete it from the internal rule list.
+   *
+   * @param rule - The CssRule instance to remove from this media query block.
+   */
+  removeRule(rule: CssRule): void;
+}
+//#endregion
+//#region src/StyleSheet.d.ts
+/**
+ * Manages a dedicated `<style>` element and provides programmatic access to its CSS rules.
+ * Supports dynamic insertion, retrieval, and deletion of both standard and media-specific rules,
+ * with internal indexing for fast lookup and reuse.
+ *
+ * This class ensures a single shared stylesheet instance via `StyleSheet.getSheet()`,
+ * and maintains selector-to-index and media-to-rule maps on the global `window` object.
+ *
+ * Designed for use with component-level styling systems or DOM abstractions that require
+ * granular control over rule injection without relying on inline styles.
+ */
+declare class StyleSheet {
+  constructor(el: HTMLStyleElement);
+  protected _dom: HTMLStyleElement;
+  /**
+   * Returns the underlying `<style>` DOM element.
+   * This element is used to inject and manage dynamic CSS rules.
+   */
+  get dom(): HTMLStyleElement;
+  /**
+   * Returns the associated `CSSStyleSheet` object for this `<style>` element.
+   * Provides access to rule-level operations like `insertRule()` and `deleteRule()`.
+   * Assumes the sheet is available and attached to the document.
+   */
+  get sheet(): CSSStyleSheet;
+  /**
+   * Returns the number of CSS rules currently defined in the stylesheet.
+   * Useful for indexing, iteration, or conditional rule management.
+   */
+  get length(): number;
+  /**
+   * Inserts a new empty CSS rule into the stylesheet for the given selector.
+   * Returns a `CssRule` wrapper for fluent manipulation of the inserted rule.
+   *
+   * The rule is appended at the end of the current stylesheet (`insertRule()` at index `length`).
+   * This is useful for dynamically constructing scoped styles tied to specific selectors.
+   *
+   * @param selector - The CSS selector to target (e.g., ".btn", "#header", "body > div").
+   * @return A `CssRule` instance representing the inserted rule.
+   */
+  cssRule(selector: string): CssRule;
+  /**
+   * Inserts a new empty `@media` rule into the stylesheet using the provided media query string.
+   * Returns a `MediaRule` wrapper for fluent manipulation of the inserted media block.
+   *
+   * The rule is appended at the end of the current stylesheet (`insertRule()` at index `length`).
+   * Useful for dynamically scoping styles to specific viewport conditions or device capabilities.
+   *
+   * @param mediaText - The media query string (e.g., "screen and (max-width: 600px)").
+   * @return A `MediaRule` instance representing the inserted media rule.
+   */
+  mediaRule(mediaText: string): MediaRule;
+  /**
+   * Inserts a new `@media (min-width: …)` rule into the stylesheet.
+   * Returns a `MediaRule` wrapper for fluent manipulation of styles targeting wider viewports.
+   *
+   * Equivalent to: `mediaRule("min-width: 768px")`
+   *
+   * @param minWidth - The minimum width value (e.g., `768`, `"50em"`, `"80vw"`).
+   * @return A `MediaRule` instance representing the inserted media rule.
+   */
+  mediaMinWidth(minWidth: number | string): MediaRule;
+  /**
+   * Inserts a new `@media (max-width: …)` rule into the stylesheet.
+   * Returns a `MediaRule` wrapper for fluent manipulation of styles targeting narrower viewports.
+   *
+   * Equivalent to: `mediaRule("max-width: 600px")`
+   *
+   * @param maxWidth - The maximum width value (e.g., `600`, `"40em"`, `"80vw"`).
+   * @return A `MediaRule` instance representing the inserted media rule.
+   */
+  mediaMaxWidth(maxWidth: number | string): MediaRule;
+  /**
+   * Removes a CSS rule from the stylesheet by its index.
+   * Accepts either a `CssRule` or `MediaRule` instance, which internally tracks its position.
+   *
+   * This is useful for dynamically cleaning up injected styles or media blocks.
+   * Note: Rule indices may shift after insertion or deletion — ensure index accuracy before calling.
+   *
+   * @param rule - The rule instance to remove (`CssRule` or `MediaRule`).
+   */
+  removeRule(rule: CssRule | MediaRule): void;
+  /**
+   * Retrieves or creates a <style> element with the given ID and wraps it in a StyleSheet instance.
+   * If no element with the specified ID exists, a new <style> tag is created, appended to <head>,
+   * and assigned the ID. This allows multiple independently managed stylesheets via custom IDs.
+   *
+   * @param id - Optional ID of the <style> element to target. Defaults to DEFAULT_STYLE_ID.
+   * @return A StyleSheet instance bound to the specified <style> element.
+   */
+  static getSheet(id?: string): StyleSheet;
+  /**
+   * The default ID used for the primary stylesheet managed by the StyleSheet class.
+   * This ensures consistent lookup and avoids collisions with other style elements in the document.
+   */
+  static DEFAULT_STYLE_ID: string;
+}
+//#endregion
+//#region src/CssRule.d.ts
+declare class CssRule extends BaseStyle {
+  constructor(sheet: StyleSheet, index: number, rule: CSSStyleRule);
+  protected _sheet: StyleSheet;
+  protected _index: number;
+  protected _rule: CSSStyleRule;
+  /**
+   * Returns the StyleSheet instance that owns this rule.
+   * Useful for accessing rule management utilities or shared configuration.
+   */
+  get sheet(): StyleSheet;
+  /**
+   * Returns the index of this rule within its parent stylesheet.
+   * This index is stable and used for rule lookup and removal.
+   */
+  get index(): number;
+  /**
+   * Returns the underlying CSSStyleRule object.
+   * Provides direct access to selector text and style declarations.
+   */
+  get rule(): CSSStyleRule;
+  /**
+   * Returns the selector text of the underlying CSSStyleRule.
+   * For example: ".box:hover", "div > span", or ".my-class[data-active]".
+   */
+  get selectorText(): string;
+  /**
+   * Removes this rule from its parent stylesheet.
+   * Delegates to the StyleSheet instance to ensure proper cleanup and cache invalidation.
+   */
+  remove(): void;
+  /**
+   * Applies a style property to the underlying CSS rule.
+   * Removes the property if `undefined` is passed.
+   *
+   * @param name - The camelCase CSS property name.
+   * @param value - The value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
+}
+//#endregion
 //#region src/DomBody.d.ts
-declare class DomBody {
+/**
+ * Wrapper for document.body with style and DOM composition utilities.
+ * Enables fluent styling and child node management.
+ */
+declare class DomBody extends BaseDom<HTMLBodyElement> {
   get dom(): HTMLBodyElement;
-  style(obj: CssProperties): this;
-  protected getStyleValue(name: string, value: string | number): string;
-  add(...nodes: DomElement<any>[]): this;
-  clear(): this;
 }
+/**
+ * Creates a new DomBody instance bound to `document.body`.
+ * Provides fluent access to body-level styling, DOM composition, and event utilities.
+ *
+ * Useful for global layout scaffolding, dynamic content injection, or body-wide style control.
+ *
+ * @return A DomBody instance wrapping `document.body`.
+ */
 declare function $body(): DomBody;
 //#endregion
+//#region src/DomWindow.d.ts
+/**
+ * Wrapper for the global `window` object with typed event listener utilities.
+ * Useful for managing global events like resize, scroll, or keyboard shortcuts.
+ */
+declare class DomWindow {
+  /**
+   * Adds an event listener to the window.
+   * @param type - The event type (e.g., "click", "input", "mouseenter").
+   * @param handler - The event handler function.
+   * @param options - Optional event listener options.
+   * @return This instance for chaining.
+   */
+  on<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T] & {
+    currentTarget: Window;
+  }) => void, options?: boolean | AddEventListenerOptions): this;
+  /**
+   * Removes an event listener from the window.
+   * @param type - The event type to remove.
+   * @param handler - The original handler function.
+   * @param options - Optional event listener options.
+   */
+  off<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  /**
+   * Dispatches a DOM event on the window object.
+   *
+   * @param event - The corresponding event instance (e.g., `new Event("resize")`, `new KeyboardEvent("keydown")`).
+   * @return This instance for chaining.
+   */
+  dispatch(event: Event): this;
+}
+/**
+ * Creates a new DomWindow instance bound to the global `window` object.
+ * Provides typed event listener utilities and fluent dispatching for built-in DOM events.
+ *
+ * Useful for managing global interactions like resize, scroll, keyboard shortcuts, or visibility changes.
+ *
+ * @return A DomWindow instance wrapping the global `window`.
+ */
+declare function $window(): DomWindow;
+//#endregion
 //#region src/IFrame.d.ts
 declare class IFrame extends DomElement<"iframe"> {
   constructor();
@@ -607,6 +1296,7 @@ declare class IFrame extends DomElement<"iframe"> {
   setSize(width: number, height: number): this;
   reload(): void;
 }
+declare function $iframe(): IFrame;
 //#endregion
 //#region src/ImageElement.d.ts
 declare class ImageElement extends DomElement<"img"> {
@@ -617,69 +1307,26 @@ declare class ImageElement extends DomElement<"img"> {
   setSize(width: number, height: number): this;
   alt(value: string): this;
 }
+declare function $img(): ImageElement;
 //#endregion
-//#region src/InputCheckbox.d.ts
-declare class InputCheckbox extends DomElement<"input"> {
-  constructor();
-  name(value: string): this;
-  checked(value: boolean): this;
-  isChecked(): boolean;
-}
-//#endregion
-//#region src/InputColor.d.ts
-declare class InputColor extends DomElement<"input"> {
-  constructor();
-  protected _rgb: {
-    r: number;
-    g: number;
-    b: number;
-  };
-  name(value: string): this;
-  value(value: string): this;
-  getValue(): string;
-  getRGB(): {
-    r: number;
-    g: number;
-    b: number;
-  };
-  getNormalizedRGB(): {
-    r: number;
-    g: number;
-    b: number;
-  };
-}
-//#endregion
-//#region src/InputNumber.d.ts
-declare class InputNumber extends DomElement<"input"> {
-  constructor();
-  name(value: string): this;
-  value(value: number): this;
-  getValue(): number;
-  min(value: number): this;
-  max(value: number): this;
-  step(value: number): this;
-  placeholder(value: string): this;
-}
-//#endregion
-//#region src/InputRange.d.ts
-declare class InputRange extends DomElement<"input"> {
-  constructor();
-  name(value: string): this;
-  value(value: number): this;
-  getValue(): number;
-  min(value: number): this;
-  max(value: number): this;
-  step(value: number): this;
-}
-//#endregion
-//#region src/InputText.d.ts
-declare class InputText extends DomElement<"input"> {
-  constructor();
-  name(value: string): this;
-  value(value: string): this;
-  getValue(): string;
-  placeholder(value: string): this;
-}
+//#region src/input.d.ts
+/**
+ * Creates a typed input element instance based on the specified input type.
+ * Returns a subclass of `DomElement` with type-safe access to input-specific properties and behaviors.
+ *
+ * Supported types include:
+ * - `"text"` → `InputText`
+ * - `"number"` → `InputNumber`
+ * - `"checkbox"` → `InputCheckbox`
+ * - `"color"` → `InputColor`
+ * - `"range"` → `InputRange`
+ *
+ * Each returned instance supports fluent styling, DOM composition, and event binding.
+ *
+ * @param type - The input type to create.
+ * @return A typed input element instance matching the given type.
+ */
+declare function $input<T$1 extends keyof InputElementMap>(type: T$1): InputElementMap[T$1];
 //#endregion
 //#region src/OptionElement.d.ts
 declare class OptionElement extends DomElement<"option"> {
@@ -687,6 +1334,7 @@ declare class OptionElement extends DomElement<"option"> {
   value(value: string | number): this;
   getValue(): string;
 }
+declare function $option(): OptionElement;
 //#endregion
 //#region src/ProgressElement.d.ts
 /**
@@ -727,6 +1375,7 @@ declare class ProgressElement extends DomElement<"progress"> {
    */
   indeterminate(): this;
 }
+declare function $progress(): ProgressElement;
 //#endregion
 //#region src/SelectElement.d.ts
 declare class SelectElement extends DomElement<"select"> {
@@ -735,9 +1384,11 @@ declare class SelectElement extends DomElement<"select"> {
   value(value: string | number): this;
   getValue(): string;
 }
+declare function $select(): SelectElement;
 //#endregion
 //#region src/utils.d.ts
 declare function uniqueId(): string;
 declare function camelToKebab(prop: string): string;
+declare function getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
 //#endregion
-export { $, $body, $query, AnchorElement, Autocomplete, Button, Canvas, CssProperties, type CssProperty, DomBody, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, IFrame, ImageElement, InputCheckbox, InputColor, InputNumber, InputRange, InputText, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, uniqueId };
+export { $, $a, $body, $btn, $canvas, $iframe, $img, $input, $option, $progress, $query, $select, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, Button, Canvas, CssProperties, type CssProperty, CssRule, DomBody, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomWindow, IFrame, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };