overview-components 1.1.0 → 1.1.11

package/dist/shared/lit-modal.js

@@ -4,139 +4,151 @@ 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 { customElement, property, state } from 'lit/decorators.js';
-import { css, html, LitElement } from 'lit';
-import { computePosition, autoUpdate, offset, shift } from '@floating-ui/dom';
-import { ref, createRef } from 'lit/directives/ref.js';
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 let LitModal = class LitModal extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
         this.closeOnOutsideClick = true;
-        this.cleanup = null;
-        // Refs pre floating-ui
-        this.triggerRef = createRef();
-        this.modalRef = createRef();
-        this.handleEscapeKey = (e) => {
-            if (e.key === 'Escape' && this.open) {
-                this.closeModal();
-            }
-        };
+        this.fullScreen = false;
+        this._modalContainer = null;
+        this._modalContent = null;
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('keydown', this.handleEscapeKey);
+        document.addEventListener('keydown', this._handleKeyDown.bind(this));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('keydown', this.handleEscapeKey);
-        this.cleanupFloating();
+        document.removeEventListener('keydown', this._handleKeyDown.bind(this));
     }
-    updated(changedProperties) {
-        if (changedProperties.has('open')) {
+    updated(changed) {
+        if (changed.has('open')) {
             if (this.open) {
-                this.setupFloating();
+                this._showModal();
             }
             else {
-                this.cleanupFloating();
+                this._hideModal();
             }
         }
     }
-    setupFloating() {
-        const trigger = this.triggerRef.value;
-        const modal = this.modalRef.value;
-        if (!trigger || !modal)
-            return;
-        this.cleanup = autoUpdate(trigger, modal, () => {
-            computePosition(trigger, modal, {
-                placement: 'bottom-start',
-                middleware: [offset(-80), shift({ padding: 0 })],
-            }).then(({ x, y }) => {
-                Object.assign(modal.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-            });
-        });
+    _handleBackdropClick() {
+        if (this.closeOnOutsideClick) {
+            this.open = false;
+        }
     }
-    cleanupFloating() {
-        if (this.cleanup) {
-            this.cleanup();
-            this.cleanup = null;
+    _showModal() {
+        if (!this._modalContainer) {
+            this._modalContainer = document.createElement('div');
+            this._modalContainer.classList.add('my-modal-root');
+            this._modalContainer.innerHTML = `
+        <div class="my-modal-backdrop"></div>
+        <div class="my-modal-content"></div>
+      `;
+            document.body.appendChild(this._modalContainer);
+            const backdrop = this._modalContainer.querySelector('.my-modal-backdrop');
+            if (backdrop) {
+                backdrop.addEventListener('click', this._handleBackdropClick.bind(this));
+            }
+            this._modalContent = this._modalContainer.querySelector('.my-modal-content');
         }
+        if (this._modalContent) {
+            this._updateContentClass();
+            this._modalContent.appendChild(this);
+        }
+        document.addEventListener('keydown', this._handleKeyDown);
+        this._applyGlobalStyles();
     }
-    openModal() {
-        this.open = true;
-        this.dispatchEvent(new CustomEvent('open-changed', { detail: this.open }));
+    _hideModal() {
+        if (this._modalContainer) {
+            document.removeEventListener('keydown', this._handleKeyDown);
+            this._modalContainer.remove();
+            this._modalContainer = null;
+        }
+        if (typeof this.onClose === 'function')
+            this.onClose();
+        this.dispatchEvent(new CustomEvent('modal-close', { bubbles: true, composed: true }));
     }
-    closeModal() {
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('open-changed', { detail: this.open }));
+    _handleKeyDown(e) {
+        if (e.key === 'Escape') {
+            this.open = false;
+        }
     }
-    handleBackdropClick(e) {
-        if (this.closeOnOutsideClick && e.target === e.currentTarget) {
-            this.closeModal();
+    _updateContentClass() {
+        if (this._modalContent) {
+            if (this.fullScreen) {
+                this._modalContent.classList.add('fullscreen');
+            }
+            else {
+                this._modalContent.classList.remove('fullscreen');
+            }
+        }
+    }
+    _applyGlobalStyles() {
+        if (!document.getElementById('my-modal-global-styles')) {
+            const style = document.createElement('style');
+            style.id = 'my-modal-global-styles';
+            style.textContent = `
+        .my-modal-root {
+          position: fixed;
+          top: 0; left: 0; right: 0; bottom: 0;
+          z-index: 10000;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .my-modal-backdrop {
+          position: absolute;
+          top: 0; left: 0; right: 0; bottom: 0;
+          background: rgba(0,0,0,0.5);
+        }
+        .my-modal-content {
+          position: relative;
+          background: var(--background-paper, #fff);
+          border-radius: 12px;
+          min-width: 40vw;
+          max-width: 90vw;
+          max-height: 90vh;
+          z-index: 1;
+          box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+            overflow: hidden;
+            gap: 0.5rem;
+          
+        }
+        .my-modal-content.fullscreen {
+          border-radius: 0;
+          width: 100vw;
+          height: 100vh;
+          max-width: 100vw;
+          max-height: 100vh;
+          padding: 0;
+          display: flex;
+        }
+      `;
+            document.head.appendChild(style);
         }
     }
     render() {
-        return html `
-            <span @click=${this.openModal} ${ref(this.triggerRef)}>
-                <slot name="trigger"></slot>
-            </span>
-
-            <div
-                class="modal-backdrop ${this.open ? 'open' : ''}"
-                @click=${this.handleBackdropClick}
-            >
-                <div class="modal-container" ${ref(this.modalRef)}>
-                    <slot></slot>
-                </div>
-            </div>
-        `;
+        return html `<slot></slot>`;
     }
 };
-LitModal.styles = css `
-        .modal-backdrop {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            //z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            visibility: hidden;
-            transition:
-                opacity 0.2s,
-                visibility 0.2s;
-        }
-
-        .modal-backdrop.open {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        .modal-container {
-            background-color: var(--background-default, #eff3f4);
-            border-radius: 16px;
-            box-shadow:
-                0 12px 32px rgba(0, 0, 0, 0.12),
-                0 8px 12px rgba(17, 24, 39, 0.08),
-                0 2px 2px rgba(0, 0, 0, 0.16);
-
-            max-width: 90%;
-            max-height: 90vh;
-
-            position: relative;
-            overflow: visible;
-        }
-
-        ::slotted([slot='trigger']) {
-            display: contents;
-        }
+LitModal.styles = css `
+        :host {
+            display: none;
+            width: 100%;
+            height: 100vh;
+            @media (min-width: 768px) {
+                height: 100%;
+            }
+        }
+        :host([open]) {
+            display: block;
+        }
     `;
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -145,8 +157,11 @@ __decorate([
     property({ type: Boolean })
 ], LitModal.prototype, "closeOnOutsideClick", void 0);
 __decorate([
-    state()
-], LitModal.prototype, "cleanup", void 0);
+    property({ type: Function })
+], LitModal.prototype, "onClose", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitModal.prototype, "fullScreen", void 0);
 LitModal = __decorate([
     customElement('lit-modal')
 ], LitModal);

package/dist/shared/lit-modal.js.map

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

package/dist/shared/lit-overflow-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import type { TooltipPlacement } from './simple-tooltip.js';
 import './simple-tooltip.js';
 export declare class LitOverflowTooltip extends LitElement {
@@ -6,12 +6,16 @@ export declare class LitOverflowTooltip extends LitElement {
     placement: TooltipPlacement;
     private isOverflowing;
     private textElement;
-    private textResizeObserver;
-    private hostResizeObserver;
+    private textObserver?;
+    private hostObserver?;
+    private tooltipCleanup?;
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    protected updated(changedProps: PropertyValues): void;
+    private setupObservers;
+    private disconnectObservers;
     private checkOverflow;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/shared/lit-overflow-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lit-overflow-tooltip.d.ts","sourceRoot":"","sources":["../../src/shared/lit-overflow-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAE7B,qBACa,kBAAmB,SAAQ,UAAU;IAClB,KAAK,SAAM;IACX,SAAS,EAAE,gBAAgB,CAAS;IAEvD,OAAO,CAAC,aAAa,CAAS;IAEf,OAAO,CAAC,WAAW,CAAe;IAE1D,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,MAAM,CAAC,MAAM,0BAUX;IAEF,iBAAiB;IAIjB,oBAAoB;IAMpB,YAAY;IAoBZ,OAAO,CAAC,aAAa;IAWrB,MAAM;CAWT"}
+{"version":3,"file":"lit-overflow-tooltip.d.ts","sourceRoot":"","sources":["../../src/shared/lit-overflow-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAG7B,qBACa,kBAAmB,SAAQ,UAAU;IAClB,KAAK,SAAM;IACX,SAAS,EAAE,gBAAgB,CAAS;IAEvD,OAAO,CAAC,aAAa,CAAS;IACf,OAAO,CAAC,WAAW,CAAe;IAE1D,OAAO,CAAC,YAAY,CAAC,CAAiB;IACtC,OAAO,CAAC,YAAY,CAAC,CAAiB;IACtC,OAAO,CAAC,cAAc,CAAC,CAAa;IAEpC,MAAM,CAAC,MAAM,0BAUX;IAEF,iBAAiB;IAKjB,oBAAoB;IAOpB,YAAY;IAOZ,SAAS,CAAC,OAAO,CAAC,YAAY,EAAE,cAAc;IAM9C,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa,CAiBnB;IAEF,MAAM;CAcT"}

package/dist/shared/lit-overflow-tooltip.js

@@ -4,73 +4,98 @@ 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 { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import './simple-tooltip.js';
+import { tooltip } from './simple-tooltip.js';
 let LitOverflowTooltip = class LitOverflowTooltip extends LitElement {
     constructor() {
         super(...arguments);
         this.label = '';
         this.placement = 'top';
         this.isOverflowing = false;
+        this.checkOverflow = () => {
+            const el = this.textElement;
+            if (!el) {
+                // Hide tooltip if element is gone
+                if (this.isOverflowing) {
+                    this.tooltipCleanup?.();
+                }
+                this.isOverflowing = false;
+                return;
+            }
+            const wasOverflowing = this.isOverflowing;
+            this.isOverflowing = el.scrollWidth > el.clientWidth;
+            // Hide tooltip if no longer overflowing
+            if (wasOverflowing && !this.isOverflowing) {
+                this.tooltipCleanup?.();
+            }
+        };
     }
     connectedCallback() {
         super.connectedCallback();
+        // No observer setup here, wait for element access in firstUpdated
     }
     disconnectedCallback() {
-        this.textResizeObserver?.disconnect();
-        this.hostResizeObserver?.disconnect();
+        this.disconnectObservers();
+        // Hide any visible tooltip when component unmounts
+        this.tooltipCleanup?.();
         super.disconnectedCallback();
     }
     firstUpdated() {
-        if (this.textElement) {
-            this.textResizeObserver = new ResizeObserver(() => {
-                requestAnimationFrame(() => this.checkOverflow());
-            });
-            this.textResizeObserver.observe(this.textElement);
-        }
-        this.hostResizeObserver = new ResizeObserver(() => {
-            requestAnimationFrame(() => this.checkOverflow());
-        });
-        this.hostResizeObserver.observe(this);
-        const slotEl = this.shadowRoot?.querySelector('slot');
-        if (slotEl) {
-            slotEl.addEventListener('slotchange', () => {
-                requestAnimationFrame(() => this.checkOverflow());
-            });
+        this.setupObservers();
+        this.shadowRoot?.querySelector('slot')?.addEventListener('slotchange', this.checkOverflow);
+        // Initial check
+        this.checkOverflow();
+    }
+    updated(changedProps) {
+        if (changedProps.has('label')) {
+            this.checkOverflow();
         }
     }
-    checkOverflow() {
+    setupObservers() {
+        // Defensive: disconnect if already setup
+        this.disconnectObservers();
+        // Bind checkOverflow for correct 'this'
+        this.checkOverflow = this.checkOverflow.bind(this);
         if (this.textElement) {
-            const threshold = 0;
-            const overflowing = this.textElement.scrollWidth - this.textElement.clientWidth > threshold;
-            if (overflowing !== this.isOverflowing) {
-                this.isOverflowing = overflowing;
-            }
+            this.textObserver = new ResizeObserver(this.checkOverflow);
+            this.textObserver.observe(this.textElement);
         }
+        this.hostObserver = new ResizeObserver(this.checkOverflow);
+        this.hostObserver.observe(this);
+    }
+    disconnectObservers() {
+        this.textObserver?.disconnect();
+        this.textObserver = undefined;
+        this.hostObserver?.disconnect();
+        this.hostObserver = undefined;
     }
     render() {
-        const content = html `
-            <div class="text-content">
-                <slot></slot>
-            </div>
-        `;
         return this.isOverflowing
-            ? html `${content}
-                  <simple-tooltip placement=${this.placement}>${this.label}</simple-tooltip> `
-            : content;
+            ? html `
+                  <div
+                      class="text-content"
+                      ${this.isOverflowing ? tooltip(this.label, this.placement, 200, (cleanup) => {
+                this.tooltipCleanup = cleanup;
+            }) : nothing}
+                  >
+                      <slot></slot>
+                  </div>
+              `
+            : html ` <div class="text-content"><slot></slot></div> `;
     }
 };
-LitOverflowTooltip.styles = css `
-        :host {
-            display: inline-block;
-            width: 100%;
-        }
-        .text-content {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+LitOverflowTooltip.styles = css `
+        :host {
+            display: inline-block;
+            width: 100%;
+        }
+        .text-content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     `;
 __decorate([
     property({ type: String })

package/dist/shared/lit-overflow-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"lit-overflow-tooltip.js","sourceRoot":"","sources":["../../src/shared/lit-overflow-tooltip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,qBAAqB,CAAC;AAGtB,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QACyB,UAAK,GAAG,EAAE,CAAC;QACX,cAAS,GAAqB,KAAK,CAAC;QAE/C,kBAAa,GAAG,KAAK,CAAC;IAuE3C,CAAC;IApDG,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAChB,IAAI,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC;QACtC,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAED,YAAY;QACR,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC9C,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtD,CAAC;QACD,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC9C,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBACvC,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAEO,aAAa;QACjB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,MAAM,SAAS,GAAG,CAAC,CAAC;YACpB,MAAM,WAAW,GACb,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC;YAC5E,IAAI,WAAW,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrC,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC;YACrC,CAAC;QACL,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,OAAO,GAAG,IAAI,CAAA;;;;SAInB,CAAC;QACF,OAAO,IAAI,CAAC,aAAa;YACrB,CAAC,CAAC,IAAI,CAAA,GAAG,OAAO;8CACkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,oBAAoB;YAClF,CAAC,CAAC,OAAO,CAAC;IAClB,CAAC;;AA/DM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;KAUlB,AAVY,CAUX;AApB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqC;AAE/C;IAAhB,KAAK,EAAE;yDAA+B;AAEP;IAA/B,KAAK,CAAC,eAAe,CAAC;uDAAmC;AANjD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA2E9B"}
+{"version":3,"file":"lit-overflow-tooltip.js","sourceRoot":"","sources":["../../src/shared/lit-overflow-tooltip.ts"],"names":[],"mappings":"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"}

package/dist/shared/lit-pill.js

@@ -16,11 +16,11 @@ let LitPill = class LitPill extends LitElement {
         const showSpinner = this.loading;
         const countNumber = this.count && this.count < 100 ? this.count : '99+';
         if (hasCount || showSpinner) {
-            return html `
-                <div class="pill--wrapper">
-                    ${hasCount ? html ` <div class="pill">${countNumber}</div> ` : ''}
-                    ${showSpinner ? html ` <div class="pill__loading-spinner"></div> ` : ''}
-                </div>
+            return html `
+                <div class="pill--wrapper">
+                    ${hasCount ? html ` <div class="pill">${countNumber}</div> ` : ''}
+                    ${showSpinner ? html ` <div class="pill__loading-spinner"></div> ` : ''}
+                </div>
             `;
         }
         return null;
@@ -28,51 +28,51 @@ let LitPill = class LitPill extends LitElement {
 };
 LitPill.styles = [
     // styles,
-    css `
-            .pill--wrapper {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 20px;
-                min-width: 20px;
-                background-color: var(--color-success-main, #76b703);
-                border-radius: 50px;
-            }
-
-            .pill {
-                padding: 0 0.375rem;
-                font-size: 0.6875rem;
-                font-weight: 600;
-                color: white;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                white-space: nowrap;
-                transition: background-color 0.3s ease;
-            }
-
-            .pill:disabled {
-                background-color: var(--color-primary-disabled, #d0d3db);
-            }
-
-            .pill__loading-spinner {
-                width: 20px;
-                height: 20px;
-                border: 2px solid var(--color-divider, #d0d3db);
-                border-top: 2px solid var(--color-primary-main, #76b703);
-                border-radius: 50%;
-                animation: spin 1s linear infinite;
-                position: absolute;
-            }
-
-            @keyframes spin {
-                0% {
-                    transform: rotate(0deg);
-                }
-                100% {
-                    transform: rotate(360deg);
-                }
-            }
+    css `
+            .pill--wrapper {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 20px;
+                min-width: 20px;
+                background-color: var(--color-success-main, #76b703);
+                border-radius: 50px;
+            }
+
+            .pill {
+                padding: 0 0.375rem;
+                font-size: 0.6875rem;
+                font-weight: 600;
+                color: white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                white-space: nowrap;
+                transition: background-color 0.3s ease;
+            }
+
+            .pill:disabled {
+                background-color: var(--color-primary-disabled, #d0d3db);
+            }
+
+            .pill__loading-spinner {
+                width: 20px;
+                height: 20px;
+                border: 2px solid var(--color-divider, #d0d3db);
+                border-top: 2px solid var(--color-primary-main, #76b703);
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+                position: absolute;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
         `,
 ];
 __decorate([

package/dist/shared/lit-progress-bar.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export type LitProgressBarProp = {
+    label?: string;
+    progress?: number;
+};
+export declare class LitProgressBar extends LitElement {
+    label?: string;
+    progress: number;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-progress-bar': LitProgressBar;
+    }
+}
+//# sourceMappingURL=lit-progress-bar.d.ts.map

package/dist/shared/lit-progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-progress-bar.d.ts","sourceRoot":"","sources":["../../src/shared/lit-progress-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,qBACa,cAAe,SAAQ,UAAU;IACd,KAAK,CAAC,EAAE,MAAM,CAAM;IACpB,QAAQ,EAAE,MAAM,CAAK;IAEjD,MAAM,CAAC,MAAM,4BAwCX;IACF,MAAM;CAeT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ"}