godown 3.13.1 → 3.13.3

package/build/web-components/popover/component.d.ts

@@ -0,0 +1,34 @@
+import GlobalStyle from "../../internal/global-style.js";
+import { type PropertyValues, type TemplateResult } from "lit";
+/**
+* {@link Popover} renders a popover.
+*
+* This requires the support of the popover API and CSS position-area.
+*
+* @fires toggle - Fired when the popover is toggled.
+* @slot popover - Popover content.
+* @slot - Popover trigger.
+* @category display
+*/
+declare class Popover extends GlobalStyle {
+	anchorName: string;
+	open: boolean;
+	action: "hide" | "show" | "toggle" | "none";
+	span: "span" | "spread" | "isolated";
+	/**
+	* The position refers to the spatial location of the popover in relation to the trigger,
+	* rather than the alignment property between them.
+	*/
+	position: "center" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "start" | "start-start" | "start-end" | "end" | "end-start" | "end-end";
+	protected _popover: HTMLElement;
+	constructor();
+	protected render(): TemplateResult<1>;
+	protected _handleClick(): void;
+	show(): void;
+	hide(): void;
+	toggle(force?: boolean): void;
+	protected updated(_changedProperties: PropertyValues): void;
+	protected _openChange(): void;
+	resolveArea(): string;
+}
+export { Popover, Popover as default };

package/build/web-components/popover/component.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AACA,OAAO,iBAAiB,gCAAiC;AACzD,cAAyB,qBAAqB,sBAAsB,KAAM;;;;;;;;;;;AAiB1E,cAsBM,gBAAgB,YAAY;CAChC;CAEA,AACA;CAEA,AACA,QAAQ,SAAS,SAAS,WAAW;CAErC,AACA,MAAM,SAAS,WAAW;;;;;CAM1B,AACA,UACI,WACA,SACA,aACA,gBACA,UACA,cACA,iBACA,QACA,aACA,cACA,WACA,gBACA,iBACA,UACA,gBACA,cACA,QACA,cACA;CAEJ,UACU,UAAU;CAEpB;CAeA,UAAU,UAAU,eAAe;CAmBnC,UAAU;CAUV;CAIA;CAIA,OAAOA;CAIP,UAAU,QAAQC,oBAAoB;CAMtC,UAAU;CAiBV;AASD;AAED,SAAS,SAAS,WAAW","names":["force?: boolean","_changedProperties: PropertyValues"],"sources":["../../../../src/web-components/popover/component.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport GlobalStyle from \"../../internal/global-style.js\";\nimport { css, html, type PropertyValues, type TemplateResult } from \"lit\";\nimport { godown, htmlSlot, StyleController, styles } from \"@godown/element\";\nimport { hidePopover, showPopover } from \"../../internal/popover.js\";\n\nconst POPOVER = \"popover\";\nconst protoName = POPOVER;\n\n/**\n * {@link Popover} renders a popover.\n *\n * This requires the support of the popover API and CSS position-area.\n *\n * @fires toggle - Fired when the popover is toggled.\n * @slot popover - Popover content.\n * @slot - Popover trigger.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: inline-block;\n  }\n\n  [part=\"trigger\"] {\n    display: contents;\n  }\n\n  [part=\"root\"] {\n    display: inherit;\n  }\n\n  [part=\"popover\"] {\n    inset: unset;\n    z-index: 1;\n    overflow: visible;\n    position: absolute;\n    position-try-fallbacks: flip-block;\n  }\n`)\nclass Popover extends GlobalStyle {\n  anchorName = `--${POPOVER}-${Math.random().toString(36).slice(2)}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  action: \"hide\" | \"show\" | \"toggle\" | \"none\" = \"show\";\n\n  @property()\n  span: \"span\" | \"spread\" | \"isolated\" = \"span\";\n\n  /**\n   * The position refers to the spatial location of the popover in relation to the trigger,\n   * rather than the alignment property between them.\n   */\n  @property()\n  position:\n    | \"center\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"start\"\n    | \"start-start\"\n    | \"start-end\"\n    | \"end\"\n    | \"end-start\"\n    | \"end-end\" = \"bottom\";\n\n  @query(`[part=${POPOVER}]`, true)\n  protected _popover: HTMLElement;\n\n  constructor() {\n    super();\n    new StyleController(this, () => {\n      return {\n        \"[part=root],slot:not([name])::slotted(*)\": {\n          \"anchor-name\": this.anchorName,\n        },\n        \"[part=popover]\": {\n          \"position-anchor\": this.anchorName,\n          \"position-area\": this.resolveArea(),\n        },\n      };\n    });\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div part=\"root\">\n        <div\n          part=\"trigger\"\n          @click=${this._handleClick}\n        >\n          ${htmlSlot()}\n        </div>\n        <div\n          part=\"popover\"\n          popover=\"manual\"\n        >\n          ${htmlSlot(\"popover\")}\n        </div>\n      </div>\n    `;\n  }\n\n  protected _handleClick(): void {\n    const { action } = this;\n    switch (action) {\n      case \"show\":\n      case \"hide\":\n      case \"toggle\":\n        this[action]();\n    }\n  }\n\n  show(): void {\n    this.toggle(true);\n  }\n\n  hide(): void {\n    this.toggle(false);\n  }\n\n  toggle(force?: boolean): void {\n    this.open = force ?? !this.open;\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has(\"open\")) {\n      this._openChange();\n    }\n  }\n\n  protected _openChange(): void {\n    const { open } = this;\n    if (open) {\n      showPopover.call(this, this._popover);\n      const listener = (e) => {\n        if (!this.contains(e.target)) {\n          this.events.remove(document, \"click\", listener);\n          this.open = false;\n        }\n      };\n      this.events.add(document, \"click\", listener);\n    } else {\n      hidePopover(this._popover);\n    }\n    this.dispatchCustomEvent(\"toggle\", open);\n  }\n\n  resolveArea(): string {\n    const split = this.position.split(\"-\");\n    const firstValue = this.span === \"spread\" ? `span-${split[0]}` : split[0];\n    if (split.length < 2) {\n      return `${firstValue} center`;\n    }\n    const secondValue = this.span === \"isolated\" ? split[1] : `span-${split[1]}`;\n    return `${firstValue} ${secondValue}`;\n  }\n}\n\nexport { Popover, Popover as default };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/popover/component.js

@@ -0,0 +1,3 @@
+import{property,query}from"lit/decorators.js";import{GlobalStyle}from"../../internal/global-style.js";import{css,html}from"lit";import{godown,styles,StyleController,htmlSlot}from"@godown/element";import{showPopover,hidePopover}from"../../internal/popover.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";import"sharekit";import"../../internal/utils.js";const POPOVER=`popover`,protoName=POPOVER;let Popover=class e extends GlobalStyle{constructor(){super(),this.anchorName=`--${POPOVER}-${Math.random().toString(36).slice(2)}`,this.open=!1,this.action=`show`,this.span=`span`,this.position=`bottom`,new StyleController(this,()=>({"[part=root],slot:not([name])::slotted(*)":{"anchor-name":this.anchorName},"[part=popover]":{"position-anchor":this.anchorName,"position-area":this.resolveArea()}}))}render(){return html`<div part="root"> <div part="trigger" @click=${this._handleClick}> ${htmlSlot()} </div> <div part="popover" popover="manual"> ${htmlSlot(`popover`)} </div> </div>`}_handleClick(){let{action:e}=this;switch(e){case`show`:case`hide`:case`toggle`:this[e]()}}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){this.open=e??!this.open}updated(e){e.has(`open`)&&this._openChange()}_openChange(){let{open:e}=this;if(e){showPopover.call(this,this._popover);let e=p=>{this.contains(p.target)||(this.events.remove(document,`click`,e),this.open=!1)};this.events.add(document,`click`,e)}else hidePopover(this._popover);this.dispatchCustomEvent(`toggle`,e)}resolveArea(){let e=this.position.split(`-`),p=this.span===`spread`?`span-${e[0]}`:e[0];if(e.length<2)return`${p} center`;let m=this.span===`isolated`?e[1]:`span-${e[1]}`;return`${p} ${m}`}};_decorate([property({type:Boolean,reflect:!0})],Popover.prototype,`open`,void 0),_decorate([property()],Popover.prototype,`action`,void 0),_decorate([property()],Popover.prototype,`span`,void 0),_decorate([property()],Popover.prototype,`position`,void 0),_decorate([query(`[part=${POPOVER}]`,!0)],Popover.prototype,`_popover`,void 0),Popover=_decorate([godown(protoName),styles(css`:host{display:inline-block}[part=trigger]{display:contents}[part=root]{display:inherit}[part=popover]{inset:unset;z-index:1;overflow:visible;position:absolute;position-try-fallbacks:flip-block}
+`)],Popover);export{Popover,Popover as default};
+//# sourceMappingURL=component.js.map

