@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-disclosure.d.ts

@@ -53,5 +53,5 @@ export declare class CVDisclosure extends ReatomLitElement {
     hide(): void;
     private handleTriggerClick;
     private handleTriggerKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-disclosure.js

@@ -1,5 +1,6 @@
 import { createDisclosure } from '@chromvoid/headless-ui/disclosure';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvDisclosureNonce = 0;
 export class CVDisclosure extends ReatomLitElement {

package/dist/components/cv-drawer.d.ts

@@ -46,6 +46,11 @@ export declare class CVDrawer extends ReatomLitElement {
             attribute: string;
             reflect: boolean;
         };
+        dragToClose: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
     };
     open: boolean;
     modal: boolean;
@@ -56,6 +61,7 @@ export declare class CVDrawer extends ReatomLitElement {
     closeOnOutsideFocus: boolean;
     initialFocusId: string;
     noHeader: boolean;
+    dragToClose: boolean;
     private readonly idBase;
     private model;
     private lockScrollApplied;
@@ -67,6 +73,11 @@ export declare class CVDrawer extends ReatomLitElement {
     private openAnimationFrame;
     private closeAnimationTimeout;
     private shouldAnimatePresence;
+    private dragPointerId;
+    private dragStartX;
+    private dragStartY;
+    private dragStartedAt;
+    private dragMoved;
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
@@ -91,12 +102,29 @@ export declare class CVDrawer extends ReatomLitElement {
     private syncOutsideFocusListener;
     private syncScrollLock;
     private releaseScrollLock;
+    private getDragElements;
+    private resetDragState;
+    private finishDragInteraction;
+    private isHorizontalPlacement;
+    private getClosingDistance;
+    private getVisualDragOffset;
+    private getPanelDragSize;
+    private shouldCancelDragForScroll;
+    private setDragOffset;
+    private commitDragClose;
+    private trySetPointerCapture;
+    private tryReleasePointerCapture;
     private focusInitialTarget;
     private handleDocumentFocusIn;
     private handleTriggerClick;
     private handleTriggerKeyDown;
     private handleOverlayPointerDown;
+    private handleOverlayClick;
     private handlePanelKeyDown;
     private handleHeaderCloseClick;
-    protected render(): import("lit").TemplateResult<1>;
+    private handlePanelPointerDown;
+    private handlePanelPointerMove;
+    private handlePanelPointerUp;
+    private handlePanelPointerCancel;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-drawer.js

@@ -1,7 +1,12 @@
 import { createDrawer } from '@chromvoid/headless-ui/drawer';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvDrawerNonce = 0;
+const DRAG_CLOSE_DISTANCE_PX = 96;
+const DRAG_CLOSE_VELOCITY_PX_PER_MS = 0.75;
+const DRAG_SCROLL_DOMINANCE_PX = 18;
+const DRAG_MOVE_EPSILON_PX = 4;
 export class CVDrawer extends ReatomLitElement {
     static elementName = 'cv-drawer';
     static get properties() {
@@ -15,6 +20,7 @@ export class CVDrawer extends ReatomLitElement {
             closeOnOutsideFocus: { type: Boolean, attribute: 'close-on-outside-focus', reflect: true },
             initialFocusId: { type: String, attribute: 'initial-focus-id' },
             noHeader: { type: Boolean, attribute: 'no-header', reflect: true },
+            dragToClose: { type: Boolean, attribute: 'drag-to-close', reflect: true },
         };
     }
     idBase = `cv-drawer-${++cvDrawerNonce}`;
@@ -28,6 +34,11 @@ export class CVDrawer extends ReatomLitElement {
     openAnimationFrame = 0;
     closeAnimationTimeout = 0;
     shouldAnimatePresence = false;
+    dragPointerId = null;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragStartedAt = 0;
+    dragMoved = false;
     constructor() {
         super();
         this.open = false;
@@ -39,6 +50,7 @@ export class CVDrawer extends ReatomLitElement {
         this.closeOnOutsideFocus = true;
         this.initialFocusId = '';
         this.noHeader = false;
+        this.dragToClose = false;
         this.model = this.createModel();
         this.overlayVisible = this.open;
         this.renderState = this.open ? 'open' : 'closed';
@@ -74,9 +86,12 @@ export class CVDrawer extends ReatomLitElement {
         display: flex;
         overflow: clip;
         contain: paint;
-        background: var(--cv-drawer-overlay-color, color-mix(in oklab, black 56%, transparent));
+        background: var(--cv-drawer-overlay-color, var(--cv-color-overlay));
         opacity: var(--cv-drawer-overlay-closed-opacity, 1);
-        transition: opacity var(--cv-drawer-overlay-transition-duration, 0ms) ease;
+        transition:
+          opacity var(--cv-drawer-overlay-transition-duration, 0ms) ease,
+          display var(--cv-drawer-overlay-transition-duration, 0ms) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='overlay'][hidden] {
@@ -87,7 +102,14 @@ export class CVDrawer extends ReatomLitElement {
         opacity: 1;
       }
 
+      [part='overlay'][data-dragging='true'] {
+        opacity: var(--cv-drawer-drag-overlay-opacity, 1);
+        transition: none;
+      }
+
       [part='panel'] {
+        --cv-drawer-drag-offset-x: 0px;
+        --cv-drawer-drag-offset-y: 0px;
         position: fixed;
         overflow: auto;
         display: grid;
@@ -100,6 +122,7 @@ export class CVDrawer extends ReatomLitElement {
         transition:
           transform var(--cv-drawer-transition-duration, 250ms) ease,
           opacity var(--cv-drawer-transition-duration, 250ms) ease;
+        transition-behavior: allow-discrete;
       }
 
       [part='panel']:focus-visible {
@@ -116,6 +139,7 @@ export class CVDrawer extends ReatomLitElement {
         border-radius: 0 var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px))
           var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px)) 0;
         transform: translate3d(-100%, 0, 0);
+        touch-action: pan-y;
       }
 
       /* Placement: end (inline-end edge) */
@@ -127,6 +151,7 @@ export class CVDrawer extends ReatomLitElement {
         border-radius: var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px)) 0 0
           var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px));
         transform: translate3d(100%, 0, 0);
+        touch-action: pan-y;
       }
 
       /* Placement: top */
@@ -138,6 +163,7 @@ export class CVDrawer extends ReatomLitElement {
         border-radius: 0 0 var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px))
           var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px));
         transform: translate3d(0, -100%, 0);
