godown 3.0.0-canary.11 → 3.0.0-canary.13

package/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AACvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/split.d.ts

@@ -3,7 +3,7 @@ export default Split;
 export * from "./components/split.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "godown-split-input": Split;
+        "godown-split": Split;
     }
 }
 //# sourceMappingURL=split.d.ts.map

package/split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,KAAK,CAAC;KAC7B;CACF"}
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

package/src/alert.ts

@@ -4,6 +4,8 @@ Alert.define();
 
 export default Alert;
 
+export * from "./components/alert.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-alert": Alert;

package/src/avatar.ts

@@ -4,6 +4,8 @@ Avatar.define();
 
 export default Avatar;
 
+export * from "./components/avatar.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-avatar": Avatar;

package/src/button.ts

@@ -4,6 +4,8 @@ Button.define();
 
 export default Button;
 
+export * from "./components/button.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-button": Button;

package/src/card.ts

@@ -4,6 +4,8 @@ Card.define();
 
 export default Card;
 
+export * from "./components/card.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-card": Card;

package/src/carousel.ts

@@ -4,6 +4,8 @@ Carousel.define();
 
 export default Carousel;
 
+export * from "./components/carousel.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-carousel": Carousel;

package/src/components/button.ts

@@ -120,7 +120,7 @@ const colors: Record<Colors, string> = constructCSSObject(
   css`
     :host {
       ${cssScope}--padding-x: .5em;
-      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .25em);
       ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
       ${cssScope}--modal-animation-duration: 1s;
       ${cssScope}--ghost-width: .08em;
@@ -196,25 +196,25 @@ class Button extends GlobalStyle {
    * Whether to disable this element.
    */
   @property({ type: Boolean, reflect: true })
-  disabled: boolean;
+  disabled = false;
 
   /**
    * Display ghost.
    */
   @property({ type: Boolean, reflect: true })
-  ghost: boolean;
+  ghost = false;
 
   /**
    * Whether this element is active or not.
    */
   @property({ type: Boolean, reflect: true })
-  active: boolean;
+  active = false;
 
   /**
    * Display rounded.
    */
   @property({ type: Boolean, reflect: true })
-  round: boolean;
+  round = false;
 
   /**
    * The primary color.

package/src/components/carousel.ts

@@ -35,6 +35,7 @@ const protoName = "carousel";
     }
 
     [part=root] {
+      direction: ltr;
       overflow: hidden;
     }
 

package/src/components/dialog.ts

@@ -106,7 +106,7 @@ class Dialog extends SuperOpenable {
   @property()
   key = "Escape";
 
-  private _modalInvoke: boolean;
+  private _modalInvoke = false;
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>

package/src/components/dragbox.ts

@@ -44,7 +44,7 @@ class Dragbox extends GlobalStyle {
     return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
   }
 
-  private drag: boolean;
+  private drag = false;
   private t: number;
   private l: number;
   private cx: number;

package/src/components/link.ts

@@ -26,11 +26,19 @@ class Link extends SuperAnchor {
   @property()
   type: "push" | "replace" | "normal" = "normal";
 
+  /**
+   * Suppress the update of the {@linkcode Router}.
+   */
+  @property({ type: Boolean })
+  suppress = false;
+
   protected _handleClick(e: MouseEvent): void {
     if (this.type === "push" || this.type === "replace") {
       e.preventDefault();
       (history[`${this.type}State`])(null, "", this.href);
-      Router.updateAll();
+      if (!this.suppress) {
+        Router.updateAll();
+      }
     }
   }
 }

package/src/components/range.ts

@@ -27,23 +27,27 @@ const cssScope = scopePrefix(protoName);
 @styles(
   css`
     :host {
-      ${cssScope}-handle-active: var(${cssGlobalVars._colors.blue[7]});
-      ${cssScope}-track-width: .5em;
+      ${cssScope}--handle-active: var(${cssGlobalVars.active});
+      ${cssScope}--track-width: .5em;
+      ${cssScope}--length: var(${cssGlobalVars.input}-width);
       background: var(${cssGlobalVars.input}-background);
-      width: var(${cssGlobalVars.input}-width);
+      width: var(${cssScope}--length);
       display: block;
-      margin: 0.25em 0;
+    }
+
+    :host([contents]) [part=root] {
+      width: inherit;
     }
 
     :host([vertical]) {
-      height: var(${cssGlobalVars.input}-width);
+      height: var(${cssScope}--length);
       width: fit-content;
     }
 
     :host(:not([disabled])) .last-focus {
       z-index: 1;
-      ${cssScope}-handle-scale:1.05;
-      background: var(${cssScope}-handle-active);
+      ${cssScope}--handle-scale:1.05;
+      background: var(${cssScope}--handle-active);
     }
 
     [part=root] {
@@ -53,7 +57,7 @@ const cssScope = scopePrefix(protoName);
       width: 100%;
       --from: 0%;
       --to: 50%;
-      height: var(${cssScope}-track-width);
+      height: var(${cssScope}--track-width);
     }
 
     [part=track] {
@@ -80,7 +84,7 @@ const cssScope = scopePrefix(protoName);
       border: 0.1em solid;
       border-radius: 50%;
       transform-origin: 0% 25%;
-      transform: scale(var(${cssScope}-handle-scale, 1)) translate(-50%, -25%);
+      transform: scale(var(${cssScope}--handle-scale, 1)) translate(-50%, -25%);
       background: var(${cssGlobalVars.active});
       border-color: var(${cssGlobalVars.input}-control);
     }
@@ -88,7 +92,7 @@ const cssScope = scopePrefix(protoName);
   css`
     [vertical] {
       height: inherit;
-      width: var(${cssScope}-track-width);
+      width: var(${cssScope}--track-width);
     }
 
     [vertical] i {
@@ -137,7 +141,7 @@ class Range extends SuperInput {
    * Display vertically.
    */
   @property({ type: Boolean, reflect: true })
-  vertical: boolean;
+  vertical = false;
 
   /**
    * Value, or each of values, will render a handle.

package/src/components/router.ts

@@ -202,7 +202,7 @@ class Router extends GlobalStyle {
    * Get component from {@linkcode routes} by query.
    */
   fieldComponent(query?: string): unknown {
-    query ||= this.useWhich(this.pathname);
+    query ||= this.__fieldRouteTree.search(RouteTree.split(this.pathname)).pattern || null;
     this.path = query;
 
     if (!query) {
@@ -222,7 +222,7 @@ class Router extends GlobalStyle {
    */
   slottedComponent(usedRouteTemplate?: string): TemplateResult<1> {
     const slottedPaths = this._slottedNames;
-    usedRouteTemplate ||= this.__slottedRouteTree.useWhich(this.pathname);
+    usedRouteTemplate ||= this.__slottedRouteTree.search(RouteTree.split(this.pathname)).pattern || null;
     this.path = usedRouteTemplate;
 
     if (!usedRouteTemplate) {
@@ -259,12 +259,8 @@ class Router extends GlobalStyle {
     });
   }
 
-  useWhich(path: string): string {
-    return this.__fieldRouteTree.useWhich(this.baseURL + path);
-  }
-
-  parseParams(routeTemplate: string, path: string): Record<string, string> {
-    return this.__fieldRouteTree.parseParams(path, routeTemplate);
+  parseParams(routeTemplate: string, path: string = this.pathname): Record<string, string> {
+    return RouteTree.parseParams(path, routeTemplate);
   }
 
   static updateAll(): void {

package/src/components/select.ts

@@ -91,10 +91,10 @@ class Select extends Input {
   direction: "top" | "bottom" | undefined;
 
   @property({ type: Boolean })
-  multiple: boolean;
+  multiple = false;
 
   @property({ type: Boolean })
-  visible: boolean;
+  visible = false;
 
   @state()
   protected autoDirection: "top" | "bottom" = "bottom";
@@ -128,9 +128,7 @@ class Select extends Input {
         @input="${this._handleInput}"
       >`,
       html`<label for="${this.makeId}" part="suffix">
-        <i part="space"></i>
         <i part="icon">${svgCaretDown()}</i>
-        <i part="space"></i>
       </label>`,
       html`<label for="${this.makeId}" part="content">
         ${htmlSlot()}

package/src/components/split.ts

@@ -50,7 +50,7 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
       width: 100%;
       position: relative;
       vertical-align: top;
-      display: inline-flex;
+      display: flex;
       justify-content: space-between;
       border-radius: inherit;
     }

package/src/components/switch.ts

@@ -25,6 +25,7 @@ const cssScope = scopePrefix(protoName);
     :host([contents]) [part=root] {
       width: var(${cssScope}-width);
       height: var(${cssScope}-height);
+      display: inline-block;
     }
 
     :host {
@@ -34,7 +35,6 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}-handle-space: .125em;
       ${cssScope}-transition: .2s ease-in-out;
       background: var(${cssGlobalVars.input}-background);
-      display: inline-block;
       vertical-align: bottom;
       border-radius: 0;
     }
@@ -71,6 +71,7 @@ const cssScope = scopePrefix(protoName);
 
     :host([round]) {
       border-radius: calc(var(${cssScope}-height) / 2);
+      background: var(${cssGlobalVars.passive});
     }
 
     :host([checked]) span {
@@ -94,10 +95,6 @@ const cssScope = scopePrefix(protoName);
       margin: var(${cssScope}-handle-space);
     }
 
-    .round {
-      background: var(${cssGlobalVars.passive});
-    }
-
     :host([checked]) .round {
       background: var(${cssGlobalVars.active});
     }

package/src/components/text.ts

@@ -77,7 +77,7 @@ class Text extends GlobalStyle {
    * Set background-clip to text.
    */
   @property({ type: Boolean })
-  clip: boolean;
+  clip = false;
 
   protected render(): TemplateResult<1> {
     return html`<span

package/src/core/super-input.ts

@@ -22,6 +22,7 @@ const fieldStyle = css`
     height: 100%;
     width: 100%;
     color: inherit;
+    padding: 0 var(${cssGlobalVars.input}-space);
   }
 
   .input-field:focus-within,
@@ -41,8 +42,12 @@ const fieldStyle = css`
     display: flex;
   }
 
