ranui 0.1.10-alpha.9 → 0.2.0-alpha.1

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

@@ -0,0 +1,150 @@
+import { RanElement } from '@/utils/index';
+import '@/components/select/option';
+import '@/components/dropdown';
+import '@/components/select/dropdown-item';
+import '@/components/input';
+import type { Input } from '@/components/input';
+import { EventManager } from '@/utils/builder';
+interface Option {
+    label: string | number;
+    value: string | number;
+    disabled?: boolean;
+}
+export declare class Select extends RanElement {
+    static formAssociated: boolean;
+    _internals?: ElementInternals;
+    _events: EventManager;
+    _searchEvents: EventManager;
+    removeTimeId?: NodeJS.Timeout;
+    _listboxId: string;
+    _activeIndex: number;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    _select: HTMLDivElement;
+    _selection: HTMLDivElement;
+    _search: Input;
+    _icon: HTMLElement;
+    _selectDropdown?: HTMLDivElement;
+    _selectionDropdown?: HTMLElement;
+    _selectDropDownInTimeId?: NodeJS.Timeout;
+    _selectDropDownOutTimeId?: NodeJS.Timeout;
+    _optionList: Option[];
+    _optionLabelMapValue: Map<string, string>;
+    _optionValueMapLabel: Map<string, string>;
+    _activeOption?: HTMLElement;
+    _text: HTMLSpanElement;
+    _selector: HTMLDivElement;
+    onSearch?: (this: HTMLElement, ev: Event) => unknown;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string;
+    set value(value: string);
+    syncFormValue: () => void;
+    get defaultValue(): string;
+    set defaultValue(value: string);
+    get showSearch(): string;
+    set showSearch(value: string);
+    get type(): string;
+    set type(value: string);
+    get placement(): string;
+    set placement(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    get getPopupContainerId(): string;
+    set getPopupContainerId(value: string);
+    get dropdownclass(): string;
+    set dropdownclass(value: string);
+    get trigger(): string;
+    set trigger(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean | string | undefined | null);
+    initAria: () => void;
+    updateAriaExpanded: (isExpanded: boolean) => void;
+    getDropdownOptions: () => HTMLElement[];
+    syncActiveState: () => void;
+    setActiveOptionByIndex: (targetIndex: number) => void;
+    selectOptionElement: (optionElement: HTMLElement | null, shouldDispatch?: boolean) => void;
+    isDropdownOpen: () => boolean;
+    /**
+     * Walk from `from` in the direction of `step` (clamped to the list bounds)
+     * and return the first non-disabled option index, or -1 if none exists.
+     * Keeps keyboard navigation from ever landing on a disabled option.
+     */
+    _nextEnabledIndex: (from: number, step: number) => number;
+    keydownSelect: (e: KeyboardEvent) => void;
+    handlerExternalCss(): void;
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    setSelectDropdownDisplayNone: () => void;
+    /**
+     * @description: 添加 select dropdown
+     * @return {*}
+     */
+    setSelectDropdownDisplayBlock: () => void;
+    placementPosition: () => void;
+    /**
+     * The dropdown is mounted on document.body and positioned once on open, so it
+     * detaches from the trigger when the page (or any scroll container) scrolls —
+     * e.g. a select inside a sticky header. Re-run placement on scroll/resize
+     * while it is open. Capture-phase scroll catches nested scroll containers too.
+     */
+    _repositionBound: boolean;
+    _repositionDropdown: () => void;
+    _attachReposition: () => void;
+    _detachReposition: () => void;
+    /**
+     * @description: 设置下拉框
+     * @return {*}
+     */
+    selectMouseDown: (e: Event) => void;
+    removeDropDownTimeId: (e: Event) => void;
+    /**
+     * @description: 焦点移除的情况，需要移除 select 下拉框
+     * @return {*}
+     */
+    selectBlur: (e: Event) => void;
+    /**
+     * @description: 选中一个选项的情况
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    clickOption: (e: MouseEvent) => void;
+    /**
+     * @description: 初始化创建选项下拉框
+     * @return {*}
+     */
+    createOption: () => void;
+    /**
+     * @description: 移除选项下拉框
+     * @return {*}
+     */
+    removeSelectDropdown: () => void;
+    /**
+     * @description: 当 select 中有 option 元素的时候，给 dropdown 添加元素
+     * @return {*}
+     */
+    addOptionToSlot: () => void;
+    createSelectDropdownContent: (options?: Option[]) => void;
+    setDefaultValue: () => void;
+    changeSearch: (e: Event) => void;
+    clickRemoveSelect: (e: Event) => void;
+    connectedCallback(): void;
+    /**
+     * (Re)wire the search-box listeners to match the current `showSearch` value.
+     * Reactive: abort any previously-registered search listeners first, then
+     * re-register only while `showSearch` is truthy. Safe to call on connect and
+     * on every `showSearch` attribute change.
+     */
+    _applyShowSearch: () => void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Reflect a programmatic `value` change to the closed-state label. Lets
+     * `select.value = 'x'` (or setAttribute('value', 'x')) update the displayed
+     * selection without the consumer having to "nudge" the active option.
+     */
+    syncSelectedFromValue: (value: string) => void;
+}
+export default Select;

package/dist/components/select/option/index.d.ts

@@ -0,0 +1,19 @@
+import { RanElement } from '@/utils/index';
+export declare class Option extends RanElement {
+    _option: HTMLDivElement;
+    _optionContent: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    _slot: HTMLSlotElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string | null;
+    set value(value: string | null);
+    get sheet(): string | null;
+    set sheet(value: string | null);
+    get disabled(): boolean | string | undefined | null;
+    set disabled(value: boolean | string | undefined | null);
+    handlerExternalCss(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Option;

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

@@ -0,0 +1,13 @@
+import { RanElement } from '@/utils/index';
+export declare class Skeleton extends RanElement {
+    _div: HTMLElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Skeleton;

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

@@ -0,0 +1,58 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+export declare class Tabs extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _container: HTMLDivElement;
+    _header: HTMLDivElement;
+    _nav: HTMLDivElement;
+    _line: HTMLDivElement;
+    _content: HTMLDivElement;
+    _wrap: HTMLDivElement;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    _tabsId: number;
+    tabHeaderKeyMapIndex: Record<string, number>;
+    constructor();
+    get align(): string;
+    set align(value: string);
+    get type(): string;
+    set type(value: string);
+    get active(): string | null;
+    set active(value: string | null);
+    get effect(): string | null;
+    set effect(value: string | null);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    initTabHeaderKeyMapIndex: (key: string, index: number) => void;
+    createTabHeader(tabPane: Element, index: number): HTMLElement;
+    initTabLineAlignCenter: () => void;
+    initTabLineAlignEnd: () => void;
+    setTabLine: (key: string) => void;
+    setTabContent: (key: string) => void;
+    clickTabHead: (e: Event) => void;
+    /** Select a tab by key: move the indicator, slide content, update classes + ARIA. */
+    activateKey: (key: string) => void;
+    /** The header's focusable/semantic element — the r-button's inner `_btn`. */
+    tabFocusable: (header: Element) => HTMLElement;
+    tabIdFor: (key: string) => string;
+    panelIdFor: (key: string) => string;
+    /**
+     * Wire the WAI-ARIA tabs relationships: each header becomes role="tab" (on the
+     * button's inner focusable element, so it isn't a nested role="button"), with
+     * aria-selected + a roving tabindex (only the active tab is tabbable); each pane
+     * becomes role="tabpanel" labelled by its tab. Called on slot changes and every
+     * selection change.
+     */
+    syncTabsAria: () => void;
+    /** Roving arrow-key navigation over the tablist, with automatic activation. */
+    onNavKeydown: (e: KeyboardEvent) => void;
+    updateAttribute: (key: string, attribute: string, value?: string | null) => void;
+    initActive: () => void;
+    listenSlotChange: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Tabs;

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

@@ -0,0 +1,33 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+interface ExtendParentNode {
+    updateAttribute: (key: string, attribute: string, value?: string | null) => void;
+}
+export declare class TabPane extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _div: HTMLElement;
+    parent: (ParentNode & ExtendParentNode) | undefined | null;
+    _shadowDom: ShadowRoot;
+    constructor();
+    get label(): string;
+    set label(value: string);
+    get icon(): string | null;
+    set icon(value: string | null);
+    get iconSize(): string | null;
+    set iconSize(value: string | null);
+    get key(): string | null;
+    set key(value: string | null);
+    get disabled(): string | null;
+    set disabled(value: string | null);
+    get effect(): string | null;
+    set effect(value: string | null);
+    get sheet(): string | null;
+    set sheet(value: string | null);
+    handlerExternalCss: () => void;
+    initAttribute: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default TabPane;

package/dist/demo/i18n.d.ts

@@ -0,0 +1,4 @@
+export type Lang = 'en' | 'zh';
+export declare const getLang: () => Lang;
+export declare const setLang: (lang: Lang) => void;
+export declare const applyLanguage: (lang: Lang) => void;

package/dist/demo/index.d.ts

@@ -0,0 +1,3 @@
+import './register-icons';
+import '../style';
+import '../index';

package/dist/demo/register-icons.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dropdown-RqHMRhFE.js

@@ -0,0 +1,76 @@
+import { c as w, d as p, l as o, m as i, s as h, u as a, v as d } from "./utils-D4pPF77E.js";
+import { i as n, p as l } from "./factory-BdsO0dEW.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;
+})({}), v = class extends f {
+  dropdown;
+  _slot;
+  _shadowDom;
+  arrowIcon;
+  container;
+  static get observedAttributes() {
+    return [
+      "transit",
+      "arrow",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = w(this, m);
+    const r = h(this._shadowDom, ".ranui-dropdown-container", () => n().class("ranui-dropdown-container").children(n().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").class("ranui-dropdown").part("dropdown").children(l().class("slot"))).build());
+    this.container = r, this.dropdown = r.querySelector(".ranui-dropdown"), this._slot = r.querySelector(".slot");
+  }
+  get transit() {
+    return o(this, "transit");
+  }
+  set transit(r) {
+    a(this, "transit", r, { removeEmpty: !0 });
+  }
+  get arrow() {
+    return o(this, "arrow");
+  }
+  set arrow(r) {
+    a(this, "arrow", r, { removeEmpty: !0 });
+  }
+  get sheet() {
+    return o(this, "sheet");
+  }
+  set sheet(r) {
+    a(this, "sheet", r);
+  }
+  handlerExternalCss = () => {
+    p(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  handlerTransit = () => {
+    this.transit && this.dropdown && (i(this.dropdown, this.transit), setTimeout(() => {
+      d(this.dropdown, this.transit);
+    }, e));
+  };
+  handlerArrow = () => {
+    const r = (this.arrow || "").trim();
+    if (!r) {
+      this.arrowIcon && this.container.contains(this.arrowIcon) && this.container.removeChild(this.arrowIcon), this.arrowIcon = void 0;
+      return;
+    }
+    !this.arrowIcon && this.container && (this.arrowIcon = n().class("ranui-dropdown-arrow").build(), this.container.appendChild(this.arrowIcon)), this.arrowIcon && (this.arrowIcon.className = `ranui-dropdown-arrow ${r}`);
+  };
+  stopPropagation = (r) => {
+    r.stopPropagation();
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this.handlerTransit(), this.handlerArrow();
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(r, s, t) {
+    r === "transit" && t && (i(this.dropdown, this.transit), setTimeout(() => {
+      d(this.dropdown, this.transit);
+    }, e)), r === "arrow" && this.handlerArrow(), r === "sheet" && s !== t && this.handlerExternalCss();
+  }
+};
+c("r-dropdown", v);
+export {
+  v as n,
+  x as t
+};

package/dist/dropdown.js

@@ -0,0 +1,6 @@
+import { n as a, t as r } from "./dropdown-RqHMRhFE.js";
+export {
+  r as ARROW_TYPE,
+  a as Dropdown,
+  a as default
+};

package/dist/events-C59wGdni.js

@@ -0,0 +1,30 @@
+var o = class {
+  ac;
+  constructor() {
+    this.ac = new AbortController();
+  }
+  get signal() {
+    return this.ac.signal;
+  }
+  on(t, a, s, n) {
+    return t.addEventListener(a, s, {
+      ...n,
+      signal: this.ac.signal
+    }), this;
+  }
+  delegate(t, a, s, n, i) {
+    return t.addEventListener(s, (e) => {
+      const r = e.target?.closest(a);
+      r && t.contains(r) && n(e, r);
+    }, {
+      ...i,
+      signal: this.ac.signal
+    }), this;
+  }
+  abort() {
+    this.ac.abort(), this.ac = new AbortController();
+  }
+};
+export {
+  o as t
+};

package/dist/factory-BdsO0dEW.js

@@ -0,0 +1,165 @@
+import { c as l, n as d } from "./mocks-CMGoftIc.js";
+var p = () => ({ current: null }), o = class h {
+  el;
+  constructor(t) {
+    this.el = l ? new d(t) : document.createElement(t);
+  }
+  id(t) {
+    return this.el.setAttribute("id", t), this;
+  }
+  class(t) {
+    return l ? this.el.attributes.set("class", t) : this.el.className = t, this;
+  }
+  addClass(...t) {
+    return t.forEach((e) => this.el.classList.add(e)), this;
+  }
+  removeClass(...t) {
+    return t.forEach((e) => this.el.classList.remove(e)), this;
+  }
+  attr(t, e) {
+    return this.el.setAttribute(t, e), this;
+  }
+  attrs(t) {
+    return Object.entries(t).forEach(([e, r]) => {
+      r != null && this.el.setAttribute(e, String(r));
+    }), this;
+  }
+  boolAttr(t, e, r = "") {
+    return e ? this.el.setAttribute(t, r) : this.el.removeAttribute(t), this;
+  }
+  part(t) {
+    return this.el.setAttribute("part", t), this;
+  }
+  data(t, e) {
+    return this.attr(`data-${t}`, e);
+  }
+  style(t, e) {
+    return typeof t == "string" ? this.el.style.setProperty(t, e ?? "") : Object.entries(t).forEach(([r, a]) => this.el.style.setProperty(r, a)), this;
+  }
+  cssVar(t, e) {
+    const r = t.startsWith("--") ? t : `--${t}`;
+    return this.style(r, e);
+  }
+  aria(t, e) {
+    return this.attr(`aria-${t}`, e);
+  }
+  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, e, r) {
+    return this.el.addEventListener(t, e, r), this;
+  }
+  listen(t, e, r, a) {
+    return t.on(this.el, e, r, a), this;
+  }
+  delegate(t, e, r, a, n) {
+    return t.delegate(this.el, e, r, a, n), this;
+  }
+  children(...t) {
+    const e = (r) => r.reduce((a, n) => Array.isArray(n) ? a.concat(e(n)) : a.concat(n), []);
+    return e(t).forEach((r) => {
+      r != null && (r instanceof h ? this.el.appendChild(r.build()) : typeof r == "string" ? l ? this.el.appendChild(r) : this.el.appendChild(document.createTextNode(r)) : this.el.appendChild(r));
+    }), this;
+  }
+  replaceChildren(...t) {
+    if (l) {
+      const e = this.el;
+      e.childrenList = [];
+    } else this.el.replaceChildren();
+    return this.children(...t);
+  }
+  text(t) {
+    return this.el.textContent = t, this;
+  }
+  ref(t) {
+    return t.current = this.el, this;
+  }
+  shadow(t = { mode: "closed" }) {
+    const e = this.el.attachShadow(t);
+    return new u(this.el, e, t);
+  }
+  build() {
+    return this.el;
+  }
+  serialize() {
+    if (l) return this.el.serialize();
+    const t = document.createElement("div");
+    return t.appendChild(this.el.cloneNode(!0)), t.innerHTML;
+  }
+}, u = class {
+  root;
+  hostEl;
+  options;
+  constructor(i, t, e) {
+    this.hostEl = i, this.root = t, this.options = e;
+  }
+  children(...i) {
+    const t = (e) => e.reduce((r, a) => Array.isArray(a) ? r.concat(t(a)) : r.concat(a), []);
+    return t(i).forEach((e) => {
+      e != null && (e instanceof o ? this.root.appendChild(e.build()) : typeof e == "string" ? l ? this.root.appendChild(e) : this.root.appendChild(document.createTextNode(e)) : this.root.appendChild(e));
+    }), this;
+  }
+  adoptSheet(...i) {
+    return this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, ...i], this;
+  }
+  css(i) {
+    if (l)
+      return this.root.adoptedStyleSheets.push(i), this;
+    if (typeof CSSStyleSheet < "u") try {
+      const e = new CSSStyleSheet();
+      return e.replaceSync(i), this.root.adoptedStyleSheets = [...this.root.adoptedStyleSheets, e], this;
+    } catch {
+    }
+    const t = document.createElement("style");
+    return t.textContent = i, this.root.appendChild(t), this;
+  }
+  done() {
+    return {
+      host: this.hostEl,
+      shadow: this.root
+    };
+  }
+  serialize() {
+    return l ? this.root.serialize() : this.root.innerHTML;
+  }
+}, s = (i) => new o(i), f = () => s("div"), S = () => s("span"), y = () => s("slot"), b = () => s("button"), v = () => s("input"), C = () => s("style"), E = () => s("label"), w = () => s("ul"), A = () => s("li"), g = () => s("section"), L = () => s("article"), B = () => s("nav"), m = () => s("header"), x = () => s("footer"), H = () => s("main"), N = (i = "open", t = !1) => {
+  const e = s("template");
+  return e.attr("shadowrootmode", i), t && e.attr("shadowrootdelegatesfocus", ""), e;
+};
+export {
+  s as _,
+  x as a,
+  p as b,
+  E as c,
+  B as d,
+  g as f,
+  w as g,
+  C as h,
+  f as i,
+  A as l,
+  S as m,
+  b as n,
+  m as o,
+  y as p,
+  N as r,
+  v as s,
+  L as t,
+  H as u,
+  o as v,
+  u as y
+};

package/dist/form-05Lxxl3D.js

@@ -0,0 +1,44 @@
+import { c as a, d as o, l as i, s as n, u as h } from "./utils-D4pPF77E.js";
+import { _ as l, p as u } from "./factory-BdsO0dEW.js";
+import { a as m, n as c } from "./ssr-DSGwPtEd.js";
+var f = ".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 c {
+  _form;
+  _shadowDom;
+  static get observedAttributes() {
+    return ["sheet"];
+  }
+  constructor() {
+    super(), this._shadowDom = a(this, f), this._form = n(this._shadowDom, ".r-form", () => l("form").class("r-form").children(u().attr("name", "r-form_content")).build());
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t != null && this.setAttribute("value", t);
+  }
+  get sheet() {
+    return i(this, "sheet");
+  }
+  set sheet(t) {
+    h(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    o(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  connectedCallback() {
+    this.handlerExternalCss();
+    const t = {}, e = new FormData(this._form);
+    e.forEach((r, s) => {
+      t[s] || (t[s] = e.getAll(s).length > 1 ? e.getAll(s) : e.get(s));
+    }), this._form.addEventListener("submit", () => {
+      this.value = JSON.stringify(t);
+    });
+  }
+  attributeChangedCallback(t, e, r) {
+    e !== r && t === "sheet" && this.handlerExternalCss();
+  }
+};
+m("r-form", d);
+export {
+  d as t
+};

package/dist/form.js

@@ -0,0 +1,5 @@
+import { t as r } from "./form-05Lxxl3D.js";
+export {
+  r as Form,
+  r as default
+};