godown 1.2.0 → 2.0.1

package/items/base-button.js

@@ -4,167 +4,211 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, property, classMap, ifDefined, define, cssvar } from "../deps.js";
-import STD from "./std.js";
-const originstyle = css `
-  :host {
-    display: inline-block;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .ghost,
-  .ghost:hover {
-    color: var(${cssvar}--background);
-    border-color: var(${cssvar}--background);
-    background-color: transparent;
-  }
-  .ghost:active {
-    color: var(${cssvar}--active);
-    background-color: var(${cssvar}--background-active);
-  }
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: inherit;
-    padding: 0;
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
-    font-size: inherit;
-    border-radius: inherit;
-    border-width: 0.08em;
-    border-style: solid;
-    cursor: inherit;
-    text-decoration: inherit;
-    transition: all 0.2s ease-in;
-    color: var(${cssvar}--color);
-    border-color: var(${cssvar}--border);
-    background-color: var(${cssvar}--background);
-  }
-  a:hover {
-    color: var(${cssvar}--hover);
-    border-color: var(${cssvar}--border-hover);
-    background-color: var(${cssvar}--background-hover);
-  }
-  a:active {
-    transition: 0s;
-    color: var(${cssvar}--active);
-    border-color: var(${cssvar}--border-active);
-    background-color: var(${cssvar}--background-active);
-  }
-  a[disabled],
-  a[disabled]:hover,
-  a[disabled]:active {
-    color: var(${cssvar}--color-disabled);
-    border-color: var(${cssvar}--border-disabled);
-    background-color: var(${cssvar}--background-disabled);
-  }
-`;
-const colorful = css `
-  .black {
-    ${cssvar}--color: #f0f0f0;
-    ${cssvar}--border: #444444;
-    ${cssvar}--background: #2c2c2c;
-    ${cssvar}--hover: #fafafa;
-    ${cssvar}--border-hover: #707070;
-    ${cssvar}--background-hover: #303030;
-    ${cssvar}--active: #fafafa;
-    ${cssvar}--border-active: #5a5a5a;
-    ${cssvar}--background-active: #3a3a3a;
-  }
-  .white {
-    ${cssvar}--color: #2c2c2c;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #f8f8f8;
-    ${cssvar}--hover: #707070;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #f4f4f4;
-    ${cssvar}--border-active: #aaaaaa;
-    ${cssvar}--background-active: #aaaaaa;
-  }
-  .yellow {
-    ${cssvar}--color: #fafafa;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #ebb10d;
-    ${cssvar}--hover: #ececec;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #f9bd10;
-    ${cssvar}--background-active: #d7a422;
-    ${cssvar}--border-active: #44444420;
-  }
-  .gary {
-    ${cssvar}--color: #fafafa;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #51535e;
-    ${cssvar}--hover: #ececec;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #5e616d;
-    ${cssvar}--background-active: #3f3d47;
-    ${cssvar}--border-active: #44444420;
-  }
-  .red {
-    ${cssvar}--color: #fafafa;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #d11a2d;
-    ${cssvar}--hover: #ececec;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #c62828;
-    ${cssvar}--background-active: #a61b29;
-    ${cssvar}--border-active: #44444420;
-  }
-  .blue {
-    ${cssvar}--color: #fafafa;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #1177b0;
-    ${cssvar}--hover: #ececec;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #11659a;
-    ${cssvar}--background-active: #144a74;
-    ${cssvar}--border-active: #44444420;
-  }
-  .green {
-    ${cssvar}--color: #fafafa;
-    ${cssvar}--border: #44444450;
-    ${cssvar}--background: #12aa8c;
-    ${cssvar}--hover: #ececec;
-    ${cssvar}--border-hover: #44444450;
-    ${cssvar}--background-hover: #1db68f;
-    ${cssvar}--background-active: #248067;
-    ${cssvar}--border-active: #44444420;
-  }
-`;
-let BaseButton = class BaseButton extends STD {
+import { constructCSS, css, cssvar, define, html, property, query, unsafeCSS } from "../deps.js";
+import { htmlSlot } from "../tmpl.js";
+import ItemsSTD from "./std.js";
+const vars = ["--color", "--gradient", "--box-shadow", "--ghost-color"];
+const colors = {
+    black: ["#fff", "linear-gradient(45deg, rgb(41 40 40), #2d3034)", "-2px 2px 5px 0px rgb(0 0 0 / 30%), 2px -2px 5px 0 rgb(99 99 99 / 30%)", "rgb(0 0 0 / 80%)"],
+    white: ["#000", "linear-gradient(45deg, rgb(240 240 240 / 85%), rgb(240 240 240 / 70%))", "-2px 2px 5px 0px rgb(255 255 255 / 30%), 2px -2px 5px 0 rgb(165 165 165 / 30%)", "rgb(255 255 255 / 80%)"],
+    red: ["#fff", "linear-gradient(45deg, rgb(207 19 34 / 84%), hsl(15.14deg 95.69% 54.51% / 65%))", "-2px 2px 5px 0px rgb(181 35 44 / 30%), 2px -2px 5px 0 rgb(234 130 174 / 30%)", "rgb(181 35 44 / 80%)"],
+    green: ["#fff", "linear-gradient(45deg, rgb(25 149 56 / 84%), rgb(0 245 36 / 65%))", "-2px 2px 5px 0px rgb(63 179 69 / 30%), 2px -2px 5px 0 rgb(136 225 142 / 30%)", "rgb(63 179 69 / 80%)"],
+    blue: ["#fff", "linear-gradient(45deg, rgb(22 119 255 / 84%), rgb(21 198 198 / 65%))", "-2px 2px 5px 0px rgb(92 182 255 / 30%), 2px -2px 5px 0 rgb(135 232 222 / 30%)", "rgb(42 141 221 / 80%)"],
+    yellow: ["#fff", "linear-gradient(45deg, rgb(247 184 37 / 84%), rgb(220 200 26 / 65%))", "-2px 2px 5px 0px rgb(214 203 55 / 30%), 2px -2px 5px 0 rgb(202 203 137 / 30%)", "rgb(214 203 55 / 80%)"],
+};
+const outlineBoxShadow = `0 0 0 var(${cssvar}--ghost-width) var(${cssvar}--ghost-color);`;
+let BaseButton = class BaseButton extends ItemsSTD {
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.outline = false;
         this.ghost = false;
-        this.href = undefined;
-        this.target = undefined;
+        this.active = false;
         this.color = "black";
+        this.text = "";
     }
     render() {
-        return html `<a href=${ifDefined(this.href)} target=${ifDefined(this.target)} ?disabled=${this.disabled} class=${classMap({ ghost: this.ghost, [this.color]: this.color })}> <slot name="pre"></slot><slot></slot><slot name="suf"></slot> </a>`;
+        return html `
+      <div ?disabled="${this.disabled}">
+        <b>
+          <i></i>
+        </b>
+        <p>${this.text}${htmlSlot()}</p>
+        ${this.outline
+            ? html ` <style>
+              :host([active]) {
+                box-shadow: ${outlineBoxShadow};
+              }
+            </style>`
+            : ""}
+      </div>
+    `;
+    }
+    focus() {
+        this.active = true;
+    }
+    blur() {
+        this.active = false;
+    }
+    firstUpdated() {
+        const padding = getComputedStyle(this).padding;
+        if (padding) {
+            this._slot.style.padding = padding;
+            this.style.padding = "0px";
+        }
+        if (this.outline) {
+            this.addEvent(this, "mousedown", this._handleClick);
+            this.addEvent(window, "click", this._handleClick.bind(this));
+        }
+        else {
+            this.addEvent(this, "mousedown", this._handleModal);
+            this.addEvent(this, "mouseup", this.blur);
+            this.addEvent(this, "mouseleave", this.blur);
+        }
+    }
+    _handleModal(e) {
+        if (this.disabled)
+            return;
+        this.blur();
+        const size = `${Math.max(this._div.offsetHeight, this._div.offsetWidth) * 2.8285}px`;
+        const translate = `translate(calc(-50% + ${e.offsetX}px), calc(-50% + ${e.offsetY}px))`;
+        this._b.style.width = size;
+        this._b.style.height = size;
+        this._b.style.transform = translate;
+        this.focus();
+    }
+    _handleClick(e) {
+        if (e.target == this) {
+            this._handleModal(e);
+        }
+        else {
+            this.blur();
+        }
     }
 };
