@dxos/lit-ui 0.8.1-staging.9eaf14f → 0.8.2-main.12df754

package/dist/src/dx-ref-tag/dx-ref-tag.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class DxRefTagActivate extends Event {
+    readonly ref: string;
+    readonly label: string;
+    readonly trigger: HTMLButtonElement;
+    constructor(props: {
+        ref: string;
+        label: string;
+        trigger: HTMLButtonElement;
+    });
+}
+export declare class DxRefTag extends LitElement {
+    ref: string;
+    label: string;
+    rootClassName: string | undefined;
+    hoverDelay: number;
+    private hoverTimer;
+    private handleActivate;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    render(): import("lit").TemplateResult<1>;
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=dx-ref-tag.d.ts.map

package/dist/src/dx-ref-tag/dx-ref-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-ref-tag.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBAAa,gBAAiB,SAAQ,KAAK;IACzC,SAAgB,GAAG,EAAE,MAAM,CAAC;IAC5B,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,OAAO,EAAE,iBAAiB,CAAC;gBAC/B,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAA;KAAE;CAM9E;AAED,qBACa,QAAS,SAAQ,UAAU;IAEtC,GAAG,EAAE,MAAM,CAAwB;IAGnC,KAAK,EAAE,MAAM,CAAW;IAGxB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,UAAU,EAAE,MAAM,CAAO;IAGzB,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAOjB,MAAM;IAcN,gBAAgB;CAG1B"}

package/dist/src/dx-ref-tag/dx-ref-tag.js

@@ -0,0 +1,84 @@
+//
+// Copyright 2025 DXOS.org
+//
+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, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { makeId } from '@dxos/react-hooks';
+export class DxRefTagActivate extends Event {
+    constructor(props) {
+        super('dx-ref-tag-activate');
+        this.ref = props.ref;
+        this.label = props.label;
+        this.trigger = props.trigger;
+    }
+}
+let DxRefTag = class DxRefTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ref = makeId('dx-ref-tag');
+        this.label = 'never';
+        this.rootClassName = undefined;
+        this.hoverDelay = 400;
+        this.hoverTimer = null;
+    }
+    handleActivate(event) {
+        this.dispatchEvent(new DxRefTagActivate({ ref: this.ref, label: this.label, trigger: this.querySelector('[data-trigger]') }));
+    }
+    handlePointerEnter() {
+        if (this.hoverTimer !== null) {
+            window.clearTimeout(this.hoverTimer);
+        }
+        this.hoverTimer = window.setTimeout(() => {
+            this.handleActivate({ type: 'hover-linger' });
+            this.hoverTimer = null;
+        }, this.hoverDelay);
+    }
+    handlePointerLeave() {
+        if (this.hoverTimer !== null) {
+            window.clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
+        }
+    }
+    render() {
+        const className = `dx-focus-ring dx-ref-tag${this.rootClassName ? ` ${this.rootClassName}` : ''}`;
+        return html `<span
+      tabindex="0"
+      data-trigger="true"
+      class=${className}
+      id=${this.id}
+      @click=${this.handleActivate}
+      @pointerenter=${this.handlePointerEnter}
+      @pointerleave=${this.handlePointerLeave}
+      >${this.label}</span
+    >`;
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "ref", void 0);
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "rootClassName", void 0);
+__decorate([
+    property({ type: Number })
+], DxRefTag.prototype, "hoverDelay", void 0);
+__decorate([
+    state()
+], DxRefTag.prototype, "hoverTimer", void 0);
+DxRefTag = __decorate([
+    customElement('dx-ref-tag')
+], DxRefTag);
+export { DxRefTag };
+//# sourceMappingURL=dx-ref-tag.js.map