-  .input-field [part=space] {
-    width: var(${cssGlobalVars.input}-space);
+  .input-field [part=suffix] [part=icon] {
+    padding-inline-end: var(${cssGlobalVars.input}-space);
+  }
+
+  .input-field [part=prefix] [part=icon] {
+    padding-inline-start: var(${cssGlobalVars.input}-space);
   }
 `;
 
@@ -76,12 +81,12 @@ input::-ms-clear {
 
 @styles(fieldStyle, inputStyle)
 class SuperInput extends GlobalStyle {
-  autofocus: boolean;
+  autofocus = false;
   @property()
   autocomplete: string | boolean;
 
   @property({ type: Boolean, reflect: true })
-  disabled: boolean;
+  disabled = false;
 
   @property({ reflect: true })
   type: InputType;
@@ -107,7 +112,7 @@ class SuperInput extends GlobalStyle {
   /**
    * Returns true when the input is compositing.
    */
-  compositing: boolean;
+  compositing = false;
 
   set defaultValue(value: typeof this.default) {
     this.default = value;
@@ -182,7 +187,6 @@ class SuperInput extends GlobalStyle {
 
   protected _renderPrefix(): TemplateResult<1> {
     return html`<label for=${this.makeId} part="prefix">
-    <i part="space"></i>
     ${htmlSlot("prefix")}</label>`;
   }
 
@@ -191,7 +195,6 @@ class SuperInput extends GlobalStyle {
     return html`<label for=${this.makeId} part="suffix">${
       this.type === "password"
         ? html`
-        <i part="space"></i>
         <i
           part="icon"
           @mousedown="${() => this._changeInputType("text")}"
@@ -200,7 +203,6 @@ class SuperInput extends GlobalStyle {
         >${iconEyeSlashFill()}</i>`
         : htmlSlot("suffix")
     }
-    <i part="space"></i>
   </label>`;
   }
 }

package/src/details.ts

@@ -4,6 +4,8 @@ Details.define();
 
 export default Details;
 
+export * from "./components/details.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-details": Details;

package/src/dialog.ts

@@ -4,6 +4,8 @@ Dialog.define();
 
 export default Dialog;
 
+export * from "./components/dialog.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-dialog": Dialog;

package/src/divider.ts

@@ -4,6 +4,8 @@ Divider.define();
 
 export default Divider;
 
+export * from "./components/divider.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-divider": Divider;

package/src/dragbox.ts

@@ -4,6 +4,8 @@ Dragbox.define();
 
 export default Dragbox;
 
+export * from "./components/dragbox.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-dragbox": Dragbox;

package/src/flex.ts

@@ -4,6 +4,8 @@ Flex.define();
 
 export default Flex;
 
+export * from "./components/flex.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-flex": Flex;

package/src/form.ts

@@ -4,6 +4,8 @@ Form.define();
 
 export default Form;
 
+export * from "./components/form.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-form": Form;

package/src/grid.ts

@@ -4,6 +4,8 @@ Grid.define();
 
 export default Grid;
 
+export * from "./components/grid.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-grid": Grid;

package/src/layout.ts

@@ -5,6 +5,7 @@ Layout.define();
 export default Layout;
 
 export * from "./components/layout.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-layout": Layout;

package/src/progress.ts

@@ -5,6 +5,7 @@ Progress.define();
 export default Progress;
 
 export * from "./components/progress.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-progress": Progress;

package/src/router.ts

@@ -5,6 +5,7 @@ Router.define();
 export default Router;
 
 export * from "./components/router.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-router": Router;

package/src/split.ts

@@ -8,6 +8,6 @@ export * from "./components/split.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "godown-split-input": Split;
+    "godown-split": Split;
   }
 }

package/src/typewriter.ts

@@ -4,6 +4,8 @@ Typewriter.define();
 
 export default Typewriter;
 
+export * from "./components/typewriter.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-typewriter": Typewriter;

package/typewriter.d.ts

@@ -1,5 +1,6 @@
 import Typewriter from "./components/typewriter.js";
 export default Typewriter;
+export * from "./components/typewriter.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-typewriter": Typewriter;

package/typewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,cAAc,4BAA4B,CAAC;AAE3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}