@neptune3d/dom 0.0.11 → 0.0.13

package/dist/index.d.ts

@@ -804,6 +804,16 @@ declare abstract class BaseStyle {
    * @return This instance for chaining.
    */
   bbr(value: Property.BorderBottom | Property.BorderRight | undefined): this;
+  /**
+   * Sets the `border-collapse` style of the element.
+   * Controls whether table borders are collapsed or separated.
+   * Accepts values like `"collapse"`, `"separate"`, or CSS variables.
+   * Passing `undefined` removes the border-collapse style.
+   *
+   * @param value - The border-collapse behavior to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  bCollapse(value: Property.BorderCollapse | undefined): this;
   /**
    * Sets the `overflow` style of the element.
    * Controls how content that exceeds the element's bounds is handled on both axes.
@@ -1249,7 +1259,7 @@ declare abstract class BaseStyle {
    * @param value - The offset distance to apply, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  outlineOffset(value: Property.OutlineOffset | undefined): this;
+  outlineOffset(value: Property.OutlineOffset | number | undefined): this;
   /**
    * Sets the `line-height` of the element.
    * Controls vertical spacing between lines of text. Accepts unitless numbers, length units, percentages, or CSS variables.
@@ -1288,6 +1298,36 @@ declare abstract class BaseStyle {
    * @return This instance for chaining.
    */
   resize(value: Property.Resize | undefined): this;
+  /**
+   * Sets the CSS `fill` style of the element.
+   * Controls the paint used to fill the interior of SVG shapes or text.
+   * Accepts values like color strings (`"red"`, `"#000"`, `"currentColor"`), gradients, or CSS variables.
+   * Passing `undefined` removes the fill style.
+   *
+   * @param value - The fill style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  fill(value: Property.Fill | undefined): this;
+  /**
+   * Sets the CSS `stroke` style of the element.
+   * Controls the color used to outline SVG shapes or text.
+   * Accepts values like color strings (`"black"`, `"none"`, `"currentColor"`), gradients, or CSS variables.
+   * Passing `undefined` removes the stroke style.
+   *
+   * @param value - The stroke style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  stroke(value: Property.Stroke | undefined): this;
+  /**
+   * Sets the CSS `stroke-width` style of the element.
+   * Controls the thickness of the stroke used to outline SVG shapes or text.
+   * Accepts values like `"1px"`, `"0.5em"`, numeric values, or CSS variables.
+   * Passing `undefined` removes the stroke-width style.
+   *
+   * @param value - The stroke-width style to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  strokeWidth(value: Property.StrokeWidth | number | undefined): this;
   /**
    * Applies CSS styles to truncate overflowing text with an ellipsis.
    * Ensures the text stays on a single line and hides overflow.
@@ -1503,6 +1543,15 @@ declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseS
    * @return This DomElement instance for chaining.
    */
   className(value: string | undefined): this;
+  /**
+   * Sets the `tabindex` attribute on the element.
+   * Controls whether the element can receive keyboard focus and its order in the tab sequence.
+   * Pass `undefined` to remove the attribute.
+   *
+   * @param value - The tabindex value to apply, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  tabIndex(value: number | undefined): this;
   /**
    * Toggles a CSS class on the element.
    * Adds the class if it’s not present, removes it if it is.
@@ -1710,6 +1759,27 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * @return This DomElement instance for chaining.
    */
   enable(): this;
+  /**
+   * Focuses this DOM element, if it supports focus.
+   * For non-focusable elements (like SVG or body), ensure `tabindex` is set if needed.
+   *
+   * @return This instance for chaining.
+   */
+  focus(): this;
+  /**
+   * Removes focus from this DOM element, if it supports blur.
+   * For non-focusable elements, this is a no-op.
+   *
+   * @return This instance for chaining.
+   */
+  blur(): this;
+  /**
+   * Programmatically clicks this DOM element, if it supports click.
+   * Useful for triggering buttons, links, or custom handlers.
+   *
+   * @return This instance for chaining.
+   */
+  click(): this;
   /**
    * Sets or removes the `popover` attribute on the element.
    * Applies to HTML elements that support the Popover API (e.g., `<div popover>`).
@@ -1751,9 +1821,13 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * Shows the popover on this element.
    * Requires the element to have a `popover="manual"` attribute and be in the DOM.
    *
+   * Optionally accepts a `source` HTMLElement that acts as the invoker,
+   * improving accessibility and enabling anchor positioning.
+   *
+   * @param source - An optional HTMLElement to act as the popover's invoker.
    * @return This DomElement instance for chaining.
    */
-  showPopover(): this;
+  showPopover(source?: HTMLElement): this;
   /**
    * Hides the popover on this element.
    * Requires the element to have a `popover="manual"` attribute and be in the DOM.
@@ -1761,6 +1835,15 @@ declare class DomElement<Tag extends keyof DomElementTagNameMap = keyof DomEleme
    * @return This DomElement instance for chaining.
    */
   hidePopover(): this;
+  /**
+   * Toggles the popover visibility on this element.
+   * Requires the element to have a `popover="manual"` attribute and be in the DOM.
+   *
+   * @param force - If true, forces the popover to show; if false, forces it to hide; if undefined, toggles.
+   * @param source - An optional HTMLElement that acts as the invoker, improving accessibility and anchor positioning.
+   * @return This DomElement instance for chaining.
+   */
+  togglePopover(force?: boolean, source?: HTMLElement): this;
 }
 /**
  * Creates a new DomElement instance for the given tag name.
@@ -1800,11 +1883,15 @@ declare function $a(): AnchorElement;
  */
 declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends DomElement<T$1> {
   /**
-   * Sets the `fill` color.
-   * @param color - Fill color (e.g. "red", "#ff0000", "none").
+   * Sets the `fill` attribute on the SVG element.
+   * Controls the paint used to fill the interior of shapes.
+   * Accepts values like color strings (`"red"`, `"#000"`, `"currentColor"`), gradients, or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The fill value to apply as an SVG attribute, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  svgFill(color: string): this;
+  fill(value: string | undefined): this;
   /**
    * Sets the `fill-rule` property.
    * Determines how the interior of a shape is determined when paths intersect.
@@ -1814,17 +1901,36 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    */
   fillRule(rule: "nonzero" | "evenodd"): this;
   /**
-   * Sets the `stroke` color.
-   * @param color - Stroke color (e.g. "black", "#000", "none").
+   * Sets the `fill-opacity` attribute on the SVG element.
+   * Controls the transparency of the fill independently from the overall element opacity.
+   * Accepts values from `0` (fully transparent) to `1` (fully opaque), or CSS variables.
+   * Useful for layering visual effects or emphasizing fill contrast without affecting stroke or children.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The fill opacity value to apply as an SVG attribute, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  svgStroke(color: string): this;
+  fillOpacity(value: string | number | undefined): this;
   /**
-   * Sets the `stroke-width` value.
-   * @param width - Stroke width in pixels or units.
+   * Sets the `stroke` attribute on the SVG element.
+   * Controls the color used to outline shapes.
+   * Accepts values like color strings (`"black"`, `"none"`, `"currentColor"`), gradients, or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The stroke value to apply as an SVG attribute, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  svgStrokeWidth(width: number | string): this;
+  stroke(value: string | undefined): this;
+  /**
+   * Sets the `stroke-width` attribute on the SVG element.
+   * Controls the thickness of the stroke used to outline shapes.
+   * Accepts values like `"1"`, `"0.5"`, `"2px"`, or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The stroke-width value to apply as an SVG attribute, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  strokeWidth(value: string | number | undefined): this;
   /**
    * Sets the `stroke-linejoin` style.
    * Controls how two connected segments in a stroke join.
@@ -1850,19 +1956,56 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    */
   strokeMiterlimit(value: number): this;
   /**
-   * Sets the `opacity` value.
-   * @param value - Opacity from 0 to 1.
+   * Sets the `stroke-opacity` attribute on the SVG element.
+   * Controls the transparency of the stroke independently from the overall element opacity.
+   * Accepts values from `0` (fully transparent) to `1` (fully opaque), or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The stroke opacity value to apply as an SVG attribute, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  svgOpacity(value: number): this;
+  strokeOpacity(value: string | number | undefined): this;
   /**
-   * Sets the `transform` attribute with a raw SVG transform string.
-   * Accepts any valid transform function: translate, rotate, scale, skewX, skewY, matrix.
+   * Sets the `stroke-dasharray` attribute on the SVG element.
+   * Defines the pattern of dashes and gaps used to render the stroke.
+   * Accepts a space- or comma-separated list of lengths (e.g. `"5 2"` or `"5,2"`), numeric values, or CSS variables.
+   * Passing `undefined` removes the attribute.
    *
-   * @param value - SVG transform string (e.g. "translate(10, 20) rotate(45)").
+   * @param value - The dash pattern to apply as an SVG attribute, or `undefined` to remove it.
    * @return This instance for chaining.
    */
-  svgTransform(value: string): this;
+  strokeDasharray(value: string | number | undefined): this;
+  /**
+   * Sets the `stroke-dashoffset` attribute on the SVG element.
+   * Specifies how far into the dash pattern the stroke should start.
+   * Useful for animating dashed strokes or offsetting patterns.
+   * Accepts numeric values, length strings (e.g. `"4px"`), or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The dash offset to apply as an SVG attribute, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  strokeDashoffset(value: string | number | undefined): this;
+  /**
+   * Sets the `opacity` attribute on the SVG element.
+   * Controls the overall transparency of the element.
+   * Accepts values from `0` (fully transparent) to `1` (fully opaque), or CSS variables.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The opacity value to apply as an SVG attribute, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  opacity(value: string | number | undefined): this;
+  /**
+   * Sets the `transform` attribute on the SVG element.
+   * Controls geometric transformations like translation, rotation, scaling, and skewing.
+   * Accepts values like `"translate(10, 20)"`, `"rotate(45)"`, `"scale(2)"`, or composed transforms.
+   * Passing `undefined` removes the attribute.
+   *
+   * @param value - The transform string to apply as an SVG attribute, or `undefined` to remove it.
+   * @return This instance for chaining.
+   */
+  transform(value: string | undefined): this;
   /**
    * Applies a `translate(x, y)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1871,7 +2014,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param y - Vertical translation in user units.
    * @return This instance for chaining.
    */
-  svgTranslate(x: number, y: number): this;
+  translate(x: number, y: number): this;
   /**
    * Applies a horizontal `translate(x, 0)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1879,7 +2022,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param x - Horizontal translation in user units.
    * @return This instance for chaining.
    */
-  svgTranslateX(x: number): this;
+  translateX(x: number): this;
   /**
    * Applies a vertical `translate(0, y)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1887,7 +2030,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param y - Vertical translation in user units.
    * @return This instance for chaining.
    */
-  svgTranslateY(y: number): this;
+  translateY(y: number): this;
   /**
    * Applies a `rotate(angle)` or `rotate(angle, cx, cy)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1897,7 +2040,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param cy - Optional y coordinate of the rotation center.
    * @return This instance for chaining.
    */
-  svgRotate(angle: number, cx?: number, cy?: number): this;
+  rotate(angle: number, cx?: number, cy?: number): this;
   /**
    * Applies a uniform `scale(s)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1905,7 +2048,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param s - Uniform scale factor for both x and y axes.
    * @return This instance for chaining.
    */
-  svgScale(s: number): this;
+  scale(s: number): this;
   /**
    * Applies a horizontal `scale(sx, 1)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1913,7 +2056,7 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param sx - Horizontal scale factor.
    * @return This instance for chaining.
    */
-  svgScaleX(sx: number): this;
+  scaleX(sx: number): this;
   /**
    * Applies a vertical `scale(1, sy)` transform to the element.
    * Sets the `transform` attribute, replacing any existing value.
@@ -1921,7 +2064,36 @@ declare class BaseSvgElement<T$1 extends keyof SvgElementTagNameMap> extends Dom
    * @param sy - Vertical scale factor.
    * @return This instance for chaining.
    */
-  svgScaleY(sy: number): this;
+  scaleY(sy: number): this;
+  /**
+   * Applies a horizontal skew transform to the SVG element.
+   * Sets the `transform` attribute to `skewX(angle)`, replacing any existing transform.
+   * Skewing distorts the element along the X-axis by the specified angle.
+   *
+   * @param angle - Skew angle in degrees. Positive values skew right, negative values skew left.
+   * @return This instance for chaining.
+   */
+  skewX(angle: number): this;
+  /**
+   * Applies a vertical skew transform to the SVG element.
+   * Sets the `transform` attribute to `skewY(angle)`, replacing any existing transform.
+   * Skewing distorts the element along the Y-axis by the specified angle.
+   *
+   * @param angle - Skew angle in degrees. Positive values skew downward, negative values skew upward.
+   * @return This instance for chaining.
+   */
+  skewY(angle: number): this;
+  /**
+   * Sets the `vector-effect` attribute on the SVG element.
+   * Controls how stroke rendering behaves under geometric transformations.
+   * Commonly used to preserve stroke width when scaling with `transform`.
+   *
+   * @param value - One of:
+   *   - `"none"`: Stroke scales with the element.
+   *   - `"non-scaling-stroke"`: Stroke width remains constant regardless of scale.
+   * @return This instance for chaining.
+   */
+  vectorEffect(value: "none" | "non-scaling-stroke"): this;
 }
 //#endregion
 //#region src/Button.d.ts
