@dxos/lit-ui 0.8.4-main.a4bbb77 → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,38 +1,34 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.abd8ff62ef",
   "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"
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "react": [
-        "./dist/src/react.d.ts"
-      ]
-    }
-  },
   "files": [
     "src",
     "dist"
@@ -40,12 +36,12 @@
   "dependencies": {
     "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
-    "@dxos/react-hooks": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-types": "0.8.4-main.a4bbb77",
-    "@dxos/util": "0.8.4-main.a4bbb77"
+    "@dxos/react-hooks": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.4-main.a4bbb77"
+    "@dxos/test-utils": "0.8.4-main.abd8ff62ef"
   },
   "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,26 +8,25 @@
 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 {
-
   // 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 = '';
+  dxn: string = '';
 
   @property({ type: String })
   rootclassname: string | undefined = undefined;
 
-  override connectedCallback (): void {
+  override connectedCallback(): void {
     super.connectedCallback();
     this.tabIndex = 0;
-    this.classList.add(this.getAttribute('data-visible-focus')==='false' ? 'outline-none' : 'dx-focus-ring');
-    if(this.rootclassname){
+    this.classList.add(this.getAttribute('data-visible-focus') === 'false' ? 'outline-hidden' : 'dx-focus-ring');
+    if (this.rootclassname) {
       this.classList.add(this.rootclassname);
     }
     this.setAttribute('role', 'button');
@@ -40,9 +39,7 @@ export class DxAnchor extends LitElement {
   }
 
   private handleActivate(event: { type: string }): void {
-    this.dispatchEvent(
-      new DxAnchorActivate({ refId: this.refid, label: this.textContent ?? '', trigger: this }),
-    );
+    this.dispatchEvent(new DxAnchorActivate({ dxn: this.dxn, label: this.textContent ?? '', trigger: this }));
   }
 
   override createRenderRoot(): this {

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

@@ -11,9 +11,11 @@ import { type DxAvatarProps } from './dx-avatar';
 
 export default {
   title: 'dx-avatar',
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'centered',
+  },
 };
 
 export const Basic = (_props: DxAvatarProps) => {
-  return html`<dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar>`;
+  return html` <dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar> `;
 };

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

@@ -1,14 +1,23 @@
+/* Tailwind v4: Fixed @apply directives - converted to direct CSS */
 .dx-avatar-group {
-  @apply inline-flex items-center pie-2;
+  display: inline-flex;
+  align-items: center;
+  padding-right: 0.5rem;
 }
 
 .dx-avatar-group .dx-avatar {
-  @apply -mie-2
+  margin-right: -0.5rem;
 }
 
 .dx-avatar-group .dx-avatar {
-  &[size="0"], &[size="px"], &[size="0.5"], &[size="1"], &[size="1.5"], &[size="2"], &[size="2.5"] {
-    @apply -mie-1
+  &[size='0'],
+  &[size='px'],
+  &[size='0.5'],
+  &[size='1'],
+  &[size='1.5'],
+  &[size='2'],
+  &[size='2.5'] {
+    margin-right: -0.25rem;
   }
 }
 
@@ -17,68 +26,79 @@ dx-avatar {
 }
 
 .dx-avatar {
-  @apply relative inline-flex shrink-0;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  /* Tailwind v4 migration: converted @apply to direct CSS properties */
 
   .dx-avatar__frame {
-    @apply is-full bs-full bg-[--surface-bg];
+    width: 100%;
+    height: 100%;
   }
 
-  .dx-avatar__frame, .dx-avatar__ring {
-    @apply rounded-full;
+  .dx-avatar__frame,
+  .dx-avatar__ring {
+    border-radius: 9999px;
   }
 
-  &[data-variant="square"] {
-    .dx-avatar__frame, .dx-avatar__ring {
-      @apply rounded-sm;
+  &[data-variant='square'] {
+    .dx-avatar__frame,
+    .dx-avatar__ring {
+      border-radius: 0.125rem;
     }
   }
 
   .dx-avatar__status-icon {
-    @apply absolute block-end-0 inline-end-0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
   }
 
   .dx-avatar__ring {
-    @apply absolute inset-0 border-2 border-[color:var(--surface-bg)];
+    position: absolute;
+    inset: 0;
+    border-width: 2px;
+    border-color: var(--surface-bg);
   }
 
-  &[data-status="current"] .dx-avatar__ring {
-    @apply border-[color:var(--dx-currentCursor)];
+  &[data-status='active'] .dx-avatar__ring {
+    border-color: var(--color-success-border);
   }
 
-  &[data-status="active"] .dx-avatar__ring {
-    @apply border-[color:var(--dx-successCursor)];
+  &[data-status='inactive'] .dx-avatar__ring {
+    border-color: var(--color-neutral-border);
   }
 
-  &[data-status="error"] .dx-avatar__ring {
-    @apply border-[color:var(--dx-errorCursor)];
+  &[data-status='current'] .dx-avatar__ring {
+    border-color: var(--color-accent-focus-indicator);
   }
 
-  &[data-status="warning"] .dx-avatar__ring {
-    @apply border-[color:var(--dx-warningCursor)];
+  &[data-status='internal'] .dx-avatar__ring {
+    border-color: var(--color-separator);
   }
 
-  &[data-status="internal"] .dx-avatar__ring {
-    @apply border-[color:var(--dx-internalCursor)];
+  &[data-status='error'] .dx-avatar__ring {
+    border-color: var(--color-error-border);
   }
 
-  &[data-status="inactive"] .dx-avatar__ring {
-    @apply border-separator;
+  &[data-status='warning'] .dx-avatar__ring {
+    border-color: var(--color-warning-border);
   }
 
-  &[data-animation="pulse"] .dx-avatar__ring {
-    @apply animate-halo-pulse;
+  &[data-animation='pulse'] .dx-avatar__ring {
+    animation: halo-pulse var(--duration, 1s) ease-in-out infinite;
   }
 
-  &[data-state-loading-status="loaded"] {
-    .dx-avatar__fallback-text, .dx-avatar__status-icon {
-      @apply hidden;
+  &[data-state-loading-status='loaded'] {
+    .dx-avatar__fallback-text,
+    .dx-avatar__status-icon {
+      display: none;
     }
   }
 
-  &[data-state-loading-status="error"] {
+  &[data-state-loading-status='error'] {
     .dx-avatar__image {
-      @apply hidden;
+      display: none;
     }
   }
 }
-

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

@@ -13,7 +13,7 @@ import { type Size } from '../defs';
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 
 export type AvatarVariant = 'square' | 'circle';
-export type AvatarStatus = 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
+export type AvatarStatus = 'active' | 'inactive' | 'current' | 'internal' | 'error' | 'warning';
 export type AvatarAnimation = 'pulse' | 'none';
 
 const rx = '0.125rem';
@@ -36,6 +36,7 @@ export type DxAvatarProps = Partial<
   >
 >;
 
+// TODO(burdon): Needs popover.
 @customElement('dx-avatar')
 export class DxAvatar extends LitElement {
   private maskId: string;
@@ -70,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;
@@ -112,13 +113,18 @@ 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(--color-${this.hue}-surface)`
+            : `var(--color-${this.hue === 'neutral' ? 'input-surface' : `${this.hue}-fill`})`
+          : 'var(--surface-bg)';
     const fg =
-      this.hue && this.hueVariant === 'surface' ? `var(--dx-${this.hue}SurfaceText)` : 'var(--dx-accentSurfaceText)';
+      this.hue && this.hueVariant === 'surface'
+        ? `var(--color-${this.hue}-surface-text)`
+        : 'var(--color-accent-surface-text)';
 
     return html`<span
       role="none"
@@ -180,7 +186,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%"
@@ -188,10 +195,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})`}
               >
-                ${getInitials(this.fallback)}
+                ${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
               </text>`
         }
         ${
@@ -226,7 +234,7 @@ const getInitials = (label = ''): string[] => {
   return label
     .trim()
     .split(/\s+/)
-    .map((str) => str.replace(/[^\p{L}\p{N}\p{Emoji}\s]/gu, ''))
+    .map((str) => str.replace(/[^\p{L}\p{N}\s]/gu, ''))
     .filter(Boolean)
     .slice(0, 2)
     .map((word) => word[0].toUpperCase());

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

@@ -1,3 +1,5 @@
+@reference "../../../ui-theme/src/main.css";
+
 @layer dx-components {
   dx-tag-picker-item {
     display: inline-block;
@@ -8,16 +10,16 @@
     @apply p-0 m-0 flex;
 
     button {
-      @apply pli-1;
-      padding-block: var(--dx-tag-padding-block);
+      @apply px-1;
+      padding-block: var(--spacing-tag-padding-block);
     }
 
     &[data-remove='true'] {
       button:first-child {
-        @apply pie-0.5;
+        @apply pr-0.5;
       }
       button:last-child {
-        @apply pis-0.5;
+        @apply pl-0.5;
       }
     }
   }

package/src/index.ts

@@ -4,5 +4,5 @@
 
 export * from './dx-anchor';
 export * from './dx-avatar';
-export * from './dx-tag-picker';
 export * from './dx-icon';
+export * from './dx-tag-picker';

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>,
   },
 });
 
@@ -54,4 +54,5 @@ export const DxTagPickerItem = createComponent({
 export type DxTagPickerItemProps = ComponentPropsWithRef<typeof DxTagPickerItem>;
 
 export { createComponent };
+
 export type { EventName };