@dxos/lit-ui 0.8.1-staging.31c3ee1

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

@@ -0,0 +1,78 @@
+.dx-avatar-group {
+  @apply inline-flex items-center;
+}
+
+.dx-avatar-group .dx-avatar {
+  @apply -mie-2
+}
+
+.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
+  }
+}
+
+dx-avatar {
+  display: contents;
+}
+
+.dx-avatar {
+  @apply relative inline-flex shrink-0;
+
+  .dx-avatar__frame {
+    @apply is-full bs-full bg-[--surface-bg]
+  }
+
+  .dx-avatar__frame, .dx-avatar__ring {
+    @apply rounded-full;
+  }
+
+  &[data-variant="square"] {
+    .dx-avatar__frame, .dx-avatar__ring {
+      @apply rounded-sm;
+    }
+  }
+
+  .dx-avatar__status-icon {
+    @apply absolute block-end-0 inline-end-0;
+  }
+
+  .dx-avatar__ring {
+    @apply absolute inset-0 border-2 border-[color:var(--surface-bg)];
+  }
+
+  &[data-status="current"] .dx-avatar__ring {
+    @apply border-[color:var(--dx-currentCursor)];
+  }
+
+  &[data-status="active"] .dx-avatar__ring {
+    @apply border-[color:var(--dx-activeCursor)];
+  }
+
+  &[data-status="error"] .dx-avatar__ring {
+    @apply border-[color:var(--dx-errorCursor)];
+  }
+
+  &[data-status="warning"] .dx-avatar__ring {
+    @apply border-[color:var(--dx-warningCursor)];
+  }
+
+  &[data-status="internal"] .dx-avatar__ring {
+    @apply border-[color:var(--dx-internalCursor)];
+  }
+
+  &[data-status="inactive"] .dx-avatar__ring {
+    @apply border-separator;
+  }
+
+  &[data-animation="pulse"] .dx-avatar__ring {
+    @apply animate-halo-pulse;
+  }
+
+  &[data-state-loading-status="loaded"] {
+    .dx-avatar__fallback-text, .dx-avatar__status-icon {
+      @apply hidden;
+    }
+  }
+}
+

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

@@ -0,0 +1,214 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { html, svg, LitElement } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { makeId } from '@dxos/react-hooks';
+
+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 AvatarAnimation = 'pulse' | 'none';
+
+const rx = '0.125rem';
+
+export type DxAvatarProps = Partial<
+  Pick<
+    DxAvatar,
+    | 'fallback'
+    | 'labelId'
+    | 'imgSrc'
+    | 'imgCrossOrigin'
+    | 'imgReferrerPolicy'
+    | 'variant'
+    | 'status'
+    | 'animation'
+    | 'hue'
+    | 'hueVariant'
+    | 'size'
+    | 'icon'
+    | 'rootClassName'
+  >
+>;
+
+@customElement('dx-avatar')
+export class DxAvatar extends LitElement {
+  private maskId: string;
+
+  constructor() {
+    super();
+    this.maskId = makeId('avatar__mask');
+  }
+
+  @property({ type: String })
+  fallback: string = 'never';
+
+  @property({ type: String })
+  labelId: string = 'never';
+
+  @property({ type: String })
+  imgSrc: string | undefined = undefined;
+
+  @property({ type: String })
+  imgCrossOrigin: NonNullable<HTMLImageElement['crossOrigin']> | undefined = undefined;
+
+  @property({ type: String })
+  imgReferrerPolicy: HTMLImageElement['referrerPolicy'] | undefined = undefined;
+
+  @property({ type: String })
+  variant: AvatarVariant = 'circle';
+
+  @property({ type: String })
+  status: AvatarStatus | undefined = undefined;
+
+  @property({ type: String })
+  animation: AvatarAnimation = 'none';
+
+  @property({ type: String })
+  hue: string | undefined = undefined;
+
+  @property({ type: String })
+  hueVariant: 'fill' | 'surface' = 'fill';
+
+  @property({ type: String })
+  size: Size = 10;
+
+  @property({ type: String })
+  icon: string | undefined = undefined;
+
+  @property({ type: String })
+  rootClassName: string | undefined = undefined;
+
+  @state()
+  loadingStaus: ImageLoadingStatus = 'idle';
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.loadingStaus = this.imgSrc ? 'loading' : 'idle';
+  }
+
+  override willUpdate(changedProperties: Map<string, any>) {
+    if (changedProperties.has('imgSrc')) {
+      this.loadingStaus = changedProperties.get('imgSrc') ? 'loading' : 'idle';
+    }
+  }
+
+  private handleLoad() {
+    this.loadingStaus = 'loaded';
+  }
+
+  private handleError() {
+    this.loadingStaus = 'error';
+  }
+
+  override render() {
+    const numericSize = this.size === 'px' ? 1 : Number(this.size);
+    const sizePx = numericSize * 4;
+    const ringWidth = this.status ? (numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1) : 0;
+    const ringGap = this.status ? (numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0) : 0;
+    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}Fill)`
+      : 'var(--surface-bg)';
+    const fg = this.hue && this.hueVariant === 'surface' ? `var(--dx-${this.hue}SurfaceText)` : 'var(--dx-inverse)';
+    return html`<span
+      role="img"
+      class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
+      aria-labelledby=${this.labelId}
+      data-size=${this.size}
+      data-variant=${this.variant}
+      data-status=${this.status}
+      data-animation=${this.animation}
+      data-state-loading-status=${this.loadingStaus}
+      >${svg`<svg
+        viewBox=${`0 0 ${sizePx} ${sizePx}`}
+        width=${sizePx}
+        height=${sizePx}
+        class="dx-avatar__frame"
+      >
+        <defs>
+          <mask id=${this.maskId}>
+            ${
+              this.variant === 'circle'
+                ? svg`<circle fill="white" cx="50%" cy="50%" r=${r} />`
+                : svg`<rect
+                  fill="white"
+                  width=${2 * r}
+                  height=${2 * r}
+                  x=${ringGap + ringWidth}
+                  y=${ringGap + ringWidth}
+                  rx=${rx}
+                />`
+            }
+          </mask>
+        </defs>
+        ${
+          this.variant === 'circle'
+            ? svg` <circle
+              cx="50%"
+              cy="50%"
+              r=${r}
+              fill=${bg}
+            />`
+            : svg` <rect
+              fill=${bg}
+              x=${ringGap + ringWidth}
+              y=${ringGap + ringWidth}
+              width=${2 * r}
+              height=${2 * r}
+              rx=${rx}
+            />`
+        }
+        ${
+          this.imgSrc &&
+          svg`<image
+          width="100%"
+          height="100%"
+          preserveAspectRatio="xMidYMid slice"
+          href=${this.imgSrc}
+          mask=${`url(#${this.maskId})`}
+          crossorigin=${this.imgCrossOrigin}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />`
+        }
+        ${
+          this.icon
+            ? svg`<use
+                class="dx-avatar__icon"
+                href=${this.icon}
+                x=${sizePx / 5}
+                y=${sizePx / 5}
+                width=${(3 * sizePx) / 5}
+                height=${(3 * sizePx) / 5} />`
+            : svg`<text
+                x="50%"
+                y="50%"
+                class="dx-avatar__fallback-text"
+                fill=${fg}
+                text-anchor="middle"
+                alignment-baseline="central"
+                font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
+                mask=${`url(#${this.maskId})`}
+              >
+                ${this.fallback}
+              </text>`
+        }
+      </svg>`}<span role="none" class="dx-avatar__ring" style=${styleMap({ borderWidth: ringWidth + 'px' })}
+    /></span>`;
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

package/src/dx-avatar/index.ts

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

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

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { svg, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { type Size } from '../defs';
+
+const ICONS_URL = '/icons.svg';
+
+@customElement('dx-icon')
+export class DxIcon extends LitElement {
+  // TODO(thure): Get Hue type used in theme.
+  @property({ type: String })
+  size: Size = 4;
+
+  @property({ type: String })
+  icon: string = 'ph--placeholder--regular';
+
+  @property({ type: Boolean })
+  noCache: boolean = true;
+
+  override render() {
+    const url = this.noCache ? `${ICONS_URL}?nocache=${new Date().getMinutes()}` : ICONS_URL;
+    const href = `${url}#${this.icon}`;
+    return svg`<svg class="dx-icon" data-size=${this.size}><use href=${href} /></svg>`;
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

