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

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

@@ -0,0 +1,191 @@
+//
+// 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.labelId = '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.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-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>`;
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String })
+], DxAvatar.prototype, "fallback", void 0);
+__decorate([
+    property({ type: String })
+], DxAvatar.prototype, "labelId", 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

@@ -0,0 +1 @@
+{"version":3,"file":"dx-avatar.js","sourceRoot":"","sources":["../../../../src/dx-avatar/dx-avatar.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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,UAAW,aAAa,oCAIzC,CAAC"}

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

@@ -0,0 +1,16 @@
+//
+// 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

@@ -0,0 +1 @@
+{"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"}

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

@@ -0,0 +1,2 @@
+export * from './dx-avatar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dx-avatar/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-avatar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dx-avatar/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import { type Size } from '../defs';
+export declare class DxIcon extends LitElement {
+    size: Size;
+    icon: string;
+    noCache: boolean;
+    render(): import("lit").TemplateResult<2>;
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=dx-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dx-icon.d.ts","sourceRoot":"","sources":["../../../../src/dx-icon/dx-icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAIpC,qBACa,MAAO,SAAQ,UAAU;IAGpC,IAAI,EAAE,IAAI,CAAK;IAGf,IAAI,EAAE,MAAM,CAA8B;IAG1C,OAAO,EAAE,OAAO,CAAQ;IAEf,MAAM;IAMN,gBAAgB;CAG1B"}

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

@@ -0,0 +1,43 @@
+//
+// 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 { svg, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const ICONS_URL = '/icons.svg';
+let DxIcon = class DxIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        // TODO(thure): Get Hue type used in theme.
+        this.size = 4;
+        this.icon = 'ph--placeholder--regular';
+        this.noCache = true;
+    }
+    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>`;
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String })
+], DxIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], DxIcon.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], DxIcon.prototype, "noCache", void 0);
+DxIcon = __decorate([
+    customElement('dx-icon')
+], DxIcon);
+export { DxIcon };
+//# sourceMappingURL=dx-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dx-icon.js","sourceRoot":"","sources":["../../../../src/dx-icon/dx-icon.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,MAAM,SAAS,GAAG,YAAY,CAAC;AAGxB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QACL,2CAA2C;QAE3C,SAAI,GAAS,CAAC,CAAC;QAGf,SAAI,GAAW,0BAA0B,CAAC;QAG1C,YAAO,GAAY,IAAI,CAAC;IAW1B,CAAC;IATU,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,YAAY,IAAI,IAAI,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACzF,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACnC,OAAO,GAAG,CAAA,kCAAkC,IAAI,CAAC,IAAI,cAAc,IAAI,WAAW,CAAC;IACrF,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAjBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACe;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACJ;AATb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoBlB"}

package/dist/types/src/dx-icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dx-icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/dx-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dx-icon/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/dx-icon/index.js

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-icon';
+//# sourceMappingURL=index.js.map

package/dist/types/src/dx-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dx-icon/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,WAAW,CAAC"}

package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export declare class DxTagPickerItemClick extends Event {
+    readonly itemId: string;
+    readonly action: 'remove' | 'activate';
+    constructor(props: {
+        itemId: string;
+        action: 'remove' | 'activate';
+    });
+}
+export declare class DxTagPickerItem extends LitElement {
+    hue: string;
+    itemId: string;
+    label: string;
+    rootClassName: string | undefined;
+    removeLabel: string | undefined;
+    private handleClickActivate;
+    private handleClickRemove;
+    render(): import("lit").TemplateResult<1>;
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=dx-tag-picker-item.d.ts.map

package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-tag-picker-item.d.ts","sourceRoot":"","sources":["../../../../src/dx-tag-picker/dx-tag-picker-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBAAa,oBAAqB,SAAQ,KAAK;IAC7C,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;gBAClC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;KAAE;CAKrE;AAED,qBACa,eAAgB,SAAQ,UAAU;IAG7C,GAAG,EAAE,MAAM,CAAa;IAGxB,MAAM,EAAE,MAAM,CAAgC;IAG9C,KAAK,EAAE,MAAM,CAAW;IAGxB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAa;IAE5C,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIhB,MAAM;IAUN,gBAAgB;CAG1B"}

package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js

@@ -0,0 +1,68 @@
+//
+// 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, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { makeId } from '@dxos/react-hooks';
+export class DxTagPickerItemClick extends Event {
+    constructor(props) {
+        super('dx-tag-picker-item-click');
+        this.itemId = props.itemId;
+        this.action = props.action;
+    }
+}
+let DxTagPickerItem = class DxTagPickerItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        // TODO(thure): Get Hue type used in theme.
+        this.hue = 'neutral';
+        this.itemId = makeId('dx-tag-picker-item');
+        this.label = 'never';
+        this.rootClassName = undefined;
+        this.removeLabel = undefined;
+    }
+    handleClickActivate() {
+        this.dispatchEvent(new DxTagPickerItemClick({ itemId: this.itemId, action: 'activate' }));
+    }
+    handleClickRemove() {
+        this.dispatchEvent(new DxTagPickerItemClick({ itemId: this.itemId, action: 'remove' }));
+    }
+    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
+    >`;
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String })
+], DxTagPickerItem.prototype, "hue", void 0);
+__decorate([
+    property({ type: String })
+], DxTagPickerItem.prototype, "itemId", void 0);
+__decorate([
+    property({ type: String })
+], DxTagPickerItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], DxTagPickerItem.prototype, "rootClassName", void 0);
+__decorate([
+    property({ type: String })
+], DxTagPickerItem.prototype, "removeLabel", void 0);
+DxTagPickerItem = __decorate([
+    customElement('dx-tag-picker-item')
+], DxTagPickerItem);
+export { DxTagPickerItem };
+//# sourceMappingURL=dx-tag-picker-item.js.map