package/build/web-components/popover/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/web-components/popover/component.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport GlobalStyle from \"../../internal/global-style.js\";\nimport { css, html, type PropertyValues, type TemplateResult } from \"lit\";\nimport { godown, htmlSlot, StyleController, styles } from \"@godown/element\";\nimport { hidePopover, showPopover } from \"../../internal/popover.js\";\n\nconst POPOVER = \"popover\";\nconst protoName = POPOVER;\n\n/**\n * {@link Popover} renders a popover.\n *\n * This requires the support of the popover API and CSS position-area.\n *\n * @fires toggle - Fired when the popover is toggled.\n * @slot popover - Popover content.\n * @slot - Popover trigger.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: inline-block;\n  }\n\n  [part=\"trigger\"] {\n    display: contents;\n  }\n\n  [part=\"root\"] {\n    display: inherit;\n  }\n\n  [part=\"popover\"] {\n    inset: unset;\n    z-index: 1;\n    overflow: visible;\n    position: absolute;\n    position-try-fallbacks: flip-block;\n  }\n`)\nclass Popover extends GlobalStyle {\n  anchorName = `--${POPOVER}-${Math.random().toString(36).slice(2)}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  action: \"hide\" | \"show\" | \"toggle\" | \"none\" = \"show\";\n\n  @property()\n  span: \"span\" | \"spread\" | \"isolated\" = \"span\";\n\n  /**\n   * The position refers to the spatial location of the popover in relation to the trigger,\n   * rather than the alignment property between them.\n   */\n  @property()\n  position:\n    | \"center\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"start\"\n    | \"start-start\"\n    | \"start-end\"\n    | \"end\"\n    | \"end-start\"\n    | \"end-end\" = \"bottom\";\n\n  @query(`[part=${POPOVER}]`, true)\n  protected _popover: HTMLElement;\n\n  constructor() {\n    super();\n    new StyleController(this, () => {\n      return {\n        \"[part=root],slot:not([name])::slotted(*)\": {\n          \"anchor-name\": this.anchorName,\n        },\n        \"[part=popover]\": {\n          \"position-anchor\": this.anchorName,\n          \"position-area\": this.resolveArea(),\n        },\n      };\n    });\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div part=\"root\">\n        <div\n          part=\"trigger\"\n          @click=${this._handleClick}\n        >\n          ${htmlSlot()}\n        </div>\n        <div\n          part=\"popover\"\n          popover=\"manual\"\n        >\n          ${htmlSlot(\"popover\")}\n        </div>\n      </div>\n    `;\n  }\n\n  protected _handleClick(): void {\n    const { action } = this;\n    switch (action) {\n      case \"show\":\n      case \"hide\":\n      case \"toggle\":\n        this[action]();\n    }\n  }\n\n  show(): void {\n    this.toggle(true);\n  }\n\n  hide(): void {\n    this.toggle(false);\n  }\n\n  toggle(force?: boolean): void {\n    this.open = force ?? !this.open;\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has(\"open\")) {\n      this._openChange();\n    }\n  }\n\n  protected _openChange(): void {\n    const { open } = this;\n    if (open) {\n      showPopover.call(this, this._popover);\n      const listener = (e) => {\n        if (!this.contains(e.target)) {\n          this.events.remove(document, \"click\", listener);\n          this.open = false;\n        }\n      };\n      this.events.add(document, \"click\", listener);\n    } else {\n      hidePopover(this._popover);\n    }\n    this.dispatchCustomEvent(\"toggle\", open);\n  }\n\n  resolveArea(): string {\n    const split = this.position.split(\"-\");\n    const firstValue = this.span === \"spread\" ? `span-${split[0]}` : split[0];\n    if (split.length < 2) {\n      return `${firstValue} center`;\n    }\n    const secondValue = this.span === \"isolated\" ? split[1] : `span-${split[1]}`;\n    return `${firstValue} ${secondValue}`;\n  }\n}\n\nexport { Popover, Popover as default };\n"],"names":["Popover","action","force?: boolean","force","_changedProperties: PropertyValues","_changedProperties","open","listener","e","split","firstValue","secondValue"],"mappings":"uZAMA,MAAM,QAAU,UACV,UAAY,QAYlB,IAAA,QAAA,MAsBMA,UAAgB,WAAY,CAyChC,aAAc,CACZ,OAAO,CAzCT,KAAA,WAAa,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAE,EAAE,MAGlE,KAAO,QAGP,OAA8C,YAG9C,KAAuC,YAOvC,SAmBgB,SAOd,IAAI,gBAAgB,KAAM,KACjB,CACL,2CAA4C,CAC1C,cAAe,KAAK,UACrB,EACD,iBAAkB,CAChB,kBAAmB,KAAK,WACxB,gBAAiB,KAAK,aAAA,AACvB,CACF,GAEJ,CAES,QAA4B,CACpC,MAAO,KAAI,CAAA,6CAIE,EAAE,KAAK,aAAA,EAEd,EAAE,UAAU,CAAA,8CAMZ,EAAE,SAAS,UAAU,CAAA,cAG3B,CAAC,AACF,CAES,cAAqB,CAC7B,GAAM,CAAE,SAAQ,CAAG,KACnB,OAAQC,EAAR,CACE,IAAK,OACL,IAAK,OACL,IAAK,SACH,KAAKA,IAAS,AACjB,CACF,CAED,MAAa,CACX,KAAK,OAAO,GAAK,AAClB,CAED,MAAa,CACX,KAAK,OAAO,GAAM,AACnB,CAED,OAAOC,EAAuB,CAC5B,KAAK,KAAOC,GAAS,CAAC,KAAK,IAC5B,CAES,QAAQC,EAA0C,CACtDC,EAAmB,IAAI,OAAO,EAChC,KAAK,aAAa,AAErB,CAES,aAAoB,CAC5B,GAAM,CAAE,OAAM,CAAG,KACjB,GAAIC,EAAM,CACR,YAAY,KAAK,KAAM,KAAK,SAAS,CACrC,IAAMC,EAAW,AAACC,GAAM,CACjB,KAAK,SAASA,EAAE,OAAO,GAC1B,KAAK,OAAO,OAAO,SAAU,QAASD,EAAS,CAC/C,KAAK,KAAO,GAEf,EACD,KAAK,OAAO,IAAI,SAAU,QAASA,EAAS,AAC7C,MACC,YAAY,KAAK,SAAS,CAE5B,KAAK,oBAAoB,SAAUD,EAAK,AACzC,CAED,aAAsB,CACpB,IAAMG,EAAQ,KAAK,SAAS,MAAM,IAAI,CAChCC,EAAa,KAAK,OAAS,SAAW,CAAC,KAAK,EAAED,EAAM,IAAI,CAAGA,EAAM,GACvE,GAAIA,EAAM,OAAS,EACjB,MAAO,GAAGC,EAAW,OAAO,CAAC,CAE/B,IAAMC,EAAc,KAAK,OAAS,WAAaF,EAAM,GAAK,CAAC,KAAK,EAAEA,EAAM,IAAI,CAC5E,MAAO,GAAGC,EAAW,CAAC,EAAEC,GAAa,AACtC,CACF,aA9HE,SAAS,CAAE,KAAM,QAAS,QAAS,EAAM,EAAC,AAAA,EAAA,QAAA,UAAA,OAAA,IAAA,GAAA,YAG1C,UAAU,AAAA,EAAA,QAAA,UAAA,SAAA,OAAA,YAGV,UAAU,AAAA,EAAA,QAAA,UAAA,OAAA,OAAA,YAOV,UAAU,AAAA,EAAA,QAAA,UAAA,WAAA,OAAA,CAsBV,UAAA,CAAA,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAE,GAAK,AAAA,EAAA,QAAA,UAAA,WAAA,IAAA,GAAA,CA5DlC,QAAA,UAAA,CAAA,OAAO,UAAU,CACjB,OAAO,GAAG,CAAC;AAoBZ,CAAC,CAAC,AAAA,EAAA,QAAA"}

package/build/web-components/popover/definition.d.ts

@@ -0,0 +1,7 @@
+import Popover from "./component.js";
+export default Popover;
+declare global {
+	interface HTMLElementTagNameMap {
+		"godown-popover": Popover;
+	}
+}

package/build/web-components/popover/definition.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,OAAO,aAAa,gBAAiB;AAIrC,eAAe;eAEA;WACH,sBAAsB;EAC9B,kBAAkB;CACnB;AACF","names":[],"sources":["../../../../src/web-components/popover/definition.ts"],"sourcesContent":["import Popover from \"./component.js\";\n\nPopover.define();\n\nexport default Popover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-popover\": Popover;\n  }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/popover/definition.js

@@ -0,0 +1,2 @@
+import{Popover as Popover$1}from"./component.js";import"lit/decorators.js";import"../../internal/global-style.js";import"@godown/element";import"lit";import"../../internal/reset-style.js";import"sharekit";import"../../internal/popover.js";import"../../internal/utils.js";import"@oxc-project/runtime/helpers/decorate";Popover$1.define();var Popover=Popover$1;export{Popover as default};
+//# sourceMappingURL=definition.js.map

package/build/web-components/popover/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","sources":["../../../src/web-components/popover/definition.ts"],"sourcesContent":["import Popover from \"./component.js\";\n\nPopover.define();\n\nexport default Popover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-popover\": Popover;\n  }\n}\n"],"names":["Popover"],"mappings":"6TAEAA,UAAQ,QAAQ,CAEhB,IAAA,QAAeA"}

package/build/web-components/progress/component.d.ts

@@ -0,0 +1,15 @@
+import { type TemplateResult } from "lit";
+import { GlobalStyle } from "../../internal/global-style.js";
+/**
+* {@linkcode Progress} similar to `<progress>`.
+*
+* @category feedback
+*/
+declare class Progress extends GlobalStyle {
+	max: number;
+	min: number;
+	value: number;
+	protected render(): TemplateResult<1>;
+}
+export default Progress;
+export { Progress };

