@dxos/lit-ui 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.dedc0f3",
   "description": "Web Components for DXOS using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,18 +10,19 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/src/index.d.ts",
       "browser": "./dist/src/index.js",
       "node": "./dist/src/index.js"
     },
     "./react": {
+      "source": "./src/react.ts",
       "types": "./dist/src/react.d.ts",
       "browser": "./dist/src/react.js",
       "node": "./dist/src/react.js"
     },
     "./dx-avatar.pcss": "./src/dx-avatar/dx-avatar.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"
+    "./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss"
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -39,11 +40,11 @@
   "dependencies": {
     "@lit/react": "^1.0.5",
     "lit": "^3.2.0",
-    "@dxos/react-hooks": "0.8.4-main.b97322e",
-    "@dxos/util": "0.8.4-main.b97322e"
+    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.4-main.b97322e"
+    "@dxos/test-utils": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/{dx-ref-tag/dx-ref-tag.ts → dx-anchor/dx-anchor.ts}

@@ -10,27 +10,27 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { makeId } from '@dxos/react-hooks';
 
-export class DxRefTagActivate extends Event {
+export class DxAnchorActivate extends Event {
   public readonly refId: string;
   public readonly label: string;
-  public readonly trigger: DxRefTag;
-  constructor(props: { refId: string; label: string; trigger: DxRefTag }) {
-    super('dx-ref-tag-activate');
+  public readonly trigger: DxAnchor;
+  constructor(props: { refId: string; label: string; trigger: DxAnchor }) {
+    super('dx-anchor-activate');
     this.refId = props.refId;
     this.label = props.label;
     this.trigger = props.trigger;
   }
 }
 
-@customElement('dx-ref-tag')
-export class DxRefTag extends LitElement {
+@customElement('dx-anchor')
+export class DxAnchor extends LitElement {
 
   // TODO(thure): There is a case (in)sensitivity issue here which is pernicious:
   //   Only refactoring the properties here to all-lowercase fixes the binding in `RefField.tsx`, but that
   //   should be unnecessary, and it isn’t an issue for `DxAvatar` or `DxGrid`. What’s going on?
 
   @property({ type: String })
-  refid: string = makeId('dx-ref-tag');
+  refid: string = makeId('dx-anchor');
 
   @property({ type: String })
   rootclassname: string | undefined = undefined;
@@ -53,7 +53,7 @@ export class DxRefTag extends LitElement {
 
   private handleActivate(event: { type: string }): void {
     this.dispatchEvent(
-      new DxRefTagActivate({ refId: this.refid, label: this.textContent ?? '', trigger: this }),
+      new DxAnchorActivate({ refId: this.refid, label: this.textContent ?? '', trigger: this }),
     );
   }
 

package/src/{dx-ref-tag → dx-anchor}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './dx-ref-tag';
+export * from './dx-anchor';

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

@@ -74,5 +74,11 @@ dx-avatar {
       @apply hidden;
     }
   }
+
+  &[data-state-loading-status="error"] {
+    .dx-avatar__image {
+      @apply hidden;
+    }
+  }
 }
 

package/src/dx-avatar/dx-avatar.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { html, svg, LitElement } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
+import { LitElement, html, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { makeId } from '@dxos/react-hooks';
@@ -116,7 +116,7 @@ export class DxAvatar extends LitElement {
     const bg = this.hue
       ? this.hueVariant === 'surface'
         ? `var(--dx-${this.hue}Surface)`
-        : `var(--dx-${this.hue}Fill)`
+        : `var(--dx-${this.hue === 'neutral' ? 'inputSurface' : `${this.hue}Fill`})`
       : 'var(--surface-bg)';
     const fg =
       this.hue && this.hueVariant === 'surface' ? `var(--dx-${this.hue}SurfaceText)` : 'var(--dx-accentSurfaceText)';
@@ -195,6 +195,7 @@ export class DxAvatar extends LitElement {
               width="100%"
               height="100%"
               preserveAspectRatio="xMidYMid slice"
+              class="dx-avatar__image"
               href=${this.imgSrc}
               mask=${`url(#${this.maskId})`}
               crossorigin=${this.imgCrossOrigin}

package/src/dx-icon/dx-icon.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { svg, LitElement } from 'lit';
+import { LitElement, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { type Size } from '../defs';

package/src/dx-tag-picker/dx-tag-picker-item.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { html, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { makeId } from '@dxos/react-hooks';

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './dx-anchor';
 export * from './dx-avatar';
 export * from './dx-tag-picker';
-export * from './dx-ref-tag';
 export * from './dx-icon';

package/src/react.ts

@@ -2,28 +2,28 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createComponent, type EventName } from '@lit/react';
+import { type EventName, createComponent } from '@lit/react';
 import React, { type ComponentPropsWithRef } from 'react';
 
 import {
+  type DxAnchorActivate,
+  type DxTagPickerItemClick,
+  DxAnchor as NaturalDxAnchor,
   DxAvatar as NaturalDxAvatar,
-  DxRefTag as NaturalDxRefTag,
-  DxIcon as NaturalIcon,
-  type DxRefTagActivate,
   DxTagPickerItem as NaturalDxTagPickerItem,
-  type DxTagPickerItemClick,
+  DxIcon as NaturalIcon,
 } from './index';
 
-export const DxRefTag = createComponent({
-  tagName: 'dx-ref-tag',
-  elementClass: NaturalDxRefTag,
+export const DxAnchor = createComponent({
+  tagName: 'dx-anchor',
+  elementClass: NaturalDxAnchor,
   react: React,
   events: {
-    onActivate: 'dx-ref-tag-activate' as EventName<DxRefTagActivate>,
+    onActivate: 'dx-anchor-activate' as EventName<DxAnchorActivate>,
   },
 });
 
-export type DxRefTagProps = ComponentPropsWithRef<typeof DxRefTag>;
+export type DxAnchorProps = ComponentPropsWithRef<typeof DxAnchor>;
 
 export const DxAvatar = createComponent({
   tagName: 'dx-avatar',

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

@@ -1 +0,0 @@
-{"version":3,"file":"dx-ref-tag.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAOA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBAAa,gBAAiB,SAAQ,KAAK;IACzC,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,OAAO,EAAE,QAAQ,CAAC;gBACtB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,QAAQ,CAAA;KAAE;CAMvE;AAED,qBACa,QAAS,SAAQ,UAAU;IAOtC,KAAK,EAAE,MAAM,CAAwB;IAGrC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,iBAAiB,IAAK,IAAI;IAgBnC,OAAO,CAAC,cAAc;IAMb,gBAAgB,IAAI,IAAI;CAGlC"}

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

@@ -1 +0,0 @@
-{"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,sJAAsJ;AACtJ,oBAAoB;AAEpB,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,gBAAiB,SAAQ,KAAK;IAIzC,YAAY,KAA0D;QACpE,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,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,+EAA+E;QAC/E,wGAAwG;QACxG,8FAA8F;;QAG9F,UAAK,GAAW,MAAM,CAAC,YAAY,CAAC,CAAC;QAGrC,kBAAa,GAAuB,SAAS,CAAC;IA2BhD,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QACpC,IAAG,IAAI,CAAC,aAAa,EAAC,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK,MAAM,EAAE,CAAC;YACtD,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAuB;;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,gBAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC1F,CAAC;IACJ,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA9BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACU;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAVnC,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAqCpB"}

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

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

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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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/src/dx-ref-tag/dx-ref-tag.pcss

@@ -1,8 +0,0 @@
-@layer dx-components {
-  dx-ref-tag {
-    @apply inline cursor-pointer pli-1 plb-0.5 border border-separator rounded-sm transition-colors;
-    &:hover {
-      @apply bg-hoverSurface;
-    }
-  }
-}