@neptune3d/dom 0.0.3 → 0.0.5

package/README.md

@@ -1,3 +1,58 @@
 # neptune3d/dom
 
-Helper classes and functions for the DOM.
+Helper classes and functions for the DOM.
+
+## 🚀 Getting Started
+
+Install the package:
+
+```bash
+npm install neptune3d/dom
+```
+
+Import and create elements:
+
+```ts
+import { $, $body } from "neptune3d/dom";
+
+const div = $("div")
+  .text("Hello world")
+  .css("", { padding: "1rem", background: "#eee" })
+  .on("click", () => console.log("Clicked!"));
+
+const body = $body();
+
+body.append(div.dom);
+```
+
+Use SVG elements:
+
+```ts
+const circle = $("circle")
+  .attr("cx", "50")
+  .attr("cy", "50")
+  .attr("r", "40")
+  .attr("fill", "red");
+
+const svg = $("svg").attr("width", "100").attr("height", "100").add(circle);
+
+body.append(svg.dom);
+```
+
+Define global styles:
+
+```ts
+import { StyleSheet } from "neptune3d/dom";
+
+StyleSheet.getSheet().globalCss(".list-item", {
+  padding: "0.5rem",
+  borderBottom: "1px solid #ccc",
+});
+```
+
+## 📦 Features
+
+- Chainable DOM manipulation
+- Scoped and global CSS rule injection
+- Media query support
+- Event listener helpers

package/dist/index.d.ts

@@ -13,42 +13,223 @@ declare class MediaRule {
   delete(index: number): void;
 }
 //#endregion
+//#region src/types.d.ts
+type CssProperties = PropertiesFallback<string | number> & {
+  [key: `--${string}`]: string | number | undefined;
+};
+type Autocomplete<T$1 extends string> = T$1 | (string & {});
+type DomElementChild = DomElement<any> | Node | string | number;
+type DomElementTagNameMap = HTMLElementTagNameMap & SvgElementTagNameMap;
+type SvgElementTagNameMap = {
+  svgA: SVGAElement;
+  animate: SVGAnimateElement;
+  animateMotion: SVGAnimateMotionElement;
+  animateTransform: SVGAnimateTransformElement;
+  circle: SVGCircleElement;
+  clipPath: SVGClipPathElement;
+  defs: SVGDefsElement;
+  desc: SVGDescElement;
+  ellipse: SVGEllipseElement;
+  feBlend: SVGFEBlendElement;
+  feColorMatrix: SVGFEColorMatrixElement;
+  feComponentTransfer: SVGFEComponentTransferElement;
+  feComposite: SVGFECompositeElement;
+  feConvolveMatrix: SVGFEConvolveMatrixElement;
+  feDiffuseLighting: SVGFEDiffuseLightingElement;
+  feDisplacementMap: SVGFEDisplacementMapElement;
+  feDistantLight: SVGFEDistantLightElement;
+  feDropShadow: SVGFEDropShadowElement;
+  feFlood: SVGFEFloodElement;
+  feFuncA: SVGFEFuncAElement;
+  feFuncB: SVGFEFuncBElement;
+  feFuncG: SVGFEFuncGElement;
+  feFuncR: SVGFEFuncRElement;
+  feGaussianBlur: SVGFEGaussianBlurElement;
+  feImage: SVGFEImageElement;
+  feMerge: SVGFEMergeElement;
+  feMergeNode: SVGFEMergeNodeElement;
+  feMorphology: SVGFEMorphologyElement;
+  feOffset: SVGFEOffsetElement;
+  fePointLight: SVGFEPointLightElement;
+  feSpecularLighting: SVGFESpecularLightingElement;
+  feSpotLight: SVGFESpotLightElement;
+  feTile: SVGFETileElement;
+  feTurbulence: SVGFETurbulenceElement;
+  filter: SVGFilterElement;
+  foreignObject: SVGForeignObjectElement;
+  g: SVGGElement;
+  image: SVGImageElement;
+  line: SVGLineElement;
+  linearGradient: SVGLinearGradientElement;
+  marker: SVGMarkerElement;
+  mask: SVGMaskElement;
+  metadata: SVGMetadataElement;
+  mpath: SVGMPathElement;
+  path: SVGPathElement;
+  pattern: SVGPatternElement;
+  polygon: SVGPolygonElement;
+  polyline: SVGPolylineElement;
+  radialGradient: SVGRadialGradientElement;
+  rect: SVGRectElement;
+  script: SVGScriptElement;
+  set: SVGSetElement;
+  stop: SVGStopElement;
+  style: SVGStyleElement;
+  svg: SVGSVGElement;
+  switch: SVGSwitchElement;
+  symbol: SVGSymbolElement;
+  text: SVGTextElement;
+  textPath: SVGTextPathElement;
+  title: SVGTitleElement;
+  tspan: SVGTSpanElement;
+  use: SVGUseElement;
+  view: SVGViewElement;
+};
+type DomElementEventMap = HTMLElementEventMap & SVGElementEventMap;
+//#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;
+  /**
+   * Retrieves or creates a CSSStyleRule for the given selector.
+   * If the rule doesn't exist, it is inserted at the end of the stylesheet and cached.
+   *
+   * This ensures stable indexing and avoids rule override issues caused by shifting positions.
+   * The returned rule can be used to modify style declarations programmatically.
+   *
+   * @param selector - The CSS selector string (e.g., ".button", "#header", "div > span").
+   * @return The corresponding CSSStyleRule instance.
+   */
   getCssRule(selector: string): CSSStyleRule;
   deleteCssRule(selector: string): void;