@@ -2781,192 +2953,285 @@ declare class OptionElement extends DomElement<"option"> {
 }
 declare function $option(): OptionElement;
 //#endregion
-//#region src/PathData.d.ts
+//#region src/ProgressElement.d.ts
 /**
- * Fluent builder for constructing the `d` attribute of an SVG `<path>` element.
- * Supports common path commands with type-safe chaining and automatic formatting.
+ * A typed wrapper around the native <progress> HTML element, extending the DomElement base class.
  *
- * Example:
- *   new PathData()
- *     .moveTo(10, 10)
- *     .lineTo(100, 100)
- *     .close()
- *     .toString(); // "M10 10 L100 100 Z"
+ * Provides ergonomic methods for setting and retrieving progress state.
+ *
+ * This class is designed for declarative composition and fluent chaining, and integrates
+ * seamlessly with the DomElement styling and layout system.
  */
-declare class PathData {
-  protected _segments: string[];
+declare class ProgressElement extends DomElement<"progress"> {
+  constructor();
   /**
-   * Moves the current drawing position to the absolute coordinate (x, y).
-   * Starts a new subpath without drawing a line.
-   *
-   * Equivalent to the SVG `M` command.
-   *
-   * @param x - Absolute x coordinate.
-   * @param y - Absolute y coordinate.
+   * Sets the current progress value.
+   * @param value - The numeric value to assign to the progress bar.
+   * @return This ProgressElement instance for chaining.
+   */
+  value(value: number): this;
+  /**
+   * Retrieves the current progress value.
+   * @return The numeric value of the progress bar.
+   */
+  getValue(): number;
+  /**
+   * Sets the maximum value of the progress bar.
+   * @param value - The numeric maximum value to assign.
+   * @return This ProgressElement instance for chaining.
+   */
+  max(value: number): this;
+  /**
+   * Retrieves the maximum value of the progress bar.
+   * @return The numeric maximum value.
+   */
+  getMax(): number;
+  /**
+   * Enables indeterminate mode by removing the value attribute.
+   * @return This ProgressElement instance for chaining.
+   */
+  indeterminate(): this;
+}
+declare function $progress(): ProgressElement;
+//#endregion
+//#region src/SelectElement.d.ts
+declare class SelectElement extends DomElement<"select"> {
+  constructor();
+  name(value: string): this;
+  value(value: string | number): this;
+  getValue(): string;
+}
+declare function $select(): SelectElement;
+//#endregion
+//#region src/SvgCircle.d.ts
+/**
+ * Wrapper for the `<circle>` SVG element, extending `BaseSvgElement<"circle">` with circle-specific functionality.
+ *
+ * Provides a fluent API for setting circle geometry via `cx`, `cy`, and `r` attributes.
+ * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across SVG shape elements.
+ *
+ * Ideal for constructing circular shapes, markers, and radial primitives with ergonomic chaining.
+ */
+declare class SvgCircle extends BaseSvgElement<"circle"> {
+  constructor();
+  /**
+   * Sets the `cx` (center x) coordinate.
+   * @param cx - Horizontal center position.
    * @return This instance for chaining.
    */
-  moveTo(x: number, y: number): this;
+  cx(cx: number): this;
   /**
-   * Moves the current drawing position by a relative offset (dx, dy).
-   * Starts a new subpath without drawing a line.
-   *
-   * Equivalent to the SVG `m` command.
-   *
-   * @param dx - Relative x offset from the current position.
-   * @param dy - Relative y offset from the current position.
+   * Sets the `cy` (center y) coordinate.
+   * @param cy - Vertical center position.
    * @return This instance for chaining.
    */
-  moveToRel(dx: number, dy: number): this;
+  cy(cy: number): this;
   /**
-   * Draws a straight line from the current position to the absolute coordinate (x, y).
-   * Adds a visible segment to the path.
-   *
-   * Equivalent to the SVG `L` command.
-   *
-   * @param x - Absolute x coordinate of the line endpoint.
-   * @param y - Absolute y coordinate of the line endpoint.
+   * Sets the `r` (radius) of the circle.
+   * @param r - Radius in user units.
    * @return This instance for chaining.
    */
-  lineTo(x: number, y: number): this;
+  r(r: number): this;
+}
+/**
+ * Creates a new SvgCircle element.
+ *
+ * @return A new SvgCircle instance.
+ */
+declare function $circle(): SvgCircle;
+//#endregion
+//#region src/SvgElement.d.ts
+/**
+ * Wrapper for the `<svg>` root element, extending `BaseSvgElement<"svg">` with viewport and layout configuration.
+ *
+ * Provides a fluent API for setting width, height, viewBox, and namespace attributes.
+ * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across the entire SVG tree.
+ *
+ * Ideal for constructing standalone SVG documents or embedding scalable vector graphics in UI components.
+ */
+declare class SvgElement extends BaseSvgElement<"svg"> {
+  constructor();
   /**
-   * Draws a straight line from the current position by a relative offset (dx, dy).
-   * Adds a visible segment to the path.
-   *
-   * Equivalent to the SVG `l` command.
-   *
-   * @param dx - Relative x offset from the current position.
-   * @param dy - Relative y offset from the current position.
+   * Sets the `width` of the SVG viewport.
+   * @param w - Width in pixels or units.
    * @return This instance for chaining.
    */
-  lineToRel(dx: number, dy: number): this;
+  width(w: number | string): this;
   /**
-   * Draws a horizontal line from the current position to the absolute x coordinate.
-   * Keeps the current y position unchanged.
-   *
-   * Equivalent to the SVG `H` command.
-   *
-   * @param x - Absolute x coordinate of the line endpoint.
+   * Sets the `height` of the SVG viewport.
+   * @param h - Height in pixels or units.
    * @return This instance for chaining.
    */
-  horizontal(x: number): this;
+  height(h: number | string): this;
   /**
-   * Draws a horizontal line from the current position by a relative x offset.
-   * Keeps the current y position unchanged.
-   *
-   * Equivalent to the SVG `h` command.
-   *
-   * @param dx - Relative x offset from the current position.
+   * Sets the `viewBox` attribute for scalable layout.
+   * @param x - Minimum x coordinate.
+   * @param y - Minimum y coordinate.
+   * @param w - ViewBox width.
+   * @param h - ViewBox height.
    * @return This instance for chaining.
    */
-  horizontalRel(dx: number): this;
+  viewBox(x: number, y: number, w: number, h: number): this;
+}
+/**
+ * Creates a new SvgElement root.
+ *
+ * @return A new SvgElement instance.
+ */
+declare function $svg(): SvgElement;
+//#endregion
+//#region src/SvgGroup.d.ts
+/**
+ * Wrapper for the `<g>` SVG element, extending `BaseSvgElement<"g">` with group-specific functionality.
+ *
+ * Provides a fluent API for grouping multiple SVG elements under a shared transform or style context.
+ * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across grouped shapes.
+ *
+ * Ideal for structuring reusable components, applying collective transforms, or organizing layered SVG content.
+ */
+declare class SvgGroup extends BaseSvgElement<"g"> {
+  constructor();
+}
+/**
+ * Creates a new SvgGroup element.
+ *
+ * @return A new SvgGroup instance.
+ */
+declare function $group(): SvgGroup;
+//#endregion
+//#region src/SvgPathData.d.ts
+/**
+ * Fluent builder for constructing the `d` attribute of an SVG `<path>` element.
+ * Supports common path commands with type-safe chaining and automatic formatting.
+ *
+ * Example:
+ *   new PathData()
+ *     .moveTo(10, 10)
+ *     .lineTo(100, 100)
+ *     .close()
+ *     .toString(); // "M10 10 L100 100 Z"
+ */
+declare class SvgPathData {
+  protected _segments: string[];
   /**
-   * Draws a vertical line from the current position to the absolute y coordinate.
-   * Keeps the current x position unchanged.
+   * Moves the current drawing position to the coordinate (x, y).
+   * Starts a new subpath without drawing a line.
    *
-   * Equivalent to the SVG `V` command.
+   * Equivalent to the SVG `M` or `m` command.
    *
-   * @param y - Absolute y coordinate of the line endpoint.
+   * @param x - X coordinate of the new position.
+   * @param y - Y coordinate of the new position.
+   * @param relative - If true, uses relative coordinates (`m`); otherwise absolute (`M`)
    * @return This instance for chaining.
    */
-  vertical(y: number): this;
+  m(x: number, y: number, relative?: boolean): this;
   /**
-   * Draws a vertical line from the current position by a relative y offset.
-   * Keeps the current x position unchanged.
+   * Draws a straight line from the current position to (x, y).
+   * Adds a visible segment to the path.
    *
-   * Equivalent to the SVG `v` command.
+   * Equivalent to the SVG `L` or `l` command.
    *
-   * @param dy - Relative y offset from the current position.
+   * @param x - X coordinate of the line endpoint.
+   * @param y - Y coordinate of the line endpoint.
+   * @param relative - If true, uses relative coordinates (`l`); otherwise absolute (`L`)
    * @return This instance for chaining.
    */
-  verticalRel(dy: number): this;
+  l(x: number, y: number, relative?: boolean): this;
   /**
-   * Draws a cubic Bézier curve from the current position to the absolute coordinate (x, y),
-   * using two control points to shape the curve.
+   * Draws a horizontal line to the given x coordinate,
+   * keeping the current y position unchanged.
    *
-   * Equivalent to the SVG `C` command.
+   * Equivalent to the SVG `H` or `h` command.
    *
-   * @param cx1 - Absolute x coordinate of the first control point.
-   * @param cy1 - Absolute y coordinate of the first control point.
-   * @param cx2 - Absolute x coordinate of the second control point.
-   * @param cy2 - Absolute y coordinate of the second control point.
-   * @param x - Absolute x coordinate of the curve endpoint.
-   * @param y - Absolute y coordinate of the curve endpoint.
+   * @param x - X coordinate of the line endpoint.
+   * @param relative - If true, uses relative coordinates (`h`); otherwise absolute (`H`)
    * @return This instance for chaining.
    */
-  curveTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): this;
+  h(x: number, relative?: boolean): this;
   /**
-   * Draws a cubic Bézier curve from the current position by a relative offset (dx, dy),
-   * using two relative control points to shape the curve.
+   * Draws a vertical line to the given y coordinate,
+   * keeping the current x position unchanged.
    *
-   * Equivalent to the SVG `c` command.
+   * Equivalent to the SVG `V` or `v` command.
    *
-   * @param dc1x - Relative x offset of the first control point.
-   * @param dc1y - Relative y offset of the first control point.
-   * @param dc2x - Relative x offset of the second control point.
-   * @param dc2y - Relative y offset of the second control point.
-   * @param dx - Relative x offset of the curve endpoint.
-   * @param dy - Relative y offset of the curve endpoint.
+   * @param y - Y coordinate of the line endpoint.
+   * @param relative - If true, uses relative coordinates (`v`); otherwise absolute (`V`)
    * @return This instance for chaining.
    */
-  curveToRel(dc1x: number, dc1y: number, dc2x: number, dc2y: number, dx: number, dy: number): this;
+  v(y: number, relative?: boolean): this;
   /**
-   * Draws a quadratic Bézier curve from the current position to the absolute coordinate (x, y),
-   * using a single control point to shape the curve.
+   * Draws a cubic Bézier curve from the current position to (x, y),
+   * using two control points to shape the curve.
    *
-   * Equivalent to the SVG `Q` command.
+   * Equivalent to the SVG `C` or `c` command.
    *
-   * @param cx - Absolute x coordinate of the control point.
-   * @param cy - Absolute y coordinate of the control point.
-   * @param x - Absolute x coordinate of the curve endpoint.
-   * @param y - Absolute y coordinate of the curve endpoint.
+   * @param cx1 - X coordinate of the first control point.
+   * @param cy1 - Y coordinate of the first control point.
+   * @param cx2 - X coordinate of the second control point.
+   * @param cy2 - Y coordinate of the second control point.
+   * @param x - Destination x coordinate.
+   * @param y - Destination y coordinate.
+   * @param relative - If true, uses relative coordinates (`c`); otherwise absolute (`C`)
    * @return This instance for chaining.
    */
-  quadraticTo(cx: number, cy: number, x: number, y: number): this;
+  c(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number, relative?: boolean): this;
   /**
-   * Draws a quadratic Bézier curve from the current position by a relative offset (dx, dy),
-   * using a single relative control point to shape the curve.
+   * Draws a quadratic Bézier curve from the current position to (x, y),
+   * using a single control point to shape the curve.
    *
-   * Equivalent to the SVG `q` command.
+   * Equivalent to the SVG `Q` or `q` command.
    *
-   * @param dcx - Relative x offset of the control point.
-   * @param dcy - Relative y offset of the control point.
-   * @param dx - Relative x offset of the curve endpoint.
-   * @param dy - Relative y offset of the curve endpoint.
+   * @param cx - X coordinate of the control point.
+   * @param cy - Y coordinate of the control point.
+   * @param x - Destination x coordinate.
+   * @param y - Destination y coordinate.
+   * @param relative - If true, uses relative coordinates (`q`); otherwise absolute (`Q`)
    * @return This instance for chaining.
    */
-  quadraticToRel(dcx: number, dcy: number, dx: number, dy: number): this;
+  q(cx: number, cy: number, x: number, y: number, relative?: boolean): this;
   /**
-   * Draws an elliptical arc from the current position to the absolute coordinate (x, y),
+   * Draws an elliptical arc from the current position to the coordinate (x, y),
    * using the specified radii, rotation, and arc/sweep flags.
    *
-   * Equivalent to the SVG `A` command.
+   * Equivalent to the SVG `A` or `a` command.
    *
    * @param rx - Horizontal radius of the ellipse.
    * @param ry - Vertical radius of the ellipse.
-   * @param xAxisRotation - Rotation (in degrees) of the ellipse's x-axis relative to the coordinate system.
-   * @param largeArc - If true, draws the larger of the two possible arcs (sweep angle ≥ 180°).
-   * @param sweep - If true, draws the arc in a "positive-angle" (clockwise) direction.
-   * @param x - Absolute x coordinate of the arc endpoint.
-   * @param y - Absolute y coordinate of the arc endpoint.
+   * @param xAxisRotation - Rotation (in degrees) of the ellipse's x-axis.
+   * @param largeArc - If true, draws the larger arc (≥ 180°).
+   * @param sweep - If true, draws clockwise.
+   * @param x - Destination x coordinate.
+   * @param y - Destination y coordinate.
+   * @param relative - If true, uses relative coordinates (`a`); otherwise absolute (`A`)
    * @return This instance for chaining.
    */
-  arcTo(rx: number, ry: number, xAxisRotation: number, largeArc: boolean, sweep: boolean, x: number, y: number): this;
+  a(rx: number, ry: number, xAxisRotation: number, largeArc: boolean, sweep: boolean, x: number, y: number, relative?: boolean): this;
   /**
-   * Draws an elliptical arc from the current position by a relative offset (dx, dy),
-   * using the specified radii, rotation, and arc/sweep flags.
+   * Draws a smooth quadratic Bézier curve to (x, y),
+   * reflecting the previous control point.
    *
-   * Equivalent to the SVG `a` command.
+   * Equivalent to the SVG `T` or `t` command.
    *
-   * @param rx - Horizontal radius of the ellipse.
-   * @param ry - Vertical radius of the ellipse.
-   * @param xAxisRotation - Rotation (in degrees) of the ellipse's x-axis relative to the coordinate system.
-   * @param largeArc - If true, draws the larger of the two possible arcs (sweep angle ≥ 180°).
-   * @param sweep - If true, draws the arc in a "positive-angle" (clockwise) direction.
-   * @param dx - Relative x offset of the arc endpoint.
-   * @param dy - Relative y offset of the arc endpoint.
+   * @param x - Destination x
+   * @param y - Destination y
+   * @param relative - If true, uses relative coordinates (`t`); otherwise absolute (`T`)
    * @return This instance for chaining.
    */
-  arcToRel(rx: number, ry: number, xAxisRotation: number, largeArc: boolean, sweep: boolean, dx: number, dy: number): this;
+  t(x: number, y: number, relative?: boolean): this;
+  /**
+   * Draws a smooth cubic Bézier curve from the current position to (x, y),
+   * using one control point. The first control point is inferred from the previous segment.
+   *
+   * Equivalent to the SVG `S` or `s` command.
+   *
+   * @param cx2 - X coordinate of the second control point.
+   * @param cy2 - Y coordinate of the second control point.
+   * @param x - Destination x coordinate.
+   * @param y - Destination y coordinate.
+   * @param relative - If true, uses relative coordinates (`s`); otherwise absolute (`S`)
+   * @return This instance for chaining.
+   */
+  s(cx2: number, cy2: number, x: number, y: number, relative?: boolean): this;
   /**
    * Closes the current subpath by drawing a straight line back to its starting point.
    * Ensures the shape is fully enclosed, which is important for fill operations.
@@ -2984,20 +3249,10 @@ declare class PathData {
    * @param y - Top-left y coordinate.
    * @param width - Width of the rectangle.
    * @param height - Height of the rectangle.
+   * @param relative - If true, uses relative coordinates (`m`, `h`, `v`); otherwise absolute (`M`, `H`, `V`)
    * @return This instance for chaining.
    */
-  rect(x: number, y: number, width: number, height: number): this;
-  /**
-   * Adds a rectangular path using relative coordinates from the current position.
-   * Uses `moveToRel`, `horizontalRel`, `verticalRel`, and `close` for fluent composition.
-   *
-   * @param dx - Relative x offset from the current position.
-   * @param dy - Relative y offset from the current position.
-   * @param width - Width of the rectangle.
-   * @param height - Height of the rectangle.
-   * @return This instance for chaining.
-   */
-  rectRel(dx: number, dy: number, width: number, height: number): this;
+  rect(x: number, y: number, width: number, height: number, relative?: boolean): this;
   /**
    * Adds a rounded rectangle path starting at (x, y) with the given width, height, and corner radius.
    * Uses `moveTo`, `arcTo`, `horizontal`, `vertical`, and `close` for fluent composition.
@@ -3019,21 +3274,10 @@ declare class PathData {
    * @param cx - Center x coordinate.
    * @param cy - Center y coordinate.
    * @param r - Radius of the circle.
+   * @param relative - If true, uses relative coordinates (`m`, `a`); otherwise absolute (`M`, `A`)
    * @return This instance for chaining.
    */
-  circle(cx: number, cy: number, r: number): this;
-  /**
-   * Adds a circular path using relative coordinates from the current position.
-   * Uses `moveToRel` and two `arcToRel` commands to complete the full circle.
-   *
-   * Starts at (r, 0) relative to the current position.
-   *
-   * @param dx - Relative x offset to the circle center.
-   * @param dy - Relative y offset to the circle center.
-   * @param r - Radius of the circle.
-   * @return This instance for chaining.
-   */
-  circleRel(dx: number, dy: number, r: number): this;
+  circle(cx: number, cy: number, r: number, relative?: boolean): this;
   /**
    * Adds an elliptical path centered at (cx, cy) with radii `rx` and `ry`.
    * Uses `moveTo` and two `arcTo` commands to complete the full ellipse.
@@ -3044,9 +3288,10 @@ declare class PathData {
    * @param cy - Center y coordinate.
    * @param rx - Horizontal radius.
    * @param ry - Vertical radius.
+   * @param relative - If true, uses relative coordinates (`m`, `a`); otherwise absolute (`M`, `A`)
    * @return This instance for chaining.
    */
-  ellipse(cx: number, cy: number, rx: number, ry: number): this;
+  ellipse(cx: number, cy: number, rx: number, ry: number, relative?: boolean): this;
   /**
    * Adds a regular star shape centered at (cx, cy) with the given number of points and outer radius.
    * Uses `moveTo` and `lineTo` to connect alternating outer and inner vertices.
@@ -3056,52 +3301,48 @@ declare class PathData {
    * @param points - Number of star points (minimum 2).
    * @param radius - Outer radius of the star.
    * @param insetRatio - Ratio of inner radius to outer radius (default: 0.5).
+   * @param relative - If true, uses relative coordinates (`m`, `l`); otherwise absolute (`M`, `L`)
    * @return This instance for chaining.
    */
-  star(cx: number, cy: number, points: number, radius: number, insetRatio?: number): this;
+  star(cx: number, cy: number, points: number, radius: number, insetRatio?: number, relative?: boolean): this;
   /**
    * Adds a closed polygon path using the provided list of points.
    * Uses `moveTo` and `lineTo` to connect each vertex, then closes the shape.
    *
    * @param points - Array of [x, y] coordinate pairs.
+   * @param relative - If true, uses relative coordinates (`m`, `l`); otherwise absolute (`M`, `L`)
    * @return This instance for chaining.
    */
-  polygon(points: [number, number][]): this;
+  polygon(points: [number, number][], relative?: boolean): this;
   /**
    * Adds an open polyline path using the provided list of points.
    * Uses `moveTo` and `lineTo` to connect each vertex without closing the shape.
    *
    * @param points - Array of [x, y] coordinate pairs.
+   * @param relative - If true, uses relative coordinates (`m`, `l`); otherwise absolute (`M`, `L`)
    * @return This instance for chaining.
    */
-  polyline(points: [number, number][]): this;
+  polyline(points: [number, number][], relative?: boolean): this;
   /**
    * Adds a smooth spline through the given points using cubic Bézier segments.
    * Uses Catmull-Rom to Bézier conversion for natural curvature.
    *
    * @param points - Array of [x, y] coordinate pairs (minimum 2).
    * @param tension - Controls curve tightness (default: 0.5). Lower = looser, higher = tighter.
+   * @param relative - If true, uses relative coordinates (`m`, `c`); otherwise absolute (`M`, `C`)
    * @return This instance for chaining.
    */
-  spline(points: [number, number][], tension?: number): this;
+  spline(points: [number, number][], tension?: number, relative?: boolean): this;
   /**
    * Adds a path from the given list of points.
    * Uses `moveTo` and `lineTo` to connect each vertex, optionally closing the shape.
    *
    * @param points - Array of [x, y] coordinate pairs.
    * @param close - Whether to close the path (default: false).
+   * @param relative - If true, uses relative coordinates (`m`, `l`); otherwise absolute (`M`, `L`)
    * @return This instance for chaining.
    */
-  pathFrom(points: [number, number][], close?: boolean): this;
-  /**
-   * Adds a path using relative point offsets from the current position.
-   * Uses `moveToRel` and `lineToRel` to connect each vertex, optionally closing the shape.
-   *
-   * @param deltas - Array of [dx, dy] relative coordinate pairs.
-   * @param close - Whether to close the path (default: false).
-   * @return This instance for chaining.
-   */
-  pathFromRel(deltas: [number, number][], close?: boolean): this;
+  pathFrom(points: [number, number][], close?: boolean, relative?: boolean): this;
   /**
    * Adds a sequence of cubic Bézier segments using explicit control and end points.
    * Each segment is defined by two control points and one endpoint.
@@ -3111,9 +3352,10 @@ declare class PathData {
    *
    * @param points - Array of [x, y] coordinate pairs: [start, c1, c2, end, c1, c2, end, ...].
    *                 Must contain 1 + 3×N points (N ≥ 1).
+   * @param relative - If true, uses relative coordinates (`m`, `c`); otherwise absolute (`M`, `C`)
    * @return This instance for chaining.
    */
-  polyBezier(points: [number, number][]): this;
+  polyBezier(points: [number, number][], relative?: boolean): this;
   /**
    * Adds a sequence of quadratic Bézier segments using explicit control and end points.
    * Each segment is defined by one control point and one endpoint.
@@ -3123,9 +3365,10 @@ declare class PathData {
    *
    * @param points - Array of [x, y] coordinate pairs: [start, c1, end, c1, end, ...].
    *                 Must contain 1 + 2×N points (N ≥ 1).
+   * @param relative - If true, uses relative coordinates (`m`, `q`); otherwise absolute (`M`, `Q`)
    * @return This instance for chaining.
    */
-  polyQuadratic(points: [number, number][]): this;
+  polyQuadratic(points: [number, number][], relative?: boolean): this;
   /**
    * Adds a sequence of elliptical arc segments.
    * Each segment is defined by radii, rotation, arc/sweep flags, and an endpoint.
@@ -3136,157 +3379,13 @@ declare class PathData {
    *
    * @param segments - Array of arc segments: [start, arc1, arc2, ...].
    *                   Must contain 1 + N×7 points (N ≥ 1).
+   * @param relative - If true, uses relative coordinates (`m`, `a`); otherwise absolute (`M`, `A`)
    * @return This instance for chaining.
    */
-  polyArc(segments: (number | boolean)[][]): this;
+  polyArc(segments: (number | boolean)[][], relative?: boolean): this;
   toString(): string;
 }
