overview-components 1.0.41 → 1.0.43

package/dist/shared/lit-text-field.js

@@ -0,0 +1,243 @@
+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-element';
+import { customElement, property } from 'lit/decorators.js';
+import './lit-icon';
+import { tooltip } from './simple-tooltip.js';
+let TextInput = class TextInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.error = false;
+        this.helperText = '';
+        this.placeholder = '';
+        this.size = 'medium';
+        this.focused = false;
+        this.required = false;
+    }
+    onInput(e) {
+        const val = e.target.value;
+        this.value = val;
+        this.dispatchEvent(new CustomEvent('input', { detail: val }));
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        this.focused = false;
+    }
+    render() {
+        const inputClass = [this.size, this.error ? 'error' : ''].join(' ');
+        const labelClass = [
+            'label',
+            this.error ? 'error' : '',
+            this.focused ? 'focused' : '',
+            this.disabled ? 'disabled' : '',
+        ].join(' ');
+        const helperClass = ['helper-text', this.error ? 'error' : ''].join(' ');
+        return html `
+            <div class="container">
+                ${this.label
+            ? html `
+                          <label class="${labelClass}">
+                              ${this.required
+                ? html `<span
+                                        aria-hidden="true"
+                                        style="color:var(--color-error-main); font-size: 18px; line-height: 1;"
+                                        >*</span
+                                    >`
+                : ''}${this.label}
+                              ${this.tooltip
+                ? html `<lit-icon
+                                        icon="help1"
+                                        size="1rem"
+                                        style="top: 0.0625rem"
+                                        @tooltip=${tooltip(this.tooltip, 'left')}
+                                    ></lit-icon>`
+                : ''}
+                          </label>
+                      `
+            : ''}
+                <div class="input-wrap">
+                    <input
+                        ?required=${this.required}
+                        class="${inputClass}"
+                        .value=${this.value}
+                        ?disabled=${this.disabled}
+                        ?readonly=${this.readonly}
+                        placeholder=${this.placeholder}
+                        @input=${this.onInput}
+                        @focus=${this.onFocus}
+                        @blur=${this.onBlur}
+                        aria-required="${this.required ? 'true' : 'false'}"
+                        aria-invalid="${this.error ? 'true' : 'false'}"
+                        aria-label="${this.label || 'text input'}"
+                    />
+                </div>
+                ${this.helperText && this.error
+            ? html `
+                          <div
+                              class="${helperClass}"
+                              style="display:flex;align-items:center;gap:0.375rem;"
+                          >
+                              <lit-icon
+                                  icon="dangerFilled"
+                                  size="1.125rem"
+                                  style="padding-top: 2px"
+                              ></lit-icon>
+
+                              <span>${this.helperText}</span>
+                          </div>
+                      `
+            : this.helperText
+                ? html ` <div class="${helperClass}">${this.helperText}</div> `
+                : html `<div class="helper-text">&nbsp;</div>`}
+            </div>
+        `;
+    }
+};
+TextInput.styles = css `
+        :host {
+            display: block;
+            font-family: inherit;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+        }
+        .label {
+            font-size: 1rem;
+            margin-left: 0.875rem;
+            color: var(--text-secondary, #777);
+            transition: color 0.2s;
+            user-select: none;
+            font-weight: 500;
+            font-size: 0.875rem;
+            line-height: 160%;
+            letter-spacing: 0rem;
+            display: flex;
+            align-items: center;
+            gap: 0.625rem;
+        }
+        .input-wrap {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        input {
+            width: 100%;
+            border: 1px solid var(--border-color, #d0d3db);
+            border-radius: var(--border-radius-small, 0.25rem);
+            background: var(--background-paper, #fff);
+            color: var(--text-primary, #111);
+            padding: 0.625rem 0.875rem;
+            font-size: 0.875rem;
+            outline: none;
+            transition:
+                border-color 0.2s,
+                box-shadow 0.2s,
+                background 0.2s,
+                color 0.2s;
+        }
+        input.small {
+            font-size: 0.875rem;
+            padding: 8px 12px;
+        }
+        input.large {
+            font-size: 1.125rem;
+            padding: 12px 16px;
+        }
+        input:focus:not(:disabled):not([readonly]) {
+            border-color: var(--text-primary, #111827);
+            // box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+        }
+        .input-wrap:hover input:not(:disabled):not([readonly]) {
+            border-color: var(--text-primary, #d0d3db);
+            cursor: pointer;
+        }
+        input:disabled {
+            background: var(--background-paper, #fff);
+            border: 1px dashed var(--border-color, #d0d3db);
+            color: var(--border-color, #d0d3db);
+            cursor: not-allowed;
+        }
+        input[readonly]:not(:disabled) {
+            background: var(--background-paper, #fff);
+            border-color: transparent;
+            color: var(--text-primary, #d0d3db);
+            cursor: default;
+        }
+        input.error {
+            border-color: var(--color-error-main, #d32f2f);
+        }
+        input.error:focus {
+            // box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
+        }
+        .helper-text {
+            margin-left: 0.875rem;
+            color: var(--text-secondary, #777);
+            min-height: 1em;
+            font-weight: 400;
+            font-size: 0.75rem;
+            line-height: 185%;
+            letter-spacing: 0px;
+            vertical-align: middle;
+        }
+        .helper-text.error {
+            color: var(--color-error-main, #d32f2f);
+        }
+        .label.error {
+            color: var(--color-error-main, #d32f2f);
+        }
+        .label.disabled {
+            color: var(--text-disabled, #777);
+        }
+        .label.focused {
+            color: var(--text-secondary, #111);
+        }
+    `;
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "helperText", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "tooltip", void 0);
+TextInput = __decorate([
+    customElement('lit-text-field')
+], TextInput);
+export { TextInput };
+//# sourceMappingURL=lit-text-field.js.map

