ranui 0.2.0-alpha.7 → 0.2.1-alpha.1

package/dist/{button-Be_uHDZG.js → button-BfYw0fes.js}

@@ -1,6 +1,6 @@
 import { _ as i, a as b, n as l, o as d, s as a, t as h } from "./utils-DBfrRFoE.js";
 import { t as v } from "./events-C59wGdni.js";
-import { _ as u, i as s, p as f } from "./factory-BdsO0dEW.js";
+import { _ as u, i as s, p as f } from "./factory-DCrO37si.js";
 import { a as g, n as p } from "./ssr-DSGwPtEd.js";
 var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, opacity var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));background:var(--ran-btn-contain-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-contain-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #006bff));color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-primary-active, #005ff2));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-primary-active, #005ff2))}:host([type="contrast"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-contrast-bg, #171717));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-contrast-bg, #171717));color:var(--ran-btn-content-color, var(--ran-color-contrast-text, #fff))}:host([type="contrast"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, var(--ran-color-contrast-text, #fff) 10%, transparent 10.01%))}:host([type="contrast"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-contrast-bg-active, #4d4d4d));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-contrast-bg-active, #4d4d4d))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-border-hover, #c9c9c9));color:var(--ran-btn-content-hover-color, var(--ran-color-text, #171717))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-primary-hover, #0059ec));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary-hover, #0059ec));color:var(--ran-btn-content-hover-color, #fff)}:host([type="contrast"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-contrast-bg-hover, #383838));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-contrast-bg-hover, #383838));color:var(--ran-btn-content-hover-color, var(--ran-color-contrast-text, #fff))}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,var(--ran-gray-alpha-400, #00000014) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-image-source:var(--ran-btn-content-border-image-source, none);border-image-slice:var(--ran-btn-content-border-image-slice, 8);border-image-width:var(--ran-btn-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-content-border-color, var(--ran-color-border, #eaeaea));color:var(--ran-btn-content-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);font-family:var(--ran-btn-content-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, 2px)}', y = class extends p {
   _btn;

package/dist/button.js

@@ -1,4 +1,4 @@
-import { t as o } from "./button-Be_uHDZG.js";
+import { t as o } from "./button-BfYw0fes.js";
 export {
   o as Button,
   o as default

package/dist/{card-BVvXX6KM.js → card-CqJa4Q_v.js}

@@ -1,5 +1,5 @@
 import { a as n, i as a, n as d, r as i, t as c } from "./utils-DBfrRFoE.js";
-import { i as t, p as o } from "./factory-BdsO0dEW.js";
+import { i as t, p as o } from "./factory-DCrO37si.js";
 import { a as l, n as h } from "./ssr-DSGwPtEd.js";
 var p = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}:host([hoverable]:hover) .ran-card{border-color:var(--ran-card-hover-border-color, var(--ran-color-border-hover, #c9c9c9));box-shadow:var(--ran-card-hover-shadow, var(--ran-shadow-elevated, 0 1px 2px rgba(0, 0, 0, .04)))}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, 14px);height:100%;min-width:0;padding:var(--ran-card-padding, 16px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-card-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, 16px);font-weight:var(--ran-card-title-font-weight, 600);line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:4px 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, 14px);line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", b = class extends h {
   _shadowDom;

package/dist/card.js

@@ -1,4 +1,4 @@
-import { t as r } from "./card-BVvXX6KM.js";
+import { t as r } from "./card-CqJa4Q_v.js";
 export {
   r as Card,
   r as default

package/dist/{checkbox-BtoX9X2Z.js → checkbox-CThC9-vy.js}

@@ -1,6 +1,6 @@
 import { a as o, c as i, f as s, i as h, n as b, o as t, r as d, s as l, t as k } from "./utils-DBfrRFoE.js";
 import { t as x } from "./events-C59wGdni.js";
-import { i as a, m as c, p as u, s as p } from "./factory-BdsO0dEW.js";
+import { i as a, m as c, p as u, s as p } from "./factory-DCrO37si.js";
 import { a as v, n as f } from "./ssr-DSGwPtEd.js";
 var g = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, inline-flex);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2));border:1px solid var(--ran-color-border, #eaeaea)}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2))}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--ran-checkbox-label-gap, 8px);cursor:pointer;line-height:1}.ran-checkbox-label{color:var(--ran-checkbox-label-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-label-font-size, 14px);font-family:var(--ran-checkbox-label-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-checkbox-label-line-height, 1.5);-webkit-user-select:none;user-select:none}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, var(--ran-color-bg-elevated, #fff));border:var(--ran-checkbox-inner-border, 1px solid var(--ran-color-border, #eaeaea));border-image-source:var(--ran-checkbox-inner-border-image-source, none);border-image-slice:var(--ran-checkbox-inner-border-image-slice, 8);border-image-width:var(--ran-checkbox-inner-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, transform .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-checkbox-checked-background-image, none);border:var(--ran-checkbox-checked-border, 1px solid var(--ran-color-primary, #006bff))}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}.ran-checkbox:focus-within .ran-checkbox-inner{box-shadow:var(--ran-checkbox-focus-box-shadow, 0 0 0 2px var(--ran-blue-400, #cae7ff));border-color:var(--ran-checkbox-focus-border-color, var(--ran-color-primary, #006bff))}', m = class extends f {
   static formAssociated = !0;

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { t } from "./checkbox-BtoX9X2Z.js";
+import { t } from "./checkbox-CThC9-vy.js";
 export {
   t as Checkbox,
   t as default

package/dist/{colorpicker-Dukms7ET.js → colorpicker-XNxDRcQ-.js}

@@ -1,11 +1,10 @@
 import { a as v, h as l, i as x, n as m, r as P, s as h, t as y } from "./utils-DBfrRFoE.js";
 import { t as w } from "./events-C59wGdni.js";
-import { i as S, r as p } from "./signal-CSSZxlK5.js";
-import { _ as u, h as A, i as n } from "./factory-BdsO0dEW.js";
+import { C as p, O as S, _ as u, h as A, i as n } from "./factory-DCrO37si.js";
 import { a as $, n as _ } from "./ssr-DSGwPtEd.js";
-import "./input-BMMM60e6.js";
-import "./select-aAaWoveE.js";
-import "./popover-DRUQjdPs.js";
+import "./input-RNqdEHPf.js";
+import "./select-Dn26ajJZ.js";
+import "./popover-CvYIVgUS.js";
 var D = (e) => {
   const { r: t, g: i, b: r } = I(e);
   return f(t, i, r);
@@ -300,7 +299,7 @@ var D = (e) => {
     this.colorPickerInner = n().class("ran-color-picker-inner").children(A().text(H).build(), o).build(), this.popoverContent.appendChild(this.colorPickerInner), this.setupEffects(), this.syncValueInput();
   };
   connectedCallback() {
-    this.handlerExternalCss(), this.setAttribute("class", "ran-colorpicker"), this._events.on(this, "click", this.blockWhenDisabled, { capture: !0 }), this._events.on(this, "keydown", this.blockWhenDisabled, { capture: !0 }), this._events.on(this.popoverBlock, "click", this.openColorPicker), this._events.on(this.colorpicker, "keydown", this.onSwatchKeydown), this._events.on(document, "mousemove", this.onPointerMove), this._events.on(document, "mouseup", this.onPointerUp), this.syncDisabledState(), this.value && this.updateColorValue(this.value);
+    this.handlerExternalCss(), this.setAttribute("class", "ran-colorpicker"), this._events.on(this, "click", this.blockWhenDisabled, { capture: !0 }), this._events.on(this, "keydown", this.blockWhenDisabled, { capture: !0 }), this._events.on(this.popoverBlock, "click", this.openColorPicker), this._events.on(this.colorpicker, "keydown", this.onSwatchKeydown), this._events.on(document, "mousemove", this.onPointerMove), this._events.on(document, "mouseup", this.onPointerUp), this.syncDisabledState(), this.value && this.updateColorValue(this.value), this.colorPickerInner && this._effectDisposers.length === 0 && this.setupEffects();
   }
   disconnectedCallback() {
     this._events.abort(), this.disposeEffects();

package/dist/colorpicker.js

@@ -1,4 +1,4 @@
-import { t as r } from "./colorpicker-Dukms7ET.js";
+import { t as r } from "./colorpicker-XNxDRcQ-.js";
 export {
   r as ColorPicker,
   r as default

package/dist/components/colorpicker/index.d.ts

@@ -76,13 +76,13 @@ export declare class ColorPicker extends RanElement {
     emitChange: () => void;
     palettePointerDown: (e: MouseEvent) => void;
     updatePaletteFromEvent: (e: MouseEvent) => void;
-    sliderPointerDown: (kind: "hue" | "alpha") => (e: MouseEvent) => void;
-    updateSliderFromEvent: (kind: "hue" | "alpha", e: MouseEvent) => void;
+    sliderPointerDown: (kind: 'hue' | 'alpha') => (e: MouseEvent) => void;
+    updateSliderFromEvent: (kind: 'hue' | 'alpha', e: MouseEvent) => void;
     onPointerMove: (e: Event) => void;
     /** Make a slider a focusable, described `role="slider"`; valuenow is kept live in setupEffects. */
     initSliderA11y: (el: HTMLElement, label: string, max: number) => void;
     /** Arrow keys adjust the hue/alpha slider (Shift = coarse step, Home/End = ends). */
-    sliderKeydown: (kind: "hue" | "alpha") => (e: KeyboardEvent) => void;
+    sliderKeydown: (kind: 'hue' | 'alpha') => (e: KeyboardEvent) => void;
     onPointerUp: () => void;
     /** Open the picker from the keyboard: Enter/Space act like a click on the swatch. */
     onSwatchKeydown: (e: KeyboardEvent) => void;

package/dist/components/icon/builtin.d.ts

@@ -0,0 +1,9 @@
+/** Registered names available after {@link registerBuiltinIcons} runs. */
+export declare const BUILTIN_ICON_NAMES: string[];
+/**
+ * Register every icon ranui ships (see `RAN_ICON_NAMES`) so `<r-icon name="…">`
+ * renders it. Idempotent; call once, in the browser, before the first `<r-icon>`
+ * connects. Import cost: the bundled SVG strings (~15 KB). To register only a
+ * subset, import the specific SVGs yourself and call `registerIcons` instead.
+ */
+export declare const registerBuiltinIcons: () => void;

package/dist/components/icon/index.d.ts

@@ -4,6 +4,14 @@ import { EventManager } from '@/utils/builder';
 export declare const registerIcon: (name: string, source: unknown) => void;
 /** Batch register icons. */
 export declare const registerIcons: (icons: Record<string, unknown>) => void;
+/**
+ * Names of the SVGs ranui ships in `assets/icons/`. This tuple is the source of
+ * truth for {@link RanIconName}; a unit test asserts it stays in sync with the
+ * asset folder, so adding/removing an SVG without updating this list fails CI.
+ */
+export declare const RAN_ICON_NAMES: readonly ['add-user', 'arrow-down', 'book', 'check-circle', 'check-circle-fill', 'close', 'close-circle', 'close-circle-fill', 'drop', 'eye', 'eye-close', 'github', 'globe', 'home', 'info-circle', 'info-circle-fill', 'issue', 'loading', 'loading-scene', 'lock', 'menu', 'message', 'more', 'plus', 'power-off', 'preview', 'search', 'setting', 'sort', 'team', 'unlock', 'user', 'warning-circle', 'warning-circle-fill', 'without-content'];
+/** A name from ranui's bundled icon set (see {@link registerBuiltinIcons}). */
+export type RanIconName = (typeof RAN_ICON_NAMES)[number];
 export declare class Icon extends RanElement {
     private readonly isDev;
     _events: EventManager;

package/dist/components/route/index.d.ts

@@ -5,19 +5,25 @@ export declare class Route extends RanElement {
     _events: EventManager;
     _shadowDom: ShadowRoot;
     _params: Record<string, string>;
+    private _mounted;
+    private _module;
+    private _disposePage;
+    private _pageHost;
+    private _mountToken;
     constructor();
     get path(): string;
     set path(v: string);
     get exact(): boolean;
+    /** Module specifier for lazy, code-split, mount/unmount page rendering. */
+    get src(): string;
+    set src(v: string);
     get params(): Record<string, string>;
     get sheet(): string;
     set sheet(v: string);
     handlerExternalCss: () => void;
-    _matchPath(currentPath: string): {
-        matched: boolean;
-        params: Record<string, string>;
-    };
     _update(currentPath: string): void;
+    private _mount;
+    private _unmount;
     _preSerialize(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/router/index.d.ts

@@ -1,11 +1,14 @@
 import { EventManager } from '@/utils/builder';
 import { RanElement } from '@/utils/index';
+import { type RouterCore } from '@/utils/router';
 export declare class Router extends RanElement {
     static get observedAttributes(): string[];
     _events: EventManager;
     _shadowDom: ShadowRoot;
     _slot: HTMLSlotElement;
     _currentPath: string;
+    /** Bound RouterCore (when createRouter() was used) — navigation delegates to it. */
+    _core: RouterCore | null;
     constructor();
     get mode(): 'history' | 'hash';
     get base(): string;

package/dist/{dropdown-BYS1Trdu.js → dropdown-CCvsambb.js}

@@ -1,5 +1,5 @@
 import { a as w, c as i, f as d, i as o, n as p, r as a, t as h } from "./utils-DBfrRFoE.js";
-import { i as n, p as l } from "./factory-BdsO0dEW.js";
+import { i as n, p as l } from "./factory-DCrO37si.js";
 import { a as c, n as f } from "./ssr-DSGwPtEd.js";
 var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}@keyframes ranui-dropdown-left-in{0%{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}to{transform:scaleX(1);transform-origin:100% 0%;opacity:1}}@keyframes ranui-dropdown-left-out{0%{transform:scaleX(1);transform-origin:100% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}}@keyframes ranui-dropdown-right-in{0%{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleX(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-right-out{0%{transform:scaleX(1);transform-origin:0% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-down-in .1s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-down-out .1s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-up-in .1s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-up-out .1s;animation-fill-mode:forwards}.ran-dropdown-left-in{animation:ranui-dropdown-left-in .1s;animation-fill-mode:forwards}.ran-dropdown-left-out{animation:ranui-dropdown-left-out .1s;animation-fill-mode:forwards}.ran-dropdown-right-in{animation:ranui-dropdown-right-in .1s;animation-fill-mode:forwards}.ran-dropdown-right-out{animation:ranui-dropdown-right-out .1s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:var(--ran-dropdown-host-z-index, var(--ran-z-dropdown, 1100))}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 0);color:var(--ran-dropdown-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, var(--ran-color-bg-elevated, #ffffff));border-radius:var(--ran-dropdown-border-radius, var(--ran-radius-md, 12px));outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, var(--ran-shadow-menu, var(--ran-shadow-elevated, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05))));cursor:var(--ran-dropdown-cursor, auto);width:var(--ran-dropdown-width, 100%);height:var(--ran-dropdown-height, 100%);min-height:var(--ran-dropdown-min-height, 100%);min-width:var(--ran-dropdown-min-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, block);width:var(--ran-dropdown-container-width, 100%);height:var(--ran-dropdown-container-height, 100%);box-sizing:var(--ran-dropdown-container-box-sizing, border-box)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(calc(-1 * var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px)) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(var(--ran-dropdown-arrow-overlap, 2px)) rotate(180deg);top:max(0px,calc(var(--ran-dropdown-min-height, 100%) - calc(var(--ran-dropdown-arrow-width, 16px) / 4)))}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-overlap, 2px))) rotate(270deg);top:max(0px,calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - var(--ran-dropdown-arrow-width, 16px)))}.ranui-dropdown-container .right{left:100%;transform:translate(0) translateY(calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(90deg);top:0}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);box-sizing:var(--ran-dropdown-arrow-box-sizing, border-box);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px));overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, var(--ran-color-bg-elevated, #fff));position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-before-height, calc(var(--ran-dropdown-arrow-width, 16px) / 2));clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, var(--ran-color-bg-elevated, #fff))}', e = 300, x = /* @__PURE__ */ (function(r) {
   return r.TOP = "top", r.BOTTOM = "bottom", r.LEFT = "left", r.RIGHT = "right", r;

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-import { n as a, t as r } from "./dropdown-BYS1Trdu.js";
+import { n as a, t as r } from "./dropdown-CCvsambb.js";
 export {
   r as ARROW_TYPE,
   a as Dropdown,

package/dist/factory-DCrO37si.js

@@ -0,0 +1,334 @@
+import { c as u, n as H } from "./mocks-CMGoftIc.js";
+var f = 0, C = 1, d = 2, o = null, i = null, c = 0, h = /* @__PURE__ */ new Set(), v = !1;
+function T(e, t) {
+  const r = t?.equals ?? Object.is, s = {
+    value: e,
+    observers: /* @__PURE__ */ new Set()
+  };
+  return [() => (m(s), s.value), (p) => {
+    const w = typeof p == "function" ? p(s.value) : p;
+    if (!r(s.value, w)) {
+      s.value = w;
+      for (const z of s.observers) b(z, d);
+      c === 0 && O();
+    }
+  }];
+}
+function j(e, t) {
+  const r = g(e, !1, t?.equals);
+  return E(r), () => (r.disposed || (y(r), m(r)), r.value);
+}
+function k(e) {
+  const t = g(e, !0);
+  return E(t), A(t), () => S(t);
+}
+function I(e) {
+  c++;
+  try {
+    e();
+  } finally {
+    c--, c === 0 && O();
+  }
+}
+function R(e) {
+  const t = o;
+  o = null;
+  try {
+    return e();
+  } finally {
+    o = t;
+  }
+}
+function M(e) {
+  const t = {
+    owned: [],
+    cleanups: [],
+    owner: i
+  }, r = i, s = o;
+  i = t, o = null;
+  try {
+    return e(() => q(t));
+  } finally {
+    i = r, o = s;
+  }
+}
+function $(e) {
+  i && i.cleanups.push(e);
+}
+function P() {
+  return i;
+}
+function V(e, t) {
+  const r = i, s = o;
+  i = e, o = null;
+  try {
+    return t();
+  } finally {
+    i = r, o = s;
+  }
+}
+function g(e, t, r) {
+  return {
+    fn: e,
+    sources: /* @__PURE__ */ new Set(),
+    isEffect: t,
+    running: !1,
+    disposed: !1,
+    state: d,
+    observers: /* @__PURE__ */ new Set(),
+    value: void 0,
+    equals: r ?? Object.is,
+    owned: [],
+    cleanups: [],
+    owner: i
+  };
+}
+function E(e) {
+  i && i.owned.push(e);
+}
+function m(e) {
+  o && (o.sources.add(e), e.observers.add(o));
+}
+function b(e, t) {
+  if (e.disposed || e.state >= t) return;
+  const r = e.state === f;
+  if (e.state = t, e.isEffect) h.add(e);
+  else if (r) for (const s of e.observers) b(s, C);
+}
+function O() {
+  if (!(c > 0 || v)) {
+    v = !0;
+    try {
+      for (; h.size > 0; ) {
+        const e = [...h];
+        h.clear();
+        for (const t of e) t.disposed || y(t);
+      }
+    } finally {
+      v = !1;
+    }
+  }
+}
+function y(e) {
+  if (!(e.disposed || e.state === f)) {
+    if (e.state === C)
+      for (const t of e.sources) "fn" in t && y(t);
+    e.state === d && A(e), e.state = f;
+  }
+}
+function A(e) {
+  if (e.running) throw new Error("ranui reactivity: cyclic dependency detected (a computation triggered itself).");
+  L(e);
+  const t = o, r = i;
+  o = e, i = e, e.running = !0, e.state = f;
+  try {
+    const s = e.fn();
+    if (e.isEffect)
+      typeof s == "function" && e.cleanups.push(s);
+    else {
+      const n = e.value;
+      if (e.value = s, e.observers.size > 0 && !e.equals(n, s)) for (const l of e.observers) b(l, d);
+    }
+  } finally {
+    e.running = !1, o = t, i = r;
+  }
+}
+function L(e) {
+  for (const t of e.owned) S(t);
+  e.owned.length = 0;
+  for (const t of e.cleanups) t();
+  e.cleanups.length = 0;
+  for (const t of e.sources) t.observers.delete(e);
+  e.sources.clear();
+}
+function S(e) {
+  e.disposed || (e.disposed = !0, L(e), e.observers.clear());
+}
+function q(e) {
+  for (const t of e.owned) S(t);
+  e.owned.length = 0;
+  for (const t of e.cleanups) t();
+  e.cleanups.length = 0;
+}
+var W = () => ({ current: null }), B = class N {
+  el;
+  constructor(t) {
+    this.el = u ? new H(t) : document.createElement(t);
+  }
+  id(t) {
+    return this.el.setAttribute("id", t), this;
+  }
+  bind(t, r) {
+    typeof t == "function" ? k(() => r(t())) : r(t);
+  }
+  class(t) {
+    return this.bind(t, (r) => {
+      u ? this.el.attributes.set("class", r) : this.el.className = r;
+    }), this;
+  }
+  addClass(...t) {
+    return t.forEach((r) => this.el.classList.add(r)), this;
+  }
+  removeClass(...t) {
+    return t.forEach((r) => this.el.classList.remove(r)), this;
+  }
+  attr(t, r) {
+    return this.bind(r, (s) => this.el.setAttribute(t, s)), this;
+  }
+  attrs(t) {
+    return Object.entries(t).forEach(([r, s]) => {
+      s != null && this.el.setAttribute(r, String(s));
+    }), this;
+  }
+  boolAttr(t, r, s = "") {
+    return this.bind(r, (n) => {
+      n ? this.el.setAttribute(t, s) : this.el.removeAttribute(t);
+    }), this;
+  }
+  part(t) {
+    return this.attr("part", t);
+  }
+  data(t, r) {
+    return this.attr(`data-${t}`, r);
+  }
+  style(t, r) {
+    return typeof t == "string" ? this.bind(r ?? "", (s) => this.el.style.setProperty(t, s)) : Object.entries(t).forEach(([s, n]) => this.el.style.setProperty(s, n)), this;
+  }
+  cssVar(t, r) {
+    const s = t.startsWith("--") ? t : `--${t}`;
+    return this.style(s, r);
+  }
+  aria(t, r) {
+    return this.attr(`aria-${t}`, r);
+  }
+  role(t) {
+    return this.attr("role", t);
+  }
+  tabIndex(t) {
+    return this.attr("tabindex", String(t));
+  }
+  label(t) {
+    return this.aria("label", t);
+  }
+  labelledBy(t) {
+    return this.aria("labelledby", t);
+  }
+  describedBy(t) {
+    return this.aria("describedby", t);
+  }
+  ariaHidden(t = !0) {
+    return this.aria("hidden", String(t));
+  }
+  on(t, r, s) {
+    return this.el.addEventListener(t, r, s), this;
+  }
+  listen(t, r, s, n) {
+    return t.on(this.el, r, s, n), this;
+  }
+  delegate(t, r, s, n, l) {
+    return t.delegate(this.el, r, s, n, l), this;
+  }
+  children(...t) {
+    const r = (s) => s.reduce((n, l) => Array.isArray(l) ? n.concat(r(l)) : n.concat(l), []);
+    return r(t).forEach((s) => {
+      s != null && (s instanceof N ? this.el.appendChild(s.build()) : typeof s == "string" ? u ? this.el.appendChild(s) : this.el.appendChild(document.createTextNode(s)) : this.el.appendChild(s));
+    }), this;
+  }
+  replaceChildren(...t) {
+    if (u) {
+      const r = this.el;
+      r.childrenList = [];
+    } else this.el.replaceChildren();
+    return this.children(...t);
+  }
+  text(t) {
+    return this.bind(t, (r) => {
+      this.el.textContent = r;
+    }), this;
+  }
+  ref(t) {
+    return t.current = this.el, this;
+  }
+  shadow(t = { mode: "closed" }) {
+    const r = this.el.attachShadow(t);
+    return new x(this.el, r, t);
+  }
+  build() {
+    return this.el;
+  }
+  serialize() {
+    if (u) return this.el.serialize();
+    const t = document.createElement("div");
+    return t.appendChild(this.el.cloneNode(!0)), t.innerHTML;
+  }
+}, x = class {
+  root;
+  hostEl;
+  options;
+  constructor(e, t, r) {
+    this.hostEl = e, this.root = t, this.options = r;
+  }
+  children(...e) {
+    const t = (r) => r.reduce((s, n) => Array.isArray(n) ? s.concat(t(n)) : s.concat(n), []);
+    return t(e).forEach((r) => {
+      r != null && (r instanceof B ? this.root.appendChild(r.build()) : typeof r == "string" ? u ? this.root.appendChild(r) : this.root.appendChild(document.createTextNode(r)) : this.root.appendChild(r));
+    }), this;
+  }
+  adoptSheet(...e) {
+    return this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, ...e], this;
+  }
+  css(e) {
+    if (u)
+      return this.root.adoptedStyleSheets.push(e), this;
+    if (typeof CSSStyleSheet < "u") try {
+      const r = new CSSStyleSheet();
+      return r.replaceSync(e), this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, r], this;
+    } catch {
+    }
+    const t = document.createElement("style");
+    return t.textContent = e, this.root.appendChild(t), this;
+  }
+  done() {
+    return {
+      host: this.hostEl,
+      shadow: this.root
+    };
+  }
+  serialize() {
+    return u ? this.root.serialize() : this.root.innerHTML;
+  }
+}, a = (e) => new B(e), F = () => a("div"), K = () => a("span"), U = () => a("slot"), Y = () => a("button"), G = () => a("input"), J = () => a("style"), Q = () => a("label"), X = () => a("ul"), Z = () => a("li"), _ = () => a("section"), tt = () => a("article"), et = () => a("nav"), rt = () => a("header"), st = () => a("footer"), nt = () => a("main"), it = (e = "open", t = !1) => {
+  const r = a("template");
+  return r.attr("shadowrootmode", e), t && r.attr("shadowrootdelegatesfocus", ""), r;
+};
+export {
+  k as C,
+  V as D,
+  $ as E,
+  T as O,
+  j as S,
+  P as T,
+  a as _,
+  st as a,
+  W as b,
+  Q as c,
+  et as d,
+  _ as f,
+  X as g,
+  J as h,
+  F as i,
+  R as k,
+  Z as l,
+  K as m,
+  Y as n,
+  rt as o,
+  U as p,
+  it as r,
+  G as s,
+  tt as t,
+  nt as u,
+  B as v,
+  M as w,
+  I as x,
+  x as y
+};

package/dist/{form-BsB5JhS4.js → form-Ceq3uJzz.js}

@@ -1,5 +1,5 @@
 import { a, i as o, n as i, r as n, t as h } from "./utils-DBfrRFoE.js";
-import { _ as l, p as m } from "./factory-BdsO0dEW.js";
+import { _ as l, p as m } from "./factory-DCrO37si.js";
 import { a as u, n as f } from "./ssr-DSGwPtEd.js";
 var c = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}", d = class extends f {
   _form;

package/dist/form.js

@@ -1,4 +1,4 @@
-import { t as r } from "./form-BsB5JhS4.js";
+import { t as r } from "./form-Ceq3uJzz.js";
 export {
   r as Form,
   r as default