package/dist/src/dx-ref-tag/dx-ref-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-ref-tag.js","sourceRoot":"","sources":["../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,gBAAiB,SAAQ,KAAK;IAIzC,YAAY,KAAiE;QAC3E,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,CAAC;CACF;AAGM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAEL,QAAG,GAAW,MAAM,CAAC,YAAY,CAAC,CAAC;QAGnC,UAAK,GAAW,OAAO,CAAC;QAGxB,kBAAa,GAAuB,SAAS,CAAC;QAG9C,eAAU,GAAW,GAAG,CAAC;QAGjB,eAAU,GAAkB,IAAI,CAAC;IA0C3C,CAAC;IAxCS,cAAc,CAAC,KAAuB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,gBAAgB,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAE,EAAE,CAAC,CAC3G,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,SAAS,GAAG,2BAA2B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAClG,OAAO,IAAI,CAAA;;;cAGD,SAAS;WACZ,IAAI,CAAC,EAAE;eACH,IAAI,CAAC,cAAc;sBACZ,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,kBAAkB;SACpC,IAAI,CAAC,KAAK;MACb,CAAC;IACL,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAtDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACQ;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACF;AAGjB;IADP,KAAK,EAAE;4CACiC;AAd9B,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAwDpB"}

package/dist/src/dx-ref-tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dx-ref-tag';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/dx-ref-tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/src/dx-ref-tag/index.js

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-ref-tag';
+//# sourceMappingURL=index.js.map

package/dist/src/dx-ref-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,cAAc,CAAC"}

package/dist/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dx-avatar';
 export * from './dx-tag-picker';
+export * from './dx-ref-tag';
 export * from './dx-icon';
 export { createComponent, type EventName } from '@lit/react';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/index.js

@@ -3,6 +3,7 @@
 //
 export * from './dx-avatar';
 export * from './dx-tag-picker';
+export * from './dx-ref-tag';
 export * from './dx-icon';
 export { createComponent } from '@lit/react';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC"}

package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class DxRefTagActivate extends Event {
+    readonly ref: string;
+    readonly label: string;
+    readonly trigger: HTMLButtonElement;
+    constructor(props: {
+        ref: string;
+        label: string;
+        trigger: HTMLButtonElement;
+    });
+}
+export declare class DxRefTag extends LitElement {
+    ref: string;
+    label: string;
+    rootClassName: string | undefined;
+    hoverDelay: number;
+    private hoverTimer;
+    private handleActivate;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    render(): import("lit").TemplateResult<1>;
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=dx-ref-tag.d.ts.map

package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-ref-tag.d.ts","sourceRoot":"","sources":["../../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBAAa,gBAAiB,SAAQ,KAAK;IACzC,SAAgB,GAAG,EAAE,MAAM,CAAC;IAC5B,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,OAAO,EAAE,iBAAiB,CAAC;gBAC/B,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAA;KAAE;CAM9E;AAED,qBACa,QAAS,SAAQ,UAAU;IAEtC,GAAG,EAAE,MAAM,CAAwB;IAGnC,KAAK,EAAE,MAAM,CAAW;IAGxB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,UAAU,EAAE,MAAM,CAAO;IAGzB,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAOjB,MAAM;IAcN,gBAAgB;CAG1B"}

package/dist/types/src/dx-ref-tag/dx-ref-tag.js

@@ -0,0 +1,84 @@
+//
+// Copyright 2025 DXOS.org
+//
+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, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { makeId } from '@dxos/react-hooks';
+export class DxRefTagActivate extends Event {
+    constructor(props) {
+        super('dx-ref-tag-activate');
+        this.ref = props.ref;
+        this.label = props.label;
+        this.trigger = props.trigger;
+    }
+}
+let DxRefTag = class DxRefTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ref = makeId('dx-ref-tag');
+        this.label = 'never';
+        this.rootClassName = undefined;
+        this.hoverDelay = 400;
+        this.hoverTimer = null;
+    }
+    handleActivate(event) {
+        this.dispatchEvent(new DxRefTagActivate({ ref: this.ref, label: this.label, trigger: this.querySelector('[data-trigger]') }));
+    }
+    handlePointerEnter() {
+        if (this.hoverTimer !== null) {
+            window.clearTimeout(this.hoverTimer);
+        }
+        this.hoverTimer = window.setTimeout(() => {
+            this.handleActivate({ type: 'hover-linger' });
+            this.hoverTimer = null;
+        }, this.hoverDelay);
+    }
+    handlePointerLeave() {
+        if (this.hoverTimer !== null) {
+            window.clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
+        }
+    }
+    render() {
+        const className = `dx-focus-ring dx-ref-tag${this.rootClassName ? ` ${this.rootClassName}` : ''}`;
+        return html `<span
+      tabindex="0"
+      data-trigger="true"
+      class=${className}
+      id=${this.id}
+      @click=${this.handleActivate}
+      @pointerenter=${this.handlePointerEnter}
+      @pointerleave=${this.handlePointerLeave}
+      >${this.label}</span
+    >`;
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "ref", void 0);
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], DxRefTag.prototype, "rootClassName", void 0);
+__decorate([
+    property({ type: Number })
+], DxRefTag.prototype, "hoverDelay", void 0);
+__decorate([
+    state()
+], DxRefTag.prototype, "hoverTimer", void 0);
+DxRefTag = __decorate([
+    customElement('dx-ref-tag')
+], DxRefTag);
+export { DxRefTag };
+//# sourceMappingURL=dx-ref-tag.js.map