package/build/web-components/progress/component.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AACA,cAAc,sBAAiC,KAAM;AAIrD,SAAS,mBAAkC,gCAAiC;;;;;;AAS5E,cA+CM,iBAAiB,YAAY;CACjC,AACA;CAEA,AACA;CAEA,AACA;CAEA,UAAU,UAAU,eAAe;AAsBpC;AAED,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/**\n * {@linkcode Progress} similar to `<progress>`.\n *\n * @category feedback\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    width: 100%;\n    height: 0.5em;\n    border-radius: 0.25em;\n    background: var(${cssGlobalVars.passive});\n    color: var(${cssGlobalVars.active});\n  }\n\n  :host,\n  [part=\"root\"] {\n    display: block;\n  }\n\n  [part=\"root\"] {\n    z-index: 1;\n    position: relative;\n    border-radius: inherit;\n    overflow: hidden;\n  }\n\n  [part=\"value\"] {\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    left: 0;\n    height: 100%;\n    border-radius: inherit;\n    transition: all 0.3s;\n    animation: progress 1.8s ease-in-out infinite alternate;\n    background: currentColor;\n  }\n\n  @keyframes progress {\n    from {\n      left: 0;\n    }\n    to {\n      left: 80%;\n    }\n  }\n\n  .static [part=\"value\"] {\n    animation: none;\n  }\n`)\nclass Progress extends GlobalStyle {\n  @property({ type: Number })\n  max = 1;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  value: number;\n\n  protected render(): TemplateResult<1> {\n    let width = 20;\n    let className: string;\n    if (!isNullable(this.value)) {\n      const ranger = new Ranger(this.min, this.max);\n      const value = +this.value - this.min;\n      width = (value / ranger.diff) * 100;\n      className = \"static\";\n    }\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        class=\"${className}\"\n      >\n        <i\n          part=\"value\"\n          style=\"width:${width}%;\"\n        ></i>\n      </div>\n    `;\n  }\n}\n\nexport default Progress;\nexport { Progress };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/progress/component.js

@@ -0,0 +1,2 @@
+import{godown,styles,attr}from"@godown/element";import{css,html}from"lit";import{property}from"lit/decorators.js";import{isNullable,Ranger}from"sharekit";import{cssGlobalVars,GlobalStyle}from"../../internal/global-style.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";const protoName=`progress`;let Progress=class e extends GlobalStyle{constructor(...e){super(...e),this.max=1,this.min=0}render(){let e=20,d;if(!isNullable(this.value)){let f=new Ranger(this.min,this.max),p=+this.value-this.min;e=p/f.diff*100,d=`static`}return html`<div part="root" ${attr(this.observedRecord)} class="${d}"> <i part="value" style="width:${e}%;"></i> </div>`}};_decorate([property({type:Number})],Progress.prototype,`max`,void 0),_decorate([property({type:Number})],Progress.prototype,`min`,void 0),_decorate([property({type:Number})],Progress.prototype,`value`,void 0),Progress=_decorate([godown(protoName),styles(css`:host{width:100%;height:.5em;border-radius:.25em;background:var(${cssGlobalVars.passive});color:var(${cssGlobalVars.active})}:host,[part=root]{display:block}[part=root]{z-index:1;position:relative;border-radius:inherit;overflow:hidden}[part=value]{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:inherit;transition:all .3s;animation:progress 1.8s ease-in-out infinite alternate;background:currentColor}@keyframes progress{0%{left:0}to{left:80%}}.static [part=value]{animation:none}`)],Progress);var Progress$1=Progress;export{Progress,Progress$1 as default};
+//# sourceMappingURL=component.js.map

package/build/web-components/progress/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/**\n * {@linkcode Progress} similar to `<progress>`.\n *\n * @category feedback\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    width: 100%;\n    height: 0.5em;\n    border-radius: 0.25em;\n    background: var(${cssGlobalVars.passive});\n    color: var(${cssGlobalVars.active});\n  }\n\n  :host,\n  [part=\"root\"] {\n    display: block;\n  }\n\n  [part=\"root\"] {\n    z-index: 1;\n    position: relative;\n    border-radius: inherit;\n    overflow: hidden;\n  }\n\n  [part=\"value\"] {\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    left: 0;\n    height: 100%;\n    border-radius: inherit;\n    transition: all 0.3s;\n    animation: progress 1.8s ease-in-out infinite alternate;\n    background: currentColor;\n  }\n\n  @keyframes progress {\n    from {\n      left: 0;\n    }\n    to {\n      left: 80%;\n    }\n  }\n\n  .static [part=\"value\"] {\n    animation: none;\n  }\n`)\nclass Progress extends GlobalStyle {\n  @property({ type: Number })\n  max = 1;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  value: number;\n\n  protected render(): TemplateResult<1> {\n    let width = 20;\n    let className: string;\n    if (!isNullable(this.value)) {\n      const ranger = new Ranger(this.min, this.max);\n      const value = +this.value - this.min;\n      width = (value / ranger.diff) * 100;\n      className = \"static\";\n    }\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        class=\"${className}\"\n      >\n        <i\n          part=\"value\"\n          style=\"width:${width}%;\"\n        ></i>\n      </div>\n    `;\n  }\n}\n\nexport default Progress;\nexport { Progress };\n"],"names":["Progress","width","className: string","ranger","value","className"],"mappings":"mUAOA,MAAM,UAAY,WAOlB,IAAA,SAAA,MA+CMA,UAAiB,WAAY,oCAEjC,IAAM,OAGN,IAAM,EAKI,QAA4B,CACpC,IAAIC,EAAQ,GACRC,EACJ,GAAI,CAAC,WAAW,KAAK,MAAM,CAAE,CAC3B,IAAMC,EAAS,IAAI,OAAO,KAAK,IAAK,KAAK,KACnCC,EAAQ,CAAC,KAAK,MAAQ,KAAK,IACjCH,EAASG,EAAQD,EAAO,KAAQ,IAChCE,EAAY,QACb,CACD,MAAO,KAAI,CAAA,iBAGP,EAAE,KAAK,KAAK,eAAe,CAAA,QACpB,EAAEA,EAAU,gCAIJ,EAAEJ,EAAM,eAG3B,CAAC,AACF,CACF,aA/BE,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,MAAA,OAAA,YAG1B,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,MAAA,OAAA,YAG1B,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,QAAA,OAAA,CAtD5B,SAAA,UAAA,CAAA,OAAO,UAAU,CACjB,OAAO,GAAG,CAAC,gEAKQ,EAAE,cAAc,QAAQ,YAC7B,EAAE,cAAc,OAAO,yXAuCtC,CAAC,CAAC,AAAA,EAAA,SAAA,CAmCF,IAAA,WAAe"}

package/build/web-components/progress/definition.d.ts

@@ -0,0 +1,7 @@
+import Progress from "./component.js";
+export default Progress;
+declare global {
+	interface HTMLElementTagNameMap {
+		"godown-progress": Progress;
+	}
+}

package/build/web-components/progress/definition.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,OAAO,cAAc,gBAAiB;AAItC,eAAe;eAEA;WACH,sBAAsB;EAC9B,mBAAmB;CACpB;AACF","names":[],"sources":["../../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-progress\": Progress;\n  }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/progress/definition.js

@@ -0,0 +1,2 @@
+import Progress from"./component.js";import"@godown/element";import"lit";import"lit/decorators.js";import"sharekit";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"@oxc-project/runtime/helpers/decorate";Progress.define();export{Progress as default};
+//# sourceMappingURL=definition.js.map

package/build/web-components/progress/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","sources":["../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-progress\": Progress;\n  }\n}\n"],"names":[],"mappings":"+OAEA,SAAS,QAAQ"}

package/build/web-components/range/component.d.ts

@@ -0,0 +1,117 @@
+import { Ranger } from "sharekit";
+import { type TemplateResult } from "lit";
+import { SuperInput } from "../../internal/super-input.js";
+type RangeValue = number | number[];
+/**
+* {@linkcode Range} is similar to `<input type="range">`.
+*
+* Value accepts number, or array.
+*
+* Number has 1 handle, the array has the number of its elements.
+*
+* @fires range - Fires when the value changes.
+* @category input
+*/
+declare class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
+	/**
+	* Minimum value.
+	*/
+	min: number;
+	/**
+	* Maximum value.
+	*/
+	max: number;
+	/**
+	* Sliding step length.
+	*/
+	step: number;
+	/**
+	* Whether to display the range vertically.
+	*/
+	vertical: boolean;
+	/**
+	* Value, or each of values, will render a handle.
+	*
+	* Accepts number or array of numbers.
+	*/
+	value: V;
+	/**
+	* The default of `{@linkcode this.value}`.
+	*/
+	default: V;
+	protected _root: HTMLElement;
+	protected _handles: NodeListOf<HTMLElement>;
+	lastFocus?: number;
+	protected _ranger: Ranger;
+	private __focusStack;
+	get range(): V extends number ? false : true;
+	/**
+	* Return values in the form of an array.
+	*/
+	get rangeValue(): number[];
+	/**
+	* Pad the value to the specified length.
+	*/
+	padValue(len: number, value?: number): number[];
+	attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+	get observedRecord(): Record<string, any>;
+	protected render(): TemplateResult<1>;
+	protected _renderHandle(index: number): TemplateResult<1>;
+	private __keydownEvent;
+	/**
+	* Focuses the handle at the given index, updates the focus stack.
+	* @param index - The index of the handle to focus.
+	*/
+	focusHandle(index: number): void;
+	/**
+	* Removes the focus from the currently focused handle.
+	*/
+	blurHandle(): void;
+	/**
+	* Creates a keydown event handler that updates the value of the range based on arrow key presses.
+	* @param index - The index of the handle to update.
+	* @returns A function that handles the keydown event and updates the range value.
+	*/
+	protected createKeydownEvent(index: number): (e: KeyboardEvent) => void;
+	/**
+	* Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+	* @param index - The index of the handle to focus.
+	* @returns A function that handles the mouse down event and updates the range value.
+	*/
+	protected createMouseDown(index: number): (e: MouseEvent) => void;
+	/**
+	* Creates a function that sets the value of the range at the given index.
+	* @param index - The index of the value to set.
+	* @returns A function that sets the value of the range.
+	*/
+	protected createSetValue(index: number): (value: number) => void;
+	/**
+	* Compute value from event.
+	* @returns The value closest to the event client position.
+	*/
+	protected _computeValue({ clientX, clientY }: MouseEvent): number;
+	/**
+	* Handles the mouse down event on the root element of the range component.
+	* Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
+	* @param e - The mouse down event object.
+	*/
+	protected _handleMousedownRoot(e: MouseEvent): void;
+	/**
+	* Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+	* @param index - The index of the handle to focus.
+	* @returns A function that handles the mouse down event and updates the range value.
+	*/
+	protected createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
+	/**
+	* Creates a mouse move event handler that updates the range value based on the mouse position.
+	* @param callback - A function to call with the new value when the mouse is moved.
+	* @returns A function that handles the mouse move event and updates the range value.
+	*/
+	protected createMousemoveListener(callback: (newValue: number) => void): (e: MouseEvent) => void;
+	protected _connectedInit(): void;
+	reset(): void;
+	sort(): V;
+	toSorted(): V;
+}
+export default Range;
+export { Range };