-//#endregion
-//#region src/ProgressElement.d.ts
-/**
- * A typed wrapper around the native <progress> HTML element, extending the DomElement base class.
- *
- * Provides ergonomic methods for setting and retrieving progress state.
- *
- * This class is designed for declarative composition and fluent chaining, and integrates
- * seamlessly with the DomElement styling and layout system.
- */
-declare class ProgressElement extends DomElement<"progress"> {
-  constructor();
-  /**
-   * Sets the current progress value.
-   * @param value - The numeric value to assign to the progress bar.
-   * @return This ProgressElement instance for chaining.
-   */
-  value(value: number): this;
-  /**
-   * Retrieves the current progress value.
-   * @return The numeric value of the progress bar.
-   */
-  getValue(): number;
-  /**
-   * Sets the maximum value of the progress bar.
-   * @param value - The numeric maximum value to assign.
-   * @return This ProgressElement instance for chaining.
-   */
-  max(value: number): this;
-  /**
-   * Retrieves the maximum value of the progress bar.
-   * @return The numeric maximum value.
-   */
-  getMax(): number;
-  /**
-   * Enables indeterminate mode by removing the value attribute.
-   * @return This ProgressElement instance for chaining.
-   */
-  indeterminate(): this;
-}
-declare function $progress(): ProgressElement;
-//#endregion
-//#region src/SelectElement.d.ts
-declare class SelectElement extends DomElement<"select"> {
-  constructor();
-  name(value: string): this;
-  value(value: string | number): this;
-  getValue(): string;
-}
-declare function $select(): SelectElement;
-//#endregion
-//#region src/SvgCircle.d.ts
-/**
- * Wrapper for the `<circle>` SVG element, extending `BaseSvgElement<"circle">` with circle-specific functionality.
- *
- * Provides a fluent API for setting circle geometry via `cx`, `cy`, and `r` attributes.
- * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across SVG shape elements.
- *
- * Ideal for constructing circular shapes, markers, and radial primitives with ergonomic chaining.
- */
-declare class SvgCircle extends BaseSvgElement<"circle"> {
-  constructor();
-  /**
-   * Sets the `cx` (center x) coordinate.
-   * @param cx - Horizontal center position.
-   * @return This instance for chaining.
-   */
-  cx(cx: number): this;
-  /**
-   * Sets the `cy` (center y) coordinate.
-   * @param cy - Vertical center position.
-   * @return This instance for chaining.
-   */
-  cy(cy: number): this;
-  /**
-   * Sets the `r` (radius) of the circle.
-   * @param r - Radius in user units.
-   * @return This instance for chaining.
-   */
-  r(r: number): this;
-}
-/**
- * Creates a new SvgCircle element.
- *
- * @return A new SvgCircle instance.
- */
-declare function $circle(): SvgCircle;
-//#endregion
-//#region src/SvgElement.d.ts
-/**
- * Wrapper for the `<svg>` root element, extending `BaseSvgElement<"svg">` with viewport and layout configuration.
- *
- * Provides a fluent API for setting width, height, viewBox, and namespace attributes.
- * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across the entire SVG tree.
- *
- * Ideal for constructing standalone SVG documents or embedding scalable vector graphics in UI components.
- */
-declare class SvgElement extends BaseSvgElement<"svg"> {
-  constructor();
-  /**
-   * Sets the `width` of the SVG viewport.
-   * @param w - Width in pixels or units.
-   * @return This instance for chaining.
-   */
-  width(w: number | string): this;
-  /**
-   * Sets the `height` of the SVG viewport.
-   * @param h - Height in pixels or units.
-   * @return This instance for chaining.
-   */
-  height(h: number | string): this;
-  /**
-   * Sets the `viewBox` attribute for scalable layout.
-   * @param x - Minimum x coordinate.
-   * @param y - Minimum y coordinate.
-   * @param w - ViewBox width.
-   * @param h - ViewBox height.
-   * @return This instance for chaining.
-   */
-  viewBox(x: number, y: number, w: number, h: number): this;
-}
-/**
- * Creates a new SvgElement root.
- *
- * @return A new SvgElement instance.
- */
-declare function $svg(): SvgElement;
-//#endregion
-//#region src/SvgGroup.d.ts
-/**
- * Wrapper for the `<g>` SVG element, extending `BaseSvgElement<"g">` with group-specific functionality.
- *
- * Provides a fluent API for grouping multiple SVG elements under a shared transform or style context.
- * Inherits common styling and transform methods from `BaseSvgElement`, enabling consistent manipulation across grouped shapes.
- *
- * Ideal for structuring reusable components, applying collective transforms, or organizing layered SVG content.
- */
-declare class SvgGroup extends BaseSvgElement<"g"> {
-  constructor();
-}
-/**
- * Creates a new SvgGroup element.
- *
- * @return A new SvgGroup instance.
- */
-declare function $group(): SvgGroup;
+declare function $d(): SvgPathData;
 //#endregion
 //#region src/SvgPath.d.ts
 /**
@@ -3304,7 +3403,7 @@ declare class SvgPath extends BaseSvgElement<"path"> {
    * @param path - Path data string or builder.
    * @return This instance for chaining.
    */