package/dist/types/src/dx-ref-tag/dx-ref-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-ref-tag.js","sourceRoot":"","sources":["../../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,gBAAiB,SAAQ,KAAK;IAIzC,YAAY,KAAiE;QAC3E,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,CAAC;CACF;AAGM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAEL,QAAG,GAAW,MAAM,CAAC,YAAY,CAAC,CAAC;QAGnC,UAAK,GAAW,OAAO,CAAC;QAGxB,kBAAa,GAAuB,SAAS,CAAC;QAG9C,eAAU,GAAW,GAAG,CAAC;QAGjB,eAAU,GAAkB,IAAI,CAAC;IA0C3C,CAAC;IAxCS,cAAc,CAAC,KAAuB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,gBAAgB,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAE,EAAE,CAAC,CAC3G,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,SAAS,GAAG,2BAA2B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAClG,OAAO,IAAI,CAAA;;;cAGD,SAAS;WACZ,IAAI,CAAC,EAAE;eACH,IAAI,CAAC,cAAc;sBACZ,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,kBAAkB;SACpC,IAAI,CAAC,KAAK;MACb,CAAC;IACL,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAtDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACQ;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACF;AAGjB;IADP,KAAK,EAAE;4CACiC;AAd9B,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAwDpB"}

package/dist/types/src/dx-ref-tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dx-ref-tag';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/dx-ref-tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/dx-ref-tag/index.js

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-ref-tag';
+//# sourceMappingURL=index.js.map

package/dist/types/src/dx-ref-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,cAAc,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dx-avatar';
 export * from './dx-tag-picker';
+export * from './dx-ref-tag';
 export * from './dx-icon';
 export { createComponent, type EventName } from '@lit/react';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/types/src/index.js

@@ -3,6 +3,7 @@
 //
 export * from './dx-avatar';
 export * from './dx-tag-picker';
+export * from './dx-ref-tag';
 export * from './dx-icon';
 export { createComponent } from '@lit/react';
 //# sourceMappingURL=index.js.map

package/dist/types/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.1-staging.9eaf14f",
+  "version": "0.8.2-main.12df754",
   "description": "Web Components for DXOS using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,7 +15,8 @@
       "node": "./dist/src/index.js"
     },
     "./dx-avatar.pcss": "./src/dx-avatar/dx-avatar.pcss",