+  /**
+   * Retrieves or creates a CSSMediaRule for the given media query.
+   * If the rule doesn't exist, it is inserted at the end of the stylesheet and cached.
+   *
+   * This ensures consistent indexing and avoids rule override issues caused by shifting positions.
+   *
+   * @param mediaText - The media query string (e.g., "screen and (max-width: 600px)").
+   * @return A MediaRule wrapper containing the index and CSSMediaRule reference.
+   */
   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;
+  /**
+   * 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/types.d.ts
-type CssProperties = PropertiesFallback<string | number>;
-type Autocomplete<T$1 extends string> = T$1 | (string & {});
-type DomElementChild = DomElement<any> | string | number;
-//#endregion
 //#region src/DomElement.d.ts
-declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> {
-  constructor(tag: Tag, el?: HTMLElementTagNameMap[Tag]);
-  protected _tag: Tag;
-  protected _dom: HTMLElementTagNameMap[Tag];
+/**
+ * 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> {
+  /**
+   * 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];
   protected _sheet: StyleSheet;
   protected _cssClassName: string | undefined;
   protected _userClassName: string | undefined;
-  get tag(): Tag;
-  get dom(): HTMLElementTagNameMap[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];
   get cssClassName(): string;
   getText(): string;
-  text(txt: any): this;
-  protected resolveNode(child: DomElementChild): any;
+  /**
+   * 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;
+  /**
+   * 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.
@@ -76,6 +257,14 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @return This DomElement instance.
    */
   setChildrenFromIndex(index: number, ...nodes: DomElementChild[]): 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;
   /**
    * Removes child elements within the specified index range.
@@ -86,43 +275,332 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @returns This DomElement instance.
    */
   clear(from?: number, to?: number): this;