package/src/dx-icon/index.ts

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

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

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { makeId } from '@dxos/react-hooks';
+
+export class DxTagPickerItemClick extends Event {
+  public readonly itemId: string;
+  public readonly action: 'remove' | 'activate';
+  constructor(props: { itemId: string; action: 'remove' | 'activate' }) {
+    super('dx-tag-picker-item-click');
+    this.itemId = props.itemId;
+    this.action = props.action;
+  }
+}
+
+@customElement('dx-tag-picker-item')
+export class DxTagPickerItem extends LitElement {
+  // TODO(thure): Get Hue type used in theme.
+  @property({ type: String })
+  hue: string = 'neutral';
+
+  @property({ type: String })
+  itemId: string = makeId('dx-tag-picker-item');
+
+  @property({ type: String })
+  label: string = 'never';
+
+  @property({ type: String })
+  rootClassName: string | undefined = undefined;
+
+  @property({ type: String })
+  removeLabel: string | undefined = undefined;
+
+  private handleClickActivate() {
+    this.dispatchEvent(new DxTagPickerItemClick({ itemId: this.itemId, action: 'activate' }));
+  }
+
+  private handleClickRemove() {
+    this.dispatchEvent(new DxTagPickerItemClick({ itemId: this.itemId, action: 'remove' }));
+  }
+
+  override render() {
+    const className = `dx-tag dx-tag-picker-item${this.rootClassName ? ` ${this.rootClassName}` : ''}`;
+    return html`<span class=${className} data-remove=${!!this.removeLabel} data-hue=${this.hue} id=${this.id}
+      ><button class="dx-focus-ring" @click=${this.handleClickActivate}>${this.label}</button>${this.removeLabel &&
+      html`<button class="dx-focus-ring" aria-label=${this.removeLabel} @click=${this.handleClickRemove}>
+        <dx-icon icon="ph--x--regular" />
+      </button>`}</span
+    >`;
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

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

@@ -0,0 +1,23 @@
+@layer dx-components {
+  dx-tag-picker-item {
+    display: contents;
+  }
+
+  .dx-tag-picker-item.dx-tag {
+    @apply p-0 inline-flex;
+
+    button {
+      @apply pli-2;
+      padding-block: var(--dx-tag-padding-block);
+    }
+
+    &[data-remove='true'] {
+      button:first-child {
+        @apply pie-0.5;
+      }
+      button:last-child {
+        @apply pis-0.5;
+      }
+    }
+  }
+}

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

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

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './dx-avatar';
+export * from './dx-tag-picker';
+export * from './dx-icon';
+
+export { createComponent, type EventName } from '@lit/react';