-BaseButton.styles = [originstyle, colorful];
+BaseButton.styles = [
+    unsafeCSS(constructCSS(vars, colors, (raw) => `:host([color="${raw}"])`, (k, v) => `${cssvar}${k}:${v}`)),
+    css `
+      :host {
+        ${cssvar}--ghost-width: 4px;
+        ${cssvar}--modal-opacity: .15;
+        ${cssvar}--modal-animation-duration: .5s;
+        color: var(${cssvar}--color);
+        background: var(${cssvar}--gradient);
+        box-shadow: var(${cssvar}--box-shadow);
+        display: inline-flex;
+        width: fit-content;
+        margin: auto;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+
+      slot {
+        pointer-events: none;
+        display: flow-root;
+      }
+
+      div {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: inherit;
+      }
+
+      i {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        border-radius: 50%;
+        transform: translate(0, 0);
+        background: currentColor;
+        opacity: var(${cssvar}--modal-opacity);
+      }
+
+      b {
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        visibility: hidden;
+      }
+
+      :host([active]) i {
+        visibility: visible;
+        animation-name: i;
+        animation-duration: var(${cssvar}--modal-animation-duration);
+      }
+
+      p {
+        margin: 0;
+      }
+
+      :host([ghost]) p {
+        background-image: var(${cssvar}--gradient);
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+      }
+
+      :host([ghost]) {
+        ${cssvar}--modal-opacity: .2;
+        background: transparent;
+        box-shadow: ${unsafeCSS(outlineBoxShadow)};
+      }
+
+      :host([ghost]) i {
+        background: var(${cssvar}--ghost-color);
+      }
+
+      @keyframes i {
+        0% {
+          transform: scale(0);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    `,
+];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
+], BaseButton.prototype, "outline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "ghost", void 0);
 __decorate([
-    property()
-], BaseButton.prototype, "href", void 0);
+    property({ type: Boolean, reflect: true })
+], BaseButton.prototype, "active", void 0);
 __decorate([
-    property()
-], BaseButton.prototype, "target", void 0);
+    property({ reflect: true })
+], BaseButton.prototype, "color", void 0);
 __decorate([
     property()
-], BaseButton.prototype, "color", void 0);
+], BaseButton.prototype, "text", void 0);
+__decorate([
+    query("i")
+], BaseButton.prototype, "_i", void 0);
+__decorate([
+    query("b")
+], BaseButton.prototype, "_b", void 0);
+__decorate([
+    query("div")
+], BaseButton.prototype, "_div", void 0);
 BaseButton = __decorate([
     define("base-button")
 ], BaseButton);
 export { BaseButton };
 export default BaseButton;
