@uibit/scroll-progress 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Scroll Progress
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/scroll-progress)
+
+Scroll Progress is a reading indicator component that displays content navigation progress. As users scroll through long-form articles, documentation, or reports, a subtle progress indicator shows their position, providing context and encouraging reading completion.
+
+## Value Delivery
+
+- **Reading Context** – Provides users with a clear sense of remaining content length, improving completion rates on long pages.
+- **Subtle Visual Feedback** – Quietly tracks reading position at the top or bottom of the viewport without distracting from the text.
+- **Hardware Accelerated Performance** – Optimizes scroll listener logic and rendering to prevent browser layout thrashing or stuttering.
+- **Adaptive Layout Support** – Automatically recalibrates dimensions when dynamic content loads or screen sizes resize.
+
+## Ideal Applications
+
+- **Long-Form Articles & Editorial Pages** – Enhancing user engagement on blogs, news portals, and feature pieces.
+- **Technical Documentation** – Helping users track their progress through guides and references.
+- **Annual Reports & Case Studies** – Providing orientation for data-heavy corporate communications.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,198 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./scroll-progress"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ScrollProgress",
+          "declaration": {
+            "name": "ScrollProgress",
+            "module": "./scroll-progress"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ScrollProgressConfig",
+          "declaration": {
+            "name": "ScrollProgressConfig",
+            "module": "./types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/scroll-progress.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Thin progress bar that tracks scroll position — either the page or a\ncustom scrollable element — and fills as the user scrolls down.",
+          "name": "ScrollProgress",
+          "cssProperties": [
+            {
+              "description": "Height of the progress bar",
+              "name": "--uibit-scroll-progress-height",
+              "default": "0.1875rem"
+            },
+            {
+              "description": "Background (track) color",
+              "name": "--uibit-scroll-progress-bg",
+              "default": "transparent"
+            },
+            {
+              "description": "Fill color of the progress indicator",
+              "name": "--uibit-scroll-progress-color",
+              "default": "#000000"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "targetSelector",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "CSS selector of a custom scrollable container to track. Defaults to the page (`window`).",
+              "attribute": "target-selector"
+            },
+            {
+              "kind": "field",
+              "name": "progressPercent",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_scrollUnlisten",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_cachedTarget",
+              "type": {
+                "text": "HTMLElement | Window | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_rafId",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getTargetElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | Window"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_attachScrollListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateProgress",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "target-selector",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "CSS selector of a custom scrollable container to track. Defaults to the page (`window`).",
+              "fieldName": "targetSelector"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-scroll-progress",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScrollProgress",
+          "declaration": {
+            "name": "ScrollProgress",
+            "module": "src/scroll-progress.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-scroll-progress",
+          "declaration": {
+            "name": "ScrollProgress",
+            "module": "src/scroll-progress.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ScrollProgress",
+            "module": "src/scroll-progress.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; width: 100%; height: var(--uibit-scroll-progress-height, 0.1875rem); background: var(--uibit-scroll-progress-bg, transparent); } .progress { height: 100%; background: var(--uibit-scroll-progress-color, var(--uibit-focus-color, var(--uibit-color-black, #000000))); width: 0%; transition: width 150ms ease; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect } from '@angular/core';
+import '@uibit/scroll-progress';
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+
+@Component({
+  selector: 'uibit-scroll-progress',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class NgxScrollProgress {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.targetSelector = this.targetSelector();
+      }
+    });
+  }
+
+  readonly targetSelector = input<string | undefined, any>('');
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-scroll-progress': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/scroll-progress');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'preact';
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scroll-progress': JSX.HTMLAttributes<HTMLElementClass> & {
+      targetSelector?: string | undefined;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/scroll-progress';
+
+export const ScrollProgress = component$<any>((props) => {
+  return (
+    <uibit-scroll-progress {...props}>
+      <Slot />
+    </uibit-scroll-progress>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-scroll-progress': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      targetSelector?: string | undefined;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'solid-js';
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scroll-progress': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              targetSelector?: string | undefined;
+
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,12 @@
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-scroll-progress': HTMLElementClass & {
+    targetSelector?: string | undefined;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import '@uibit/scroll-progress';
+  import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+  
+  let {
+    targetSelector = undefined,
+      children
+  } = $props<{
+    children?: any;
+    targetSelector?: string | undefined;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && targetSelector !== undefined) {
+      elementRef.targetSelector = targetSelector;
+    }
+  });
+  
+</script>
+
+<uibit-scroll-progress bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-scroll-progress>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import type { ScrollProgress as HTMLElementClass } from '@uibit/scroll-progress';
+import '@uibit/scroll-progress';
+
+export const ScrollProgress = defineComponent({
+  name: 'ScrollProgress',
+  props: {
+    targetSelector: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+
+
+      return h('uibit-scroll-progress', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, ScrollProgress } from './scroll-progress';
+export type { ScrollProgressConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, ScrollProgress } from './scroll-progress';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/scroll-progress.d.ts

@@ -0,0 +1,27 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Thin progress bar that tracks scroll position — either the page or a
+ * custom scrollable element — and fills as the user scrolls down.
+ *
+ * @cssprop [--uibit-scroll-progress-height=0.1875rem] - Height of the progress bar
+ * @cssprop [--uibit-scroll-progress-bg=transparent] - Background (track) color
+ * @cssprop [--uibit-scroll-progress-color=#000000] - Fill color of the progress indicator
+ */
+export declare class ScrollProgress extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** CSS selector of a custom scrollable container to track. Defaults to the page (`window`). */
+    targetSelector?: string;
+    private progressPercent;
+    private _scrollUnlisten?;
+    private _cachedTarget?;
+    private _rafId?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getTargetElement;
+    private _attachScrollListener;
+    private updateProgress;
+    render(): import("lit").TemplateResult<1>;
+}
+export default ScrollProgress;
+//# sourceMappingURL=scroll-progress.d.ts.map

package/dist/scroll-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-progress.d.ts","sourceRoot":"","sources":["../src/scroll-progress.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI/D;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,YAAY;IAC9C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+FAA+F;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IAEzE,OAAO,CAAC,eAAe,CAAK;IAErC,OAAO,CAAC,eAAe,CAAC,CAAa;IACrC,OAAO,CAAC,aAAa,CAAC,CAAuB;IAC7C,OAAO,CAAC,MAAM,CAAC,CAAS;IAExB,iBAAiB,SAIhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAM9C;IAED,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,cAAc;IAiBtB,MAAM,oCAaL;CACF;eAEc,cAAc"}

package/dist/scroll-progress.js

@@ -0,0 +1,111 @@
+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 { html } from 'lit';
+import { customElement, msg, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Thin progress bar that tracks scroll position — either the page or a
+ * custom scrollable element — and fills as the user scrolls down.
+ *
+ * @cssprop [--uibit-scroll-progress-height=0.1875rem] - Height of the progress bar
+ * @cssprop [--uibit-scroll-progress-bg=transparent] - Background (track) color
+ * @cssprop [--uibit-scroll-progress-color=#000000] - Fill color of the progress indicator
+ */
+let ScrollProgress = class ScrollProgress extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        this.progressPercent = 0;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._attachScrollListener();
+        this.updateProgress();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._rafId)
+            cancelAnimationFrame(this._rafId);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('targetSelector')) {
+            this._cachedTarget = undefined;
+            this._attachScrollListener();
+            this.updateProgress();
+        }
+    }
+    _getTargetElement() {
+        if (typeof window === 'undefined')
+            return window;
+        if (!this._cachedTarget) {
+            if (this.targetSelector) {
+                const el = document.querySelector(this.targetSelector);
+                this._cachedTarget = el ? el : window;
+            }
+            else {
+                this._cachedTarget = window;
+            }
+        }
+        return this._cachedTarget;
+    }
+    _attachScrollListener() {
+        if (this._scrollUnlisten)
+            this._scrollUnlisten();
+        const target = this._getTargetElement();
+        const handler = () => {
+            if (!this._rafId) {
+                this._rafId = requestAnimationFrame(() => {
+                    this._rafId = undefined;
+                    this.updateProgress();
+                });
+            }
+        };
+        this._scrollUnlisten = this.listen(target, 'scroll', handler, { passive: true });
+    }
+    updateProgress() {
+        let scrollTop = 0;
+        let docHeight = 0;
+        const target = this._cachedTarget ?? this._getTargetElement();
+        if (target === window) {
+            scrollTop = window.scrollY;
+            docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        }
+        else {
+            const el = target;
+            scrollTop = el.scrollTop;
+            docHeight = el.scrollHeight - el.clientHeight;
+        }
+        this.progressPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+    }
+    render() {
+        return html `
+      <div 
+        part="progress"
+        class="progress" 
+        style="width: ${this.progressPercent}%"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${Math.round(this.progressPercent)}"
+        aria-label=${msg('Scroll progress indicator')}
+      ></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'target-selector' })
+], ScrollProgress.prototype, "targetSelector", void 0);
+__decorate([
+    state()
+], ScrollProgress.prototype, "progressPercent", void 0);
+ScrollProgress = __decorate([
+    customElement('uibit-scroll-progress')
+], ScrollProgress);
+export { ScrollProgress };
+export default ScrollProgress;
+//# sourceMappingURL=scroll-progress.js.map

package/dist/scroll-progress.js.map

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

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAclB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: var(--uibit-scroll-progress-height, 0.1875rem);
+    background: var(--uibit-scroll-progress-bg, transparent);
+  }
+
+  .progress {
+    height: 100%;
+    background: var(--uibit-scroll-progress-color, var(--uibit-focus-color, var(--uibit-color-black, #000000)));
+    width: 0%;
+    transition: width 150ms ease;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type ScrollProgress from './scroll-progress';
+export interface ScrollProgressConfig {
+    height?: number;
+    color?: string;
+    backgroundColor?: string;
+    position?: 'top' | 'bottom';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-scroll-progress': ScrollProgress;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,cAAc,CAAC;KAC3C;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@uibit/scroll-progress",
+  "version": "0.1.0",
+  "description": "Lightweight, accessible scroll progress indicator. Tracks viewport scrolling by default, or can be targeting a specific scrollable element using selectors.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "scroll-progress",
+    "progress-bar",
+    "web-component",
+    "lit",
+    "scroll"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/scroll-progress"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "scroll-progress",
+    "title": "Scroll Progress",
+    "category": "Data",
+    "tagName": "uibit-scroll-progress"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}