+        touch-action: pan-x;
       }
 
       /* Placement: bottom */
@@ -149,11 +175,25 @@ export class CVDrawer extends ReatomLitElement {
         border-radius: var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px))
           var(--cv-drawer-border-radius, var(--cv-radius-lg, 14px)) 0 0;
         transform: translate3d(0, 100%, 0);
+        touch-action: pan-x;
       }
 
       [part='panel'][data-state='open'] {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
+      }
+
+      [part='panel'][data-placement='start'][data-state='open'],
+      [part='panel'][data-placement='end'][data-state='open'] {
+        transform: translate3d(var(--cv-drawer-drag-offset-x, 0px), 0, 0);
+      }
+
+      [part='panel'][data-placement='top'][data-state='open'],
+      [part='panel'][data-placement='bottom'][data-state='open'] {
+        transform: translate3d(0, var(--cv-drawer-drag-offset-y, 0px), 0);
+      }
+
+      [part='panel'][data-dragging='true'] {
+        transition: none;
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -226,6 +266,7 @@ export class CVDrawer extends ReatomLitElement {
         this.syncOutsideFocusListener(true);
         this.releaseScrollLock();
         this.clearAnimationQueue();
+        this.resetDragState();
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
@@ -300,6 +341,7 @@ export class CVDrawer extends ReatomLitElement {
         }
     }
     startOpenAnimation() {
+        this.resetDragState();
         this.openAnimationFrame = requestAnimationFrame(() => {
             this.openAnimationFrame = 0;
             if (!this.open)
@@ -312,6 +354,7 @@ export class CVDrawer extends ReatomLitElement {
         const duration = this.getTransitionDuration();
         if (duration === 0) {
             this.overlayVisible = false;
+            this.resetDragState();
             this.syncRenderedState();
             return;
         }
@@ -320,6 +363,7 @@ export class CVDrawer extends ReatomLitElement {
             if (this.open)
                 return;
             this.overlayVisible = false;
+            this.resetDragState();
             this.syncRenderedState();
         }, duration);
     }
@@ -460,6 +504,111 @@ export class CVDrawer extends ReatomLitElement {
         document.body.style.overflow = this.previousBodyOverflow;
         this.lockScrollApplied = false;
     }
+    getDragElements() {
+        return {
+            panel: this.shadowRoot?.querySelector('[part="panel"]'),
+            overlay: this.shadowRoot?.querySelector('[part="overlay"]'),
+        };
+    }
+    resetDragState() {
+        this.dragPointerId = null;
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.dragStartedAt = 0;
+        this.dragMoved = false;
+        const { panel, overlay } = this.getDragElements();
+        panel?.removeAttribute('data-dragging');
+        panel?.style.removeProperty('--cv-drawer-drag-offset-x');
+        panel?.style.removeProperty('--cv-drawer-drag-offset-y');
+        overlay?.removeAttribute('data-dragging');
+        overlay?.style.removeProperty('--cv-drawer-drag-overlay-opacity');
+    }
+    finishDragInteraction() {
+        this.dragPointerId = null;
+        this.dragStartedAt = 0;
+        this.dragMoved = false;
+        const { panel, overlay } = this.getDragElements();
+        panel?.removeAttribute('data-dragging');
+        overlay?.removeAttribute('data-dragging');
+    }
+    isHorizontalPlacement() {
+        return this.placement === 'start' || this.placement === 'end';
+    }
+    getClosingDistance(event) {
+        switch (this.placement) {
+            case 'start':
+                return this.dragStartX - event.clientX;
+            case 'end':
+                return event.clientX - this.dragStartX;
+            case 'top':
+                return this.dragStartY - event.clientY;
+            case 'bottom':
+                return event.clientY - this.dragStartY;
+            default:
+                return 0;
+        }
+    }
+    getVisualDragOffset(closingDistance) {
+        const offset = Math.max(0, closingDistance);
+        return this.placement === 'start' || this.placement === 'top' ? -offset : offset;
+    }
+    getPanelDragSize(panel) {
+        if (!panel)
+            return DRAG_CLOSE_DISTANCE_PX;
+        const rect = panel.getBoundingClientRect();
+        const size = this.isHorizontalPlacement() ? rect.width : rect.height;
+        return Math.max(size, DRAG_CLOSE_DISTANCE_PX);
+    }
+    shouldCancelDragForScroll(event) {
+        if (this.dragMoved)
+            return false;
+        const mainDelta = this.isHorizontalPlacement()
+            ? Math.abs(event.clientX - this.dragStartX)
+            : Math.abs(event.clientY - this.dragStartY);
+        const crossDelta = this.isHorizontalPlacement()
+            ? Math.abs(event.clientY - this.dragStartY)
+            : Math.abs(event.clientX - this.dragStartX);
+        return crossDelta > DRAG_SCROLL_DOMINANCE_PX && crossDelta > mainDelta;
+    }
+    setDragOffset(closingDistance) {
+        const { panel, overlay } = this.getDragElements();
+        const visualOffset = this.getVisualDragOffset(closingDistance);
+        const panelSize = this.getPanelDragSize(panel);
+        const progress = Math.min(Math.max(Math.max(0, closingDistance) / panelSize, 0), 1);
+        const overlayOpacity = Math.max(0.55, 1 - progress * 0.45);
+        if (this.isHorizontalPlacement()) {
+            panel?.style.setProperty('--cv-drawer-drag-offset-x', `${Math.round(visualOffset)}px`);
+            panel?.style.setProperty('--cv-drawer-drag-offset-y', '0px');
+        }
+        else {
+            panel?.style.setProperty('--cv-drawer-drag-offset-x', '0px');
+            panel?.style.setProperty('--cv-drawer-drag-offset-y', `${Math.round(visualOffset)}px`);
+        }
+        overlay?.style.setProperty('--cv-drawer-drag-overlay-opacity', String(overlayOpacity));
+    }
+    commitDragClose() {
+        if (!this.open)
+            return;
+        const previous = this.captureState();
+        this.model.actions.close();
+        this.applyInteractionResult(previous);
+    }
+    trySetPointerCapture(target, pointerId) {
+        try {
+            target?.setPointerCapture?.(pointerId);
+        }
+        catch {
+            // Synthetic PointerEvents used by browser tests do not always register an active pointer.
+        }
+    }
+    tryReleasePointerCapture(target, pointerId) {
+        try {
+            target?.releasePointerCapture?.(pointerId);
+        }
+        catch {
+            // Release is best-effort because the pointer may already be cancelled or synthetic.
+        }
+    }
     focusInitialTarget() {
         const panelProps = this.model.contracts.getPanelProps();
         const requestedId = panelProps['data-initial-focus'];
@@ -504,6 +653,15 @@ export class CVDrawer extends ReatomLitElement {
         this.model.contracts.getOverlayProps().onPointerDownOutside();
         this.applyInteractionResult(previous);
     }
+    handleOverlayClick(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        if (!this.open)
+            return;
+        const previous = this.captureState();
+        this.model.contracts.getOverlayProps().onPointerDownOutside();
+        this.applyInteractionResult(previous);
+    }
     handlePanelKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -517,6 +675,66 @@ export class CVDrawer extends ReatomLitElement {
         this.model.contracts.getHeaderCloseButtonProps().onClick();
         this.applyInteractionResult(previous);
     }
+    handlePanelPointerDown(event) {
+        if (!this.open || !this.dragToClose)
+            return;
+        if (event.pointerType !== 'touch')
+            return;
+        if (event.isPrimary === false)
+            return;
+        if (typeof event.button === 'number' && event.button !== 0)
+            return;
+        this.dragPointerId = event.pointerId;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragStartedAt = performance.now();
+        this.dragMoved = false;
+        this.setDragOffset(0);
+        const { panel, overlay } = this.getDragElements();
+        panel?.setAttribute('data-dragging', 'true');
+        overlay?.setAttribute('data-dragging', 'true');
+        const target = event.currentTarget;
+        this.trySetPointerCapture(target, event.pointerId);
+    }
+    handlePanelPointerMove(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        if (this.shouldCancelDragForScroll(event)) {
+            const target = event.currentTarget;
+            this.tryReleasePointerCapture(target, event.pointerId);
+            this.resetDragState();
+            return;
+        }
+        const closingDistance = Math.max(0, this.getClosingDistance(event));
+        this.dragMoved ||= closingDistance > DRAG_MOVE_EPSILON_PX;
+        this.setDragOffset(closingDistance);
+        if (closingDistance > 0) {
+            event.preventDefault();
+        }
+    }
+    handlePanelPointerUp(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        const target = event.currentTarget;
+        this.tryReleasePointerCapture(target, event.pointerId);
+        const elapsed = Math.max(1, performance.now() - this.dragStartedAt);
+        const closingDistance = Math.max(0, this.getClosingDistance(event));
+        const velocity = closingDistance / elapsed;
+        const shouldClose = closingDistance >= DRAG_CLOSE_DISTANCE_PX || velocity >= DRAG_CLOSE_VELOCITY_PX_PER_MS;
+        if (shouldClose) {
+            this.finishDragInteraction();
+            this.commitDragClose();
+            return;
+        }
+        this.resetDragState();
+    }
+    handlePanelPointerCancel(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        const target = event.currentTarget;
+        this.tryReleasePointerCapture(target, event.pointerId);
+        this.resetDragState();
+    }
     render() {
         const triggerProps = this.model.contracts.getTriggerProps();
         const overlayProps = this.model.contracts.getOverlayProps();
@@ -545,8 +763,10 @@ export class CVDrawer extends ReatomLitElement {
         data-open=${overlayProps['data-open']}
         data-state=${this.renderState}
         ?hidden=${!this.overlayVisible}
+        class="cv-u-discrete-presence"
         part="overlay"
         @mousedown=${this.handleOverlayPointerDown}
+        @click=${this.handleOverlayClick}
       >
         <section
           id=${panelProps.id}
@@ -558,8 +778,13 @@ export class CVDrawer extends ReatomLitElement {
           data-placement=${panelProps['data-placement']}
           data-state=${this.renderState}
           data-initial-focus=${panelProps['data-initial-focus'] ?? nothing}
+          class="cv-u-discrete-presence"
           part="panel"
           @keydown=${this.handlePanelKeyDown}
+          @pointerdown=${this.handlePanelPointerDown}
+          @pointermove=${this.handlePanelPointerMove}
+          @pointerup=${this.handlePanelPointerUp}
+          @pointercancel=${this.handlePanelPointerCancel}
         >
           <header part="header" ?hidden=${this.noHeader}>
             <h2 id=${titleProps.id} part="title">

package/dist/components/cv-feed-article.d.ts

@@ -22,5 +22,5 @@ export declare class CVFeedArticle extends ReatomLitElement {
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-feed-article.js

@@ -1,4 +1,5 @@
-import { css, html } from 'lit';
+import { css } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 export class CVFeedArticle extends ReatomLitElement {
     static elementName = 'cv-feed-article';

package/dist/components/cv-feed.d.ts

@@ -58,5 +58,5 @@ export declare class CVFeed extends ReatomLitElement {
     private destroyObserver;
     private handleKeyDown;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-feed.js

@@ -1,5 +1,6 @@
 import { createFeed, } from '@chromvoid/headless-ui/feed';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvFeedNonce = 0;
 export class CVFeed extends ReatomLitElement {

package/dist/components/cv-grid-cell.d.ts

@@ -26,5 +26,5 @@ export declare class CVGridCell extends LitElement {
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-grid-cell.js

@@ -21,17 +21,17 @@ export class CVGridCell extends LitElement {
       :host {
         display: table-cell;
         padding: var(--cv-space-2, 8px) var(--cv-space-3, 12px);
-        border-bottom: 1px solid color-mix(in oklab, var(--cv-color-border, #2a3245) 70%, transparent);
+        border-bottom: 1px solid var(--cv-color-border-soft);
         color: var(--cv-color-text, #e8ecf6);
         outline: none;
       }
 
       :host([active]) {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 14%, transparent);
+        background: var(--cv-color-active);
       }
 
       :host([selected]) {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+        background: var(--cv-color-primary-ring);
       }
 
       :host([disabled]) {

package/dist/components/cv-grid-column.d.ts

@@ -26,5 +26,5 @@ export declare class CVGridColumn extends LitElement {
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-grid-column.js

@@ -24,7 +24,7 @@ export class CVGridColumn extends LitElement {
         border-bottom: 1px solid var(--cv-color-border, #2a3245);
         color: var(--cv-color-text, #e8ecf6);
         font-weight: 600;
-        background: color-mix(in oklab, var(--cv-color-surface, #141923) 82%, transparent);
+        background: var(--cv-color-surface-glass-strong);
       }
 
       :host([disabled]) {

package/dist/components/cv-grid-row.d.ts

@@ -26,5 +26,5 @@ export declare class CVGridRow extends LitElement {
     static styles: import("lit").CSSResult[];
     static define(): void;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-grid.d.ts

@@ -115,5 +115,5 @@ export declare class CVGrid extends ReatomLitElement {
     private handleColumnsSlotChange;
     private handleRowsSlotChange;
     private handleRowSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-grid.js

@@ -1,5 +1,6 @@
 import { createGrid, } from '@chromvoid/headless-ui/grid';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 import { CVGridCell } from './cv-grid-cell.js';
 import { CVGridColumn } from './cv-grid-column.js';

package/dist/components/cv-guidance-anchor.d.ts

@@ -0,0 +1,47 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare const GUIDANCE_ANCHOR_REGISTER_EVENT = "guidance-anchor-register";
+export declare const GUIDANCE_ANCHOR_UNREGISTER_EVENT = "guidance-anchor-unregister";
+export type CVGuidanceAnchorEventDetail = {
+    anchorId: string;
+    surface: string;
+    owner: string;
+    element: CVGuidanceAnchor;
+};
+export type CVGuidanceAnchorRegisterEvent = CustomEvent<CVGuidanceAnchorEventDetail>;
+export type CVGuidanceAnchorUnregisterEvent = CustomEvent<CVGuidanceAnchorEventDetail>;
+export declare class CVGuidanceAnchor extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        anchorId: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        surface: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        owner: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    anchorId: string;
+    surface: string;
+    owner: string;
+    private registeredDetail;
+    private unregisterEventTarget;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private createDetail;
+    private createDetailKey;
+    private hasRequiredMetadata;
+    private dispatchRegister;
+    private dispatchUnregister;
+    protected render(): import("lit-html").TemplateResult;
+}