-  d(path: string | PathData): this;
+  d(path: string | SvgPathData): this;
 }
 /**
  * Creates a new SvgPath element.
@@ -3461,4 +3560,4 @@ declare function uniqueId(): string;
 declare function camelToKebab(prop: string): string;
 declare function getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
 //#endregion
-export { $, $a, $body, $btn, $canvas, $circle, $document, $group, $head, $iframe, $img, $input, $option, $path, $progress, $query, $rect, $select, $svg, $textarea, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, BaseSvgElement, Button, Canvas, ContentSecurityPolicy, CssProperties, type CssProperty, CssRule, DomBody, DomDocument, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomHead, DomWindow, IFrame, IFrameSandboxFlag, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, LinearGradientDirection, MediaRule, OptionElement, PathData, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, SvgCircle, SvgElement, SvgElementTagNameMap, SvgGroup, SvgPath, SvgRect, TAG_ALIAS, TagAlias, TextArea, TextAreaWrapMode, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };
+export { $, $a, $body, $btn, $canvas, $circle, $d, $document, $group, $head, $iframe, $img, $input, $option, $path, $progress, $query, $rect, $select, $svg, $textarea, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, BaseSvgElement, Button, Canvas, ContentSecurityPolicy, CssProperties, type CssProperty, CssRule, DomBody, DomDocument, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomHead, DomWindow, IFrame, IFrameSandboxFlag, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, LinearGradientDirection, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, SvgCircle, SvgElement, SvgElementTagNameMap, SvgGroup, SvgPath, SvgPathData, SvgRect, TAG_ALIAS, TagAlias, TextArea, TextAreaWrapMode, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };

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)}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)}outlineOffset(e){return this.setStyleProp(`outlineOffset`,e)}lineHeight(e){return this.setStyleProp(`lineHeight`,e)}wordWrap(e){return this.setStyleProp(`wordWrap`,e)}tabSize(e){return this.setStyleProp(`tabSize`,e)}resize(e){return this.setStyleProp(`resize`,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)}getChildAt(e){return this.dom.children.item(e)}getNodeAt(e){return this.dom.childNodes.item(e)}getChildren(){return Array.from(this.dom.children)}getNodes(){return Array.from(this.dom.childNodes)}getText(){return this.dom.textContent}getAttr(e){return this.dom.getAttribute(e)}getProp(e){return this.dom[e]}hasClass(e){return this.dom.classList.contains(e)}text(e){return this.dom.textContent=e==null?``:String(e),this}html(e){return this.dom.innerHTML=e,this}id(e){return this.dom.id=e??``,this}attr(e,t){return t===void 0||t===!1?this.dom.removeAttribute(e):t===!0?this.dom.setAttribute(e,``):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}toggleAttr(e,t){return this.dom.toggleAttribute(e,t),this}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}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(){return this.dom.textContent=``,this}clearRange(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)}query(e){let t=this.dom.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}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}remove(){this.dom.remove()}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return this.attr(`title`,e)}disabled(e){return this.attr(`disabled`,e)}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}popover(e){return this.attr(`popover`,e)}popoverTarget(e){return this.attr(`popovertarget`,e)}popoverTargetAction(e){return this.attr(`popovertargetaction`,e)}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 t?new d(t.tagName.toLowerCase(),t):null}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{svgFill(e){return this.attr(`fill`,e)}fillRule(e){return this.attr(`fill-rule`,e)}svgStroke(e){return this.attr(`stroke`,e)}svgStrokeWidth(e){return this.attr(`stroke-width`,e.toString())}strokeLinejoin(e){return this.attr(`stroke-linejoin`,e)}strokeLinecap(e){return this.attr(`stroke-linecap`,e)}strokeMiterlimit(e){return this.attr(`stroke-miterlimit`,e.toString())}svgOpacity(e){return this.attr(`opacity`,e.toString())}svgTransform(e){return this.attr(`transform`,e)}svgTranslate(e,t){return this.attr(`transform`,`translate(${e} ${t})`)}svgTranslateX(e){return this.attr(`transform`,`translate(${e} 0)`)}svgTranslateY(e){return this.attr(`transform`,`translate(0 ${e})`)}svgRotate(e,t,n){let r=t!==void 0&&n!==void 0?`rotate(${e} ${t} ${n})`:`rotate(${e})`;return this.attr(`transform`,r)}svgScale(e){return this.attr(`transform`,`scale(${e})`)}svgScaleX(e){return this.attr(`transform`,`scale(${e} 1)`)}svgScaleY(e){return this.attr(`transform`,`scale(1 ${e})`)}},_=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function ee(){return new _}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{constructor(e){super(),this._body=e}_body;get dom(){return this._body}};function S(e){return new x(e??document.body)}var C=class extends u{constructor(e){super(),this._head=e}_head;get dom(){return this._head}title(e){let t=this.dom.querySelector(`title`);return t||(t=this.dom.ownerDocument.createElement(`title`),this.dom.appendChild(t)),t.textContent=e,this}charset(e){let t=this.dom.querySelector(`meta[charset]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),this.dom.insertBefore(t,this.dom.firstChild)),t.setAttribute(`charset`,e),this}viewport(e){let t=this.dom.querySelector(`meta[name="viewport"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`viewport`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}httpEquiv(e,t){let n=this.dom.querySelector(`meta[http-equiv="${e}"]`);return n||(n=this.dom.ownerDocument.createElement(`meta`),n.setAttribute(`http-equiv`,e),this.dom.appendChild(n)),n.setAttribute(`content`,t),this}csp(e){let t=Object.entries(e).map(([e,t])=>`${e} ${t}`).join(`; `);return this.httpEquiv(`Content-Security-Policy`,t)}description(e){let t=this.dom.querySelector(`meta[name="description"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`description`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}keywords(e){let t=this.dom.querySelector(`meta[name="keywords"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`keywords`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}link(e,t,n={}){let r=this.dom.querySelector(`link[rel="${e}"]`);r||(r=this.dom.ownerDocument.createElement(`link`),r.setAttribute(`rel`,e),this.dom.appendChild(r)),r.setAttribute(`href`,t);for(let[e,t]of Object.entries(n))r.setAttribute(e,t);return this}};function w(e){return new C(e??document.head)}var T=class{constructor(e=window.document){this._document=e}_document;get dom(){return this._document}getBody(){return new x(this._document.body)}getHead(){return new C(this._document.head)}on(e,t,n){return this._document.addEventListener(e,t,n),this}off(e,t,n){return this._document.removeEventListener(e,t,n),this}dispatch(e){return this._document.dispatchEvent(e),this}query(e){let t=this._document.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}};function E(){return new T}var D=class{constructor(e=window){this._window=e}_window;get dom(){return this._window}getDocument(){return new T(this._window.document)}on(e,t,n){return this._window.addEventListener(e,t,n),this}off(e,t,n){return this._window.removeEventListener(e,t,n),this}dispatch(e){return this._window.dispatchEvent(e),this}postMessage(e,t){return this._window.postMessage(e,t),this}};function O(e){return new D(e)}var k=class extends d{constructor(){super(`iframe`)}getContentWindow(){let e=this.dom.contentWindow;return e?new D(e):null}getContentDocument(){let e=this.dom.contentDocument;return e?new T(e):null}getBody(){let e=this.getContentDocument();return e?e.getBody():null}getHead(){let e=this.getContentDocument();return e?e.getHead():null}isSameOrigin(){try{return this.dom.contentWindow?.location.href,!0}catch{return!1}}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}size(e,t){return this.width(e).height(t)}sandbox(e){let t=e?.join(` `);return this.attr(`sandbox`,t)}referrerPolicy(e){return this.dom.referrerPolicy=e,this}loading(e){return this.dom.loading=e,this}reloadViaSrc(){return this.dom.src&&(this.dom.src=this.dom.src),this}reloadViaLocation(){return this.dom.contentWindow?.location.reload(),this}reload(){try{this.dom.contentWindow?.location.reload()}catch{this.dom.src&&(this.dom.src=this.dom.src)}return this}queryInside(e){let t=this.getContentDocument()?.dom.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}postMessage(e,t){let n=this.getContentWindow();return n&&n.postMessage(e,t),this}};function te(){return new k}var A=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 j(){return new A}var M=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`)}},N=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}},P=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}},F=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)}getRatio(){let e=this.getMin(),t=this.getMax(),n=this.getValue(),r=t-e;return r>0?Math.max(0,Math.min(1,(n-e)/r)):0}getPercent(){return this.getRatio()*100}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)}ratio(e){let t=this.getMin(),n=this.getMax()-t,r=Math.max(0,Math.min(1,e));return this.value(t+r*n)}percent(e){return this.ratio(e/100)}trackFillColors(e,t){let n=this.getPercent();return this.linearGradient(`to right`,`${e} ${n}%`,`${t} ${n}%`)}},I=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 ne(e){switch(e){case`text`:return new I;case`number`:return new P;case`checkbox`:return new M;case`color`:return new N;case`range`:return new F}}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{_segments=[];moveTo(e,t){return this._segments.push(`M${e} ${t}`),this}moveToRel(e,t){return this._segments.push(`m${e} ${t}`),this}lineTo(e,t){return this._segments.push(`L${e} ${t}`),this}lineToRel(e,t){return this._segments.push(`l${e} ${t}`),this}horizontal(e){return this._segments.push(`H${e}`),this}horizontalRel(e){return this._segments.push(`h${e}`),this}vertical(e){return this._segments.push(`V${e}`),this}verticalRel(e){return this._segments.push(`v${e}`),this}curveTo(e,t,n,r,i,a){return this._segments.push(`C${e} ${t}, ${n} ${r}, ${i} ${a}`),this}curveToRel(e,t,n,r,i,a){return this._segments.push(`c${e} ${t}, ${n} ${r}, ${i} ${a}`),this}quadraticTo(e,t,n,r){return this._segments.push(`Q${e} ${t}, ${n} ${r}`),this}quadraticToRel(e,t,n,r){return this._segments.push(`q${e} ${t}, ${n} ${r}`),this}arcTo(e,t,n,r,i,a,o){return this._segments.push(`A${e} ${t} ${n} ${r?1:0} ${i?1:0} ${a} ${o}`),this}arcToRel(e,t,n,r,i,a,o){return this._segments.push(`a${e} ${t} ${n} ${r?1:0} ${i?1:0} ${a} ${o}`),this}close(){return this._segments.push(`Z`),this}rect(e,t,n,r){return this.moveTo(e,t).horizontal(e+n).vertical(t+r).horizontal(e).close()}rectRel(e,t,n,r){return this.moveToRel(e,t).horizontalRel(n).verticalRel(r).horizontalRel(-n).close()}roundedRect(e,t,n,r,i){let a=e+n,o=t+r;return this.moveTo(e+i,t).horizontal(a-i).arcTo(i,i,0,!1,!0,a,t+i).vertical(o-i).arcTo(i,i,0,!1,!0,a-i,o).horizontal(e+i).arcTo(i,i,0,!1,!0,e,o-i).vertical(t+i).arcTo(i,i,0,!1,!0,e+i,t).close()}circle(e,t,n){let r=e+n,i=t;return this.moveTo(r,i).arcTo(n,n,0,!0,!1,e-n,t).arcTo(n,n,0,!0,!1,r,i)}circleRel(e,t,n){return this.moveToRel(e+n,t).arcToRel(n,n,0,!0,!1,-2*n,0).arcToRel(n,n,0,!0,!1,2*n,0)}ellipse(e,t,n,r){let i=e+n,a=t;return this.moveTo(i,a).arcTo(n,r,0,!0,!1,e-n,t).arcTo(n,r,0,!0,!1,i,a)}star(e,t,n,r,i=.5){if(n<2)return this;let a=Math.PI/n,o=r*i;for(let i=0;i<n*2;i++){let n=i%2==0?r:o,s=i*a-Math.PI/2,c=e+n*Math.cos(s),l=t+n*Math.sin(s);i===0?this.moveTo(c,l):this.lineTo(c,l)}return this.close()}polygon(e){if(e.length<2)return this;let[t,n]=e[0];this.moveTo(t,n);for(let t=1;t<e.length;t++){let[n,r]=e[t];this.lineTo(n,r)}return this.close()}polyline(e){if(e.length<2)return this;let[t,n]=e[0];this.moveTo(t,n);for(let t=1;t<e.length;t++){let[n,r]=e[t];this.lineTo(n,r)}return this}spline(e,t=.5){let n=e.length;if(n<2)return this;this.moveTo(e[0][0],e[0][1]);for(let r=0;r<n-1;r++){let[n,i]=e[r-1]??e[r],[a,o]=e[r],[s,c]=e[r+1],[l,u]=e[r+2]??e[r+1],d=(s-n)*t/6,f=(c-i)*t/6,p=(l-a)*t/6,m=(u-o)*t/6;this.curveTo(a+d,o+f,s-p,c-m,s,c)}return this}pathFrom(e,t=!1){if(e.length<2)return this;let[n,r]=e[0];this.moveTo(n,r);for(let t=1;t<e.length;t++){let[n,r]=e[t];this.lineTo(n,r)}return t&&this.close(),this}pathFromRel(e,t=!1){if(e.length<2)return this;let[n,r]=e[0];this.moveToRel(n,r);for(let t=1;t<e.length;t++){let[n,r]=e[t];this.lineToRel(n,r)}return t&&this.close(),this}polyBezier(e){if(e.length<4||(e.length-1)%3!=0)return this;let[t,n]=e[0];this.moveTo(t,n);for(let t=1;t<e.length;t+=3){let[n,r]=e[t],[i,a]=e[t+1],[o,s]=e[t+2];this.curveTo(n,r,i,a,o,s)}return this}polyQuadratic(e){if(e.length<3||(e.length-1)%2!=0)return this;let[t,n]=e[0];this.moveTo(t,n);for(let t=1;t<e.length;t+=2){let[n,r]=e[t],[i,a]=e[t+1];this.quadraticTo(n,r,i,a)}return this}polyArc(e){if(e.length<2)return this;let[t,n]=e[0];this.moveTo(t,n);for(let t=1;t<e.length;t++){let[n,r,i,a,o,s,c]=e[t];this.arcTo(n,r,i,a,o,s,c)}return this}toString(){return this._segments.join(` `)}},V=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 H(){return new V}var U=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 W(){return new U}var G=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)return new e(n);{let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}}static DEFAULT_STYLE_ID=`__neptune-style__`},K=class extends g{constructor(){super(`circle`)}cx(e){return this.attr(`cx`,e.toString())}cy(e){return this.attr(`cy`,e.toString())}r(e){return this.attr(`r`,e.toString())}};function q(){return new K}var J=class extends g{constructor(){super(`svg`)}width(e){return this.attr(`width`,e.toString())}height(e){return this.attr(`height`,e.toString())}viewBox(e,t,n,r){return this.attr(`viewBox`,`${e} ${t} ${n} ${r}`)}};function Y(){return new J}var X=class extends g{constructor(){super(`g`)}};function re(){return new X}var Z=class extends g{constructor(){super(`path`)}d(e){let t=typeof e==`string`?e:e.toString();return this.attr(`d`,t)}};function ie(){return new Z}var Q=class extends g{constructor(){super(`rect`)}x(e){return this.attr(`x`,e.toString())}y(e){return this.attr(`y`,e.toString())}width(e){return this.attr(`width`,e.toString())}height(e){return this.attr(`height`,e.toString())}rx(e){return this.attr(`rx`,e.toString())}ry(e){return this.attr(`ry`,e.toString())}};function ae(){return new Q}var $=class extends d{constructor(){super(`textarea`)}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}rows(e){return this.dom.rows=e,this}cols(e){return this.dom.cols=e,this}wrap(e){return this.dom.wrap=e,this}maxLength(e){return this.dom.maxLength=e,this}};function oe(){return new $}export{f as $,h as $a,S as $body,ee as $btn,y as $canvas,q as $circle,E as $document,re as $group,w as $head,te as $iframe,j as $img,ne as $input,z as $option,ie as $path,H as $progress,p as $query,ae as $rect,W as $select,Y as $svg,oe as $textarea,O as $window,m as AnchorElement,u as BaseDom,e as BaseStyle,g as BaseSvgElement,_ as Button,v as Canvas,b as CssRule,x as DomBody,T as DomDocument,d as DomElement,C as DomHead,D as DomWindow,k as IFrame,A as ImageElement,M as InputCheckbox,N as InputColor,P as InputNumber,F as InputRange,I as InputText,L as MediaRule,R as OptionElement,B as PathData,V as ProgressElement,r as SVG_TAGS,U as SelectElement,G as StyleSheet,K as SvgCircle,J as SvgElement,X as SvgGroup,Z as SvgPath,Q as SvgRect,i as TAG_ALIAS,$ as TextArea,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}bCollapse(e){return this.setStyleProp(`borderCollapse`,e)}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}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)}outlineOffset(e){return this.setStyleProp(`outlineOffset`,e)}lineHeight(e){return this.setStyleProp(`lineHeight`,e)}wordWrap(e){return this.setStyleProp(`wordWrap`,e)}tabSize(e){return this.setStyleProp(`tabSize`,e)}resize(e){return this.setStyleProp(`resize`,e)}fill(e){return this.setStyleProp(`fill`,e)}stroke(e){return this.setStyleProp(`stroke`,e)}strokeWidth(e){return this.setStyleProp(`strokeWidth`,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)}getChildAt(e){return this.dom.children.item(e)}getNodeAt(e){return this.dom.childNodes.item(e)}getChildren(){return Array.from(this.dom.children)}getNodes(){return Array.from(this.dom.childNodes)}getText(){return this.dom.textContent}getAttr(e){return this.dom.getAttribute(e)}getProp(e){return this.dom[e]}hasClass(e){return this.dom.classList.contains(e)}text(e){return this.dom.textContent=e==null?``:String(e),this}html(e){return this.dom.innerHTML=e,this}id(e){return this.dom.id=e??``,this}attr(e,t){return t===void 0||t===!1?this.dom.removeAttribute(e):t===!0?this.dom.setAttribute(e,``):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}toggleAttr(e,t){return this.dom.toggleAttribute(e,t),this}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}className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}tabIndex(e){return this.attr(`tabindex`,e)}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(){return this.dom.textContent=``,this}clearRange(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)}query(e){let t=this.dom.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}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}remove(){this.dom.remove()}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return this.attr(`title`,e)}disabled(e){return this.attr(`disabled`,e)}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}click(){return this.isSvg||this.dom.click(),this}popover(e){return this.attr(`popover`,e)}popoverTarget(e){return this.attr(`popovertarget`,e)}popoverTargetAction(e){return this.attr(`popovertargetaction`,e)}showPopover(e){return this.dom.showPopover({source:e}),this}hidePopover(){return this.dom.hidePopover(),this}togglePopover(e,t){return this.dom.togglePopover({force:e,source:t}),this}};function f(e){return new d(e)}function p(e){let t=document.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}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{fill(e){return this.attr(`fill`,e)}fillRule(e){return this.attr(`fill-rule`,e)}fillOpacity(e){return this.attr(`fill-opacity`,e)}stroke(e){return this.attr(`stroke`,e)}strokeWidth(e){return this.attr(`stroke-width`,e)}strokeLinejoin(e){return this.attr(`stroke-linejoin`,e)}strokeLinecap(e){return this.attr(`stroke-linecap`,e)}strokeMiterlimit(e){return this.attr(`stroke-miterlimit`,e.toString())}strokeOpacity(e){return this.attr(`stroke-opacity`,e)}strokeDasharray(e){return this.attr(`stroke-dasharray`,e)}strokeDashoffset(e){return this.attr(`stroke-dashoffset`,e)}opacity(e){return this.attr(`opacity`,e)}transform(e){return this.attr(`transform`,e)}translate(e,t){return this.attr(`transform`,`translate(${e} ${t})`)}translateX(e){return this.attr(`transform`,`translate(${e} 0)`)}translateY(e){return this.attr(`transform`,`translate(0 ${e})`)}rotate(e,t,n){let r=t!==void 0&&n!==void 0?`rotate(${e} ${t} ${n})`:`rotate(${e})`;return this.attr(`transform`,r)}scale(e){return this.attr(`transform`,`scale(${e})`)}scaleX(e){return this.attr(`transform`,`scale(${e} 1)`)}scaleY(e){return this.attr(`transform`,`scale(1 ${e})`)}skewX(e){return this.attr(`transform`,`skewX(${e})`)}skewY(e){return this.attr(`transform`,`skewY(${e})`)}vectorEffect(e){return this.attr(`vector-effect`,e)}},_=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function ee(){return new _}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{constructor(e){super(),this._body=e}_body;get dom(){return this._body}};function S(e){return new x(e??document.body)}var C=class extends u{constructor(e){super(),this._head=e}_head;get dom(){return this._head}title(e){let t=this.dom.querySelector(`title`);return t||(t=this.dom.ownerDocument.createElement(`title`),this.dom.appendChild(t)),t.textContent=e,this}charset(e){let t=this.dom.querySelector(`meta[charset]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),this.dom.insertBefore(t,this.dom.firstChild)),t.setAttribute(`charset`,e),this}viewport(e){let t=this.dom.querySelector(`meta[name="viewport"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`viewport`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}httpEquiv(e,t){let n=this.dom.querySelector(`meta[http-equiv="${e}"]`);return n||(n=this.dom.ownerDocument.createElement(`meta`),n.setAttribute(`http-equiv`,e),this.dom.appendChild(n)),n.setAttribute(`content`,t),this}csp(e){let t=Object.entries(e).map(([e,t])=>`${e} ${t}`).join(`; `);return this.httpEquiv(`Content-Security-Policy`,t)}description(e){let t=this.dom.querySelector(`meta[name="description"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`description`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}keywords(e){let t=this.dom.querySelector(`meta[name="keywords"]`);return t||(t=this.dom.ownerDocument.createElement(`meta`),t.setAttribute(`name`,`keywords`),this.dom.appendChild(t)),t.setAttribute(`content`,e),this}link(e,t,n={}){let r=this.dom.querySelector(`link[rel="${e}"]`);r||(r=this.dom.ownerDocument.createElement(`link`),r.setAttribute(`rel`,e),this.dom.appendChild(r)),r.setAttribute(`href`,t);for(let[e,t]of Object.entries(n))r.setAttribute(e,t);return this}};function w(e){return new C(e??document.head)}var T=class{constructor(e=window.document){this._document=e}_document;get dom(){return this._document}getBody(){return new x(this._document.body)}getHead(){return new C(this._document.head)}on(e,t,n){return this._document.addEventListener(e,t,n),this}off(e,t,n){return this._document.removeEventListener(e,t,n),this}dispatch(e){return this._document.dispatchEvent(e),this}query(e){let t=this._document.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}};function E(){return new T}var D=class{constructor(e=window){this._window=e}_window;get dom(){return this._window}getDocument(){return new T(this._window.document)}on(e,t,n){return this._window.addEventListener(e,t,n),this}off(e,t,n){return this._window.removeEventListener(e,t,n),this}dispatch(e){return this._window.dispatchEvent(e),this}postMessage(e,t){return this._window.postMessage(e,t),this}};function O(e){return new D(e)}var k=class extends d{constructor(){super(`iframe`)}getContentWindow(){let e=this.dom.contentWindow;return e?new D(e):null}getContentDocument(){let e=this.dom.contentDocument;return e?new T(e):null}getBody(){let e=this.getContentDocument();return e?e.getBody():null}getHead(){let e=this.getContentDocument();return e?e.getHead():null}isSameOrigin(){try{return this.dom.contentWindow?.location.href,!0}catch{return!1}}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}size(e,t){return this.width(e).height(t)}sandbox(e){let t=e?.join(` `);return this.attr(`sandbox`,t)}referrerPolicy(e){return this.dom.referrerPolicy=e,this}loading(e){return this.dom.loading=e,this}reloadViaSrc(){return this.dom.src&&(this.dom.src=this.dom.src),this}reloadViaLocation(){return this.dom.contentWindow?.location.reload(),this}reload(){try{this.dom.contentWindow?.location.reload()}catch{this.dom.src&&(this.dom.src=this.dom.src)}return this}queryInside(e){let t=this.getContentDocument()?.dom.querySelector(e);return t?new d(t.tagName.toLowerCase(),t):null}postMessage(e,t){let n=this.getContentWindow();return n&&n.postMessage(e,t),this}};function A(){return new k}var j=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 te(){return new j}var M=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`)}},N=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}},P=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}},F=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)}getRatio(){let e=this.getMin(),t=this.getMax(),n=this.getValue(),r=t-e;return r>0?Math.max(0,Math.min(1,(n-e)/r)):0}getPercent(){return this.getRatio()*100}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)}ratio(e){let t=this.getMin(),n=this.getMax()-t,r=Math.max(0,Math.min(1,e));return this.value(t+r*n)}percent(e){return this.ratio(e/100)}trackFillColors(e,t){let n=this.getPercent();return this.linearGradient(`to right`,`${e} ${n}%`,`${t} ${n}%`)}},I=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 ne(e){switch(e){case`text`:return new I;case`number`:return new P;case`checkbox`:return new M;case`color`:return new N;case`range`:return new F}}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 re(){return new R}var z=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 B(){return new z}var V=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 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 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)return new e(n);{let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}}static DEFAULT_STYLE_ID=`__neptune-style__`},W=class extends g{constructor(){super(`circle`)}cx(e){return this.attr(`cx`,e.toString())}cy(e){return this.attr(`cy`,e.toString())}r(e){return this.attr(`r`,e.toString())}};function G(){return new W}var K=class extends g{constructor(){super(`svg`)}width(e){return this.attr(`width`,e.toString())}height(e){return this.attr(`height`,e.toString())}viewBox(e,t,n,r){return this.attr(`viewBox`,`${e} ${t} ${n} ${r}`)}};function q(){return new K}var J=class extends g{constructor(){super(`g`)}};function Y(){return new J}var X=class extends g{constructor(){super(`path`)}d(e){let t=typeof e==`string`?e:e.toString();return this.attr(`d`,t)}};function ie(){return new X}var Z=class{_segments=[];m(e,t,n=!1){let r=n?`m`:`M`;return this._segments.push(`${r}${e} ${t}`),this}l(e,t,n=!1){let r=n?`l`:`L`;return this._segments.push(`${r}${e} ${t}`),this}h(e,t=!1){let n=t?`h`:`H`;return this._segments.push(`${n}${e}`),this}v(e,t=!1){let n=t?`v`:`V`;return this._segments.push(`${n}${e}`),this}c(e,t,n,r,i,a,o=!1){let s=o?`c`:`C`;return this._segments.push(`${s}${e} ${t}, ${n} ${r}, ${i} ${a}`),this}q(e,t,n,r,i=!1){let a=i?`q`:`Q`;return this._segments.push(`${a}${e} ${t}, ${n} ${r}`),this}a(e,t,n,r,i,a,o,s=!1){let c=s?`a`:`A`;return this._segments.push(`${c}${e} ${t} ${n} ${r?1:0} ${i?1:0} ${a} ${o}`),this}t(e,t,n=!1){let r=n?`t`:`T`;return this._segments.push(`${r}${e} ${t}`),this}s(e,t,n,r,i=!1){let a=i?`s`:`S`;return this._segments.push(`${a}${e} ${t}, ${n} ${r}`),this}close(){return this._segments.push(`Z`),this}rect(e,t,n,r,i=!1){return i?this.m(e,t,!0).h(n,!0).v(r,!0).h(-n,!0).close():this.m(e,t).h(e+n).v(t+r).h(e).close()}roundedRect(e,t,n,r,i){let a=e+n,o=t+r;return this.m(e+i,t).h(a-i).a(i,i,0,!1,!0,a,t+i).v(o-i).a(i,i,0,!1,!0,a-i,o).h(e+i).a(i,i,0,!1,!0,e,o-i).v(t+i).a(i,i,0,!1,!0,e+i,t).close()}circle(e,t,n,r=!1){let i=e+n,a=t;return r?this.m(i,a,!0).a(n,n,0,!0,!1,-2*n,0,!0).a(n,n,0,!0,!1,2*n,0,!0):this.m(i,a).a(n,n,0,!0,!1,e-n,t).a(n,n,0,!0,!1,i,a)}ellipse(e,t,n,r,i=!1){let a=e+n,o=t;return i?this.m(a,o,!0).a(n,r,0,!0,!1,-2*n,0,!0).a(n,r,0,!0,!1,2*n,0,!0):this.m(a,o).a(n,r,0,!0,!1,e-n,t).a(n,r,0,!0,!1,a,o)}star(e,t,n,r,i=.5,a=!1){if(n<2)return this;let o=Math.PI/n,s=r*i;for(let i=0;i<n*2;i++){let n=i%2==0?r:s,c=i*o-Math.PI/2,l=e+n*Math.cos(c),u=t+n*Math.sin(c);if(a){let e=n*Math.cos(c),t=n*Math.sin(c);i===0?this.m(e,t,!0):this.l(e,t,!0)}else i===0?this.m(l,u):this.l(l,u)}return this.close()}polygon(e,t=!1){if(e.length<2)return this;let[n,r]=e[0];this.m(n,r,t);for(let n=1,r=e.length;n<r;n++){let[r,i]=e[n];this.l(r,i,t)}return this.close()}polyline(e,t=!1){if(e.length<2)return this;let[n,r]=e[0];this.m(n,r,t);for(let n=1,r=e.length;n<r;n++){let[r,i]=e[n];this.l(r,i,t)}return this}spline(e,t=.5,n=!1){let r=e.length;if(r<2)return this;let[i,a]=e[0];this.m(i,a,n);for(let o=0;o<r-1;o++){let[r,s]=e[o-1]??e[o],[c,l]=e[o],[u,d]=e[o+1],[f,p]=e[o+2]??e[o+1],m=(u-r)*t/6,h=(d-s)*t/6,g=(f-c)*t/6,_=(p-l)*t/6;if(n){let e=c+m-i,t=l+h-a,n=u-g-i,r=d-_-a,o=u-i,s=d-a;this.c(e,t,n,r,o,s,!0)}else this.c(c+m,l+h,u-g,d-_,u,d);[i,a]=[u,d]}return this}pathFrom(e,t=!1,n=!1){if(e.length<2)return this;let[r,i]=e[0];this.m(r,i,n);for(let t=1,r=e.length;t<r;t++){let[r,i]=e[t];this.l(r,i,n)}return t&&this.close(),this}polyBezier(e,t=!1){if(e.length<4||(e.length-1)%3!=0)return this;let[n,r]=e[0];this.m(n,r,t);for(let i=1;i<e.length;i+=3){let[a,o]=e[i],[s,c]=e[i+1],[l,u]=e[i+2];if(t){let e=a-n,t=o-r,i=s-n,d=c-r,f=l-n,p=u-r;this.c(e,t,i,d,f,p,!0)}else this.c(a,o,s,c,l,u);[n,r]=[l,u]}return this}polyQuadratic(e,t=!1){if(e.length<3||(e.length-1)%2!=0)return this;let[n,r]=e[0];this.m(n,r,t);for(let i=1;i<e.length;i+=2){let[a,o]=e[i],[s,c]=e[i+1];if(t){let e=a-n,t=o-r,i=s-n,l=c-r;this.q(e,t,i,l,!0)}else this.q(a,o,s,c);[n,r]=[s,c]}return this}polyArc(e,t=!1){if(e.length<2)return this;let[n,r]=e[0];this.m(n,r,t);for(let i=1,a=e.length;i<a;i++){let[a,o,s,c,l,u,d]=e[i];if(t){let e=u-n,t=d-r;this.a(a,o,s,c,l,e,t,!0)}else this.a(a,o,s,c,l,u,d);[n,r]=[u,d]}return this}toString(){return this._segments.join(` `)}};function ae(){return new Z}var Q=class extends g{constructor(){super(`rect`)}x(e){return this.attr(`x`,e.toString())}y(e){return this.attr(`y`,e.toString())}width(e){return this.attr(`width`,e.toString())}height(e){return this.attr(`height`,e.toString())}rx(e){return this.attr(`rx`,e.toString())}ry(e){return this.attr(`ry`,e.toString())}};function oe(){return new Q}var $=class extends d{constructor(){super(`textarea`)}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}rows(e){return this.dom.rows=e,this}cols(e){return this.dom.cols=e,this}wrap(e){return this.dom.wrap=e,this}maxLength(e){return this.dom.maxLength=e,this}};function se(){return new $}export{f as $,h as $a,S as $body,ee as $btn,y as $canvas,G as $circle,ae as $d,E as $document,Y as $group,w as $head,A as $iframe,te as $img,ne as $input,re as $option,ie as $path,B as $progress,p as $query,oe as $rect,H as $select,q as $svg,se as $textarea,O as $window,m as AnchorElement,u as BaseDom,e as BaseStyle,g as BaseSvgElement,_ as Button,v as Canvas,b as CssRule,x as DomBody,T as DomDocument,d as DomElement,C as DomHead,D as DomWindow,k as IFrame,j as ImageElement,M as InputCheckbox,N as InputColor,P as InputNumber,F as InputRange,I as InputText,L as MediaRule,R as OptionElement,z as ProgressElement,r as SVG_TAGS,V as SelectElement,U as StyleSheet,W as SvgCircle,K as SvgElement,J as SvgGroup,X as SvgPath,Z as SvgPathData,Q as SvgRect,i as TAG_ALIAS,$ as TextArea,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.11",
+  "version": "0.0.13",
   "description": "Helper classes and functions for the DOM.",
   "keywords": [
     "dom"