package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-tag-picker-item.js","sourceRoot":"","sources":["../../../../src/dx-tag-picker/dx-tag-picker-item.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,IAAI,EAAE,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,oBAAqB,SAAQ,KAAK;IAG7C,YAAY,KAAwD;QAClE,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACL,2CAA2C;QAE3C,QAAG,GAAW,SAAS,CAAC;QAGxB,WAAM,GAAW,MAAM,CAAC,oBAAoB,CAAC,CAAC;QAG9C,UAAK,GAAW,OAAO,CAAC;QAGxB,kBAAa,GAAuB,SAAS,CAAC;QAG9C,gBAAW,GAAuB,SAAS,CAAC;IAuB9C,CAAC;IArBS,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,oBAAoB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IAC5F,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,oBAAoB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC;IAEQ,MAAM;QACb,MAAM,SAAS,GAAG,4BAA4B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACnG,OAAO,IAAI,CAAA,eAAe,SAAS,gBAAgB,CAAC,CAAC,IAAI,CAAC,WAAW,aAAa,IAAI,CAAC,GAAG,OAAO,IAAI,CAAC,EAAE;8CAC9D,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,WAAW;YAC1G,IAAI,CAAA,4CAA4C,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,iBAAiB;;gBAEvF;MACV,CAAC;IACL,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAnCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACiB;AAfjC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAsC3B"}

package/dist/types/src/dx-tag-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dx-tag-picker-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/dx-tag-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dx-tag-picker/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC"}

package/dist/types/src/dx-tag-picker/index.js

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-tag-picker-item';
+//# sourceMappingURL=index.js.map

package/dist/types/src/dx-tag-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dx-tag-picker/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,sBAAsB,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './dx-avatar';
+export * from './dx-tag-picker';
+export * from './dx-icon';
+export { createComponent, type EventName } from '@lit/react';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/types/src/index.js

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+export * from './dx-avatar';
+export * from './dx-tag-picker';
+export * from './dx-icon';
+export { createComponent } from '@lit/react';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@dxos/lit-ui",
+  "version": "0.8.1-staging.31c3ee1",
+  "description": "Web Components for DXOS using Lit",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/src/index.js",
+      "node": "./dist/src/index.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",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@lit/react": "^1.0.5",
+    "lit": "^3.2.0",
+    "@dxos/react-hooks": "0.8.1-staging.31c3ee1"
+  },
+  "devDependencies": {
+    "@dxos/test-utils": "0.8.1-staging.31c3ee1"
+  }
+}

package/src/defs.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// TODO(thure): I was unable to bring this in from `react-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 =
+  | 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;

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

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