@dxos/lit-ui 0.8.3 → 0.8.4-main.1068cf700f

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

@@ -2,19 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import './dx-avatar.ts';
+import '@dxos-theme';
 import './dx-avatar.pcss';
+
 import { html } from 'lit';
 
 import { type DxAvatarProps } from './dx-avatar';
 
 export default {
   title: 'dx-avatar',
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const Basic = (props: DxAvatarProps) => {
-  return html`<div class="dark" style="position:fixed;inset:0;">
-    <dx-avatar></dx-avatar>
-  </div>`;
+export const Basic = (_props: DxAvatarProps) => {
+  return html`<dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar>`;
 };

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 {
@@ -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';
@@ -36,6 +36,7 @@ export type DxAvatarProps = Partial<
   >
 >;
 
+// TODO(burdon): Needs popover.
 @customElement('dx-avatar')
 export class DxAvatar extends LitElement {
   private maskId: string;
@@ -46,7 +47,7 @@ export class DxAvatar extends LitElement {
   }
 
   @property({ type: String })
-  fallback: string = 'never';
+  fallback: string = '🫥';
 
   @property({ type: String })
   imgSrc: string | undefined = undefined;
@@ -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,17 @@ 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}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)';
+
     return html`<span
       role="none"
       class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
@@ -138,62 +143,71 @@ export class DxAvatar extends LitElement {
             ${
               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}
-                />`
+                : 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}
-            />`
+            ? 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.icon
-            ? svg`<use
+            ? 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
+            : // NOTE: Firefox currently doesn't fully support alignment-baseline.
+              svg`
+              <text
                 x="50%"
                 y="50%"
                 class="dx-avatar__fallback-text"
                 fill=${fg}
                 text-anchor="middle"
                 alignment-baseline="central"
+                dominant-baseline="middle"
                 font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
                 mask=${`url(#${this.maskId})`}
               >
-                ${this.fallback}
+                ${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
               </text>`
         }
         ${
           this.imgSrc &&
-          svg`<image
+          svg`
+            <image
               width="100%"
               height="100%"
               preserveAspectRatio="xMidYMid slice"
+              class="dx-avatar__image"
               href=${this.imgSrc}
               mask=${`url(#${this.maskId})`}
               crossorigin=${this.imgCrossOrigin}
@@ -209,3 +223,17 @@ export class DxAvatar extends LitElement {
     return this;
   }
 }
+
+/**
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
+ * Handles Unicode characters correctly.
+ */
+const getInitials = (label = ''): string[] => {
+  return label
+    .trim()
+    .split(/\s+/)
+    .map((str) => str.replace(/[^\p{L}\p{N}\s]/gu, ''))
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0].toUpperCase());
+};

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/dx-tag-picker/dx-tag-picker.pcss

@@ -1,10 +1,11 @@
 @layer dx-components {
   dx-tag-picker-item {
-    display: contents;
+    display: inline-block;
+    @apply p-0.5;
   }
 
   .dx-tag-picker-item.dx-tag {
-    @apply p-0 inline-flex;
+    @apply p-0 m-0 flex;
 
     button {
       @apply pli-1;

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';
+export * from './dx-tag-picker';

package/src/react.ts

@@ -2,28 +2,29 @@
 // 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 { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/ui-types';
+
 import {
+  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',
@@ -53,4 +54,5 @@ export const DxTagPickerItem = createComponent({
 export type DxTagPickerItemProps = ComponentPropsWithRef<typeof DxTagPickerItem>;
 
 export { createComponent };
+
 export type { EventName };

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

@@ -1,19 +0,0 @@
-import { LitElement } from 'lit';
-export declare class DxRefTagActivate extends Event {
-    readonly refId: string;
-    readonly label: string;
-    readonly trigger: DxRefTag;
-    constructor(props: {
-        refId: string;
-        label: string;
-        trigger: DxRefTag;
-    });
-}
-export declare class DxRefTag extends LitElement {
-    refid: string;
-    rootclassname: string | undefined;
-    connectedCallback(): void;
-    private handleActivate;
-    createRenderRoot(): this;
-}
-//# sourceMappingURL=dx-ref-tag.d.ts.map

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/dist/types/src/defs.d.ts

@@ -1,2 +0,0 @@
-export type Size = 0 | 'px' | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,IAAI,GACZ,CAAC,GACD,IAAI,GACJ,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC"}

package/dist/types/src/defs.js

@@ -1,4 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-//# sourceMappingURL=defs.js.map

package/dist/types/src/defs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.js","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE"}

package/dist/types/src/dx-avatar/dx-avatar.d.ts

@@ -1,31 +0,0 @@
-import { LitElement } from 'lit';
-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';
-export type DxAvatarProps = Partial<Pick<DxAvatar, 'fallback' | 'imgSrc' | 'imgCrossOrigin' | 'imgReferrerPolicy' | 'variant' | 'status' | 'animation' | 'hue' | 'hueVariant' | 'size' | 'icon' | 'rootClassName'>>;
-export declare class DxAvatar extends LitElement {
-    private maskId;
-    constructor();
-    fallback: string;
-    imgSrc: string | undefined;
-    imgCrossOrigin: NonNullable<HTMLImageElement['crossOrigin']> | undefined;
-    imgReferrerPolicy: HTMLImageElement['referrerPolicy'] | undefined;
-    variant: AvatarVariant;
-    status: AvatarStatus | undefined;
-    animation: AvatarAnimation;
-    hue: string | undefined;
-    hueVariant: 'fill' | 'surface';
-    size: Size;
-    icon: string | undefined;
-    rootClassName: string | undefined;
-    loadingStaus: ImageLoadingStatus;
-    connectedCallback(): void;
-    willUpdate(changedProperties: Map<string, any>): void;
-    private handleLoad;
-    private handleError;
-    render(): import("lit").TemplateResult<1>;
-    createRenderRoot(): this;
-}
-//# sourceMappingURL=dx-avatar.d.ts.map

package/dist/types/src/dx-avatar/dx-avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dx-avatar.d.ts","sourceRoot":"","sources":["../../../../src/dx-avatar/dx-avatar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAChG,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAI/C,MAAM,MAAM,aAAa,GAAG,OAAO,CACjC,IAAI,CACF,QAAQ,EACN,UAAU,GACV,QAAQ,GACR,gBAAgB,GAChB,mBAAmB,GACnB,SAAS,GACT,QAAQ,GACR,WAAW,GACX,KAAK,GACL,YAAY,GACZ,MAAM,GACN,MAAM,GACN,eAAe,CAClB,CACF,CAAC;AAEF,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAO,CAAC,MAAM,CAAS;;IAQvB,QAAQ,EAAE,MAAM,CAAW;IAG3B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,GAAG,SAAS,CAAa;IAGrF,iBAAiB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAa;IAG9E,OAAO,EAAE,aAAa,CAAY;IAGlC,MAAM,EAAE,YAAY,GAAG,SAAS,CAAa;IAG7C,SAAS,EAAE,eAAe,CAAU;IAGpC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAU;IAGxC,IAAI,EAAE,IAAI,CAAM;IAGhB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,YAAY,EAAE,kBAAkB,CAAU;IAEjC,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAM9D,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAIV,MAAM;IAqGN,gBAAgB,IAAI,IAAI;CAGlC"}

package/dist/types/src/dx-avatar/dx-avatar.js

@@ -1,187 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-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';
-const rx = '0.125rem';
-let DxAvatar = class DxAvatar extends LitElement {
-    constructor() {
-        super();
-        this.fallback = 'never';
-        this.imgSrc = undefined;
-        this.imgCrossOrigin = undefined;
-        this.imgReferrerPolicy = undefined;
-        this.variant = 'circle';
-        this.status = undefined;
-        this.animation = 'none';
-        this.hue = undefined;
-        this.hueVariant = 'fill';
-        this.size = 10;
-        this.icon = undefined;
-        this.rootClassName = undefined;
-        this.loadingStaus = 'idle';
-        this.maskId = makeId('avatar__mask');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.role = 'img';
-        this.loadingStaus = this.imgSrc ? 'loading' : 'idle';
-    }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('imgSrc')) {
-            this.loadingStaus = changedProperties.get('imgSrc') ? 'loading' : 'idle';
-        }
-    }
-    handleLoad() {
-        this.loadingStaus = 'loaded';
-    }
-    handleError() {
-        this.loadingStaus = 'error';
-    }
-    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-accentSurfaceText)';
-        return html `<span
-      role="none"
-      class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
-      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.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>`}
-        ${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}
-            />`}
-      </svg>`}<span role="none" class="dx-avatar__ring" style=${styleMap({ borderWidth: ringWidth + 'px' })}
-    /></span>`;
-    }
-    createRenderRoot() {
-        return this;
-    }
-};
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "fallback", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "imgSrc", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "imgCrossOrigin", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "imgReferrerPolicy", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "variant", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "status", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "animation", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "hue", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "hueVariant", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "icon", void 0);
-__decorate([
-    property({ type: String })
-], DxAvatar.prototype, "rootClassName", void 0);
-__decorate([
-    state()
-], DxAvatar.prototype, "loadingStaus", void 0);
-DxAvatar = __decorate([
-    customElement('dx-avatar')
-], DxAvatar);
-export { DxAvatar };
-//# sourceMappingURL=dx-avatar.js.map

package/dist/types/src/dx-avatar/dx-avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dx-avatar.js","sourceRoot":"","sources":["../../../../src/dx-avatar/dx-avatar.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAU3C,MAAM,EAAE,GAAG,UAAU,CAAC;AAqBf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAGtC;QACE,KAAK,EAAE,CAAC;QAKV,aAAQ,GAAW,OAAO,CAAC;QAG3B,WAAM,GAAuB,SAAS,CAAC;QAGvC,mBAAc,GAA6D,SAAS,CAAC;QAGrF,sBAAiB,GAAmD,SAAS,CAAC;QAG9E,YAAO,GAAkB,QAAQ,CAAC;QAGlC,WAAM,GAA6B,SAAS,CAAC;QAG7C,cAAS,GAAoB,MAAM,CAAC;QAGpC,QAAG,GAAuB,SAAS,CAAC;QAGpC,eAAU,GAAuB,MAAM,CAAC;QAGxC,SAAI,GAAS,EAAE,CAAC;QAGhB,SAAI,GAAuB,SAAS,CAAC;QAGrC,kBAAa,GAAuB,SAAS,CAAC;QAG9C,iBAAY,GAAuB,MAAM,CAAC;QAxCxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC;IAyCQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACvD,CAAC;IAEQ,UAAU,CAAC,iBAAmC;QACrD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3E,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;IAC/B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;IAC9B,CAAC;IAEQ,MAAM;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/D,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpF,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzG,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;QAC3C,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChF,MAAM,SAAS,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;QACvD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG;YACjB,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,SAAS;gBAC7B,CAAC,CAAC,YAAY,IAAI,CAAC,GAAG,UAAU;gBAChC,CAAC,CAAC,YAAY,IAAI,CAAC,GAAG,OAAO;YAC/B,CAAC,CAAC,mBAAmB,CAAC;QACxB,MAAM,EAAE,GACN,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,6BAA6B,CAAC;QACjH,OAAO,IAAI,CAAA;;cAED,YAAY,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;kBAC5D,IAAI,CAAC,IAAI;qBACN,IAAI,CAAC,OAAO;oBACb,IAAI,CAAC,MAAM;uBACR,IAAI,CAAC,SAAS;kCACH,IAAI,CAAC,YAAY;SAC1C,GAAG,CAAA;kBACM,OAAO,MAAM,IAAI,MAAM,EAAE;gBAC3B,MAAM;iBACL,MAAM;;;;qBAIF,IAAI,CAAC,MAAM;cAElB,IAAI,CAAC,OAAO,KAAK,QAAQ;YACvB,CAAC,CAAC,GAAG,CAAA,4CAA4C,CAAC,KAAK;YACvD,CAAC,CAAC,GAAG,CAAA;;0BAEK,CAAC,GAAG,CAAC;2BACJ,CAAC,GAAG,CAAC;sBACV,OAAO,GAAG,SAAS;sBACnB,OAAO,GAAG,SAAS;uBAClB,EAAE;mBAEb;;;UAIF,IAAI,CAAC,OAAO,KAAK,QAAQ;YACvB,CAAC,CAAC,GAAG,CAAA;;;kBAGC,CAAC;qBACE,EAAE;eACR;YACH,CAAC,CAAC,GAAG,CAAA;qBACI,EAAE;kBACL,OAAO,GAAG,SAAS;kBACnB,OAAO,GAAG,SAAS;sBACf,CAAC,GAAG,CAAC;uBACJ,CAAC,GAAG,CAAC;mBACT,EAAE;eAEb;UAEE,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,GAAG,CAAA;;uBAEM,IAAI,CAAC,IAAI;oBACZ,MAAM,GAAG,CAAC;oBACV,MAAM,GAAG,CAAC;wBACN,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC;yBACf,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK;YAClC,CAAC,CAAC,GAAG,CAAA;;;;uBAIM,EAAE;;;4BAGG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS;uBACxD,QAAQ,IAAI,CAAC,MAAM,GAAG;;kBAE3B,IAAI,CAAC,QAAQ;sBAEvB;UAEE,IAAI,CAAC,MAAM;YACX,GAAG,CAAA;;;;qBAIQ,IAAI,CAAC,MAAM;qBACX,QAAQ,IAAI,CAAC,MAAM,GAAG;4BACf,IAAI,CAAC,cAAc;sBACzB,IAAI,CAAC,UAAU;uBACd,IAAI,CAAC,WAAW;eAE/B;aACK,mDAAmD,QAAQ,CAAC,EAAE,WAAW,EAAE,SAAS,GAAG,IAAI,EAAE,CAAC;cAC7F,CAAC;IACb,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAlKC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAC0D;AAGrF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACmD;AAG9E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACO;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACkB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACa;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACU;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAG9C;IADC,KAAK,EAAE;8CACkC;AA7C/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2KpB"}

package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts

@@ -1,12 +0,0 @@
-import './dx-avatar.ts';
-import './dx-avatar.pcss';
-import { type DxAvatarProps } from './dx-avatar';
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Basic: (props: DxAvatarProps) => import("lit").TemplateResult<1>;
-//# sourceMappingURL=dx-avatar.lit-stories.d.ts.map

package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dx-avatar.lit-stories.d.ts","sourceRoot":"","sources":["../../../../src/dx-avatar/dx-avatar.lit-stories.ts"],"names":[],"mappings":"AAIA,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;;;;;;;AAEjD,wBAGE;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,aAAa,oCAIzC,CAAC"}

package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js

@@ -1,16 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-import './dx-avatar.ts';
-import './dx-avatar.pcss';
-import { html } from 'lit';
-export default {
-    title: 'dx-avatar',
-    parameters: { layout: 'fullscreen' },
-};
-export const Basic = (props) => {
-    return html `<div class="dark" style="position:fixed;inset:0;">
-    <dx-avatar></dx-avatar>
-  </div>`;
-};
-//# sourceMappingURL=dx-avatar.lit-stories.js.map

package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dx-avatar.lit-stories.js","sourceRoot":"","sources":["../../../../src/dx-avatar/dx-avatar.lit-stories.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC5C,OAAO,IAAI,CAAA;;SAEJ,CAAC;AACV,CAAC,CAAC"}