@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/alert/alert.js

@@ -4,13 +4,77 @@ 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 { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+/** Longest we wait for the hide transition before closing anyway. */
+const TRANSITION_FALLBACK_MS = 400;
+/**
+ * Inline message with an icon, content, a `confirm` action under the message and a dismiss
+ * `action` at the end. It can also hide itself after `timeout` milliseconds. Hiding always
+ * animates (unless the user prefers reduced motion).
+ *
+ * Slots: `icon` (start), default (message), `confirm` (below the message, bottom-left, e.g. a
+ * "Renew" or "Undo" button) and `action` (top-right, the dismiss control). Set `dismissible` for
+ * a ready-made dismiss button, or slot your own into `action`.
+ * Dismissing: call `dismiss()`, set `open = false`, click the built-in button, or add a
+ * `data-dismiss` attribute to any slotted element, which closes the alert when clicked.
+ * Events: `st-close` (bubbles, composed) with `detail.reason` of "dismiss", "timeout" or "api",
+ * fired once the alert has finished hiding.
+ */
 let StAlert = class StAlert extends LitElement {
     constructor() {
         super(...arguments);
         this.color = "info";
+        /** Whether the alert is shown. Setting it to false hides it with an animation. */
+        this.open = true;
+        /**
+         * Hides the alert automatically after this many milliseconds (0 keeps it). The countdown
+         * pauses while the pointer or keyboard focus is inside, so people have time to read and act.
+         */
+        this.timeout = 0;
+        /** Shows a built-in dismiss button in the `action` slot (your own slotted content replaces it). */
+        this.dismissible = false;
+        this.dismissLabel = "Dismiss";
+        this._phase = "open";
+        this._hasAction = false;
+        this._hasConfirm = false;
+        this._reason = "api";
+        this._remaining = 0;
+        this._deadline = 0;
+        this._paused = false;
+        this._onTransitionEnd = (e) => {
+            if (e.propertyName === "grid-template-rows" && this._phase === "closing")
+                this._finishClose();
+        };
+        this._pause = () => {
+            this._paused = true;
+            if (this._timer === undefined)
+                return;
+            window.clearTimeout(this._timer);
+            this._timer = undefined;
+            this._remaining = Math.max(this._deadline - Date.now(), 0);
+        };
+        this._resume = () => {
+            this._paused = false;
+            if (this.open && this.timeout > 0 && this._phase === "open" && this._timer === undefined) {
+                this._startTimer();
+            }
+        };
+        this._onFocusOut = (e) => {
+            // Only resume once focus has left the alert entirely.
+            if (!this.contains(e.relatedTarget))
+                this._resume();
+        };
+        // ---------------------------------------------------------------- actions
+        this._onClick = (e) => {
+            const hit = e
+                .composedPath()
+                .find((el) => el instanceof HTMLElement && el !== this && el.hasAttribute("data-dismiss"));
+            if (hit)
+                this.dismiss("dismiss");
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -18,14 +82,125 @@ let StAlert = class StAlert extends LitElement {
         if (!this.hasAttribute("role")) {
             this.setAttribute("role", "alert");
         }
+        this.addEventListener("click", this._onClick);
+        this.addEventListener("pointerenter", this._pause);
+        this.addEventListener("pointerleave", this._resume);
+        this.addEventListener("focusin", this._pause);
+        this.addEventListener("focusout", this._onFocusOut);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this._onClick);
+        this.removeEventListener("pointerenter", this._pause);
+        this.removeEventListener("pointerleave", this._resume);
+        this.removeEventListener("focusin", this._pause);
+        this.removeEventListener("focusout", this._onFocusOut);
+        this._clearTimers();
+        super.disconnectedCallback();
+    }
+    /** Hides the alert with an animation. Resolves nothing; listen for `st-close`. */
+    dismiss(reason = "api") {
+        if (this._phase !== "open")
+            return;
+        this._reason = reason;
+        this.open = false;
+    }
+    willUpdate(changed) {
+        if (changed.has("open")) {
+            if (!this.open && this._phase === "open") {
+                // The first render of an alert that starts closed should not animate.
+                this._phase = this.hasUpdated ? "closing" : "closed";
+            }
+            else if (this.open) {
+                this._phase = "open";
+            }
+        }
+    }
+    updated(changed) {
+        this.toggleAttribute("hidden", this._phase === "closed");
+        if (changed.has("open") || changed.has("timeout"))
+            this._restartTimer();
+        if (this._phase === "closing" && !this._fallback)
+            this._beginClose();
+    }
+    // ----------------------------------------------------------------- closing
+    _beginClose() {
+        this._clearTimers();
+        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (reduce) {
+            this._finishClose();
+            return;
+        }
+        // transitionend normally finishes the close; this guarantees it if it never fires.
+        this._fallback = window.setTimeout(() => this._finishClose(), TRANSITION_FALLBACK_MS);
+    }
+    _finishClose() {
+        window.clearTimeout(this._fallback);
+        this._fallback = undefined;
+        if (this._phase !== "closing")
+            return;
+        this._phase = "closed";
+        const reason = this._reason;
+        this._reason = "api";
+        this.dispatchEvent(new CustomEvent("st-close", { detail: { reason }, bubbles: true, composed: true }));
+    }
+    _clearTimers() {
+        window.clearTimeout(this._timer);
+        window.clearTimeout(this._fallback);
+        this._timer = undefined;
+        this._fallback = undefined;
+    }
+    // ----------------------------------------------------------------- timeout
+    _restartTimer() {
+        window.clearTimeout(this._timer);
+        this._timer = undefined;
+        if (!this.open || this.timeout <= 0 || this._phase !== "open")
+            return;
+        this._remaining = this.timeout;
+        // A timer that restarts while the user is already interacting stays paused.
+        if (!this._paused)
+            this._startTimer();
+    }
+    _startTimer() {
+        window.clearTimeout(this._timer);
+        this._deadline = Date.now() + this._remaining;
+        this._timer = window.setTimeout(() => this.dismiss("timeout"), this._remaining);
     }
     render() {
         return html `
-      <div class="icon-container">
-        <slot name="icon"></slot>
-      </div>
-      <div class="content">
-        <slot></slot>
+      <div class="wrap ${this._phase === "closing" ? "closing" : ""}" @transitionend=${this._onTransitionEnd}>
+        <div class="clip">
+          <div class="alert">
+            <div class="icon-container">
+              <slot name="icon"></slot>
+            </div>
+            <div class="content">
+              <slot></slot>
+              <div class="confirm" ?hidden=${!this._hasConfirm}>
+                <slot
+                  name="confirm"
+                  @slotchange=${(e) => (this._hasConfirm = e.target.assignedNodes().length > 0)}
+                ></slot>
+              </div>
+            </div>
+            <div class="action" ?hidden=${!this._hasAction && !this.dismissible}>
+              <slot
+                name="action"
+                @slotchange=${(e) => (this._hasAction = e.target.assignedNodes().length > 0)}
+              >
+                ${this.dismissible
+            ? html `<button
+                      class="dismiss"
+                      type="button"
+                      aria-label=${this.dismissLabel}
+                      @click=${() => this.dismiss("dismiss")}
+                    >
+                      <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+                    </button>`
+            : nothing}
+              </slot>
+            </div>
+          </div>
+        </div>
       </div>
     `;
     }
@@ -34,11 +209,7 @@ StAlert.styles = [
     resetStyles,
     css `
       :host {
-        display: flex;
-        gap: var(--st-spacing-md);
-        padding: var(--st-spacing-md);
-        border-radius: 6px;
-        border: 1px solid transparent;
+        display: block;
         font-size: var(--st-font-size-base);
         line-height: 1.5;
 
@@ -48,7 +219,7 @@ StAlert.styles = [
         --_alert-text: var(--st-color-info);
         --_alert-icon: var(--st-color-info);
       }
-      
+
       /* State Modifiers */
       :host([color="error"]) {
         --_alert-bg: var(--st-color-error-bg);
@@ -71,10 +242,44 @@ StAlert.styles = [
         --_alert-text: var(--st-color-warning);
       }
 
-      /* Apply the variables */
-      :host {
+      /*
+       * Hiding animates grid rows from 1fr to 0fr, which collapses the alert's height smoothly
+       * without measuring it in JavaScript. The padding and border live one level deeper so they
+       * collapse too.
+       */
+      .wrap {
+        display: grid;
+        grid-template-rows: 1fr;
+        opacity: 1;
+        transition:
+          grid-template-rows 0.25s ease,
+          opacity 0.2s ease;
+      }
+
+      .wrap.closing {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .wrap {
+          transition: none;
+        }
+      }
+
+      .clip {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border: 1px solid var(--_alert-border);
+        border-radius: var(--st-radius-sm);
         background-color: var(--_alert-bg);
-        border-color: var(--_alert-border);
         color: var(--_alert-text);
       }
 
@@ -102,12 +307,76 @@ StAlert.styles = [
         flex-direction: column;
         gap: var(--st-spacing-xs);
         flex: 1;
+        min-width: 0;
+      }
+
+      /* Confirm Slot: sits under the message, bottom-left */
+      .confirm {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        margin-top: var(--st-spacing-xs);
+      }
+
+      /* Action Slot: the dismiss control, top-right */
+      .action {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        align-self: flex-start;
+        margin: calc(var(--st-spacing-xs) * -1) calc(var(--st-spacing-xs) * -1) 0 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      .dismiss {
+        display: inline-flex;
+        padding: var(--st-spacing-xs);
+        border: 0;
+        border-radius: var(--st-radius-sm);
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .dismiss:hover {
+        background: color-mix(in srgb, var(--_alert-border) 18%, transparent);
+      }
+
+      .dismiss:focus-visible {
+        outline: 2px solid var(--_alert-border);
+        outline-offset: 1px;
       }
     `,
 ];
 __decorate([
     property({ type: String, reflect: true })
 ], StAlert.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StAlert.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], StAlert.prototype, "timeout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StAlert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: String, attribute: "dismiss-label" })
+], StAlert.prototype, "dismissLabel", void 0);
+__decorate([
+    state()
+], StAlert.prototype, "_phase", void 0);
+__decorate([
+    state()
+], StAlert.prototype, "_hasAction", void 0);
+__decorate([
+    state()
+], StAlert.prototype, "_hasConfirm", void 0);
 StAlert = __decorate([
     customElement("st-alert")
 ], StAlert);

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAI3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACoC,UAAK,GAAe,MAAM,CAAC;IAgGtE,CAAC;IAlBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4DAA4D;QAC5D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAA;AA9FQ,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;CACF,AA1EY,CA0EX;AA5EuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAA4B;AADzD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAiGnB"}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"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"}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+export declare class StAvatar extends LitElement {
+    src: string;
+    /** Full name; used for the accessible name and to derive initials when there is no image. */
+    name: string;
+    size: "sm" | "md" | "lg";
+    private _failed;
+    static styles: import("lit").CSSResult[];
+    protected willUpdate(changed: Map<string, unknown>): void;
+    /** First letters of the first and last words, uppercased. */
+    get initials(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-avatar": StAvatar;
+    }
+}
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,UAAU;IACZ,GAAG,SAAM;IACnC,6FAA6F;IACnE,IAAI,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChE,OAAO,CAAC,OAAO,CAAS;IAEjC,MAAM,CAAC,MAAM,4BAsCX;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAEjD;IAED,6DAA6D;IAC7D,IAAI,QAAQ,WAKX;IAED,MAAM,yCAWL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,100 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+let StAvatar = class StAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = "";
+        /** Full name; used for the accessible name and to derive initials when there is no image. */
+        this.name = "";
+        this.size = "md";
+        this._failed = false;
+    }
+    willUpdate(changed) {
+        if (changed.has("src"))
+            this._failed = false;
+    }
+    /** First letters of the first and last words, uppercased. */
+    get initials() {
+        const parts = this.name.trim().split(/\s+/).filter(Boolean);
+        if (!parts.length)
+            return "";
+        const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+        return (parts[0][0] + last).toUpperCase();
+    }
+    render() {
+        const showImage = this.src && !this._failed;
+        return html `
+      <div class="avatar" role="img" aria-label=${this.name || "Avatar"}>
+        ${showImage
+            ? html `<img src=${this.src} alt="" @error=${() => (this._failed = true)} />`
+            : this.initials
+                ? html `<span aria-hidden="true">${this.initials}</span>`
+                : html `<st-icon name="user" size="sm" aria-hidden="true"></st-icon>`}
+      </div>
+    `;
+    }
+};
+StAvatar.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        --_size: 2.5rem;
+        width: var(--_size);
+        height: var(--_size);
+        flex-shrink: 0;
+      }
+      :host([size="sm"]) {
+        --_size: 1.75rem;
+        font-size: var(--st-font-size-xs);
+      }
+      :host([size="lg"]) {
+        --_size: 3.5rem;
+        font-size: 1.25rem;
+      }
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 50%;
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+        border: 1px solid var(--st-color-border);
+        font-weight: var(--st-font-weight-medium);
+        user-select: none;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StAvatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], StAvatar.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StAvatar.prototype, "size", void 0);
+__decorate([
+    state()
+], StAvatar.prototype, "_failed", void 0);
+StAvatar = __decorate([
+    customElement("st-avatar")
+], StAvatar);
+export { StAvatar };
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACqB,QAAG,GAAG,EAAE,CAAC;QACnC,6FAA6F;QACnE,SAAI,GAAG,EAAE,CAAC;QACK,SAAI,GAAuB,IAAI,CAAC;QACxD,YAAO,GAAG,KAAK,CAAC;IAkEnC,CAAC;IAxBW,UAAU,CAAC,OAA6B;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/C,CAAC;IAED,6DAA6D;IAC7D,IAAI,QAAQ;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAC5C,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,IAAI,IAAI,QAAQ;UAC7D,SAAS;YACT,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK;YAC5E,CAAC,CAAC,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,QAAQ,SAAS;gBACxD,CAAC,CAAC,IAAI,CAAA,8DAA8D;;KAE3E,CAAC;IACJ,CAAC;CACF,CAAA;AAhEQ,eAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCF;CACF,AAtCY,CAsCX;AA5CwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;qCAAU;AAET;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;sCAAW;AACK;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAiC;AACxD;IAAhB,KAAK,EAAE;yCAAyB;AALtB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuEpB"}

package/dist/components/back-to-top/back-to-top.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+/**
+ * A button that appears once the reader has scrolled down, and takes them back to the top. Focus
+ * moves to the top of the page too, so keyboard and screen reader users are not left behind.
+ *
+ * Events: `st-back-to-top` when pressed.
+ */
+export declare class StBackToTop extends LitElement {
+    /** How far (in pixels) the page must be scrolled before the button appears. */
+    threshold: number;
+    /** Accessible name and tooltip. */
+    label: string;
+    position: "right" | "left";
+    private _visible;
+    private _frame;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _schedule;
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-back-to-top": StBackToTop;
+    }
+}
+//# sourceMappingURL=back-to-top.d.ts.map

package/dist/components/back-to-top/back-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/back-to-top/back-to-top.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAEzB;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,+EAA+E;IACrD,SAAS,SAAO;IAC1C,mCAAmC;IACT,KAAK,SAAiB;IACP,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAW;IAErE,OAAO,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,MAAM,CAAK;IAEnB,MAAM,CAAC,MAAM,4BA8DX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAInB;IAED,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,QAAQ;IAehB,MAAM,yCAYL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}