@dxos/lit-ui 0.8.4-main.3f58842 → 0.8.4-main.5ea62a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.4-main.3f58842",
+  "version": "0.8.4-main.5ea62a8",
   "description": "Web Components for DXOS using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "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"
@@ -39,11 +41,11 @@
   "dependencies": {
     "@lit/react": "^1.0.5",
     "lit": "^3.2.0",
-    "@dxos/react-hooks": "0.8.4-main.3f58842",
-    "@dxos/util": "0.8.4-main.3f58842"
+    "@dxos/react-hooks": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.4-main.3f58842"
+    "@dxos/test-utils": "0.8.4-main.5ea62a8"
   },
   "publishConfig": {
     "access": "public"

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/react.ts

@@ -2,16 +2,16 @@
 // 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 DxRefTagActivate,
+  type DxTagPickerItemClick,
   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({