package/build/web-components/range/component.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AACA,SAA2B,cAAc,UAAW;AACpD,cAAc,sBAAiC,KAAM;AAKrD,SAAS,kBAAkB,+BAAgC;KAMtD;;;;;;;;;;;AAYL,cA0FM,MAAM,UAAU,aAAa,oBAAoB,WAAW,YAAY;;;;CAI5E,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;;;CAOA,AACA,OAAO;;;;CAKP,AACA,SAAS;CAET,UACU,OAAO;CAEjB,UACU,UAAU,WAAW;CAE/B,AACA;CAEA,UAAU,SAAS;CACnB,QAAQ;CAER,IAAI,SAAS,mBAAmB,QAAQ;;;;CAOxC,IAAI;;;;CAOJ,SAASA,aAAa;CAStB,yBAAyBC,cAAcC,qBAAqBC;CAO5D,IAAI,kBAAkB;CAItB,UAAU,UAAU,eAAe;CA2BnC,UAAU,cAAcC,gBAAgB,eAAe;CAkBvD,QAAQ;;;;;CAMR,YAAYA;;;;CAiBZ;;;;;;CAUA,UAAU,mBAAmBA,iBACnBC,GAAG;;;;;;CAqBb,UAAU,gBAAgBD,iBAChBE,GAAG;;;;;;CAWb,UAAU,eAAeF,iBACfG;;;;;CAgBV,UAAU,cAAc,EAAE,SAAS,SAAqB,EAAV;;;;;;CAU9C,UAAU,qBAAqBD,GAAG;;;;;;CAqBlC,UAAU,wBAAwBE,oBAAoBC,yBAC5CH,GAAG;;;;;;CAkBb,UAAU,wBAAwBI,WAAWC,6BACnCL,GAAG;CASb,UAAU;CAcV;CAIA,QAAQ;CAIR,YAAY;AAMb;AAED,eAAe;AACf,SAAS","names":["len: number","name: string","_old: string | null","value: string | null","index: number","e: KeyboardEvent","e: MouseEvent","value: number","mouseMoveCallback: (arg0: number) => void","arg0: number","callback: (newValue: number) => void","newValue: number"],"sources":["../../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number | number[];\n\n/**\n * {@linkcode Range} is similar to `<input type=\"range\">`.\n *\n * Value accepts number, or array.\n *\n * Number has 1 handle, the array has the number of its elements.\n *\n * @fires range - Fires when the value changes.\n * @category input\n */\n@godown(protoName)\n@styles(\n  css`\n    :host {\n      ${cssScope}--track-width: .5em;\n      ${cssScope}--handle-scale: 1;\n      ${cssScope}--track-background: var(${cssGlobalVars.active});\n      background: var(${cssGlobalVars.passive});\n      width: 100%;\n      display: block;\n      height: var(${cssScope}--track-width);\n    }\n\n    :host([contents]) [part=\"root\"] {\n      width: inherit;\n    }\n\n    :host([vertical]) {\n      height: 100%;\n      width: fit-content;\n    }\n\n    [part=\"root\"] {\n      min-height: inherit;\n      position: relative;\n      border-radius: inherit;\n      --from: 0%;\n      --to: 50%;\n    }\n\n    [part=\"track\"] {\n      height: 100%;\n      min-height: inherit;\n      display: flex;\n      position: absolute;\n      pointer-events: none;\n      border-radius: inherit;\n      justify-content: space-between;\n      left: min(var(--from), var(--to));\n      background: var(${cssScope}--track-background);\n      width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n    }\n\n    [part~=\"handle\"] {\n      width: 1em;\n      height: 1em;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      user-select: none;\n      position: absolute;\n      border-radius: 50%;\n      transform-origin: 0% 25%;\n      outline: 0;\n      border-style: solid;\n      border-width: 0.1em;\n      transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n      background: var(${cssGlobalVars.background});\n      border-color: currentColor;\n    }\n  `,\n  css`\n    [vertical] {\n      height: inherit;\n      width: var(${cssScope}--track-width);\n    }\n\n    [vertical] i {\n      transform: translate(-25%, -50%);\n    }\n\n    [vertical] [part=\"track\"] {\n      width: 100%;\n      height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n      top: min(var(--from), var(--to));\n      left: 0;\n    }\n  `,\n  css`\n    [part~=\"handle\"] {\n      left: var(--handle);\n      top: 0;\n    }\n\n    [vertical] [part~=\"handle\"] {\n      top: var(--handle);\n      left: 0;\n    }\n  `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n  /**\n   * Minimum value.\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * Maximum value.\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * Sliding step length.\n   */\n  @property({ type: Number })\n  step: number;\n\n  /**\n   * Whether to display the range vertically.\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * Value, or each of values, will render a handle.\n   *\n   * Accepts number or array of numbers.\n   */\n  @property({ type: Array })\n  value: V;\n\n  /**\n   * The default of `{@linkcode this.value}`.\n   */\n  @property({ type: Array })\n  default: V;\n\n  @query(\"[part=root]\")\n  protected _root: HTMLElement;\n\n  @queryAll(\"[part=handle]\")\n  protected _handles: NodeListOf<HTMLElement>;\n\n  @state()\n  lastFocus?: number;\n\n  protected _ranger: Ranger;\n  private __focusStack: number[] = [];\n\n  get range(): V extends number ? false : true {\n    return Array.isArray(this.value) as any;\n  }\n\n  /**\n   * Return values in the form of an array.\n   */\n  get rangeValue(): number[] {\n    return (this.range ? this.value : [this.value]) as number[];\n  }\n\n  /**\n   * Pad the value to the specified length.\n   */\n  padValue(len: number, value = 0): number[] {\n    const { rangeValue } = this;\n    const miss = len - rangeValue.length;\n    if (miss > 0) {\n      return new Array(miss).fill(value).concat(rangeValue);\n    }\n    return rangeValue;\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, _old, value);\n    if (name === \"max\" || name === \"min\" || name === \"step\") {\n      this._ranger = new Ranger(this.min, this.max, this.step);\n    }\n  }\n\n  get observedRecord(): Record<string, any> {\n    return omit(super.observedRecord, ringTypeAttribute);\n  }\n\n  protected render(): TemplateResult<1> {\n    const rangeValue = this.padValue(2);\n    const from = Math.min(...rangeValue);\n    const to = Math.max(...rangeValue);\n    const gap = this._ranger.diff;\n\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n        style=\"${styleMap(\n          Object.fromEntries([\n            [\"--from\", `${((from - this.min) / gap) * 100}%`],\n            [\"--to\", `${((to - this.min) / gap) * 100}%`],\n            ...rangeValue.map(\n              (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n            ),\n          ]),\n        )}\"\n      >\n        <div part=\"track\"></div>\n        ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n      </div>\n    `;\n  }\n\n  protected _renderHandle(index: number): TemplateResult<1> {\n    const { disabled, range, rangeValue } = this;\n\n    // in single-handle mod (value is a number or an array with length 1),\n    const end = !range || (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n    return html`\n      <i\n        tabindex=\"0\"\n        part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n        @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n        style=\"${styleMap({\n          \"z-index\": this.__focusStack.indexOf(index) + 1,\n          \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n        })}\"\n      ></i>\n    `;\n  }\n\n  private __keydownEvent: EventListenerOrEventListenerObject;\n\n  /**\n   * Focuses the handle at the given index, updates the focus stack.\n   * @param index - The index of the handle to focus.\n   */\n  focusHandle(index: number): void {\n    this.lastFocus = index;\n    const indexOfFocusStack = this.__focusStack.indexOf(index);\n    if (indexOfFocusStack !== -1) {\n      this.__focusStack.splice(indexOfFocusStack, 1);\n    }\n    this.__focusStack.push(index);\n    const handleItem = this._handles.item(index);\n    handleItem?.focus();\n    if (!this.__keydownEvent) {\n      this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n    }\n  }\n\n  /**\n   * Removes the focus from the currently focused handle.\n   */\n  blurHandle(): void {\n    this.lastFocus = undefined;\n    this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n  }\n\n  /**\n   * Creates a keydown event handler that updates the value of the range based on arrow key presses.\n   * @param index - The index of the handle to update.\n   * @returns A function that handles the keydown event and updates the range value.\n   */\n  protected createKeydownEvent(index: number) {\n    return (e: KeyboardEvent): void => {\n      const { rangeValue, step } = this;\n      if (rangeValue.length < 2) {\n        index = 0;\n      }\n      const old = rangeValue[index];\n      if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") {\n        e.preventDefault();\n        this.createSetValue(index)(old - step);\n      } else if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        this.createSetValue(index)(old + step);\n      }\n    };\n  }\n\n  /**\n   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n   * @param index - The index of the handle to focus.\n   * @returns A function that handles the mouse down event and updates the range value.\n   */\n  protected createMouseDown(index: number) {\n    return (e: MouseEvent): void => {\n      this.focusHandle(index);\n      this.createMousedownListener(this.createSetValue(index))(e);\n    };\n  }\n\n  /**\n   * Creates a function that sets the value of the range at the given index.\n   * @param index - The index of the value to set.\n   * @returns A function that sets the value of the range.\n   */\n  protected createSetValue(index: number) {\n    return (value: number): void => {\n      const normalizeValue = this._ranger.normalize(value);\n      let newValue: RangeValue = normalizeValue;\n      if (this.range) {\n        newValue = [...(this.value as number[])];\n        newValue[index] = normalizeValue;\n      }\n      this.value = newValue as V;\n      this.dispatchCustomEvent(\"change\", this.value);\n    };\n  }\n\n  /**\n   * Compute value from event.\n   * @returns The value closest to the event client position.\n   */\n  protected _computeValue({ clientX, clientY }: MouseEvent): number {\n    const { top, left, height, width } = this._root.getBoundingClientRect();\n    return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n  }\n\n  /**\n   * Handles the mouse down event on the root element of the range component.\n   * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n   * @param e - The mouse down event object.\n   */\n  protected _handleMousedownRoot(e: MouseEvent): void {\n    const value = this._computeValue(e);\n    const index = this.range\n      ? this.rangeValue.reduce((acc, item, index) => {\n          const diff = Math.abs(value - item);\n          const prevDiff = Math.abs(value - this.rangeValue[acc]);\n          return diff < prevDiff ? index : acc;\n        }, 0)\n      : 0;\n\n    const set = this.createSetValue(index);\n    set(value);\n    this.createMousedownListener(set)(e);\n    this.focusHandle(index);\n  }\n\n  /**\n   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n   * @param index - The index of the handle to focus.\n   * @returns A function that handles the mouse down event and updates the range value.\n   */\n  protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n    return (e: MouseEvent): void => {\n      e.preventDefault();\n      e.stopPropagation();\n      const move = this.createMousemoveListener(mouseMoveCallback);\n      this.events.add(document, \"mousemove\", move);\n      const stop = () => {\n        this.events.remove(document, \"mousemove\", move);\n        this.events.remove(document, \"mouseup\", stop);\n      };\n      this.events.add(document, \"mouseup\", stop);\n    };\n  }\n\n  /**\n   * Creates a mouse move event handler that updates the range value based on the mouse position.\n   * @param callback - A function to call with the new value when the mouse is moved.\n   * @returns A function that handles the mouse move event and updates the range value.\n   */\n  protected createMousemoveListener(callback: (newValue: number) => void) {\n    return (e: MouseEvent): void => {\n      const value = this._computeValue(e);\n      if (value !== this._ranger.restrict(value)) {\n        return;\n      }\n      callback?.call(this, value);\n    };\n  }\n\n  protected _connectedInit(): void {\n    this._ranger = new Ranger(this.min, this.max, this.step);\n    const gap = this._ranger.diff;\n    this.step ||= gap / 100;\n    if (isNullable(this.value)) {\n      if (!isNullable(this.default)) {\n        this.value = this.default;\n      } else {\n        (this.value as number) = Math.round(gap / 2 / this.step) * this.step;\n      }\n    }\n    this.default ??= this.value;\n  }\n\n  reset(): void {\n    this.value = this.default;\n  }\n\n  sort(): V {\n    return (this.value = this.toSorted());\n  }\n\n  toSorted(): V {\n    if (this.range) {\n      return [...(this.value as number[])].sort((a, b) => a - b) as V;\n    }\n    return this.value;\n  }\n}\n\nexport default Range;\nexport { Range };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/range/component.js

@@ -0,0 +1,2 @@
+import{godown,styles,attr,loop,tokenList}from"@godown/element";import{Ranger,omit,isNullable}from"sharekit";import{css,html}from"lit";import{property,query,queryAll,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{scopePrefix,cssGlobalVars}from"../../internal/global-style.js";import{SuperInput}from"../../internal/super-input.js";import{ringTypeAttribute}from"../../internal/ring.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";const protoName=`range`,cssScope=scopePrefix(protoName);let Range=class e extends SuperInput{constructor(...e){super(...e),this.min=0,this.max=100,this.vertical=!1,this.__focusStack=[]}get range(){return Array.isArray(this.value)}get rangeValue(){return this.range?this.value:[this.value]}padValue(e,y=0){let{rangeValue:b}=this,x=e-b.length;return x>0?Array(x).fill(y).concat(b):b}attributeChangedCallback(e,y,b){super.attributeChangedCallback(e,y,b),(e===`max`||e===`min`||e===`step`)&&(this._ranger=new Ranger(this.min,this.max,this.step))}get observedRecord(){return omit(super.observedRecord,ringTypeAttribute)}render(){let e=this.padValue(2),y=Math.min(...e),S=Math.max(...e),C=this._ranger.diff;return html`<div part="root" ${attr(this.observedRecord)} @mousedown="${this.disabled?null:this._handleMousedownRoot}" style="${styleMap(Object.fromEntries([[`--from`,`${(y-this.min)/C*100}%`],[`--to`,`${(S-this.min)/C*100}%`],...e.map((e,y)=>[`--handle-${y}`,`${(e-this.min)/C*100}%`])]))}"> <div part="track"></div> ${loop(this.rangeValue.length,e=>this._renderHandle(e))} </div>`}_renderHandle(e){let{disabled:y,range:b,rangeValue:x}=this,C=!b||b&&e===x.length-1&&x.length===1;return html`<i tabindex="0" part="${tokenList(`handle`,`handle-${e}`)}" @mousedown="${y?null:this.createMouseDown(e)}" style="${styleMap({"z-index":this.__focusStack.indexOf(e)+1,"--handle":`var(--${C?`to`:`handle-${e}`})`})}"></i>`}focusHandle(e){this.lastFocus=e;let y=this.__focusStack.indexOf(e);y!==-1&&this.__focusStack.splice(y,1),this.__focusStack.push(e);let b=this._handles.item(e);b?.focus(),this.__keydownEvent||=this.events.add(document,`keydown`,this.createKeydownEvent(e))}blurHandle(){this.lastFocus=void 0,this.__keydownEvent=this.events.remove(document,`keydown`,this.__keydownEvent)}createKeydownEvent(e){return y=>{let{rangeValue:b,step:x}=this;b.length<2&&(e=0);let S=b[e];y.key===`ArrowLeft`||y.key===`ArrowDown`?(y.preventDefault(),this.createSetValue(e)(S-x)):(y.key===`ArrowRight`||y.key===`ArrowUp`)&&(y.preventDefault(),this.createSetValue(e)(S+x))}}createMouseDown(e){return y=>{this.focusHandle(e),this.createMousedownListener(this.createSetValue(e))(y)}}createSetValue(e){return y=>{let b=this._ranger.normalize(y),x=b;this.range&&(x=[...this.value],x[e]=b),this.value=x,this.dispatchCustomEvent(`change`,this.value)}}_computeValue({clientX:e,clientY:y}){let{top:b,left:x,height:S,width:C}=this._root.getBoundingClientRect();return this._ranger.present(this.vertical?(y-b)/S:(e-x)/C)}_handleMousedownRoot(e){let y=this._computeValue(e),b=this.range?this.rangeValue.reduce((e,b,x)=>{let S=Math.abs(y-b),C=Math.abs(y-this.rangeValue[e]);return S<C?x:e},0):0,x=this.createSetValue(b);x(y),this.createMousedownListener(x)(e),this.focusHandle(b)}createMousedownListener(e){return y=>{y.preventDefault(),y.stopPropagation();let b=this.createMousemoveListener(e);this.events.add(document,`mousemove`,b);let x=()=>{this.events.remove(document,`mousemove`,b),this.events.remove(document,`mouseup`,x)};this.events.add(document,`mouseup`,x)}}createMousemoveListener(e){return y=>{let b=this._computeValue(y);b===this._ranger.restrict(b)&&e?.call(this,b)}}_connectedInit(){this._ranger=new Ranger(this.min,this.max,this.step);let e=this._ranger.diff;this.step||=e/100,isNullable(this.value)&&(isNullable(this.default)?this.value=Math.round(e/2/this.step)*this.step:this.value=this.default),this.default??=this.value}reset(){this.value=this.default}sort(){return this.value=this.toSorted()}toSorted(){return this.range?[...this.value].sort((e,y)=>e-y):this.value}};_decorate([property({type:Number})],Range.prototype,`min`,void 0),_decorate([property({type:Number})],Range.prototype,`max`,void 0),_decorate([property({type:Number})],Range.prototype,`step`,void 0),_decorate([property({type:Boolean,reflect:!0})],Range.prototype,`vertical`,void 0),_decorate([property({type:Array})],Range.prototype,`value`,void 0),_decorate([property({type:Array})],Range.prototype,`default`,void 0),_decorate([query(`[part=root]`)],Range.prototype,`_root`,void 0),_decorate([queryAll(`[part=handle]`)],Range.prototype,`_handles`,void 0),_decorate([state()],Range.prototype,`lastFocus`,void 0),Range=_decorate([godown(protoName),styles(css`:host{${cssScope}--track-width:.5em;${cssScope}--handle-scale:1;${cssScope}--track-background:var(${cssGlobalVars.active});background:var(${cssGlobalVars.passive});width:100%;display:block;height:var(${cssScope}--track-width)}:host([contents]) [part=root]{width:inherit}:host([vertical]){height:100%;width:-moz-fit-content;width:fit-content}[part=root]{min-height:inherit;position:relative;border-radius:inherit;--from:0%;--to:50%}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--from),var(--to));background:var(${cssScope}--track-background);width:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)))}[part~=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border-radius:50%;transform-origin:0 25%;outline:0;border-style:solid;border-width:.1em;transform:scale(var(${cssScope}--handle-scale)) translate(-50%,-25%);background:var(${cssGlobalVars.background});border-color:currentColor}`,css`[vertical]{height:inherit;width:var(${cssScope}--track-width)}[vertical] i{transform:translate(-25%,-50%)}[vertical] [part=track]{width:100%;height:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)));top:min(var(--from),var(--to));left:0}`,css`[part~=handle]{left:var(--handle);top:0}[vertical] [part~=handle]{top:var(--handle);left:0} `)],Range);var Range$1=Range;export{Range,Range$1 as default};
+//# sourceMappingURL=component.js.map

package/build/web-components/range/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number | number[];\n\n/**\n * {@linkcode Range} is similar to `<input type=\"range\">`.\n *\n * Value accepts number, or array.\n *\n * Number has 1 handle, the array has the number of its elements.\n *\n * @fires range - Fires when the value changes.\n * @category input\n */\n@godown(protoName)\n@styles(\n  css`\n    :host {\n      ${cssScope}--track-width: .5em;\n      ${cssScope}--handle-scale: 1;\n      ${cssScope}--track-background: var(${cssGlobalVars.active});\n      background: var(${cssGlobalVars.passive});\n      width: 100%;\n      display: block;\n      height: var(${cssScope}--track-width);\n    }\n\n    :host([contents]) [part=\"root\"] {\n      width: inherit;\n    }\n\n    :host([vertical]) {\n      height: 100%;\n      width: fit-content;\n    }\n\n    [part=\"root\"] {\n      min-height: inherit;\n      position: relative;\n      border-radius: inherit;\n      --from: 0%;\n      --to: 50%;\n    }\n\n    [part=\"track\"] {\n      height: 100%;\n      min-height: inherit;\n      display: flex;\n      position: absolute;\n      pointer-events: none;\n      border-radius: inherit;\n      justify-content: space-between;\n      left: min(var(--from), var(--to));\n      background: var(${cssScope}--track-background);\n      width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n    }\n\n    [part~=\"handle\"] {\n      width: 1em;\n      height: 1em;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      user-select: none;\n      position: absolute;\n      border-radius: 50%;\n      transform-origin: 0% 25%;\n      outline: 0;\n      border-style: solid;\n      border-width: 0.1em;\n      transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n      background: var(${cssGlobalVars.background});\n      border-color: currentColor;\n    }\n  `,\n  css`\n    [vertical] {\n      height: inherit;\n      width: var(${cssScope}--track-width);\n    }\n\n    [vertical] i {\n      transform: translate(-25%, -50%);\n    }\n\n    [vertical] [part=\"track\"] {\n      width: 100%;\n      height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n      top: min(var(--from), var(--to));\n      left: 0;\n    }\n  `,\n  css`\n    [part~=\"handle\"] {\n      left: var(--handle);\n      top: 0;\n    }\n\n    [vertical] [part~=\"handle\"] {\n      top: var(--handle);\n      left: 0;\n    }\n  `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n  /**\n   * Minimum value.\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * Maximum value.\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * Sliding step length.\n   */\n  @property({ type: Number })\n  step: number;\n\n  /**\n   * Whether to display the range vertically.\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * Value, or each of values, will render a handle.\n   *\n   * Accepts number or array of numbers.\n   */\n  @property({ type: Array })\n  value: V;\n\n  /**\n   * The default of `{@linkcode this.value}`.\n   */\n  @property({ type: Array })\n  default: V;\n\n  @query(\"[part=root]\")\n  protected _root: HTMLElement;\n\n  @queryAll(\"[part=handle]\")\n  protected _handles: NodeListOf<HTMLElement>;\n\n  @state()\n  lastFocus?: number;\n\n  protected _ranger: Ranger;\n  private __focusStack: number[] = [];\n\n  get range(): V extends number ? false : true {\n    return Array.isArray(this.value) as any;\n  }\n\n  /**\n   * Return values in the form of an array.\n   */\n  get rangeValue(): number[] {\n    return (this.range ? this.value : [this.value]) as number[];\n  }\n\n  /**\n   * Pad the value to the specified length.\n   */\n  padValue(len: number, value = 0): number[] {\n    const { rangeValue } = this;\n    const miss = len - rangeValue.length;\n    if (miss > 0) {\n      return new Array(miss).fill(value).concat(rangeValue);\n    }\n    return rangeValue;\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, _old, value);\n    if (name === \"max\" || name === \"min\" || name === \"step\") {\n      this._ranger = new Ranger(this.min, this.max, this.step);\n    }\n  }\n\n  get observedRecord(): Record<string, any> {\n    return omit(super.observedRecord, ringTypeAttribute);\n  }\n\n  protected render(): TemplateResult<1> {\n    const rangeValue = this.padValue(2);\n    const from = Math.min(...rangeValue);\n    const to = Math.max(...rangeValue);\n    const gap = this._ranger.diff;\n\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n        style=\"${styleMap(\n          Object.fromEntries([\n            [\"--from\", `${((from - this.min) / gap) * 100}%`],\n            [\"--to\", `${((to - this.min) / gap) * 100}%`],\n            ...rangeValue.map(\n              (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n            ),\n          ]),\n        )}\"\n      >\n        <div part=\"track\"></div>\n        ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n      </div>\n    `;\n  }\n\n  protected _renderHandle(index: number): TemplateResult<1> {\n    const { disabled, range, rangeValue } = this;\n\n    // in single-handle mod (value is a number or an array with length 1),\n    const end = !range || (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n    return html`\n      <i\n        tabindex=\"0\"\n        part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n        @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n        style=\"${styleMap({\n          \"z-index\": this.__focusStack.indexOf(index) + 1,\n          \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n        })}\"\n      ></i>\n    `;\n  }\n\n  private __keydownEvent: EventListenerOrEventListenerObject;\n\n  /**\n   * Focuses the handle at the given index, updates the focus stack.\n   * @param index - The index of the handle to focus.\n   */\n  focusHandle(index: number): void {\n    this.lastFocus = index;\n    const indexOfFocusStack = this.__focusStack.indexOf(index);\n    if (indexOfFocusStack !== -1) {\n      this.__focusStack.splice(indexOfFocusStack, 1);\n    }\n    this.__focusStack.push(index);\n    const handleItem = this._handles.item(index);\n    handleItem?.focus();\n    if (!this.__keydownEvent) {\n      this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n    }\n  }\n\n  /**\n   * Removes the focus from the currently focused handle.\n   */\n  blurHandle(): void {\n    this.lastFocus = undefined;\n    this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n  }\n\n  /**\n   * Creates a keydown event handler that updates the value of the range based on arrow key presses.\n   * @param index - The index of the handle to update.\n   * @returns A function that handles the keydown event and updates the range value.\n   */\n  protected createKeydownEvent(index: number) {\n    return (e: KeyboardEvent): void => {\n      const { rangeValue, step } = this;\n      if (rangeValue.length < 2) {\n        index = 0;\n      }\n      const old = rangeValue[index];\n      if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") {\n        e.preventDefault();\n        this.createSetValue(index)(old - step);\n      } else if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        this.createSetValue(index)(old + step);\n      }\n    };\n  }\n\n  /**\n   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n   * @param index - The index of the handle to focus.\n   * @returns A function that handles the mouse down event and updates the range value.\n   */\n  protected createMouseDown(index: number) {\n    return (e: MouseEvent): void => {\n      this.focusHandle(index);\n      this.createMousedownListener(this.createSetValue(index))(e);\n    };\n  }\n\n  /**\n   * Creates a function that sets the value of the range at the given index.\n   * @param index - The index of the value to set.\n   * @returns A function that sets the value of the range.\n   */\n  protected createSetValue(index: number) {\n    return (value: number): void => {\n      const normalizeValue = this._ranger.normalize(value);\n      let newValue: RangeValue = normalizeValue;\n      if (this.range) {\n        newValue = [...(this.value as number[])];\n        newValue[index] = normalizeValue;\n      }\n      this.value = newValue as V;\n      this.dispatchCustomEvent(\"change\", this.value);\n    };\n  }\n\n  /**\n   * Compute value from event.\n   * @returns The value closest to the event client position.\n   */\n  protected _computeValue({ clientX, clientY }: MouseEvent): number {\n    const { top, left, height, width } = this._root.getBoundingClientRect();\n    return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n  }\n\n  /**\n   * Handles the mouse down event on the root element of the range component.\n   * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n   * @param e - The mouse down event object.\n   */\n  protected _handleMousedownRoot(e: MouseEvent): void {\n    const value = this._computeValue(e);\n    const index = this.range\n      ? this.rangeValue.reduce((acc, item, index) => {\n          const diff = Math.abs(value - item);\n          const prevDiff = Math.abs(value - this.rangeValue[acc]);\n          return diff < prevDiff ? index : acc;\n        }, 0)\n      : 0;\n\n    const set = this.createSetValue(index);\n    set(value);\n    this.createMousedownListener(set)(e);\n    this.focusHandle(index);\n  }\n\n  /**\n   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n   * @param index - The index of the handle to focus.\n   * @returns A function that handles the mouse down event and updates the range value.\n   */\n  protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n    return (e: MouseEvent): void => {\n      e.preventDefault();\n      e.stopPropagation();\n      const move = this.createMousemoveListener(mouseMoveCallback);\n      this.events.add(document, \"mousemove\", move);\n      const stop = () => {\n        this.events.remove(document, \"mousemove\", move);\n        this.events.remove(document, \"mouseup\", stop);\n      };\n      this.events.add(document, \"mouseup\", stop);\n    };\n  }\n\n  /**\n   * Creates a mouse move event handler that updates the range value based on the mouse position.\n   * @param callback - A function to call with the new value when the mouse is moved.\n   * @returns A function that handles the mouse move event and updates the range value.\n   */\n  protected createMousemoveListener(callback: (newValue: number) => void) {\n    return (e: MouseEvent): void => {\n      const value = this._computeValue(e);\n      if (value !== this._ranger.restrict(value)) {\n        return;\n      }\n      callback?.call(this, value);\n    };\n  }\n\n  protected _connectedInit(): void {\n    this._ranger = new Ranger(this.min, this.max, this.step);\n    const gap = this._ranger.diff;\n    this.step ||= gap / 100;\n    if (isNullable(this.value)) {\n      if (!isNullable(this.default)) {\n        this.value = this.default;\n      } else {\n        (this.value as number) = Math.round(gap / 2 / this.step) * this.step;\n      }\n    }\n    this.default ??= this.value;\n  }\n\n  reset(): void {\n    this.value = this.default;\n  }\n\n  sort(): V {\n    return (this.value = this.toSorted());\n  }\n\n  toSorted(): V {\n    if (this.range) {\n      return [...(this.value as number[])].sort((a, b) => a - b) as V;\n    }\n    return this.value;\n  }\n}\n\nexport default Range;\nexport { Range };\n"],"names":["Range","len: number","value","miss","len","rangeValue","new Array(miss)","name: string","_old: string | null","value: string | null","name","_old","from","to","gap","index","index: number","end","range","disabled","indexOfFocusStack","handleItem","e: KeyboardEvent","old","e","step","e: MouseEvent","value: number","normalizeValue","newValue: RangeValue","newValue","clientY","top","height","clientX","left","width","acc","item","diff","prevDiff","set","mouseMoveCallback: (arg0: number) => void","move","mouseMoveCallback","stop","callback: (newValue: number) => void","callback","a","b"],"mappings":"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"}

package/build/web-components/range/definition.d.ts

@@ -0,0 +1,7 @@
+import Range from "./component.js";
+export default Range;
+declare global {
+	interface HTMLElementTagNameMap {
+		"godown-range": Range;
+	}
+}

package/build/web-components/range/definition.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,OAAO,WAAW,gBAAiB;AAInC,eAAe;eAEA;WACH,sBAAsB;EAC9B,gBAAgB;CACjB;AACF","names":[],"sources":["../../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-range\": Range;\n  }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/range/definition.js

@@ -0,0 +1,2 @@
+import Range from"./component.js";import"@godown/element";import"sharekit";import"lit";import"lit/decorators.js";import"lit/directives/style-map.js";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"../../internal/super-input.js";import"../../internal/ring.js";import"@oxc-project/runtime/helpers/decorate";Range.define();export{Range as default};
+//# sourceMappingURL=definition.js.map

package/build/web-components/range/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","sources":["../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-range\": Range;\n  }\n}\n"],"names":[],"mappings":"qVAEA,MAAM,QAAQ"}

package/build/web-components/rotate/component.d.ts

@@ -0,0 +1,29 @@
+import { type TemplateResult } from "lit";
+import { GlobalStyle } from "../../internal/global-style.js";
+/**
+* {@linkcode Rotate} Make child elements rotate.
+*
+* @category wrapper
+*/
+declare class Rotate extends GlobalStyle {
+	protected _root: HTMLElement;
+	protected render(): TemplateResult<1>;
+	reset(): void;
+	protected _handleRotate(e: MouseEvent): void;
+	/**
+	* Compute offset.
+	*
+	* @returns rotateX, rotateY
+	* @example
+	* ```ts
+	* const { rotateX, rotateY } = this._computeOffset(e);
+	* `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;
+	* ```
+	*/
+	protected _computeOffset(e: MouseEvent): {
+		rotateX: number;
+		rotateY: number;
+	};
+}
+export default Rotate;
+export { Rotate };

package/build/web-components/rotate/component.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AACA,cAAc,sBAAiC,KAAM;AAErD,SAAS,mBAAgC,gCAAiC;;;;;;AAW1E,cA6BM,eAAe,YAAY;CAC/B,UACU,OAAO;CAEjB,UAAU,UAAU,eAAe;CAcnC;CAKA,UAAU,cAAcA,GAAG;;;;;;;;;;;CAgB3B,UAAU,eAAeA,GAAG,aAAa;EACvC;EACA;CACD;AAUF;AAED,eAAe;AACf,SAAS","names":["e: MouseEvent"],"sources":["../../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Rotate} Make child elements rotate.\n *\n * @category wrapper\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: block;\n    width: fit-content;\n    transition: all 0.5s ease-in-out;\n    ${cssScope}--offset: .5em;\n  }\n\n  div {\n    position: relative;\n    transition: inherit;\n    transition-property: transform;\n  }\n\n  i {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    box-sizing: content-box;\n    padding: var(${cssScope}--offset);\n    margin: calc(-1 * var(${cssScope}--offset));\n  }\n\n  [part=\"slot\"] {\n    z-index: 2;\n  }\n`)\nclass Rotate extends GlobalStyle {\n  @query(\"[part=root]\")\n  protected _root: HTMLElement;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div part=\"root\">\n        <div\n          part=\"slot\"\n          @mousemove=\"${this._handleRotate}\"\n        >\n          ${htmlSlot()}\n        </div>\n        <i @mouseleave=\"${this.reset}\"></i>\n      </div>\n    `;\n  }\n\n  reset(): void {\n    this._root.style.removeProperty(\"transform\");\n    this._root.style.removeProperty(\"transition\");\n  }\n\n  protected _handleRotate(e: MouseEvent): void {\n    const { rotateX, rotateY } = this._computeOffset(e);\n    this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n    this._root.style.setProperty(\"transition\", \"0s\");\n  }\n\n  /**\n   * Compute offset.\n   *\n   * @returns rotateX, rotateY\n   * @example\n   * ```ts\n   * const { rotateX, rotateY } = this._computeOffset(e);\n   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n   * ```\n   */\n  protected _computeOffset(e: MouseEvent): {\n    rotateX: number;\n    rotateY: number;\n  } {\n    const { left, top, width, height } = this._root.getBoundingClientRect();\n    const { clientX, clientY } = e;\n    const offsetX = clientX - left;\n    const offsetY = clientY - top;\n\n    const rotateX = -(offsetY - height / 2) / height / 2;\n    const rotateY = (offsetX - width / 2) / width / 2;\n    return { rotateX, rotateY };\n  }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/rotate/component.js

@@ -0,0 +1,2 @@
+import{godown,styles,htmlSlot}from"@godown/element";import{css,html}from"lit";import{scopePrefix,GlobalStyle}from"../../internal/global-style.js";import{query}from"lit/decorators.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";import"sharekit";const protoName=`rotate`,cssScope=scopePrefix(protoName);let Rotate=class e extends GlobalStyle{render(){return html`<div part="root"> <div part="slot" @mousemove="${this._handleRotate}"> ${htmlSlot()} </div> <i @mouseleave="${this.reset}"></i> </div>`}reset(){this._root.style.removeProperty(`transform`),this._root.style.removeProperty(`transition`)}_handleRotate(e){let{rotateX:r,rotateY:i}=this._computeOffset(e);this._root.style.setProperty(`transform`,`rotateX(${r}rad) rotateY(${i}rad)`),this._root.style.setProperty(`transition`,`0s`)}_computeOffset(e){let{left:r,top:i,width:a,height:o}=this._root.getBoundingClientRect(),{clientX:s,clientY:c}=e,l=s-r,u=c-i,d=-(u-o/2)/o/2,f=(l-a/2)/a/2;return{rotateX:d,rotateY:f}}};_decorate([query(`[part=root]`)],Rotate.prototype,`_root`,void 0),Rotate=_decorate([godown(protoName),styles(css`:host{display:block;width:-moz-fit-content;width:fit-content;transition:all .5s ease-in-out;${cssScope}--offset:.5em}div{position:relative;transition:inherit;transition-property:transform}i{width:100%;height:100%;position:absolute;top:0;box-sizing:content-box;padding:var(${cssScope}--offset);margin:calc(-1*var(${cssScope}--offset))}[part=slot]{z-index:2}`)],Rotate);var Rotate$1=Rotate;export{Rotate,Rotate$1 as default};
+//# sourceMappingURL=component.js.map

package/build/web-components/rotate/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Rotate} Make child elements rotate.\n *\n * @category wrapper\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: block;\n    width: fit-content;\n    transition: all 0.5s ease-in-out;\n    ${cssScope}--offset: .5em;\n  }\n\n  div {\n    position: relative;\n    transition: inherit;\n    transition-property: transform;\n  }\n\n  i {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    box-sizing: content-box;\n    padding: var(${cssScope}--offset);\n    margin: calc(-1 * var(${cssScope}--offset));\n  }\n\n  [part=\"slot\"] {\n    z-index: 2;\n  }\n`)\nclass Rotate extends GlobalStyle {\n  @query(\"[part=root]\")\n  protected _root: HTMLElement;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div part=\"root\">\n        <div\n          part=\"slot\"\n          @mousemove=\"${this._handleRotate}\"\n        >\n          ${htmlSlot()}\n        </div>\n        <i @mouseleave=\"${this.reset}\"></i>\n      </div>\n    `;\n  }\n\n  reset(): void {\n    this._root.style.removeProperty(\"transform\");\n    this._root.style.removeProperty(\"transition\");\n  }\n\n  protected _handleRotate(e: MouseEvent): void {\n    const { rotateX, rotateY } = this._computeOffset(e);\n    this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n    this._root.style.setProperty(\"transition\", \"0s\");\n  }\n\n  /**\n   * Compute offset.\n   *\n   * @returns rotateX, rotateY\n   * @example\n   * ```ts\n   * const { rotateX, rotateY } = this._computeOffset(e);\n   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n   * ```\n   */\n  protected _computeOffset(e: MouseEvent): {\n    rotateX: number;\n    rotateY: number;\n  } {\n    const { left, top, width, height } = this._root.getBoundingClientRect();\n    const { clientX, clientY } = e;\n    const offsetX = clientX - left;\n    const offsetY = clientY - top;\n\n    const rotateX = -(offsetY - height / 2) / height / 2;\n    const rotateY = (offsetX - width / 2) / width / 2;\n    return { rotateX, rotateY };\n  }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"names":["Rotate","e: MouseEvent","rotateX","rotateY","offsetX","clientX","left","offsetY","clientY","top","height","width"],"mappings":"2SAMA,MAAM,UAAY,SACZ,SAAW,YAAY,UAAU,CAOvC,IAAA,OAAA,MA6BMA,UAAe,WAAY,CAIrB,QAA4B,CACpC,MAAO,KAAI,CAAA,+CAIO,EAAE,KAAK,cAAc,GAEjC,EAAE,UAAU,CAAA,wBAEE,EAAE,KAAK,MAAM,aAEjC,CAAC,AACF,CAED,OAAc,CACZ,KAAK,MAAM,MAAM,eAAe,YAAY,CAC5C,KAAK,MAAM,MAAM,eAAe,aAAa,AAC9C,CAES,cAAcC,EAAqB,CAC3C,GAAM,CAAE,UAAS,UAAS,CAAG,KAAK,eAAe,EAAE,CACnD,KAAK,MAAM,MAAM,YAAY,YAAa,CAAC,QAAQ,EAAEC,EAAQ,aAAa,EAAEC,EAAQ,IAAI,CAAC,CAAC,CAC1F,KAAK,MAAM,MAAM,YAAY,aAAc,KAAK,AACjD,CAYS,eAAeF,EAGvB,CACA,GAAM,CAAE,OAAM,MAAK,QAAO,SAAQ,CAAG,KAAK,MAAM,uBAAuB,CACjE,CAAE,UAAS,UAAS,CAAG,EACvBG,EAAUC,EAAUC,EACpBC,EAAUC,EAAUC,EAEpBP,EAAU,EAAEK,EAAUG,EAAS,GAAKA,EAAS,EAC7CP,GAAWC,EAAUO,EAAQ,GAAKA,EAAQ,EAChD,MAAO,CAAE,UAAS,SAAS,CAC5B,CACF,EAnDE,UAAA,CAAA,MAAM,cAAc,AAAA,EAAA,OAAA,UAAA,QAAA,OAAA,CA9BtB,OAAA,UAAA,CAAA,OAAO,UAAU,CACjB,OAAO,GAAG,CAAC,4FAKR,EAAE,SAAS,yKAeE,EAAE,SAAS,6BACF,EAAE,SAAS,iCAMrC,CAAC,CAAC,AAAA,EAAA,OAAA,CAuDF,IAAA,SAAe"}

package/build/web-components/rotate/definition.d.ts

@@ -0,0 +1,7 @@
+import Rotate from "./component.js";
+export default Rotate;
+declare global {
+	interface HTMLElementTagNameMap {
+		"godown-rotate": Rotate;
+	}
+}

package/build/web-components/rotate/definition.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,OAAO,YAAY,gBAAiB;AAIpC,eAAe;eAEA;WACH,sBAAsB;EAC9B,iBAAiB;CAClB;AACF","names":[],"sources":["../../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-rotate\": Rotate;\n  }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/rotate/definition.js

@@ -0,0 +1,2 @@
+import Rotate from"./component.js";import"@godown/element";import"lit";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"sharekit";import"lit/decorators.js";import"@oxc-project/runtime/helpers/decorate";Rotate.define();export{Rotate as default};
+//# sourceMappingURL=definition.js.map

package/build/web-components/rotate/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","sources":["../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"godown-rotate\": Rotate;\n  }\n}\n"],"names":[],"mappings":"6OAEA,OAAO,QAAQ"}