-  on<T extends keyof HTMLElementEventMap>(type: T, handler: (ev: HTMLElementEventMap[T] & {
-    currentTarget: HTMLElementTagNameMap[Tag];
+  /**
+   * 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;
-  off<T extends keyof HTMLElementEventMap>(type: T, handler: (ev: HTMLElementEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
-  attr(obj: Record<string, any>): this;
-  props(obj: Record<string, any>): this;
-  prop(name: string, value: any): 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.
+   */
+  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;
-  style(obj: CssProperties): this;
-  id(value: string): this;
-  className(value: string): this;
-  htmlFor(value: string): this;
-  title(value: string): this;
-  protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | 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.
+   */
+  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;
+  /**
+   * 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 DomElement instance for chaining.
+   */
+  style(props: CssProperties): 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 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;
+  /**
+   * 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 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 value - The padding value to apply, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
   p(value: Property.Padding | undefined): this;
+  /**
+   * 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 value - The top padding value to apply, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
   pt(value: Property.PaddingTop | undefined): this;
+  /**
+   * 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 value - The right padding value to apply, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
   pr(value: Property.PaddingRight | undefined): this;
+  /**
+   * 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 value - The bottom padding value to apply, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
   pb(value: Property.PaddingBottom | undefined): this;
+  /**
+   * 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 value - The left padding value to apply, or `undefined` to remove it.
+   * @return This DomElement instance for chaining.
+   */
   pl(value: Property.PaddingLeft | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   px(value: Property.PaddingLeft | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   py(value: Property.PaddingTop | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   m(value: Property.Margin | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   mt(value: Property.MarginTop | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   mr(value: Property.MarginRight | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   mb(value: Property.MarginBottom | undefined): this;
+  /**
+   * 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 DomElement instance for chaining.
+   */
   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.
+   */
   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.
+   */
   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.
+   */
   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.
+   */
+  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.
+   */
+  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.
+   */
   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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  radiusY(value: Property.BorderRadius | undefined): this;
   display(value: Property.Display | undefined): this;
   flexShrink(value: Property.FlexShrink | undefined): this;
   flex(value: Property.Flex | undefined): this;
   bgColor(value: Property.BackgroundColor | undefined): this;
   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 DomElement 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 DomElement 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").
@@ -153,6 +631,42 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
    * @return This DomElement 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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  bbr(value: Property.BorderBottom | Property.BorderRight | undefined): this;
   overflow(value: Property.Overflow | undefined): this;
   overflowY(value: Property.OverflowY | undefined): this;
   overflowX(value: Property.OverflowX | undefined): this;
@@ -162,10 +676,35 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
   fontStyle(value: Property.FontStyle | undefined): this;
   textAlign(value: Property.TextAlign | undefined): this;
   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.
+   */
   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.
+   */
   posTop(value: Property.Top | undefined): this;
+  /**
+   * Sets the CSS `bottom` offset.
+   * @param value - The bottom offset value (e.g., "0", "2rem").
+   * @return This DomElement instance for chaining.
+   */
   posBottom(value: Property.Bottom | undefined): this;
+  /**
+   * Sets the CSS `left` offset.
+   * @param value - The left offset value (e.g., "5px", "auto").
+   * @return This DomElement instance for chaining.
+   */
   posLeft(value: Property.Left | undefined): this;
+  /**
+   * Sets the CSS `right` offset.
+   * @param value - The right offset value (e.g., "1em", "0").
+   * @return This DomElement instance for chaining.
+   */
   posRight(value: Property.Right | undefined): this;
   cursor(value: Property.Cursor | undefined): this;
   alignItems(value: Property.AlignItems | undefined): this;
@@ -175,23 +714,158 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
   templateColumns(value: Property.GridTemplateColumns | undefined): this;
   templateRows(value: Property.GridTemplateRows | undefined): this;
   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.
+   */
+  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 DomElement instance for chaining.
+   */
+  verticalAlign(value: Property.VerticalAlign | 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 DomElement instance for chaining.
+   */
   overflowEllipsis(): this;
   ref(refFn: (el: this) => void): this;
+  /**
+   * Applies scoped CSS styles to the element using a class-based selector.
+   * Ensures the element has a unique internal class name, then targets it with the given selector.
+   *
+   * For example, calling `css(":hover", { color: "red" })` will generate:
+   * ```css
+   * .<internalClassName>:hover { color: red; }
+   * ```
+   *
+   * This enables dynamic styling of pseudo-classes, child selectors, or media queries without inline styles.
+   *
+   * @param selector - A CSS selector suffix (e.g., ":hover", " > span") scoped to the internal class.
+   * @param props - A map of CSS properties to apply to the generated rule.
+   * @return This DomElement instance for chaining.
+   */
+  css(selector: string, props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles directly to the root selector of the element.
+   * Equivalent to styling `.className` without any pseudo-classes or combinators.
+   *
+   * @param props - A map of CSS properties to apply to the root selector.
+   * @return This DomElement instance for chaining.
+   */
   rootCss(props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the `:hover` state of the element.
+   * Useful for styling hover interactions without inline styles.
+   *
+   * @param props - A map of CSS properties to apply when the element is hovered.
+   * @return This DomElement instance for chaining.
+   */
   hoverCss(props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the `:active` state of the element.
+   * Useful for styling active interactions (e.g., mouse down).
+   *
+   * @param props - A map of CSS properties to apply when the element is active.
+   * @return This DomElement instance for chaining.
+   */
   activeCss(props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the `:focus` state of the element.
+   * Useful for styling keyboard or programmatic focus.
+   *
+   * @param props - A map of CSS properties to apply when the element is focused.
+   * @return This DomElement instance for chaining.
+   */
   focusCss(props: CssProperties): this;
-  protected setCssClassName(): this;
-  protected setRuleCss(rule: CSSStyleRule, props: CssProperties): void;
-  css(selector: string, props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the `:focus-within` state of the element.
+   * Useful for styling when any child element has focus.
+   *
+   * @param props - A map of CSS properties to apply when the element or its descendants are focused.
+   * @return This DomElement instance for chaining.
+   */
+  focusWithinCss(props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the element within a media query block.
+   * Ensures the element has a unique internal class name, then targets it with the given selector inside the specified media query.
+   *
+   * For example, calling `mediaCss("screen and (max-width: 600px)", ":hover", { color: "red" })` will generate:
+   * ```css
+   * \@media screen and (max-width: 600px) {
+   *   .<internalClassName>:hover { color: red; }
+   * }
+   * ```
+   *
+   * This enables responsive styling and conditional behavior based on viewport or device characteristics.
+   *
+   * @param mediaText - The media query string (e.g., "screen and (max-width: 600px)").
+   * @param selector - A CSS selector suffix (e.g., ":hover", " > span") scoped to the internal class.
+   * @param props - A map of CSS properties to apply within the media rule.
+   * @return This DomElement instance for chaining.
+   */
   mediaCss(mediaText: string, selector: string, props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the root selector of the element within a media query block.
+   * Useful for conditionally styling the element based on viewport or device characteristics.
+   *
+   * @param mediaText - The media query string (e.g., "screen and (max-width: 600px)").
+   * @param props - A map of CSS properties to apply within the media rule.
+   * @return This DomElement instance for chaining.
+   */
   mediaRootCss(mediaText: string, props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the root selector of the element when the viewport width
+   * meets or exceeds the specified minimum.
+   *
+   * Automatically converts numeric values to pixel-based CSS width values.
+   *
+   * @param minWidth - The minimum width threshold (e.g., 600 or "40em").
+   * @param props - A map of CSS properties to apply when the condition is met.
+   * @return This DomElement instance for chaining.
+   */
   minWidthCss(minWidth: number | string, props: CssProperties): this;
+  /**
+   * Applies scoped CSS styles to the root selector of the element when the viewport width
+   * is less than or equal to the specified maximum.
+   *
+   * Automatically converts numeric values to pixel-based CSS width values.
+   *
+   * @param maxWidth - The maximum width threshold (e.g., 600 or "40em").
+   * @param props - A map of CSS properties to apply when the condition is met.
+   * @return This DomElement instance for chaining.
+   */
   maxWidthCss(maxWidth: number | string, props: CssProperties): this;
-  protected getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
+  protected resolveNode(child: DomElementChild): Node;
+  protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
+  protected setCssClassName(): this;
 }
-declare function $<T$1 extends keyof HTMLElementTagNameMap>(tag: T$1): DomElement<T$1>;
-declare function $select<T$1 extends keyof HTMLElementTagNameMap>(selector: string): DomElement<T$1>;
+/**
+ * Creates a new DomElement instance for the given tag name.
+ * @param tag - The HTML tag name (e.g., "div", "button", "input").
+ * @return A DomElement wrapping a newly created element of the specified tag.
+ */
+declare function $<T$1 extends keyof DomElementTagNameMap>(tag: T$1): DomElement<T$1>;
+/**
+ * Queries the DOM for a matching element and wraps it in a DomElement.
+ * @param selector - A CSS selector string to locate the element.
+ * @return A DomElement wrapping the matched element.
+ * @throws If no element matches the selector, this will throw due to non-null assertion.
+ */
+declare function $query<T$1 extends keyof DomElementTagNameMap>(selector: string): DomElement<T$1>;
 //#endregion
 //#region src/AnchorElement.d.ts
 declare class AnchorElement extends DomElement<"a"> {
@@ -203,6 +877,7 @@ declare class AnchorElement extends DomElement<"a"> {
 declare class Button extends DomElement<"button"> {
   constructor();
   type(value: "button" | "submit" | "reset"): this;
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/Canvas.d.ts
@@ -236,6 +911,11 @@ declare class Canvas extends DomElement<"canvas"> {
 //#region src/constants.d.ts
 declare const UNITLESS_CSS_PROPS: Record<string, 1>;
 declare const VENDOR_CSS_PROPS: Record<string, 1>;
+declare const SVG_TAGS: string[];
+declare const TAG_ALIAS: {
+  svgA: "a";
+};
+type TagAlias = typeof TAG_ALIAS;
 //#endregion
 //#region src/DomBody.d.ts
 declare class DomBody {
@@ -274,6 +954,7 @@ declare class InputCheckbox extends DomElement<"input"> {
   name(value: string): this;
   checked(value: boolean): this;
   isChecked(): boolean;
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/InputColor.d.ts
@@ -297,6 +978,7 @@ declare class InputColor extends DomElement<"input"> {
     g: number;
     b: number;
   };
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/InputNumber.d.ts
@@ -309,6 +991,7 @@ declare class InputNumber extends DomElement<"input"> {
   max(value: number): this;
   step(value: number): this;
   placeholder(value: string): this;
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/InputRange.d.ts
@@ -320,6 +1003,7 @@ declare class InputRange extends DomElement<"input"> {
   min(value: number): this;
   max(value: number): this;
   step(value: number): this;
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/InputText.d.ts
@@ -329,6 +1013,7 @@ declare class InputText extends DomElement<"input"> {
   value(value: string): this;
   getValue(): string;
   placeholder(value: string): this;
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/OptionElement.d.ts
@@ -387,7 +1072,7 @@ declare class SelectElement extends DomElement<"select"> {
 }
 //#endregion
 //#region src/utils.d.ts
-declare function uniqueId(prefix: string): string;
+declare function uniqueId(): string;
 declare function camelToKebab(prop: string): string;
 //#endregion
-export { $, $body, $select, AnchorElement, Autocomplete, Button, Canvas, CssProperties, type CssProperty, DomBody, DomElement, DomElementChild, IFrame, ImageElement, InputCheckbox, InputColor, InputNumber, InputRange, InputText, OptionElement, ProgressElement, SelectElement, StyleSheet, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, uniqueId };
+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 };

package/dist/index.js

@@ -1 +1 @@
-const e={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},t={WebkitAppearance:1};var n=class{constructor(e,t){this._index=e,this._rule=t,this.cssMap=new Map}_index;_rule;cssMap;get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}getCssRule(e){let t=this.cssMap.get(e);return t??=this._rule.insertRule(`${e}{}`,this.length),this._rule.cssRules.item(t)}delete(e){this._rule.deleteRule(e)}},r=class e{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}getCssRule(e){let t=this.getCssMap(),n=t.get(e);return n??(n=this.sheet.insertRule(`${e}{}`),t.set(e,n)),this.sheet.cssRules.item(n)}deleteCssRule(e){let t=this.getCssMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n),t.delete(e))}getMediaRule(e){let t=this.getMediaMap(),r=t.get(e);if(!r){let i=this.sheet.insertRule(`@media(${e}){}`);r=new n(i,this.sheet.cssRules.item(i)),t.set(e,r)}return r}deleteMediaRule(e){let t=this.getMediaMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n.index),t.delete(e))}static getSheet(){let t=document.head.querySelector(`#${e.STYLE_ID}`);if(t==null){let t=document.createElement(`style`);return t.id=e.STYLE_ID,t.setAttribute(`type`,`text/css`),document.head.append(t),new e(t)}else return new e(t)}getCssMap(){let e=window.__neptuneCssMap__;return e||(e=new Map,window.__neptuneCssMap__=e),e}getMediaMap(){let e=window.__neptuneMediaMap__;return e||(e=new Map,window.__neptuneMediaMap__=e),e}static STYLE_ID=`__neptune-style__`};function i(e){return`${e}-${Date.now().toString(36)}-${(a++).toString(36)}`}let a=0;function o(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}var s=class{constructor(e,t){this._tag=e,this._dom=t??document.createElement(e),this._sheet=r.getSheet()}_tag;_dom;_sheet;_cssClassName;_userClassName;get tag(){return this._tag}get dom(){return this._dom}get cssClassName(){return this._cssClassName||=i(this.tag),this._cssClassName}getText(){return this._dom.textContent}text(e){return this._dom.textContent=String(e),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?String(e):e.dom}add(...e){return this._dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this._dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this._dom.removeChild(n[e]);let a=this._dom.children[i]??null;for(let e of t)this._dom.insertBefore(this.resolveNode(e),a);return this}remove(){this.dom.remove()}clear(e,t){let n=Array.from(this._dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this._dom.removeChild(n[e]);return this}on(e,t,n){return this._dom.addEventListener(e,t,n),this}off(e,t,n){return this._dom.removeEventListener(e,t,n)}attr(e){for(let t in e)this._dom.setAttribute(t,e[t]);return this}props(e){for(let t in e){let n=e[t];this._dom[t]=n}return this}prop(e,t){return this._dom[e]=t,this}getProp(e){return this._dom[e]}style(e){for(let t in e)this._dom.style[t]=this.getStyleValue(t,e[t]);return this}id(e){return this._dom.id=e,this}className(e){return this._userClassName=e,this._dom.className=this._cssClassName?`${e} ${this.cssClassName}`:e,this}htmlFor(e){return this._tag===`label`&&(this._dom.htmlFor=e),this}title(e){return this.dom.title=e,this}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(o(e)),this):(this.dom.style.setProperty(o(e),this.getStyleValue(e,t)),this)}p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}h(e){return this.setStyleProp(`height`,e)}w(e){return this.setStyleProp(`width`,e)}b(e){return this.setStyleProp(`border`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}br(e){return this.setStyleProp(`borderRight`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}posTop(e){return this.setStyleProp(`top`,e)}posBottom(e){return this.setStyleProp(`bottom`,e)}posLeft(e){return this.setStyleProp(`left`,e)}posRight(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}overflowEllipsis(){return this.style({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`})}ref(e){return e(this),this}rootCss(e){return this.css(``,e)}hoverCss(e){return this.css(`:hover`,e)}activeCss(e){return this.css(`:active`,e)}focusCss(e){return this.css(`:focus`,e)}setCssClassName(){return this.dom.className=this._userClassName?`${this._userClassName} ${this.cssClassName}`:this.cssClassName,this}setRuleCss(e,n){for(let r in n){let i=!!t[r],a=o(r);e.style.setProperty(i?`-${a}`:a,this.getStyleValue(r,n[r]))}}css(e,t){this.setCssClassName();let n=this._sheet.getCssRule(`.${this.cssClassName}${e}`);return this.setRuleCss(n,t),this}mediaCss(e,t,n){this.setCssClassName();let r=this._sheet.getMediaRule(e).getCssRule(`.${this.cssClassName}${t}`);return this.setRuleCss(r,n),this}mediaRootCss(e,t){return this.mediaCss(e,``,t)}minWidthCss(e,t){return this.mediaCss(`min-width:${this.getStyleValue(`width`,e)}`,``,t)}maxWidthCss(e,t){return this.mediaCss(`max-width:${this.getStyleValue(`width`,e)}`,``,t)}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}};function c(e){return new s(e)}function l(e){let t=document.querySelector(e);return new s(t.tagName.toLowerCase(),t)}var u=class extends s{constructor(){super(`a`)}href(e){return this._dom.href=e,this}},d=class extends s{constructor(){super(`button`)}type(e){return this.dom.type=e,this}},f=class extends s{constructor(e){super(`canvas`,e)}_size={width:this._dom.width,height:this._dom.height};getWidth(){return this._dom.width}getHeight(){return this._dom.height}width(e){return this._dom.width=e,this}height(e){return this._dom.height=e,this}setSize(e,t){return this._dom.width=e,this._dom.height=t,this}getSize(){return this._size.width=this._dom.width,this._size.height=this._dom.height,this._size}getAspect(){return this._dom.width/this._dom.height}getAspectScale(e){let t=this._dom.width/this._dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}},p=class{get dom(){return document.body}style(e){for(let t in e)this.dom.style[t]=this.getStyleValue(t,e[t]);return this}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}add(...e){return this.dom.append(...e.map(e=>e.dom)),this}clear(){return this.dom.innerHTML=``,this}};function m(){return new p}var h=class extends s{constructor(){super(`iframe`)}src(e){return this._dom.src=e,this}allowFullscreen(e=!0){return this._dom.allowFullscreen=e,this}width(e){return this._dom.width=this.getStyleValue(`width`,e),this}height(e){return this._dom.height=this.getStyleValue(`height`,e),this}setSize(e,t){return this._dom.width=this.getStyleValue(`width`,e),this._dom.height=this.getStyleValue(`height`,t),this}reload(){this.dom.src=this.dom.src}},g=class extends s{constructor(){super(`img`)}src(e){return this._dom.src=e,this}width(e){return this._dom.width=e,this}height(e){return this._dom.height=e,this}setSize(e,t){return this._dom.width=e,this._dom.height=t,this}alt(e){return this.dom.alt=e,this}},_=class extends s{constructor(){super(`input`),this._dom.type=`checkbox`}name(e){return this._dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}},v=class extends s{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}},y=class extends s{constructor(){super(`input`),this._dom.type=`number`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=String(e),this}getValue(){return Number(this._dom.value)}min(e){return this._dom.min=String(e),this}max(e){return this._dom.max=String(e),this}step(e){return this._dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}},b=class extends s{constructor(){super(`input`),this._dom.type=`range`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=String(e),this}getValue(){return Number(this._dom.value)}min(e){return this._dom.min=String(e),this}max(e){return this._dom.max=String(e),this}step(e){return this._dom.step=String(e),this}},x=class extends s{constructor(){super(`input`),this._dom.type=`text`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}placeholder(e){return this.dom.placeholder=e,this}},S=class extends s{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}},C=class extends s{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}},w=class extends s{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};export{c as $,m as $body,l as $select,u as AnchorElement,d as Button,f as Canvas,p as DomBody,s as DomElement,h as IFrame,g as ImageElement,_ as InputCheckbox,v as InputColor,y as InputNumber,b as InputRange,x as InputText,S as OptionElement,C as ProgressElement,w as SelectElement,r as StyleSheet,e as UNITLESS_CSS_PROPS,t as VENDOR_CSS_PROPS,o as camelToKebab,i as uniqueId};
+const e={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},t={WebkitAppearance:1},n=`svg.svgA.animate.animateMotion.animateTransform.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComponentTransfer.feComposite.feConvolveMatrix.feDiffuseLighting.feDisplacementMap.feDistantLight.feDropShadow.feFlood.feFuncA.feFuncB.feFuncG.feFuncR.feGaussianBlur.feImage.feMerge.feMergeNode.feMorphology.feOffset.fePointLight.feSpecularLighting.feSpotLight.feTile.feTurbulence.filter.foreignObject.g.image.line.linearGradient.marker.mask.metadata.mpath.path.pattern.polygon.polyline.radialGradient.rect.script.set.stop.style.switch.symbol.text.textPath.title.tspan.use.view`.split(`.`),r={svgA:`a`};var i=class{constructor(e,t){this._index=e,this._rule=t,this.cssMap=new Map}_index;_rule;cssMap;get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}getCssRule(e){let t=this.cssMap.get(e);return t??=this._rule.insertRule(`${e}{}`,this.length),this._rule.cssRules.item(t)}delete(e){this._rule.deleteRule(e)}};function a(){return`${Date.now().toString(36)}-${(o++).toString(36)}`}let o=0;function s(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}var c=class n{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}globalCss(e,t){let n=this.getCssRule(e);this.setRuleCss(n,t)}globalMediaCss(e,t,n){let r=this.getMediaRule(e).getCssRule(t);this.setRuleCss(r,n)}getCssRule(e){let t=this.getCssMap(),n=t.get(e);return n??(n=this.sheet.cssRules.length,this.sheet.insertRule(`${e}{}`,n),t.set(e,n)),this.sheet.cssRules.item(n)}deleteCssRule(e){let t=this.getCssMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n),t.delete(e))}getMediaRule(e){let t=this.getMediaMap(),n=t.get(e);if(!n){let r=this.sheet.cssRules.length;this.sheet.insertRule(`@media(${e}){}`,r),n=new i(r,this.sheet.cssRules.item(r)),t.set(e,n)}return n}deleteMediaRule(e){let t=this.getMediaMap(),n=t.get(e);n!=null&&(this.sheet.deleteRule(n.index),t.delete(e))}setRuleCss(e,n){for(let r in n){let i=!!t[r],a=s(r);e.style.setProperty(i?`-${a}`:a,this.getStyleValue(r,n[r]))}}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}getCssMap(){let e=l.get(this.sheet);return e||(e=new Map,l.set(this.sheet,e)),e}getMediaMap(){let e=u.get(this.sheet);return e||(e=new Map,u.set(this.sheet,e)),e}static getSheet(e=n.DEFAULT_STYLE_ID){let t=document.head.querySelector(`#${e}`);if(t==null){let t=document.createElement(`style`);return t.id=e,t.setAttribute(`type`,`text/css`),document.head.append(t),new n(t)}else return new n(t)}static DEFAULT_STYLE_ID=`__neptune-style__`};const l=new WeakMap,u=new WeakMap;var d=class{constructor(e,t){this._tag=r[e]??e,this._isSvg=n.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag)),this._sheet=c.getSheet()}_tag;_isSvg;_dom;_sheet;_cssClassName;_userClassName;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}get cssClassName(){return this._cssClassName||=a(),this._cssClassName}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}add(...e){return this._dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this._dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this._dom.removeChild(n[e]);let a=this._dom.children[i]??null;for(let e of t)this._dom.insertBefore(this.resolveNode(e),a);return this}remove(){this.dom.remove()}clear(e,t){let n=Array.from(this._dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this._dom.removeChild(n[e]);return this}on(e,t,n){return this._dom.addEventListener(e,t,n),this}off(e,t,n){this._dom.removeEventListener(e,t,n)}getAttr(e){return this.dom.getAttribute(e)}attr(e,t){return t===void 0?this.dom.removeAttribute(e):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}getProp(e){return this.dom[e]}prop(e,t){return this.dom[e]=t,this}props(e){for(let[t,n]of Object.entries(e))this.prop(t,n);return this}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}id(e){return this._dom.id=e??``,this}className(e){this._userClassName=e??``;let t=this._cssClassName?`${this._userClassName} ${this.cssClassName}`.trim():this._userClassName;return this.dom.setAttribute(`class`,t),this}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return e===void 0?this.dom.removeAttribute(`title`):this.dom.setAttribute(`title`,e),this}disabled(e){return e?this.dom.setAttribute(`disabled`,``):this.dom.removeAttribute(`disabled`),this}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusBottomLeft(e){return this.setStyleProp(`borderBottomLeftRadius`,e)}radiusBottomRight(e){return this.setStyleProp(`borderBottomRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}radiusBottom(e){return this.radiusBottomLeft(e).radiusBottomRight(e)}radiusLeft(e){return this.radiusTopLeft(e).radiusBottomLeft(e)}radiusRight(e){return this.radiusTopRight(e).radiusBottomRight(e)}radiusX(e){return this.radiusLeft(e).radiusRight(e)}radiusY(e){return this.radiusTop(e).radiusBottom(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}w(e){return this.setStyleProp(`width`,e)}h(e){return this.setStyleProp(`height`,e)}b(e){return this.setStyleProp(`border`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}br(e){return this.setStyleProp(`borderRight`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}bx(e){return this.setStyleProp(`borderLeft`,e),this.setStyleProp(`borderRight`,e),this}by(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderBottom`,e),this}btl(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderLeft`,e),this}btr(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderRight`,e),this}bbl(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderLeft`,e),this}bbr(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderRight`,e),this}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}posTop(e){return this.setStyleProp(`top`,e)}posBottom(e){return this.setStyleProp(`bottom`,e)}posLeft(e){return this.setStyleProp(`left`,e)}posRight(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}userSelect(e){return this.setStyleProp(`userSelect`,e)}verticalAlign(e){return this.setStyleProp(`verticalAlign`,e)}overflowEllipsis(){return this.style({overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`})}ref(e){return e(this),this}css(e,t){this.setCssClassName();let n=this._sheet.getCssRule(`.${this.cssClassName}${e}`);return this._sheet.setRuleCss(n,t),this}rootCss(e){return this.css(``,e)}hoverCss(e){return this.css(`:hover`,e)}activeCss(e){return this.css(`:active`,e)}focusCss(e){return this.css(`:focus`,e)}focusWithinCss(e){return this.css(`:focus-within`,e)}mediaCss(e,t,n){this.setCssClassName();let r=this._sheet.getMediaRule(e).getCssRule(`.${this.cssClassName}${t}`);return this._sheet.setRuleCss(r,n),this}mediaRootCss(e,t){return this.mediaCss(e,``,t)}minWidthCss(e,t){return this.mediaCss(`min-width:${this._sheet.getStyleValue(`width`,e)}`,``,t)}maxWidthCss(e,t){return this.mediaCss(`max-width:${this._sheet.getStyleValue(`width`,e)}`,``,t)}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):`dom`in e?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),this._sheet.getStyleValue(e,t)),this)}setCssClassName(){let e=this._userClassName?`${this._userClassName} ${this.cssClassName}`:this.cssClassName;return this.isSvg?this.dom.setAttribute(`class`,e):this.dom.className=e,this}};function f(e){return new d(e)}function p(e){let t=document.querySelector(e);return new d(t.tagName.toLowerCase(),t)}var m=class extends d{constructor(){super(`a`)}href(e){return this._dom.href=e,this}},h=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}disabledCss(e){return this.css(`:disabled`,e)}},g=class extends d{constructor(e){super(`canvas`,e)}_size={width:this._dom.width,height:this._dom.height};getWidth(){return this._dom.width}getHeight(){return this._dom.height}width(e){return this._dom.width=e,this}height(e){return this._dom.height=e,this}setSize(e,t){return this._dom.width=e,this._dom.height=t,this}getSize(){return this._size.width=this._dom.width,this._size.height=this._dom.height,this._size}getAspect(){return this._dom.width/this._dom.height}getAspectScale(e){let t=this._dom.width/this._dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}},_=class{get dom(){return document.body}style(e){for(let t in e)this.dom.style[t]=this.getStyleValue(t,e[t]);return this}getStyleValue(t,n){return typeof n==`number`?e[t]?String(n):`${n}px`:n}add(...e){return this.dom.append(...e.map(e=>e.dom)),this}clear(){return this.dom.innerHTML=``,this}};function v(){return new _}var y=class extends d{constructor(){super(`iframe`)}src(e){return this._dom.src=e,this}allowFullscreen(e=!0){return this._dom.allowFullscreen=e,this}width(e){return this._dom.width=this._sheet.getStyleValue(`width`,e),this}height(e){return this._dom.height=this._sheet.getStyleValue(`height`,e),this}setSize(e,t){return this._dom.width=this._sheet.getStyleValue(`width`,e),this._dom.height=this._sheet.getStyleValue(`height`,t),this}reload(){this.dom.src=this.dom.src}},b=class extends d{constructor(){super(`img`)}src(e){return this._dom.src=e,this}width(e){return this._dom.width=e,this}height(e){return this._dom.height=e,this}setSize(e,t){return this._dom.width=e,this._dom.height=t,this}alt(e){return this.dom.alt=e,this}},x=class extends d{constructor(){super(`input`),this._dom.type=`checkbox`}name(e){return this._dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}disabledCss(e){return this.css(`:disabled`,e)}},S=class extends d{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}disabledCss(e){return this.css(`:disabled`,e)}},C=class extends d{constructor(){super(`input`),this._dom.type=`number`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=String(e),this}getValue(){return Number(this._dom.value)}min(e){return this._dom.min=String(e),this}max(e){return this._dom.max=String(e),this}step(e){return this._dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}disabledCss(e){return this.css(`:disabled`,e)}},w=class extends d{constructor(){super(`input`),this._dom.type=`range`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=String(e),this}getValue(){return Number(this._dom.value)}min(e){return this._dom.min=String(e),this}max(e){return this._dom.max=String(e),this}step(e){return this._dom.step=String(e),this}disabledCss(e){return this.css(`:disabled`,e)}},T=class extends d{constructor(){super(`input`),this._dom.type=`text`}name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}placeholder(e){return this.dom.placeholder=e,this}disabledCss(e){return this.css(`:disabled`,e)}},E=class extends d{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}},D=class extends d{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}},O=class extends d{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};export{f as $,v as $body,p as $query,m as AnchorElement,h as Button,g as Canvas,_ as DomBody,d as DomElement,y as IFrame,b as ImageElement,x as InputCheckbox,S as InputColor,C as InputNumber,w as InputRange,T as InputText,i as MediaRule,E as OptionElement,D as ProgressElement,n as SVG_TAGS,O as SelectElement,c as StyleSheet,r as TAG_ALIAS,e as UNITLESS_CSS_PROPS,t as VENDOR_CSS_PROPS,s as camelToKebab,a as uniqueId};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neptune3d/dom",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Helper classes and functions for the DOM.",
   "type": "module",
   "license": "MIT",