-    "./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss"
+    "./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss",
+    "./dx-ref-tag.pcss": "./src/dx-ref-tag/dx-ref-tag.pcss"
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -26,9 +27,9 @@
   "dependencies": {
     "@lit/react": "^1.0.5",
     "lit": "^3.2.0",
-    "@dxos/react-hooks": "0.8.1-staging.9eaf14f"
+    "@dxos/react-hooks": "0.8.2-main.12df754"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.1-staging.9eaf14f"
+    "@dxos/test-utils": "0.8.2-main.12df754"
   }
 }

package/src/dx-avatar/dx-avatar.pcss

@@ -1,5 +1,5 @@
 .dx-avatar-group {
-  @apply inline-flex items-center;
+  @apply inline-flex items-center pie-2;
 }
 
 .dx-avatar-group .dx-avatar {
@@ -20,7 +20,7 @@ dx-avatar {
   @apply relative inline-flex shrink-0;
 
   .dx-avatar__frame {
-    @apply is-full bs-full bg-[--surface-bg]
+    @apply is-full bs-full bg-[--surface-bg];
   }
 
   .dx-avatar__frame, .dx-avatar__ring {

package/src/dx-ref-tag/dx-ref-tag.pcss

@@ -0,0 +1,7 @@
+dx-ref-tag {
+  display: contents;
+}
+
+.dx-ref-tag {
+  @apply inline cursor-pointer pli-1 plb-0.5 border border-separator rounded-sm
+}

package/src/dx-ref-tag/dx-ref-tag.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { makeId } from '@dxos/react-hooks';
+
+export class DxRefTagActivate extends Event {
+  public readonly ref: string;
+  public readonly label: string;
+  public readonly trigger: HTMLButtonElement;
+  constructor(props: { ref: string; label: string; trigger: HTMLButtonElement }) {
+    super('dx-ref-tag-activate');
+    this.ref = props.ref;
+    this.label = props.label;
+    this.trigger = props.trigger;
+  }
+}
+
+@customElement('dx-ref-tag')
+export class DxRefTag extends LitElement {
+  @property({ type: String })
+  ref: string = makeId('dx-ref-tag');
+
+  @property({ type: String })
+  label: string = 'never';
+
+  @property({ type: String })
+  rootClassName: string | undefined = undefined;
+
+  @property({ type: Number })
+  hoverDelay: number = 400;
+
+  @state()
+  private hoverTimer: number | null = null;
+
+  private handleActivate(event: { type: string }) {
+    this.dispatchEvent(
+      new DxRefTagActivate({ ref: this.ref, label: this.label, trigger: this.querySelector('[data-trigger]')! }),
+    );
+  }
+
+  private handlePointerEnter() {
+    if (this.hoverTimer !== null) {
+      window.clearTimeout(this.hoverTimer);
+    }
+    this.hoverTimer = window.setTimeout(() => {
+      this.handleActivate({ type: 'hover-linger' });
+      this.hoverTimer = null;
+    }, this.hoverDelay);
+  }
+
+  private handlePointerLeave() {
+    if (this.hoverTimer !== null) {
+      window.clearTimeout(this.hoverTimer);
+      this.hoverTimer = null;
+    }
+  }
+
+  override render() {
+    const className = `dx-focus-ring dx-ref-tag${this.rootClassName ? ` ${this.rootClassName}` : ''}`;
+    return html`<span
+      tabindex="0"
+      data-trigger="true"
+      class=${className}
+      id=${this.id}
+      @click=${this.handleActivate}
+      @pointerenter=${this.handlePointerEnter}
+      @pointerleave=${this.handlePointerLeave}
+      >${this.label}</span
+    >`;
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

package/src/dx-ref-tag/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './dx-ref-tag';

package/src/index.ts

@@ -4,6 +4,7 @@
 
 export * from './dx-avatar';
 export * from './dx-tag-picker';
+export * from './dx-ref-tag';
 export * from './dx-icon';
 
 export { createComponent, type EventName } from '@lit/react';