package/build/web-components/router/component.d.ts

@@ -0,0 +1,115 @@
+import { type PropertyValueMap, type TemplateResult } from "lit";
+import { Router as Mux } from "sharekit";
+import { GlobalStyle } from "../../internal/global-style.js";
+interface RouteState {
+	pathname: string;
+	params: Record<string, string>;
+	path: string;
+}
+interface RouteResult extends RouteState {
+	component: unknown;
+}
+interface RouteItem {
+	[key: PropertyKey]: unknown;
+	path: string;
+	render?: (state?: RouteState) => unknown;
+	component?: unknown;
+}
+declare const routerTypes: {
+	readonly field: "field";
+	readonly slotted: "slotted";
+	readonly united: "united";
+};
+type RouterType = keyof typeof routerTypes;
+/**
+* {@linkcode Router} has basic routing control.
+*
+* To switch routes, use `router-link component`.
+*
+* It has two methods to collect routes.
+*
+* 1. From field `routes`, an array, each elements require "path".
+* 2. From child elements, which have the slot attribute for matching routes.
+*
+* If only the method 1 is used, set `type` to `"field"`.
+*
+* If only the method 2 is used, set `type` to `"slotted"`.
+*
+* `type` defaults to `"united"`, which will try method 1, then method 2.
+*
+* If no routes are matched, the default value (no named slot) will be rendered.
+*
+* @slot - Display slot when there is no match.
+* @slot * - Matching slot will be displayed.
+* @category navigation
+*/
+declare class Router extends GlobalStyle {
+	static routerInstances: Set<Router>;
+	private __fieldRoute;
+	private __slottedRoute;
+	private __cacheRecord;
+	private __routes;
+	/**
+	* Render result.
+	*/
+	component: unknown | TemplateResult;
+	/**
+	* Dynamic parameters record.
+	*/
+	params?: Record<string, string>;
+	/**
+	* Value of matched path in routes.
+	*/
+	path?: string;
+	/**
+	* Current pathname (equals to location.pathname).
+	*/
+	pathname: string;
+	/**
+	* Rendered content when there is no match.
+	*/
+	default: TemplateResult;
+	/**
+	* The type of routing sources.
+	*
+	* If field, it won't collect the slot attribute of the child elements.
+	*
+	* This property should not be changed after the rendering is complete.
+	*/
+	type: RouterType;
+	/**
+	* Cache accessed records.
+	*
+	* Emptied at each re-collection.
+	*/
+	cache: boolean;
+	set routes(value: RouteItem[]);
+	get routes(): RouteItem[];
+	clear(): void;
+	protected render(): unknown;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	useRouter(): RouteResult;
+	protected updated(changedProperties: PropertyValueMap<this>): void;
+	/**
+	* Get component from {@linkcode routes} by query.
+	*/
+	fieldComponent(query?: string): unknown;
+	/**
+	* Get component from slotted elements by query.
+	*/
+	slottedComponent(query?: string): TemplateResult<1>;
+	/**
+	* Reset the route tree, clear cache, collect routes from child elements.
+	*/
+	collectSlottedRoutes(): void;
+	/**
+	* Reset the route tree, clear cache, collect routes from value.
+	*/
+	collectFieldRoutes(value: typeof this.routes): void;
+	static updateAll(): void;
+	search(pathname: string): Mux;
+	handlePopstate: () => void;
+}
+export default Router;
+export { Router };

