npm - @neptune3d/dom - Versions diffs - 0.0.4 → 0.0.5 - Mend

@neptune3d/dom 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -22,7 +22,7 @@ const div = $("div")
 const body = $body();
-body.appendChild(div.dom);
+body.append(div.dom);
 ```
 Use SVG elements:
@@ -34,9 +34,9 @@ const circle = $("circle")
   .attr("r", "40")
   .attr("fill", "red");
-const svg = $("svg").attr("width", "100").attr("height", "100").append(circle);
+const svg = $("svg").attr("width", "100").attr("height", "100").add(circle);
-body.appendChild(svg.dom);
+body.append(svg.dom);
 ```
 Define global styles:

package/dist/index.d.ts CHANGED Viewed

@@ -14,9 +14,11 @@ declare class MediaRule {
 }
 //#endregion
 //#region src/types.d.ts
-type CssProperties = PropertiesFallback<string | number>;
+type CssProperties = PropertiesFallback<string | number> & {
+  [key: `--${string}`]: string | number | undefined;
+};
 type Autocomplete<T$1 extends string> = T$1 | (string & {});
-type DomElementChild = DomElement<any> | string | number;
+type DomElementChild = DomElement<any> | Node | string | number;
 type DomElementTagNameMap = HTMLElementTagNameMap & SvgElementTagNameMap;
 type SvgElementTagNameMap = {
   svgA: SVGAElement;
@@ -116,16 +118,47 @@ declare class StyleSheet {
    * @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/DomElement.d.ts
@@ -177,7 +210,26 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
   get dom(): DomElementTagNameMap[Tag];
   get cssClassName(): string;
   getText(): string;
-  text(txt: any): this;
+  /**
+   * 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.
@@ -205,6 +257,14 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * @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.
@@ -269,29 +329,68 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
   prop(name: string, value: any): this;
   /**
    * Sets multiple properties on the element.
-   * @param properties - An object mapping property names to values.
+   * @param props - 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;
+  props(props: Record<string, any>): 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.
+   * 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): this;
-  htmlFor(value: string): this;
+  className(value: string | undefined): this;
   /**
-   * Sets the title of the element.
-   * For HTML elements, sets the `title` property.
-   * For SVG elements, sets the `title` attribute.
-   * @param value - The tooltip text to show on hover.
+   * 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.
    */
-  title(value: string): this;
+  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.
@@ -303,17 +402,113 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * @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.
@@ -388,8 +583,24 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
   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").
@@ -509,18 +720,136 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * @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;
-  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 resolveNode(child: DomElementChild): any;
+  protected resolveNode(child: DomElementChild): Node;
   protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
   protected setCssClassName(): this;
 }
@@ -548,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
@@ -624,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
@@ -647,6 +978,7 @@ declare class InputColor extends DomElement<"input"> {
     g: number;
     b: number;
   };
+  disabledCss(props: CssProperties): this;
 }
 //#endregion
 //#region src/InputNumber.d.ts
@@ -659,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
@@ -670,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
@@ -679,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

package/dist/index.js CHANGED Viewed

	@@ -1 +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},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};
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},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 CHANGED Viewed

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