@dxos/lit-ui 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/package.json

@@ -1,25 +1,28 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.4-main.ae835ea",
+  "version": "0.8.4-main.bc674ce",
   "description": "Web Components for DXOS using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": [
+    "*.css",
+    "*.pcss"
+  ],
   "type": "module",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "types": "./dist/src/index.d.ts",
-      "browser": "./dist/src/index.js",
-      "node": "./dist/src/index.js"
+      "default": "./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"
+      "default": "./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"
@@ -40,12 +43,12 @@
   "dependencies": {
     "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
-    "@dxos/react-hooks": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-types": "0.8.4-main.ae835ea",
-    "@dxos/util": "0.8.4-main.ae835ea"
+    "@dxos/react-hooks": "0.8.4-main.bc674ce",
+    "@dxos/ui-types": "0.8.4-main.bc674ce",
+    "@dxos/util": "0.8.4-main.bc674ce"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.4-main.ae835ea"
+    "@dxos/test-utils": "0.8.4-main.bc674ce"
   },
   "publishConfig": {
     "access": "public"

package/src/defs.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-// TODO(thure): I was unable to bring this in from `react-ui-types` because toolbox.ts would not acknowledge
+// TODO(thure): I was unable to bring this in from `ui-types` because toolbox.ts would not acknowledge
 //  `"@dxos/lit-ui": [ "packages/ui/lit-ui/src/index.ts" ]` in tsconfig.paths.json. How is this meant to work? How is it
 //  okay with `react-hooks`?
 export type Size =

package/src/dx-anchor/dx-anchor.ts

@@ -8,7 +8,7 @@
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { DxAnchorActivate } from '@dxos/react-ui-types';
+import { DxAnchorActivate } from '@dxos/ui-types';
 
 @customElement('dx-anchor')
 export class DxAnchor extends LitElement {

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

@@ -11,7 +11,9 @@ import { type DxAvatarProps } from './dx-avatar';
 
 export default {
   title: 'dx-avatar',
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'centered',
+  },
 };
 
 export const Basic = (_props: DxAvatarProps) => {

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

@@ -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;
   }
 
   .dx-avatar__frame, .dx-avatar__ring {

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

@@ -71,7 +71,7 @@ export class DxAvatar extends LitElement {
   hue: string | undefined = undefined;
 
   @property({ type: String })
-  hueVariant: 'fill' | 'surface' = 'fill';
+  hueVariant: 'fill' | 'surface' | 'transparent' = 'fill';
 
   @property({ type: String })
   size: Size = 10;
@@ -113,11 +113,14 @@ export class DxAvatar extends LitElement {
     const r = sizePx / 2 - ringGap - ringWidth;
     const isTextOnly = Boolean(this.fallback && /[0-9a-zA-Z]+/.test(this.fallback));
     const fontScale = (isTextOnly ? 3 : 3.6) * (1 / 1.612);
-    const bg = this.hue
-      ? this.hueVariant === 'surface'
-        ? `var(--dx-${this.hue}Surface)`
-        : `var(--dx-${this.hue === 'neutral' ? 'inputSurface' : `${this.hue}Fill`})`
-      : 'var(--surface-bg)';
+    const bg =
+      this.hueVariant === 'transparent'
+        ? 'transparent'
+        : this.hue
+          ? this.hueVariant === 'surface'
+            ? `var(--dx-${this.hue}Surface)`
+            : `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)';
 
@@ -181,7 +184,8 @@ export class DxAvatar extends LitElement {
                 y=${sizePx / 5}
                 width=${(3 * sizePx) / 5}
                 height=${(3 * sizePx) / 5} />`
-            : svg`
+            : // NOTE: Firefox currently doesn't fully support alignment-baseline.
+              svg`
               <text
                 x="50%"
                 y="50%"
@@ -189,10 +193,11 @@ export class DxAvatar extends LitElement {
                 fill=${fg}
                 text-anchor="middle"
                 alignment-baseline="central"
+                dominant-baseline="middle"
                 font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
                 mask=${`url(#${this.maskId})`}
               >
-                ${/\p{Emoji}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
+                ${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
               </text>`
         }
         ${

package/src/react.ts

@@ -5,7 +5,7 @@
 import { type EventName, createComponent } from '@lit/react';
 import React, { type ComponentPropsWithRef } from 'react';
 
-import { type DxAnchorActivate } from '@dxos/react-ui-types';
+import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/ui-types';
 
 import {
   type DxTagPickerItemClick,
@@ -20,7 +20,7 @@ export const DxAnchor = createComponent({
   elementClass: NaturalDxAnchor,
   react: React,
   events: {
-    onActivate: 'dx-anchor-activate' as EventName<DxAnchorActivate>,
+    onActivate: DX_ANCHOR_ACTIVATE as EventName<DxAnchorActivate>,
   },
 });