package/dist/shared/lit-text-field.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"lit-tooltip.d.ts","sourceRoot":"","sources":["../../src/shared/lit-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAOL,SAAS,EAEV,MAAM,kBAAkB,CAAC;AAE1B,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BA+CX;IAE0B,SAAS,EAAE,SAAS,CAAS;IAE1B,WAAW,EAAG,eAAe,CAAC;IAC9B,WAAW,EAAG,eAAe,CAAC;IAE7D,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,WAAW,CAAuB;IAE1C,YAAY,IAAI,IAAI;IAiCpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;YAOV,WAAW;IAyCzB,OAAO,CAAC,WAAW;IAMnB,MAAM,IAAI,cAAc;CAMzB"}
+{"version":3,"file":"lit-tooltip.d.ts","sourceRoot":"","sources":["../../src/shared/lit-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAOH,SAAS,EAEZ,MAAM,kBAAkB,CAAC;AAE1B,qBACa,WAAY,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA+CX;IAE0B,SAAS,EAAE,SAAS,CAAS;IAE1B,WAAW,EAAG,eAAe,CAAC;IAC9B,WAAW,EAAG,eAAe,CAAC;IAE7D,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,WAAW,CAAuB;IAE1C,YAAY,IAAI,IAAI;IAiCpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;YAOV,WAAW;IAoCzB,OAAO,CAAC,WAAW;IAMnB,MAAM,IAAI,cAAc;CAM3B"}

package/dist/shared/lit-tooltip.js

@@ -72,12 +72,7 @@ let PerfTooltip = class PerfTooltip extends LitElement {
         this.cleanup = autoUpdate(triggerEl, tooltipEl, async () => {
             const position = await computePosition(triggerEl, tooltipEl, {
                 placement: this.placement,
-                middleware: [
-                    offset(8),
-                    flip(),
-                    shift({ padding: 5 }),
-                    arrow({ element: arrowEl }),
-                ],
+                middleware: [offset(8), flip(), shift({ padding: 5 }), arrow({ element: arrowEl })],
             });
             const { x, y, placement, middlewareData } = position;
             const { arrow: arrowData } = middlewareData;
@@ -102,59 +97,59 @@ let PerfTooltip = class PerfTooltip extends LitElement {
     }
     render() {
         return html `
-      <slot name="trigger"></slot>
-      <slot name="tooltip"></slot>
-    `;
+            <slot name="trigger"></slot>
+            <slot name="tooltip"></slot>
+        `;
     }
 };
 PerfTooltip.styles = css `
-    :host {
-      position: relative;
-      display: inline-block;
-    }
+        :host {
+            position: relative;
+            display: inline-block;
+        }
 
-    ::slotted([slot="tooltip"]) {
-      position: absolute;
-      z-index: 9999;
-      background: #111;
-      color: #fff;
-      padding: 6px 10px;
-      border-radius: 4px;
-      font-size: 12px;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-      pointer-events: none;
-    }
+        ::slotted([slot='tooltip']) {
+            position: absolute;
+            z-index: 9999;
+            background: #111;
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            pointer-events: none;
+        }
 
-    ::slotted([slot="tooltip"][data-visible]) {
-      opacity: 1;
-      pointer-events: auto;
-    }
+        ::slotted([slot='tooltip'][data-visible]) {
+            opacity: 1;
+            pointer-events: auto;
+        }
 
-    .arrow {
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      background: inherit;
-      transform: rotate(45deg);
-    }
+        .arrow {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: inherit;
+            transform: rotate(45deg);
+        }
 
-    .arrow[data-placement^='top'] {
-      bottom: -4px;
-    }
+        .arrow[data-placement^='top'] {
+            bottom: -4px;
+        }
 
-    .arrow[data-placement^='bottom'] {
-      top: -4px;
-    }
+        .arrow[data-placement^='bottom'] {
+            top: -4px;
+        }
 
-    .arrow[data-placement^='left'] {
-      right: -4px;
-    }
+        .arrow[data-placement^='left'] {
+            right: -4px;
+        }
 
-    .arrow[data-placement^='right'] {
-      left: -4px;
-    }
-  `;
+        .arrow[data-placement^='right'] {
+            left: -4px;
+        }
+    `;
 __decorate([
     property({ type: String })
 ], PerfTooltip.prototype, "placement", void 0);

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

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

package/dist/shared/simple-popper.d.ts

@@ -6,10 +6,10 @@ export declare class SimplePopper extends LitElement {
     static styles: import("lit").CSSResult;
     showing: boolean;
     manualOpening: boolean;
-    appendToBody: boolean;
     maxWidthAsTarget: boolean;
     placement: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
     offset: number;
+    onClose: () => void;
     private arrowElement;
     constructor();
     firstUpdated(): void;
@@ -18,10 +18,11 @@ export declare class SimplePopper extends LitElement {
     _target: Element | null;
     get target(): Element | null;
     set target(target: Element | null);
+    private cleanupAutoUpdate;
     show: () => void;
+    hide: () => void;
     hideOnOutsideClick: (event: Event) => void;
     hideOnSlotClick: (event: Event) => void;
-    hide: () => void;
     finishHide: () => void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/shared/simple-popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-popper.d.ts","sourceRoot":"","sources":["../../src/shared/simple-popper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAU,MAAM,KAAK,CAAC;AAS1C,qBACa,YAAa,SAAQ,UAAU;IAExC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI;IAYrE,MAAM,CAAC,MAAM,0BAgCX;IAIF,OAAO,UAAS;IAEhB,aAAa,UAAS;IAEtB,YAAY,UAAS;IAErB,gBAAgB,UAAS;IAEzB,SAAS,EACH,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,GACT,aAAa,GACb,WAAW,GACX,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,CAAS;IAIzB,MAAM,SAAK;IAEX,OAAO,CAAC,YAAY,CAAwC;;IAQ5D,YAAY;IAGZ,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAO3D,iBAAiB;IASjB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAC/B,IAAI,MAAM,IAGS,OAAO,GAAG,IAAI,CADhC;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,EAYhC;IAED,IAAI,aAkEF;IAEF,kBAAkB,GAAI,OAAO,KAAK,UAIhC;IAEF,eAAe,GAAI,OAAO,KAAK,UAG7B;IAEF,IAAI,aAIF;IAEF,UAAU,aAIR;IAEF,MAAM;CAIT;AAED,cAAM,eAAgB,SAAQ,SAAS;IACnC,YAAY,UAAS;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,aAAa,GAAE,OAAY;IAClC,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAUpE,SAAS;IAOT,oBAAoB;CAGvB;AAED,eAAO,MAAM,MAAM,mGAA6B,CAAC"}
+{"version":3,"file":"simple-popper.d.ts","sourceRoot":"","sources":["../../src/shared/simple-popper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAU,MAAM,KAAK,CAAC;AAkB1C,qBACa,YAAa,SAAQ,UAAU;IAExC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI;IAYrE,MAAM,CAAC,MAAM,0BAgCX;IAIF,OAAO,UAAS;IAEhB,aAAa,UAAS;IAEtB,gBAAgB,UAAS;IAEzB,SAAS,EACH,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,GACT,aAAa,GACb,WAAW,GACX,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,CAAS;IAIzB,MAAM,SAAK;IAEX,OAAO,aAAY;IAEnB,OAAO,CAAC,YAAY,CAAwC;;IAQ5D,YAAY;IAGZ,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAO3D,iBAAiB;IASjB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAC/B,IAAI,MAAM,IAGS,OAAO,GAAG,IAAI,CADhC;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,EAYhC;IACD,OAAO,CAAC,iBAAiB,CAA6B;IAEtD,IAAI,aAiGF;IAEF,IAAI,aASF;IAEF,kBAAkB,GAAI,OAAO,KAAK,UAMhC;IAEF,eAAe,GAAI,OAAO,KAAK,UAG7B;IAEF,UAAU,aAIR;IAEF,MAAM;CAIT;AAED,cAAM,eAAgB,SAAQ,SAAS;IACnC,YAAY,UAAS;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,aAAa,GAAE,OAAY;IAClC,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAUpE,SAAS;IAOT,oBAAoB;CAGvB;AAED,eAAO,MAAM,MAAM,mGAA6B,CAAC"}

package/dist/shared/simple-popper.js

@@ -9,9 +9,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { Directive, directive } from 'lit/directive.js';
 import { render } from 'lit';
 // Positioning library
-import { computePosition, offset, shift, arrow, size } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, shift, arrow, size, hide, flip, } from '@floating-ui/dom';
 // Events to turn on/off the popper
-const enterEvents = ['click', 'focus'];
+const enterEvents = ['click'];
 const leaveEvents = ['blur'];
 let SimplePopper = class SimplePopper extends LitElement {
     // Lazy creation
@@ -31,64 +31,101 @@ let SimplePopper = class SimplePopper extends LitElement {
         // Attribute for styling "showing"
         this.showing = false;
         this.manualOpening = false;
-        this.appendToBody = false;
         this.maxWidthAsTarget = false;
         this.placement = 'top';
         // Position offset
         this.offset = 4;
+        this.onClose = () => { };
         this.arrowElement = null;
         // Target for which to show tooltip
         this._target = null;
+        this.cleanupAutoUpdate = null;
         this.show = () => {
+            document.addEventListener('click', this.hideOnOutsideClick, { capture: true });
             if (!this.manualOpening) {
-                document.addEventListener('click', this.hideOnOutsideClick, { capture: true });
                 this.addEventListener('click', this.hideOnSlotClick);
             }
-            // document.body.appendChild(tooltip);
             this.style.cssText = '';
             this.style.zIndex = '1500';
             this.style.width = `${this.maxWidthAsTarget ? `${this.target?.clientWidth}px` || '0px' : undefined}`;
             this.style.maxWidth = `${this.maxWidthAsTarget ? undefined : 'max-content'}`;
+            // Setup autoUpdate to follow parent scroll/resize
             if (this.target && this.arrowElement) {
-                computePosition(this.target, this, {
-                    placement: this.placement,
-                    strategy: 'absolute',
-                    middleware: [
-                        offset(this.offset),
-                        shift(),
-                        size({ padding: 5 }),
-                        //autoPlacement({ allowedPlacements: ['top', 'bottom', 'left', 'right'] }),
-                        arrow({ element: this.arrowElement }),
-                    ],
-                }).then(({ x, y, middlewareData, placement, }) => {
-                    this.style.left = `${x}px`;
-                    this.style.top = `${y}px`;
-                    // Append to body to escape parent stacking context
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    const staticSide = {
-                        top: 'bottom',
-                        right: 'left',
-                        bottom: 'top',
-                        left: 'right',
-                    }[placement.split('-')[0]] || 'top';
-                    if (this.arrowElement) {
-                        Object.assign(this.arrowElement.style, {
-                            left: arrowX != null ? `${arrowX}px` : '',
-                            top: arrowY != null ? `${arrowY}px` : '',
-                            right: '',
-                            bottom: '',
-                            [staticSide]: '-4px',
-                        });
-                    }
+                if (this.cleanupAutoUpdate) {
+                    this.cleanupAutoUpdate();
+                    this.cleanupAutoUpdate = null;
+                }
+                this.cleanupAutoUpdate = autoUpdate(this.target, this, () => {
+                    computePosition(this.target, this, {
+                        placement: this.placement,
+                        strategy: 'absolute',
+                        middleware: [
+                            offset(this.offset),
+                            shift(),
+                            flip(),
+                            hide(),
+                            size({
+                                padding: 20,
+                                apply({ availableWidth, availableHeight, elements }) {
+                                    // Clamp maxWidth to availableWidth
+                                    elements.floating.style.maxWidth = `${Math.max(0, availableWidth)}px`;
+                                    // Determine the maximum allowed height
+                                    const computedMaxHeight = Math.min(400, Math.max(0, availableHeight));
+                                    // If everything fits, remove maxHeight restriction. Otherwise, apply the clamp.
+                                    if (elements.floating.scrollHeight <= computedMaxHeight) {
+                                        elements.floating.style.maxHeight = '';
+                                    }
+                                    else {
+                                        elements.floating.style.maxHeight = `${computedMaxHeight}px`;
+                                    }
+                                },
+                            }),
+                            arrow({ element: this.arrowElement }),
+                        ],
+                    }).then(({ x, y, middlewareData, placement, }) => {
+                        if (middlewareData.hide) {
+                            Object.assign(this.style, {
+                                display: middlewareData.hide.referenceHidden ? 'none' : 'block',
+                            });
+                        }
+                        this.style.left = `${x}px`;
+                        this.style.top = `${y}px`;
+                        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                        const staticSide = {
+                            top: 'bottom',
+                            right: 'left',
+                            bottom: 'top',
+                            left: 'right',
+                        }[placement.split('-')[0]] || 'top';
+                        if (this.arrowElement) {
+                            Object.assign(this.arrowElement.style, {
+                                left: arrowX != null ? `${arrowX}px` : '',
+                                top: arrowY != null ? `${arrowY}px` : '',
+                                right: '',
+                                bottom: '',
+                                [staticSide]: '-4px',
+                            });
+                        }
+                    });
                 });
             }
             this.showing = true;
-            if (!document.body.contains(this) && this.appendToBody) {
-                document.body.appendChild(this);
+            document.body.appendChild(this);
+        };
+        this.hide = () => {
+            this.showing = false;
+            if (this.cleanupAutoUpdate) {
+                this.cleanupAutoUpdate();
+                this.cleanupAutoUpdate = null;
             }
+            document.removeEventListener('click', this.hideOnOutsideClick, { capture: true });
+            this.removeEventListener('click', this.hideOnSlotClick);
+            this.onClose?.();
         };
         this.hideOnOutsideClick = (event) => {
-            if (!this.contains(event.target) && !this.target?.contains(event.target)) {
+            // Use composedPath to reliably detect if click was inside popper or target
+            const path = (event.composedPath && event.composedPath()) || [];
+            if (!path.includes(this) && !path.includes(this.target)) {
                 this.hide();
             }
         };
@@ -96,11 +133,6 @@ let SimplePopper = class SimplePopper extends LitElement {
             event.stopPropagation(); // Prevent click bubbling
             this.hide();
         };
-        this.hide = () => {
-            this.showing = false;
-            document.removeEventListener('click', this.hideOnOutsideClick, { capture: true });
-            this.removeEventListener('click', this.hideOnSlotClick);
-        };
         this.finishHide = () => {
             if (!this.showing) {
                 this.style.display = 'none';
@@ -165,7 +197,7 @@ SimplePopper.styles = css `
             color: var(--text-primary, #111827);
             overflow-y: auto;
             overflow-x: hidden;
-            border: 1px solid var(--color-divider, #e5e7eb);
+            border: 0.0625rem solid var(--color-divider, #e5e7eb);
         }
 
         :host([showing]) {
@@ -175,8 +207,8 @@ SimplePopper.styles = css `
         #arrow {
             position: absolute;
             background: var(--background-paper, #fff);
-            width: 8px;
-            height: 8px;
+            width: 0.5rem;
+            height: 0.5rem;
             transform: rotate(45deg);
         }
     `;
@@ -186,9 +218,6 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], SimplePopper.prototype, "manualOpening", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], SimplePopper.prototype, "appendToBody", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], SimplePopper.prototype, "maxWidthAsTarget", void 0);
@@ -198,6 +227,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], SimplePopper.prototype, "offset", void 0);
+__decorate([
+    property({ type: Function })
+], SimplePopper.prototype, "onClose", void 0);
 SimplePopper = __decorate([
     customElement('simple-popper')
 ], SimplePopper);