@neptune3d/dom 0.0.7 → 0.0.9

package/README.md

@@ -2,6 +2,8 @@
 
 Helper classes and functions for fluent DOM manipulation, styling, and event handling.
 
+[![NPM Version](https://img.shields.io/npm/v/%40neptune3d%2Fdom)](https://www.npmjs.com/package/@neptune3d/dom)
+
 ## 🚀 Getting Started
 
 Install the package:
@@ -54,16 +56,16 @@ $body().add(checkbox);
 ## 🎯 Popover API
 
 ```ts
-const pop = $("div")
+const popup = $("div")
   .text("Popover content")
   .popover("manual")
-  .css("", { padding: "1rem", background: "#222", color: "#fff" });
+  .style({ padding: "1rem", background: "#222", color: "#fff" });
 
-$body().add(pop);
+$body().add(popup);
 
 // Show/hide programmatically
-pop.showPopover();
-pop.hidePopover();
+popup.showPopover();
+popup.hidePopover();
 ```
 
 ## 🎨 Stylesheet Rules
@@ -73,18 +75,24 @@ import { StyleSheet } from "neptune3d/dom";
 
 const sheet = StyleSheet.getSheet();
 
-// Insert a global rule
+// insert a css rule
 const rule = sheet.cssRule(".list-item");
-rule.style({
-  padding: "0.5rem",
-  borderBottom: "1px solid #ccc",
-});
+rule.p("0.5rem").bb("1px solid #ccc");
 
-// Insert a media query block
+// insert a media rule
 const media = sheet.mediaRule("screen and (max-width: 600px)");
-media.cssRule(".list-item").style({
-  background: "#f0f0f0",
-});
+
+// insert a css rule into the media rule
+media.cssRule(".list-item").textAlign("center").fontSize(24);
+
+// extend a css rule
+rule.extend("> div.child").opacity(0.6);
+
+// predefined extensions for common pseudo selectors / elements
+
+rule.hover().bgColor("red");
+
+rule.focus().outline("1px dashed blue");
 ```
 
 ## 🌍 Global Event Wrappers

package/dist/index.d.ts

@@ -44,14 +44,113 @@ declare class InputNumber extends DomElement<"input"> {
 }
 //#endregion
 //#region src/InputRange.d.ts
+/**
+ * Represents a styled `<input type="range">` element with fluent configuration methods.
+ * Inherits DOM manipulation and style capabilities from `DomElement`, `BaseDom`, and `BaseStyle`.
+ * Provides ergonomic setters for common range input attributes (`min`, `max`, `step`, `value`, `name`),
+ * and exposes a typed `getValue()` accessor for reading the current numeric value.
+ *
+ * Designed for declarative UI composition and chaining, with full support for styling, layout, and interactivity.
+ *
+ * Example usage:
+ *   new InputRange()
+ *     .min(0)
+ *     .max(100)
+ *     .step(5)
+ *     .value(50)
+ *     .bWidth(1)
+ *     .bStyle("solid")
+ *     .bColor("#ccc");
+ */
 declare class InputRange extends DomElement<"input"> {
   constructor();
+  /**
+   * Returns the current numeric value of the range input.
+   * Converts the underlying string value to a number for type-safe access.
+   * Useful for reading user-selected values in event handlers or form logic.
+   *
+   * @return The current value as a number.
+   */
+  getValue(): number;
+  /**
+   * Returns the configured minimum value of the range input.
+   * Converts the string `min` attribute to a number.
+   * Useful for validation, clamping, or dynamic UI feedback.
+   *
+   * @return The minimum value as a number.
+   */
+  getMin(): number;
+  /**
+   * Returns the configured maximum value of the range input.
+   * Converts the string `max` attribute to a number.
+   * Useful for validation, clamping, or dynamic UI feedback.
+   *
+   * @return The maximum value as a number.
+   */
+  getMax(): number;
+  /**
+   * Returns the configured step increment of the range input.
+   * Converts the string `step` attribute to a number.
+   * Useful for calculating snap points or enforcing input granularity.
+   *
+   * @return The step value as a number.
+   */
+  getStep(): number;
+  /**
+   * Sets the `name` attribute of the range input.
+   * Useful for form serialization, accessibility, and identifying the input in event handlers or submissions.
+   *
+   * @param value - The name to assign to the input element.
+   * @return This instance for chaining.
+   */
   name(value: string): this;
+  /**
+   * Sets the current value of the range input.
+   * Converts the number to a string for DOM compatibility.
+   * Useful for initializing or programmatically updating the slider position.
+   *
+   * @param value - The numeric value to assign to the input.
+   * @return This instance for chaining.
+   */
   value(value: number): this;
-  getValue(): number;
+  /**
+   * Sets the `min` attribute of the range input.
+   * Defines the lowest selectable value in the range.
+   * Converts the number to a string for DOM compatibility.
+   *
+   * @param value - The minimum value allowed by the input.
+   * @return This instance for chaining.
+   */
   min(value: number): this;
+  /**
+   * Sets the `max` attribute of the range input.
+   * Defines the highest selectable value in the range.
+   * Converts the number to a string for DOM compatibility.
+   *
+   * @param value - The maximum value allowed by the input.
+   * @return This instance for chaining.
+   */
   max(value: number): this;
+  /**
+   * Sets the `step` attribute of the range input.
+   * Controls the increment between selectable values.
+   * Converts the number to a string for DOM compatibility.
+   *
+   * @param value - The step size between values.
+   * @return This instance for chaining.
+   */
   step(value: number): this;
+  /**
+   * Sets the `min`, `max`, and `step` attributes of the range input.
+   * Accepts individual numeric parameters for ergonomic and explicit configuration.
+   * Useful for declaratively defining the full range boundaries.
+   *
+   * @param min - The minimum value of the range.
+   * @param max - The maximum value of the range.
+   * @param step - The step increment between values.
+   * @return This instance for chaining.
+   */
+  bounds(min: number, max: number, step: number): this;
 }
 //#endregion
 //#region src/InputText.d.ts
@@ -155,7 +254,7 @@ declare abstract class BaseStyle {
    * @param value - The padding value to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  p(value: Property.Padding | undefined): this;
+  p(value: Property.Padding | number | undefined): this;
   /**
    * Sets or clears the `padding-top` style of the element.
    * Accepts any valid CSS value (e.g., "10px", "1em").
@@ -227,7 +326,7 @@ declare abstract class BaseStyle {
    * @param value - The top margin value to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  mt(value: Property.MarginTop | undefined): this;
+  mt(value: Property.MarginTop | number | undefined): this;
   /**
    * Sets or clears the `margin-right` style of the element.
    * Accepts any valid CSS value (e.g., "10px", "auto").
@@ -236,7 +335,7 @@ declare abstract class BaseStyle {
    * @param value - The right margin value to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  mr(value: Property.MarginRight | undefined): this;
+  mr(value: Property.MarginRight | number | undefined): this;
   /**
    * Sets or clears the `margin-bottom` style of the element.
    * Accepts any valid CSS value (e.g., "10px", "auto").
@@ -245,7 +344,7 @@ declare abstract class BaseStyle {
    * @param value - The bottom margin value to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  mb(value: Property.MarginBottom | undefined): this;
+  mb(value: Property.MarginBottom | number | undefined): this;
   /**
    * Sets or clears the `margin-left` style of the element.
    * Accepts any valid CSS value (e.g., "10px", "auto").
@@ -254,75 +353,75 @@ declare abstract class BaseStyle {
    * @param value - The left margin value to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  ml(value: Property.MarginLeft | undefined): this;
+  ml(value: Property.MarginLeft | number | undefined): this;
   /**
    * Sets the overall border radius.
    * @param value - The CSS border-radius value (e.g., "8px", "50%").
    * @return This instance for chaining.
    */
-  radius(value: Property.BorderRadius | undefined): this;
+  radius(value: Property.BorderRadius | number | undefined): this;
   /**
    * Sets the top-left corner border radius.
    * @param value - The CSS border-top-left-radius value.
    * @return This instance for chaining.
    */
-  radiusTopLeft(value: Property.BorderTopLeftRadius | undefined): this;
+  radiusTopLeft(value: Property.BorderTopLeftRadius | number | undefined): this;
   /**
    * Sets the top-right corner border radius.
    * @param value - The CSS border-top-right-radius value.
    * @return This instance for chaining.
    */
-  radiusTopRight(value: Property.BorderTopRightRadius | undefined): this;
+  radiusTopRight(value: Property.BorderTopRightRadius | number | undefined): this;
   /**
    * Sets the bottom-left corner border radius.
    * @param value - The CSS border-bottom-left-radius value.
    * @return This instance for chaining.
    */
-  radiusBottomLeft(value: Property.BorderBottomLeftRadius | undefined): this;
+  radiusBottomLeft(value: Property.BorderBottomLeftRadius | number | undefined): this;
   /**
    * Sets the bottom-right corner border radius.
    * @param value - The CSS border-bottom-right-radius value.
    * @return This instance for chaining.
    */
-  radiusBottomRight(value: Property.BorderBottomRightRadius | undefined): this;
+  radiusBottomRight(value: Property.BorderBottomRightRadius | number | 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 instance for chaining.
    */
-  radiusTop(value: Property.BorderTopLeftRadius | undefined): this;
+  radiusTop(value: Property.BorderTopLeftRadius | number | 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 instance for chaining.
    */
-  radiusBottom(value: Property.BorderBottomLeftRadius | undefined): this;
+  radiusBottom(value: Property.BorderBottomLeftRadius | number | 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 instance for chaining.
    */
-  radiusLeft(value: Property.BorderTopLeftRadius | undefined): this;
+  radiusLeft(value: Property.BorderTopLeftRadius | number | 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 instance for chaining.
    */
-  radiusRight(value: Property.BorderTopRightRadius | undefined): this;
+  radiusRight(value: Property.BorderTopRightRadius | number | 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 instance for chaining.
    */
-  radiusX(value: Property.BorderRadius | undefined): this;
+  radiusX(value: Property.BorderRadius | number | 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 instance for chaining.
    */
-  radiusY(value: Property.BorderRadius | undefined): this;
+  radiusY(value: Property.BorderRadius | number | undefined): this;
   /**
    * Sets the `display` style of the element.
    * Common values include "block", "inline", "flex", "grid", or "none".
@@ -382,36 +481,212 @@ declare abstract class BaseStyle {
    * @return This instance for chaining.
    */
   h(value: Property.Height | number | undefined): this;
+  /**
+   * Sets or clears the `min-width` style of the element.
+   * Accepts CSS width values (e.g., "100px", "50%") or numeric pixel values.
+   * Passing `undefined` removes the min-width style.
+   *
+   * @param value - The minimum width value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  minW(value: Property.MinWidth | number | undefined): this;
+  /**
+   * Sets or clears the `max-width` style of the element.
+   * Accepts CSS width values (e.g., "100px", "100%") or numeric pixel values.
+   * Passing `undefined` removes the max-width style.
+   *
+   * @param value - The maximum width value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  maxW(value: Property.MaxWidth | number | undefined): this;
+  /**
+   * Sets or clears the `min-height` style of the element.
+   * Accepts CSS height values (e.g., "100px", "50vh") or numeric pixel values.
+   * Passing `undefined` removes the min-height style.
+   *
+   * @param value - The minimum height value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  minH(value: Property.MinHeight | number | undefined): this;
+  /**
+   * Sets or clears the `max-height` style of the element.
+   * Accepts CSS height values (e.g., "100px", "100%") or numeric pixel values.
+   * Passing `undefined` removes the max-height style.
+   *
+   * @param value - The maximum height value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  maxH(value: Property.MaxHeight | number | undefined): this;
   /**
    * Sets the full border style.
    * @param value - The CSS border value (e.g., "1px solid #ccc").
    * @return This instance for chaining.
    */
   b(value: Property.Border | undefined): this;
+  /**
+   * Sets the `border-width` of the element.
+   * Controls the thickness of the border. Accepts any valid CSS length (e.g., "1px", "0.2em") or a number (interpreted as pixels).
+   * Passing `undefined` removes the border width.
+   *
+   * @param value - The border width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bWidth(value: Property.BorderWidth | number | undefined): this;
+  /**
+   * Sets the `border-style` of the element.
+   * Controls the visual style of the border (e.g., solid, dashed, dotted, double).
+   * Accepts any valid CSS border-style value, or `undefined` to remove the style.
+   *
+   * @param value - The border style to apply (e.g., "solid", "dashed", "none"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bStyle(value: Property.BorderStyle | undefined): this;
+  /**
+   * Sets the `border-color` of the element.
+   * Controls the color of the element’s border.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the border color.
+   *
+   * @param value - The border color to apply (e.g., "#000", "rgba(0,0,0,0.2)", "var(--border-color)"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bColor(value: Property.BorderColor | undefined): this;
   /**
    * Sets the top border style.
    * @param value - The CSS border-top value.
    * @return This instance for chaining.
    */
   bt(value: Property.BorderTop | undefined): this;
+  /**
+   * Sets the `border-top-width` of the element.
+   * Controls the thickness of the top border. Accepts any valid CSS length or a number (interpreted as pixels).
+   * Passing `undefined` removes the top border width.
+   *
+   * @param value - The top border width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  btWidth(value: Property.BorderTopWidth | number | undefined): this;
+  /**
+   * Sets the `border-top-style` of the element.
+   * Controls the visual style of the top border (e.g., solid, dashed, dotted).
+   * Passing `undefined` removes the top border style.
+   *
+   * @param value - The top border style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  btStyle(value: Property.BorderTopStyle | undefined): this;
+  /**
+   * Sets the `border-top-color` of the element.
+   * Controls the color of the top border.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the top border color.
+   *
+   * @param value - The top border color to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  btColor(value: Property.BorderTopColor | undefined): this;
   /**
    * Sets the right border style.
    * @param value - The CSS border-right value.
    * @return This instance for chaining.
    */
   br(value: Property.BorderRight | undefined): this;
+  /**
+   * Sets the `border-right-width` of the element.
+   * Controls the thickness of the right border. Accepts any valid CSS length or a number (interpreted as pixels).
+   * Passing `undefined` removes the right border width.
+   *
+   * @param value - The right border width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  brWidth(value: Property.BorderRightWidth | number | undefined): this;
+  /**
+   * Sets the `border-right-style` of the element.
+   * Controls the visual style of the right border (e.g., solid, dashed, dotted).
+   * Passing `undefined` removes the right border style.
+   *
+   * @param value - The right border style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  brStyle(value: Property.BorderRightStyle | undefined): this;
+  /**
+   * Sets the `border-right-color` of the element.
+   * Controls the color of the right border.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the right border color.
+   *
+   * @param value - The right border color to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  brColor(value: Property.BorderRightColor | undefined): this;
   /**
    * Sets the bottom border style.
    * @param value - The CSS border-bottom value.
    * @return This instance for chaining.
    */
   bb(value: Property.BorderBottom | undefined): this;
+  /**
+   * Sets the `border-bottom-width` of the element.
+   * Controls the thickness of the bottom border. Accepts any valid CSS length or a number (interpreted as pixels).
+   * Passing `undefined` removes the bottom border width.
+   *
+   * @param value - The bottom border width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bbWidth(value: Property.BorderBottomWidth | number | undefined): this;
+  /**
+   * Sets the `border-bottom-style` of the element.
+   * Controls the visual style of the bottom border (e.g., solid, dashed, dotted).
+   * Passing `undefined` removes the bottom border style.
+   *
+   * @param value - The bottom border style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bbStyle(value: Property.BorderBottomStyle | undefined): this;
+  /**
+   * Sets the `border-bottom-color` of the element.
+   * Controls the color of the bottom border.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the bottom border color.
+   *
+   * @param value - The bottom border color to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bbColor(value: Property.BorderBottomColor | undefined): this;
   /**
    * Sets the left border style.
    * @param value - The CSS border-left value.
    * @return This instance for chaining.
    */
   bl(value: Property.BorderLeft | undefined): this;
+  /**
+   * Sets the `border-left-width` of the element.
+   * Controls the thickness of the left border. Accepts any valid CSS length or a number (interpreted as pixels).
+   * Passing `undefined` removes the left border width.
+   *
+   * @param value - The left border width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  blWidth(value: Property.BorderLeftWidth | number | undefined): this;
+  /**
+   * Sets the `border-left-style` of the element.
+   * Controls the visual style of the left border (e.g., solid, dashed, dotted).
+   * Passing `undefined` removes the left border style.
+   *
+   * @param value - The left border style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  blStyle(value: Property.BorderLeftStyle | undefined): this;
+  /**
+   * Sets the `border-left-color` of the element.
+   * Controls the color of the left border.
+   * Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the left border color.
+   *
+   * @param value - The left border color to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  blColor(value: Property.BorderLeftColor | undefined): this;
   /**
    * Sets the left and right border styles.
    * @param value - The CSS border value to apply to both left and right sides.
@@ -534,25 +809,25 @@ declare abstract class BaseStyle {
    * @param value - The top offset value (e.g., "10px", "50%").
    * @return This instance for chaining.
    */
-  posTop(value: Property.Top | number | undefined): this;
+  top(value: Property.Top | number | undefined): this;
   /**
    * Sets the CSS `bottom` offset.
    * @param value - The bottom offset value (e.g., "0", "2rem").
    * @return This instance for chaining.
    */
-  posBottom(value: Property.Bottom | number | undefined): this;
+  bottom(value: Property.Bottom | number | undefined): this;
   /**
    * Sets the CSS `left` offset.
    * @param value - The left offset value (e.g., "5px", "auto").
    * @return This instance for chaining.
    */
-  posLeft(value: Property.Left | number | undefined): this;
+  left(value: Property.Left | number | undefined): this;
   /**
    * Sets the CSS `right` offset.
    * @param value - The right offset value (e.g., "1em", "0").
    * @return This instance for chaining.
    */
-  posRight(value: Property.Right | number | undefined): this;
+  right(value: Property.Right | number | undefined): this;
   /**
    * Sets the `cursor` style of the element.
    * Controls the mouse cursor appearance when hovering over the element.
@@ -675,6 +950,215 @@ declare abstract class BaseStyle {
    * @return This instance for chaining.
    */
   opacity(value: Property.Opacity | undefined): this;
+  /**
+   * Sets the `transform` style of the element.
+   * Applies visual transformations such as translation, rotation, scaling, or skewing.
+   * Accepts any valid CSS transform string (e.g., `"translateX(10px)"`, `"scale(1.2)"`), or `undefined` to remove it.
+   *
+   * @param value - The transform string to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  transform(value: Property.Transform | undefined): this;
+  /**
+   * Sets the `transform` style to a `translate(x, y)` value.
+   * Accepts either pixel numbers or full CSS unit strings (e.g., `"10px"`, `"50%"`, `"2em"`).
+   * Automatically appends `"px"` to numeric values.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param x - Horizontal offset as a number (pixels) or CSS string.
+   * @param y - Vertical offset as a number (pixels) or CSS string.
+   * @return This instance for chaining.
+   */
+  translate(x: string | number, y: string | number): this;
+  /**
+   * Sets the `transform` style to a `translateX(x)` value.
+   * Moves the element horizontally using pixel or CSS units.
+   * Accepts either a number (pixels) or a full CSS unit string (e.g., `"50%"`, `"2em"`).
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param x - Horizontal offset as a number or CSS string.
+   * @return This instance for chaining.
+   */
+  translateX(x: string | number): this;
+  /**
+   * Sets the `transform` style to a `translateY(y)` value.
+   * Moves the element vertically using pixel or CSS units.
+   * Accepts either a number (pixels) or a full CSS unit string (e.g., `"50%"`, `"2em"`).
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param y - Vertical offset as a number or CSS string.
+   * @return This instance for chaining.
+   */
+  translateY(y: string | number): this;
+  /**
+   * Sets the `transform` style to a `scale(x, y)` value.
+   * Scales the element along the X and Y axes.
+   * Accepts either numeric scale factors (e.g., `1.2`) or full CSS unit strings (e.g., `"1.5"`).
+   * Automatically converts numeric values to string format.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param x - Horizontal scale factor as a number or string.
+   * @param y - Vertical scale factor as a number or string.
+   * @return This instance for chaining.
+   */
+  scale(x: string | number, y: string | number): this;
+  /**
+   * Sets the `transform` style to a `scaleX(x)` value.
+   * Scales the element horizontally. Accepts numeric scale factors (e.g., `1.2`) or string values (e.g., `"1.5"`).
+   * Automatically converts numeric values to string format.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param x - Horizontal scale factor as a number or string.
+   * @return This instance for chaining.
+   */
+  scaleX(x: string | number): this;
+  /**
+   * Sets the `transform` style to a `scaleY(y)` value.
+   * Scales the element vertically. Accepts numeric scale factors (e.g., `0.8`) or string values (e.g., `"1.25"`).
+   * Automatically converts numeric values to string format.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param y - Vertical scale factor as a number or string.
+   * @return This instance for chaining.
+   */
+  scaleY(y: string | number): this;
+  /**
+   * Sets the `transform` style to a `rotate(angle)` value.
+   * Rotates the element clockwise by the specified angle.
+   * Accepts either a number (interpreted as degrees) or a full CSS angle string (e.g., `"45deg"`, `"0.5turn"`).
+   * Automatically appends `"deg"` to numeric values.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param angle - Rotation angle as a number (degrees) or CSS string.
+   * @return This instance for chaining.
+   */
+  rotate(angle: string | number): this;
+  /**
+   * Sets the `transform` style to a `rotateX(angle)` value.
+   * Rotates the element around the X-axis in 3D space.
+   * Accepts either a number (degrees) or a full CSS angle string (e.g., `"45deg"`, `"1rad"`).
+   * Automatically appends `"deg"` to numeric values.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param angle - Rotation angle as a number or CSS string.
+   * @return This instance for chaining.
+   */
+  rotateX(angle: string | number): this;
+  /**
+   * Sets the `transform` style to a `rotateY(angle)` value.
+   * Rotates the element around the Y-axis in 3D space.
+   * Accepts either a number (degrees) or a full CSS angle string (e.g., `"90deg"`, `"0.5turn"`).
+   * Automatically appends `"deg"` to numeric values.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param angle - Rotation angle as a number or CSS string.
+   * @return This instance for chaining.
+   */
+  rotateY(angle: string | number): this;
+  /**
+   * Sets the `transform` style to a `rotateZ(angle)` value.
+   * Rotates the element around the Z-axis in 3D space (same as 2D rotation).
+   * Accepts either a number (degrees) or a full CSS angle string (e.g., `"30deg"`, `"1rad"`).
+   * Automatically appends `"deg"` to numeric values.
+   * Overwrites any existing `transform` style — use with care if combining multiple transforms.
+   *
+   * @param angle - Rotation angle as a number or CSS string.
+   * @return This instance for chaining.
+   */
+  rotateZ(angle: string | number): this;
+  /**
+   * Sets the `transform-origin` style of the element.
+   * Defines the pivot point for CSS transforms such as rotation, scaling, or skewing.
+   * Accepts any valid CSS origin string (e.g., `"center"`, `"top left"`, `"50% 50%"`), or `undefined` to remove it.
+   *
+   * @param value - The transform origin to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  transformOrigin(value: Property.TransformOrigin | undefined): this;
+  /**
+   * Sets the `transition` style of the element.
+   * Defines how style changes are animated over time, including duration, timing function, and delay.
+   * Accepts any valid CSS transition string (e.g., `"opacity 0.3s ease"`, `"all 200ms linear"`), or `undefined` to remove it.
+   *
+   * @param value - The transition string to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  transition(value: Property.Transition | undefined): this;
+  /**
+   * Sets the `will-change` style of the element.
+   * Provides a hint to the browser about which properties are likely to change,
+   * allowing it to optimize rendering and performance ahead of time.
+   * Accepts any valid CSS property name or list (e.g., `"transform"`, `"opacity, left"`), or `undefined` to remove it.
+   *
+   * @param value - The will-change hint to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  willChange(value: Property.WillChange | undefined): this;
+  /**
+   * Sets the `box-shadow` style of the element.
+   * Applies shadow effects around the element's frame, supporting offsets, blur radius, spread, and color.
+   * Accepts any valid CSS box-shadow string (e.g., `"0 2px 4px rgba(0,0,0,0.1)"`), or `undefined` to remove it.
+   *
+   * @param value - The box-shadow value to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  boxShadow(value: Property.BoxShadow | undefined): this;
+  /**
+   * Sets the `box-sizing` style of the element.
+   * Controls how the element’s total width and height are calculated — either including or excluding padding and border.
+   * Accepts any valid CSS box-sizing value (e.g., `"border-box"`, `"content-box"`), or `undefined` to remove it.
+   *
+   * @param value - The box-sizing value to apply, or `undefined` to remove the style.
+   * @return This instance for chaining.
+   */
+  boxSizing(value: Property.BoxSizing | undefined): this;
+  /**
+   * Sets the `background` shorthand style of the element.
+   * Accepts any valid CSS background value, including colors, gradients, images, positions, and repeat modes.
+   * Useful for applying complex background styles in a single declaration.
+   * Passing `undefined` removes the background style.
+   *
+   * @param value - The background value to apply (e.g., "#fff", "linear-gradient(...)", "url(...)", "center/cover"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  background(value: Property.Background | undefined): this;
+  /**
+   * Sets the `outline` shorthand property of the element.
+   * Controls the outline's width, style, and color in a single call.
+   * Unlike borders, outlines do not affect layout and can extend beyond element bounds.
+   * Passing `undefined` removes the outline.
+   *
+   * @param value - A valid CSS outline shorthand (e.g. "2px dashed red"), or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  outline(value: Property.Outline | undefined): this;
+  /**
+   * Sets the `outline-width` of the element.
+   * Controls the thickness of the outline. Accepts any valid CSS length or a number (interpreted as pixels).
+   * Passing `undefined` removes the outline width.
+   *
+   * @param value - The outline width to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  outlineWidth(value: Property.OutlineWidth | number | undefined): this;
+  /**
+   * Sets the `outline-style` of the element.
+   * Controls the visual style of the outline (e.g., solid, dashed, dotted).
+   * Passing `undefined` removes the outline style.
+   *
+   * @param value - The outline style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  outlineStyle(value: Property.OutlineStyle | undefined): this;
+  /**
+   * Sets the `outline-color` of the element.
+   * Controls the color of the outline. Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
+   * Passing `undefined` removes the outline color.
+   *
+   * @param value - The outline color to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  outlineColor(value: Property.OutlineColor | undefined): this;
   /**
    * Applies CSS styles to truncate overflowing text with an ellipsis.
    * Ensures the text stays on a single line and hides overflow.
@@ -689,6 +1173,16 @@ declare abstract class BaseStyle {
    * @return This instance for chaining.
    */
   overflowEllipsis(): this;
+  /**
+   * Sets the `background` style to a linear gradient.
+   * Accepts a direction and one or more color stops to construct a valid CSS `linear-gradient(...)` string.
+   * Automatically joins color stops and applies the full gradient string to `background`.
+   *
+   * @param direction - The gradient direction (e.g., `"to right"`, `"45deg"`).
+   * @param stops - An array of color stops (e.g., `"#0ea5e9"`, `"#3b82f6 50%"`, `"rgba(0,0,0,0.2)"`).
+   * @return This instance for chaining.
+   */
+  linearGradient(direction: string, ...stops: string[]): this;
   /**
    * Applies a batch of CSS style properties to the element.
    * Delegates each property to `setStyleProp`, which handles value normalization and kebab-case conversion.
@@ -704,12 +1198,42 @@ declare abstract class BaseStyle {
 }
 //#endregion
 //#region src/BaseDom.d.ts
+declare const _isBaseDom: unique symbol;
 /**
  * Base class for DOM-backed elements with style and event utilities.
  * Supports both HTML and SVG elements via generic parameter `E`.
  */
 declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseStyle {
+  protected readonly [_isBaseDom] = true;
   abstract dom: E;
+  /**
+   * Returns the `clientWidth` of the element.
+   * For HTML elements, this is the inner width excluding borders and scrollbars.
+   * For SVG elements, this may return `0` unless the element has layout box dimensions.
+   */
+  getClientWidth(): number;
+  /**
+   * Returns the `clientHeight` of the element.
+   * For HTML elements, this is the inner height excluding borders and scrollbars.
+   * For SVG elements, this may return `0` unless the element has layout box dimensions.
+   */
+  getClientHeight(): number;
+  /**
+   * Returns the bounding box of the element using `getBoundingClientRect()`.
+   * Works reliably for both HTML and SVG elements.
+   *
+   * @return A DOMRect object with `width`, `height`, `top`, `left`, etc.
+   */
+  getRect(): DOMRect;
+  /**
+   * Returns the computed styles of this element.
+   * Useful for reading resolved values of inherited, cascaded, or shorthand CSS properties.
+   *
+   * Wraps `window.getComputedStyle()` and returns a `CSSStyleDeclaration` for inspection.
+   *
+   * @return The computed style object for this element.
+   */
+  getComputedStyle(): CSSStyleDeclaration;
   /**
    * 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.
@@ -720,6 +1244,16 @@ declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseS
    * @return This DomElement instance for chaining.
    */
   className(value: string | undefined): this;
+  /**
+   * Toggles a CSS class on the element.
+   * Adds the class if it’s not present, removes it if it is.
+   * Uses `classList.toggle()` for safe DOM-backed mutation.
+   *
+   * @param className - The class name to toggle.
+   * @param force - Optional boolean to force add (`true`) or remove (`false`) the class.
+   * @return This instance for chaining.
+   */
+  toggleClass(className: string, force?: boolean): this;
   /**
    * Adds an event listener to the element.
    * @param type - The event type (e.g., "click", "input", "mouseenter").
@@ -735,8 +1269,9 @@ declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseS
    * @param type - The event type to remove.
    * @param handler - The original handler function.
    * @param options - Optional event listener options.
+   * @return This DomElement instance for chaining.
    */
-  off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
   /**
    * Appends one or more child nodes to the element.
    * Accepts DomElement instances, regular DOM Nodes, strings, or numbers.
@@ -784,9 +1319,27 @@ declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseS
    * @returns This DomElement instance.
    */
   clear(from?: number, to?: number): this;
+  /**
+   * Checks whether this element contains the given target node.
+   * Accepts either a raw DOM node or another `BaseDom` instance.
+   *
+   * Useful for containment checks, event delegation, or visibility logic.
+   *
+   * @param target - A DOM node or `BaseDom` instance to test.
+   * @return `true` if this element contains the target, otherwise `false`.
+   */
+  contains(target: Node | BaseDom<any>): boolean;
   ref(refFn: (el: this) => void): this;
   protected resolveNode(child: DomElementChild): Node;
   protected setStyleProp(name: Autocomplete<keyof CssProperties>, value: string | number | undefined): this;
+  /**
+   * Checks whether a value is a `BaseDom` instance.
+   * Uses a symbol-based identity marker and avoids the `in` operator.
+   *
+   * @param value - The value to check.
+   * @return `true` if the value is a `BaseDom` instance, otherwise `false`.
+   */
+  static isBaseDom(value: unknown): value is BaseDom<HTMLElement | SVGElement>;
 }
 //#endregion
 //#region src/DomElement.d.ts
@@ -1226,13 +1779,14 @@ declare class CssRule extends BaseStyle {
    */
   remove(): void;
   /**
-   * Creates a new CssRule for a pseudo-selector extending this rule’s selector.
-   * For example, `.btn:hover`, `.input:focus`, `.card:active`.
+   * Creates a new `CssRule` by extending this rule’s selector.
+   * Appends the given selector fragment to the current selector.
+   * Useful for pseudo-classes (e.g., `:hover`), combinators (e.g., ` > span`), or attribute filters (e.g., `[data-active]`).
    *
-   * @param pseudo - The pseudo-class to append (e.g., ":hover", ":focus").
-   * @return A new CssRule instance targeting the extended selector.
+   * @param extension - The selector fragment to append (e.g., `:hover`, ` > span`, `[data-active]`).
+   * @return A new `CssRule` instance targeting the extended selector.
    */
-  pseudo(pseudo: `:${string}`): CssRule;
+  extend(extension: string): CssRule;
   /**
    * Creates a `:hover` rule for this selector.
    * @return A new CssRule instance for the `:hover` state.
@@ -1312,8 +1866,9 @@ declare class DomDocument {
    * @param type - The event type to remove.
    * @param handler - The original handler function.
    * @param options - Optional event listener options.
+   * @return This instance for chaining.
    */
-  off<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  off<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
   /**
    * Dispatches a DOM event on the document object.
    *
@@ -1353,8 +1908,9 @@ declare class DomWindow {
    * @param type - The event type to remove.
    * @param handler - The original handler function.
    * @param options - Optional event listener options.
+   * @return This DomElement instance for chaining.
    */
-  off<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+  off<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
   /**
    * Dispatches a DOM event on the window object.
    *
@@ -1386,14 +1942,79 @@ declare class IFrame extends DomElement<"iframe"> {
 declare function $iframe(): IFrame;
 //#endregion
 //#region src/ImageElement.d.ts
+/**
+ * Fluent wrapper for an `<img>` element.
+ * Provides chainable methods for setting image source, dimensions, and alt text.
+ * Inherits style and event utilities from `DomElement` and `BaseDom`.
+ *
+ * Useful for programmatically constructing image elements with ergonomic, declarative syntax.
+ */
 declare class ImageElement extends DomElement<"img"> {
   constructor();
+  /**
+   * Returns the `naturalWidth` of the image.
+   * This is the intrinsic width of the image resource in pixels, unaffected by CSS or layout.
+   * Returns `0` if the image has not loaded or failed to decode.
+   *
+   * @return The natural width in pixels.
+   */
+  getNaturalWidth(): number;
+  /**
+   * Returns the `naturalHeight` of the image.
+   * This is the intrinsic height of the image resource in pixels, unaffected by CSS or layout.
+   * Returns `0` if the image has not loaded or failed to decode.
+   *
+   * @return The natural height in pixels.
+   */
+  getNaturalHeight(): number;
+  /**
+   * Sets the `src` attribute of the `<img>` element.
+   * Defines the image source URL or path to be loaded.
+   *
+   * @param value - The image source (e.g., "/logo.png", "https://example.com/photo.jpg").
+   * @return This instance for chaining.
+   */
   src(value: string): this;
+  /**
+   * Sets the `width` attribute of the `<img>` element in pixels.
+   * This controls the rendered width of the image, independent of its intrinsic size.
+   *
+   * @param value - The width in pixels.
+   * @return This instance for chaining.
+   */
   width(value: number): this;
+  /**
+   * Sets the `height` attribute of the `<img>` element in pixels.
+   * This controls the rendered height of the image, independent of its intrinsic size.
+   *
+   * @param value - The height in pixels.
+   * @return This instance for chaining.
+   */
   height(value: number): this;
+  /**
+   * Sets both the `width` and `height` attributes of the `<img>` element in pixels.
+   * Useful for explicitly sizing the image without relying on CSS.
+   *
+   * @param width - The width in pixels.
+   * @param height - The height in pixels.
+   * @return This instance for chaining.
+   */
   setSize(width: number, height: number): this;
+  /**
+   * Sets the `alt` attribute of the `<img>` element.
+   * Provides alternative text for accessibility and fallback rendering.
+   *
+   * @param value - The alt text (e.g., "User avatar", "Company logo").
+   * @return This instance for chaining.
+   */
   alt(value: string): this;
 }
+/**
+ * Creates a new `ImageElement` instance.
+ * Equivalent to: `new ImageElement()`, but more expressive in fluent DOM construction.
+ *
+ * @return A new `ImageElement` instance.
+ */
 declare function $img(): ImageElement;
 //#endregion
 //#region src/input.d.ts

package/dist/index.js

@@ -1 +1 @@
-var e=class{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)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}opacity(e){return this.setStyleProp(`opacity`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={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},n={WebkitAppearance:1},r=`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(`.`),i={svgA:`a`};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()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}var l=class extends e{className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){this.dom.removeEventListener(e,t,n)}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}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}ref(e){return e(this),this}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),c(e,t)),this)}},u=class extends l{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}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}id(e){return this._dom.id=e??``,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)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),this}};function d(e){return new u(e)}function f(e){let t=document.querySelector(e);return new u(t.tagName.toLowerCase(),t)}var p=class extends u{constructor(){super(`a`)}href(e){return this.dom.href=e,this}};function m(){return new p}var h=class extends u{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function g(){return new h}var _=class extends u{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}};function v(){return new _}var y=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}pseudo(e){return this.sheet.cssRule(`${this.selectorText}${e}`)}hover(){return this.pseudo(`:hover`)}focus(){return this.pseudo(`:focus`)}focusWithin(){return this.pseudo(`:focus-within`)}active(){return this.pseudo(`:active`)}disabled(){return this.pseudo(`:disabled`)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},b=class extends l{get dom(){return document.body}};function x(){return new b}var S=class{on(e,t,n){return document.addEventListener(e,t,n),this}off(e,t,n){document.removeEventListener(e,t,n)}dispatch(e){return document.dispatchEvent(e),this}};function C(){return new S}var w=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){window.removeEventListener(e,t,n)}dispatch(e){return window.dispatchEvent(e),this}};function T(){return new w}var E=class extends u{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=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function D(){return new E}var O=class extends u{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}};function k(){return new O}var A=class extends u{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`)}},j=class extends u{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}},M=class extends u{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}},N=class extends u{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}},P=class extends u{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}};function F(e){switch(e){case`text`:return new P;case`number`:return new M;case`checkbox`:return new A;case`color`:return new j;case`range`:return new N}}var I=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new y(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},L=class extends u{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function R(){return new L}var z=class extends u{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}};function B(){return new z}var V=class extends u{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}};function H(){return new V}var U=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}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new y(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new I(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{d as $,m as $a,x as $body,g as $btn,v as $canvas,C as $document,D as $iframe,k as $img,F as $input,R as $option,B as $progress,f as $query,H as $select,T as $window,p as AnchorElement,l as BaseDom,e as BaseStyle,h as Button,_ as Canvas,y as CssRule,b as DomBody,S as DomDocument,u as DomElement,w as DomWindow,E as IFrame,O as ImageElement,A as InputCheckbox,j as InputColor,M as InputNumber,N as InputRange,P as InputText,I as MediaRule,L as OptionElement,z as ProgressElement,r as SVG_TAGS,V as SelectElement,U as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};
+var e=class{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)}minW(e){return this.setStyleProp(`minWidth`,e)}maxW(e){return this.setStyleProp(`maxWidth`,e)}minH(e){return this.setStyleProp(`minHeight`,e)}maxH(e){return this.setStyleProp(`maxHeight`,e)}b(e){return this.setStyleProp(`border`,e)}bWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderWidth`,t)}bStyle(e){return this.setStyleProp(`borderStyle`,e)}bColor(e){return this.setStyleProp(`borderColor`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}btWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderTopWidth`,t)}btStyle(e){return this.setStyleProp(`borderTopStyle`,e)}btColor(e){return this.setStyleProp(`borderTopColor`,e)}br(e){return this.setStyleProp(`borderRight`,e)}brWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderRightWidth`,t)}brStyle(e){return this.setStyleProp(`borderRightStyle`,e)}brColor(e){return this.setStyleProp(`borderRightColor`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bbWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderBottomWidth`,t)}bbStyle(e){return this.setStyleProp(`borderBottomStyle`,e)}bbColor(e){return this.setStyleProp(`borderBottomColor`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}blWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderLeftWidth`,t)}blStyle(e){return this.setStyleProp(`borderLeftStyle`,e)}blColor(e){return this.setStyleProp(`borderLeftColor`,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)}top(e){return this.setStyleProp(`top`,e)}bottom(e){return this.setStyleProp(`bottom`,e)}left(e){return this.setStyleProp(`left`,e)}right(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)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}opacity(e){return this.setStyleProp(`opacity`,e)}transform(e){return this.setStyleProp(`transform`,e)}translate(e,t){let n=typeof e==`number`?`${e}px`:e,r=typeof t==`number`?`${t}px`:t;return this.setStyleProp(`transform`,`translate(${n}, ${r})`)}translateX(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateX(${t})`)}translateY(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateY(${t})`)}scale(e,t){let n=typeof e==`number`?e.toString():e,r=typeof t==`number`?t.toString():t;return this.setStyleProp(`transform`,`scale(${n}, ${r})`)}scaleX(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleX(${t})`)}scaleY(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleY(${t})`)}rotate(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotate(${t})`)}rotateX(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateX(${t})`)}rotateY(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateY(${t})`)}rotateZ(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateZ(${t})`)}transformOrigin(e){return this.setStyleProp(`transformOrigin`,e)}transition(e){return this.setStyleProp(`transition`,e)}willChange(e){return this.setStyleProp(`willChange`,e)}boxShadow(e){return this.setStyleProp(`boxShadow`,e)}boxSizing(e){return this.setStyleProp(`boxSizing`,e)}background(e){return this.setStyleProp(`background`,e)}outline(e){return this.setStyleProp(`outline`,e)}outlineWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`outlineWidth`,t)}outlineStyle(e){return this.setStyleProp(`outlineStyle`,e)}outlineColor(e){return this.setStyleProp(`outlineColor`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}linearGradient(e,...t){let n=`linear-gradient(${e}, ${t.join(`, `)})`;return this.setStyleProp(`background`,n)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={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},n={WebkitAppearance:1},r=`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(`.`),i={svgA:`a`};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()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}const l=Symbol(`BaseDomIdentity`);var u=class t extends e{[l]=!0;getClientWidth(){return this.dom.clientWidth??0}getClientHeight(){return this.dom.clientHeight??0}getRect(){return this.dom.getBoundingClientRect()}getComputedStyle(){return window.getComputedStyle(this.dom)}className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}toggleClass(e,t){return this.dom.classList.toggle(e,t),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){return this.dom.removeEventListener(e,t,n),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}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}contains(e){let n=e instanceof t?e.dom:e;return this.dom.contains(n)}ref(e){return e(this),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):t.isBaseDom(e)?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),c(e,t)),this)}static isBaseDom(e){return typeof e!=`object`||!e?!1:Object.getOwnPropertySymbols(e).includes(l)}},d=class extends u{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}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}id(e){return this._dom.id=e??``,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)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),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}};function h(){return new m}var g=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function _(){return new g}var v=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}};function y(){return new v}var b=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}extend(e){return this.sheet.cssRule(`${this.selectorText}${e}`)}hover(){return this.extend(`:hover`)}focus(){return this.extend(`:focus`)}focusWithin(){return this.extend(`:focus-within`)}active(){return this.extend(`:active`)}disabled(){return this.extend(`:disabled`)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},x=class extends u{get dom(){return document.body}};function S(){return new x}var C=class{on(e,t,n){return document.addEventListener(e,t,n),this}off(e,t,n){return document.removeEventListener(e,t,n),this}dispatch(e){return document.dispatchEvent(e),this}};function w(){return new C}var T=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){return window.removeEventListener(e,t,n),this}dispatch(e){return window.dispatchEvent(e),this}};function E(){return new T}var D=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=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function O(){return new D}var k=class extends d{constructor(){super(`img`)}getNaturalWidth(){return this.dom.naturalWidth??0}getNaturalHeight(){return this.dom.naturalHeight??0}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.width(e).height(t)}alt(e){return this.dom.alt=e,this}};function A(){return new k}var j=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`)}},M=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}},N=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}},P=class extends d{constructor(){super(`input`),this.dom.type=`range`}getValue(){return Number(this.dom.value)}getMin(){return Number(this.dom.min)}getMax(){return Number(this.dom.max)}getStep(){return Number(this.dom.step)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}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}bounds(e,t,n){return this.min(e).max(t).step(n)}},F=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}};function I(e){switch(e){case`text`:return new F;case`number`:return new N;case`checkbox`:return new j;case`color`:return new M;case`range`:return new P}}var L=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new b(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},R=class extends d{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function z(){return new R}var B=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}};function V(){return new B}var H=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}};function U(){return new H}var W=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}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new b(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new L(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{f as $,h as $a,S as $body,_ as $btn,y as $canvas,w as $document,O as $iframe,A as $img,I as $input,z as $option,V as $progress,p as $query,U as $select,E as $window,m as AnchorElement,u as BaseDom,e as BaseStyle,g as Button,v as Canvas,b as CssRule,x as DomBody,C as DomDocument,d as DomElement,T as DomWindow,D as IFrame,k as ImageElement,j as InputCheckbox,M as InputColor,N as InputNumber,P as InputRange,F as InputText,L as MediaRule,R as OptionElement,B as ProgressElement,r as SVG_TAGS,H as SelectElement,W as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};

package/package.json

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