+//# sourceMappingURL=base-button.js.map

package/items/base-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../src/items/base-button.ts"],"names":[],"mappings":"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"}

package/items/dialog-item.d.ts

@@ -1,20 +1,21 @@
-import STD from "./std.js";
-export declare class DialogItem extends STD {
+import ItemsSTD from "./std.js";
+export declare class DialogItem extends ItemsSTD {
     static styles: import("lit").CSSResult;
+    modal: boolean;
     open: boolean;
-    key: string;
     scale: boolean;
-    modal: boolean;
+    gap: number;
+    key: string;
     call: "left" | "center" | "right" | "top" | "bottom";
-    get _div(): HTMLDivElement;
+    _div: HTMLDivElement;
     render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
+    connectedCallback(): void;
     show(): void;
     showModal(): void;
     close(): void;
-    _handleWheel(e: any): void;
-    _handleKeydown(e: KeyboardEvent): void;
-    _handleModal(e: Event): void;
+    protected _handleWheel(e: any): void;
+    protected _handleKeydown(e: KeyboardEvent): void;
+    protected _handelSubmit(e: SubmitEvent): void;
 }
 export default DialogItem;
 declare global {

package/items/dialog-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-item.d.ts","sourceRoot":"","sources":["../../src/items/dialog-item.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,UAAW,SAAQ,GAAG;IACjC,MAAM,CAAC,MAAM,0BA+DX;IAC0C,IAAI,UAAS;IAC7B,GAAG,SAAY;IACd,KAAK,UAAS;IACd,KAAK,UAAS;IACf,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAY;IAC5F,IAAI,IAAI,mBAEP;IACD,MAAM;IAKN,YAAY;IAQZ,IAAI;IAMJ,SAAS;IAKT,KAAK;IAIL,YAAY,CAAC,CAAC,KAAA;IAQd,cAAc,CAAC,CAAC,EAAE,aAAa;IAI/B,YAAY,CAAC,CAAC,EAAE,KAAK;CAGtB;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"dialog-item.d.ts","sourceRoot":"","sources":["../../src/items/dialog-item.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,UAAU,CAAC;AAEhC,qBACa,UAAW,SAAQ,QAAQ;IACtC,MAAM,CAAC,MAAM,0BA2EX;IAC0C,KAAK,UAAS;IACd,IAAI,UAAS;IAC5B,KAAK,UAAS;IACf,GAAG,SAAO;IACV,GAAG,SAAY;IACf,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAY;IAC9E,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM;IAMN,iBAAiB;IAcjB,IAAI;IAQJ,SAAS;IAKT,KAAK;IAIL,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAiB7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/items/dialog-item.js

@@ -4,71 +4,78 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, property, define } from "../deps.js";
-import STD from "./std.js";
-let DialogItem = class DialogItem extends STD {
+import { css, define, html, property, query } from "../deps.js";
+import ItemsSTD from "./std.js";
+let DialogItem = class DialogItem extends ItemsSTD {
     constructor() {
         super(...arguments);
+        this.modal = false;
         this.open = false;
-        this.key = "Escape";
         this.scale = false;
-        this.modal = false;
+        this.gap = 0.1;
+        this.key = "Escape";
         this.call = "center";
     }
-    get _div() {
-        return this.shadowRoot.querySelector("div");
-    }
     render() {
-        return html `<div ?open=${this.open} ?modal=${this.modal}>
-      <slot class=${this.call}></slot>
+        return html ` <div>
+      <slot class="${this.call}"></slot>
     </div>`;
     }
-    firstUpdated() {
-        this.addEventListener("submit", (e) => {
-            if (e.target.method === "dialog")
-                this.close();
-        });
-        if (this.scale)
-            this.addEventListener("wheel", this._handleWheel);
-        if (this.key)
-            document.addEventListener("keydown", (e) => this._handleKeydown(e));
-        if (this.open)
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEvent(this, "submit", this._handelSubmit);
+        if (this.scale) {
+            this.addEvent(this, "wheel", this._handleWheel);
+        }
+        if (this.key) {
+            this.addEvent(document, "keydown", this._handleKeydown.bind(this));
+        }
+        if (this.open) {
             this.show();
+        }
     }
     show() {
-        this.open = true;
         if (this.modal) {
             this.showModal();
         }
+        else {
+            this.open = true;
+        }
     }
     showModal() {
         this.modal = true;
         this.open = true;
-        this._div.addEventListener("click", this._handleModal);
     }
     close() {
         this.open = false;
-        if (this.modal)
-            this._div.removeEventListener("click", this._handleModal);
     }
     _handleWheel(e) {
-        const s = this._div.style.transform.match(/scale\((.*)\)/);
-        let scale = 1;
-        if (s)
-            scale = Number(s[1]);
-        if (e.deltaY > 0)
-            scale -= 0.1;
-        else
-            scale += 0.1;
-        this._div.style.transform = `scale(${scale})`;
+        if (this.scale) {
+            const s = this._div.style.transform.match(/scale\((.*)\)/);
+            let scale = 1;
+            if (s) {
+                scale = Number(s[1]);
+            }
+            if (e.deltaY > 0) {
+                scale -= this.gap;
+            }
+            else {
+                scale += this.gap;
+            }
+            console.log(scale);
+            this._div.style.transform = `scale(${scale})`;
+        }
     }
     _handleKeydown(e) {
-        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((e) => e !== "");
-        if (keys.includes(e.key) || keys.includes(e.code))
+        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
+        if (keys.includes(e.key) || keys.includes(e.code)) {
             this.close();
+        }
     }
-    _handleModal(e) {
-        e.stopPropagation();
+    _handelSubmit(e) {
+        if (e.target.method === "dialog") {
+            this.close();
+        }
     }
 };
 DialogItem.styles = css `
@@ -84,24 +91,31 @@ DialogItem.styles = css `
       display: flex;
       visibility: hidden;
       background: rgb(0 0 0 / 0%);
+      pointer-events: none;
     }
+
     :host([open]) {
       visibility: visible;
     }
+
     :host([open][modal]) {
+      pointer-events: all;
       backdrop-filter: blur(0.25px);
       background: rgb(0 0 0 / 20%);
     }
-    [open] slot {
+
+    :host([open]) slot {
       opacity: 1 !important;
       transform: translateY(0) translateX(0) !important;
     }
+
     div {
       height: 100%;
       width: 100%;
       display: flex;
       transition: inherit;
     }
+
     slot {
       display: block;
       width: fit-content;
@@ -111,24 +125,29 @@ DialogItem.styles = css `
       transition: inherit;
       pointer-events: all;
     }
+
     .center {
       transform: translateY(-15%);
     }
+
     .top {
       width: 100%;
       margin-top: 0;
       transform: translateY(-15%);
     }
+
     .right {
       height: 100%;
       margin-right: 0;
       transform: translateX(15%);
     }
+
     .bottom {
       width: 100%;
       margin-bottom: 0;
       transform: translateY(15%);
     }
+
     .left {
       height: 100%;
       margin-left: 0;
@@ -137,21 +156,28 @@ DialogItem.styles = css `
   `;
 __decorate([
     property({ type: Boolean, reflect: true })
-], DialogItem.prototype, "open", void 0);
+], DialogItem.prototype, "modal", void 0);
 __decorate([
-    property({ type: String })
-], DialogItem.prototype, "key", void 0);
+    property({ type: Boolean, reflect: true })
+], DialogItem.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
 ], DialogItem.prototype, "scale", void 0);
 __decorate([
-    property({ type: Boolean })
-], DialogItem.prototype, "modal", void 0);
+    property({ type: Number })
+], DialogItem.prototype, "gap", void 0);
+__decorate([
+    property({ type: String })
+], DialogItem.prototype, "key", void 0);
 __decorate([
     property({ type: String })
 ], DialogItem.prototype, "call", void 0);
