@neptune3d/dom 0.0.2 → 0.0.4

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.appendChild(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").append(circle);
+
+body.appendChild(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,171 @@ declare class MediaRule {
   delete(index: number): void;
 }
 //#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;
+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;
   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/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;
   add(...nodes: DomElementChild[]): this;
   /**
    * Inserts one or more DomElements into a parent at the specified index.
@@ -86,20 +215,94 @@ 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;
+  /**
+   * 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 properties - An object mapping property names to values.
+   *                     Properties with undefined values are deleted.
+   * @return This DomElement instance for chaining.
+   */
+  props(properties: Record<string, any>): this;
   style(obj: CssProperties): this;
   id(value: string): 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.
+   */
   className(value: string): this;
   htmlFor(value: string): 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.
+   */
   title(value: string): this;
-  protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | 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.
+   */
+  disable(): this;
+  /**
+   * Removes the `disabled` attribute to enable the element.
+   * @return This DomElement instance for chaining.
+   */
+  enable(): this;
   p(value: Property.Padding | undefined): this;
   pt(value: Property.PaddingTop | undefined): this;
   pr(value: Property.PaddingRight | undefined): this;
@@ -112,10 +315,74 @@ declare class DomElement<Tag extends keyof HTMLElementTagNameMap = keyof HTMLEle
   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.
+   */
   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;
@@ -153,6 +420,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 +465,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 +503,40 @@ 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;
   overflowEllipsis(): this;
   ref(refFn: (el: this) => void): this;
   rootCss(props: CssProperties): this;
   hoverCss(props: CssProperties): this;
   activeCss(props: CssProperties): this;
   focusCss(props: CssProperties): this;
-  protected setCssClassName(): this;
-  protected setRuleCss(rule: CSSStyleRule, props: CssProperties): void;
   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 getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
+  protected resolveNode(child: DomElementChild): any;
+  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"> {
@@ -236,6 +581,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 {
@@ -387,7 +737,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(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`,`circle`,`rect`,`path`,`line`,`polyline`,`polygon`,`g`,`text`,`defs`,`use`,`symbol`,`clipPath`,`mask`],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.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(),n=t.get(e);if(!n){let r=this.sheet.insertRule(`@media(${e}){}`);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))}static getSheet(){let e=document.head.querySelector(`#${n.STYLE_ID}`);if(e==null){let e=document.createElement(`style`);return e.id=n.STYLE_ID,e.setAttribute(`type`,`text/css`),document.head.append(e),new n(e)}else return new n(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=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__`},l=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=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 in e)this._dom.style[t]=this._sheet.getStyleValue(t,e[t]);return this}id(e){return this._dom.id=e,this}className(e){this._userClassName=e;let t=this._cssClassName?`${e} ${this.cssClassName}`:e;return this.isSvg?this.dom.setAttribute(`class`,t):this.dom.className=t,this}htmlFor(e){return this._tag===`label`&&(this._dom.htmlFor=e),this}title(e){return this.isSvg?this.dom.setAttribute(`title`,e):this.dom.title=e,this}disable(){return this.dom.setAttribute(`disabled`,``),this}enable(){return this.dom.removeAttribute(`disabled`),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)}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)}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)}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)}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)}css(e,t){this.setCssClassName();let n=this._sheet.getCssRule(`.${this.cssClassName}${e}`);return this._sheet.setRuleCss(n,t),this}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`?String(e):e.dom}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 u(e){return new l(e)}function d(e){let t=document.querySelector(e);return new l(t.tagName.toLowerCase(),t)}var f=class extends l{constructor(){super(`a`)}href(e){return this._dom.href=e,this}},p=class extends l{constructor(){super(`button`)}type(e){return this.dom.type=e,this}},m=class extends l{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}},h=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 g(){return new h}var _=class extends l{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}},v=class extends l{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}},y=class extends l{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`)}},b=class extends l{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}},x=class extends l{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}},S=class extends l{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}},C=class extends l{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}},w=class extends l{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}},T=class extends l{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}},E=class extends l{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{u as $,g as $body,d as $query,f as AnchorElement,p as Button,m as Canvas,h as DomBody,l as DomElement,_ as IFrame,v as ImageElement,y as InputCheckbox,b as InputColor,x as InputNumber,S as InputRange,C as InputText,i as MediaRule,w as OptionElement,T as ProgressElement,n as SVG_TAGS,E 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.2",
+  "version": "0.0.4",
   "description": "Helper classes and functions for the DOM.",
   "type": "module",
   "license": "MIT",