package/build/web-components/router/component.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AACA,cAAc,uBAAuB,sBAA2B,KAAM;AAEtE,SAAS,UAAU,WAAiB,UAAW;AAE/C,SAAS,mBAAmB,gCAAiC;UAEnD,WAAW;CACnB;CACA,QAAQ;CACR;AACD;UAES,oBAAoB,WAAW;CACvC;AACD;UAES,UAAU;OACZ;CACN;CACA,UAAUA,QAAQ;CAClB;AACD;AAED,cAAM;UACJ,OAAO;UACP,SAAS;UACT,QAAQ;;KAGL,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;AA0B/B,cAMM,eAAe,YAAY;CAC/B,OAAO,iBAAiB,IAAI;CAE5B,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;;;;CAKR,AACA,qBAAqB;;;;CAKrB,SAAS;;;;CAKT,AACA;;;;CAKA,AACA;;;;CAKA,AACA,SAAS;;;;;;;;CAST,AACA,MAAM;;;;;;CAON,AACA;CAEA,IACI,OAAO,OAKG;CAAd,IAAI,UAAU;CAId;CAIA,UAAU;CAsBV;CAcA;CAKA,aAAa;CASb,UAAU,QAAQC,mBAAmB;;;;CAcrC,eAAeC;;;;CA2Bf,iBAAiBA,iBAAiB,eAAe;;;;CAwBjD;;;;CAWA,mBAAmBC,cAAc,KAAK;CAQtC,OAAO;CAMP,OAAOC,mBAAmB;CAI1B;AAGD;AAED,eAAe;AACf,SAAS","names":["state?: RouteState","changedProperties: PropertyValueMap<this>","query?: string","value: typeof this.routes","pathname: string"],"sources":["../../../../src/web-components/router/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Router as Mux, omit } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\ninterface RouteState {\n  pathname: string;\n  params: Record<string, string>;\n  path: string;\n}\n\ninterface RouteResult extends RouteState {\n  component: unknown;\n}\n\ninterface RouteItem {\n  [key: PropertyKey]: unknown;\n  path: string;\n  render?: (state?: RouteState) => unknown;\n  component?: unknown;\n}\n\nconst routerTypes = {\n  field: \"field\",\n  slotted: \"slotted\",\n  united: \"united\",\n} as const;\n\ntype RouterType = keyof typeof routerTypes;\n\nconst protoName = \"router\";\n\n/**\n * {@linkcode Router} has basic routing control.\n *\n * To switch routes, use `router-link component`.\n *\n * It has two methods to collect routes.\n *\n * 1. From field `routes`, an array, each elements require \"path\".\n * 2. From child elements, which have the slot attribute for matching routes.\n *\n * If only the method 1 is used, set `type` to `\"field\"`.\n *\n * If only the method 2 is used, set `type` to `\"slotted\"`.\n *\n * `type` defaults to `\"united\"`, which will try method 1, then method 2.\n *\n * If no routes are matched, the default value (no named slot) will be rendered.\n *\n * @slot - Display slot when there is no match.\n * @slot * - Matching slot will be displayed.\n * @category navigation\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: contents;\n  }\n`)\nclass Router extends GlobalStyle {\n  static routerInstances: Set<Router> = new Set<Router>();\n\n  private __fieldRoute: Mux = new Mux();\n  private __slottedRoute: Mux = new Mux();\n  private __cacheRecord = new Map<string, RouteResult>();\n  private __routes: RouteItem[];\n\n  /**\n   * Render result.\n   */\n  @state()\n  component: unknown | TemplateResult = null;\n\n  /**\n   * Dynamic parameters record.\n   */\n  params?: Record<string, string>;\n\n  /**\n   * Value of matched path in routes.\n   */\n  @state()\n  path?: string;\n\n  /**\n   * Current pathname (equals to location.pathname).\n   */\n  @property()\n  pathname: string = location.pathname;\n\n  /**\n   * Rendered content when there is no match.\n   */\n  @state()\n  default: TemplateResult = htmlSlot();\n\n  /**\n   * The type of routing sources.\n   *\n   * If field, it won't collect the slot attribute of the child elements.\n   *\n   * This property should not be changed after the rendering is complete.\n   */\n  @property()\n  type: RouterType = routerTypes.united;\n\n  /**\n   * Cache accessed records.\n   *\n   * Emptied at each re-collection.\n   */\n  @property({ type: Boolean })\n  cache = false;\n\n  @state()\n  set routes(value) {\n    this.__routes = value;\n    this.collectFieldRoutes(value);\n  }\n\n  get routes(): RouteItem[] {\n    return this.__routes;\n  }\n\n  clear(): void {\n    this.__cacheRecord.clear();\n  }\n\n  protected render(): unknown {\n    let cached: RouteResult | undefined;\n    if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {\n      this.component = cached.component;\n      this.path = cached.path;\n      this.pathname = cached.pathname;\n    }\n    if (!cached) {\n      switch (this.type) {\n        case routerTypes.field:\n          this.component = this.fieldComponent();\n          break;\n        case routerTypes.slotted:\n          this.component = this.slottedComponent();\n          break;\n        default:\n          this.component = this.fieldComponent() ?? this.slottedComponent();\n      }\n    }\n    return this.component ?? this.default;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    Router.routerInstances.add(this);\n\n    if (this.type !== \"field\") {\n      this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {\n        attributes: true,\n        attributeFilter: [\"slot\"],\n        subtree: true,\n      });\n      this.collectSlottedRoutes();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    Router.routerInstances.delete(this);\n  }\n\n  useRouter(): RouteResult {\n    return {\n      pathname: this.pathname,\n      params: this.params,\n      path: this.path,\n      component: this.component,\n    };\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>): void {\n    const shouldDispatch = changedProperties.has(\"pathname\") || changedProperties.has(\"path\");\n    if (shouldDispatch) {\n      const ur = this.useRouter();\n      if (!this.__cacheRecord.has(this.pathname) && this.path) {\n        this.__cacheRecord.set(this.pathname, ur);\n      }\n      this.dispatchCustomEvent(\"change\", ur);\n    }\n  }\n\n  /**\n   * Get component from {@linkcode routes} by query.\n   */\n  fieldComponent(query?: string): unknown {\n    if (!query) {\n      const mux = this.__fieldRoute.search(this.pathname);\n      this.params = mux.params(this.pathname);\n      query = mux.pattern;\n    }\n    this.path = query;\n\n    if (!query) {\n      return null;\n    }\n\n    const route = this.routes.find((r) => r.path === query);\n    if (!route) {\n      return null;\n    }\n\n    if (\"render\" in route) {\n      return route.render?.(omit(this.useRouter(), \"component\")) || null;\n    }\n\n    return route.component;\n  }\n\n  /**\n   * Get component from slotted elements by query.\n   */\n  slottedComponent(query?: string): TemplateResult<1> {\n    const slottedPaths = this._slottedNames;\n    if (!query) {\n      const mux = this.__fieldRoute.search(this.pathname);\n      this.params = mux.params(this.pathname);\n      query = mux.pattern;\n    }\n    this.path = query;\n\n    if (!query) {\n      return null;\n    }\n\n    this.path = slottedPaths.find((s) => s === query);\n    if (!this.path) {\n      return null;\n    }\n\n    return htmlSlot(this.path);\n  }\n\n  /**\n   * Reset the route tree, clear cache, collect routes from child elements.\n   */\n  collectSlottedRoutes(): void {\n    this.__slottedRoute = new Mux();\n    this.clear();\n    this._slottedNames.forEach((slotName) => {\n      this.__slottedRoute.insert(slotName);\n    });\n  }\n\n  /**\n   * Reset the route tree, clear cache, collect routes from value.\n   */\n  collectFieldRoutes(value: typeof this.routes): void {\n    this.__fieldRoute = new Mux();\n    this.clear();\n    value.forEach(({ path }) => {\n      this.__fieldRoute.insert(path);\n    });\n  }\n\n  static updateAll(): void {\n    this.routerInstances.forEach((i) => {\n      i.handlePopstate();\n    });\n  }\n\n  search(pathname: string): Mux {\n    return this.__fieldRoute.search(pathname) || this.__slottedRoute.search(pathname);\n  }\n\n  handlePopstate: () => void = this.events.add(window, \"popstate\", () => {\n    this.pathname = location.pathname;\n  });\n}\n\nexport default Router;\nexport { Router };\n"],"version":3,"file":"component.d.ts"}