+__decorate([
+    query("div")
+], DialogItem.prototype, "_div", void 0);
 DialogItem = __decorate([
     define("dialog-item")
 ], DialogItem);
 export { DialogItem };
 export default DialogItem;
+//# sourceMappingURL=dialog-item.js.map

package/items/dialog-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-item.js","sourceRoot":"","sources":["../../src/items/dialog-item.ts"],"names":[],"mappings":"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"}

package/items/index.d.ts

@@ -1,8 +1,9 @@
 export * from "./alert-item.js";
-export * from "./avatar-anchor.js";
+export * from "./avatar-a.js";
 export * from "./base-button.js";
 export * from "./dialog-item.js";
 export * from "./link-a.js";
 export * from "./load-track.js";
 export * from "./super-a.js";
+export * from "./time-bar.js";
 //# sourceMappingURL=index.d.ts.map

package/items/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/items/index.js

@@ -1,7 +1,9 @@
 export * from "./alert-item.js";
-export * from "./avatar-anchor.js";
+export * from "./avatar-a.js";
 export * from "./base-button.js";
 export * from "./dialog-item.js";
 export * from "./link-a.js";
 export * from "./load-track.js";
 export * from "./super-a.js";
+export * from "./time-bar.js";
+//# sourceMappingURL=index.js.map

package/items/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/items/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/items/link-a.d.ts

@@ -1,13 +1,14 @@
 import { SuperAnchor } from "./super-a.js";
 export declare class LinkAnchor extends SuperAnchor {
-    active: string;
+    active: boolean;
     replace: boolean;
+    prevent: boolean;
     static styles: import("lit").CSSResult;
-    firstUpdated(): void;
+    connectedCallback(): void;
     useActive(): void;
-    _handleClick(e: MouseEvent): void;
-    pushState(url?: string): void;
-    replaceState(url?: string): void;
+    protected _handleClick(e: MouseEvent): void;
+    pushState(url?: string, data?: any): void;
+    replaceState(url?: string, data?: any): void;
     static pushState(data: any, unused: string, url?: string): void;
     static replaceState(data: any, unused: string, url?: string): void;
 }