@dxos/lit-ui 0.8.3 → 0.8.4-main.03d5cd7b56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/src/dx-anchor/dx-anchor.d.ts +9 -0
  2. package/dist/src/dx-anchor/dx-anchor.d.ts.map +1 -0
  3. package/dist/src/{dx-ref-tag/dx-ref-tag.js → dx-anchor/dx-anchor.js} +12 -21
  4. package/dist/src/dx-anchor/dx-anchor.js.map +1 -0
  5. package/dist/src/dx-anchor/index.d.ts +2 -0
  6. package/dist/src/dx-anchor/index.d.ts.map +1 -0
  7. package/dist/src/dx-anchor/index.js +5 -0
  8. package/dist/src/dx-anchor/index.js.map +1 -0
  9. package/dist/src/dx-avatar/dx-avatar.d.ts +2 -2
  10. package/dist/src/dx-avatar/dx-avatar.d.ts.map +1 -1
  11. package/dist/src/dx-avatar/dx-avatar.js +62 -35
  12. package/dist/src/dx-avatar/dx-avatar.js.map +1 -1
  13. package/dist/src/dx-avatar/dx-avatar.lit-stories.d.ts +2 -2
  14. package/dist/src/dx-avatar/dx-avatar.lit-stories.d.ts.map +1 -1
  15. package/dist/src/dx-avatar/dx-avatar.lit-stories.js +6 -6
  16. package/dist/src/dx-avatar/dx-avatar.lit-stories.js.map +1 -1
  17. package/dist/src/dx-icon/dx-icon.d.ts.map +1 -1
  18. package/dist/src/dx-icon/dx-icon.js +1 -1
  19. package/dist/src/dx-icon/dx-icon.js.map +1 -1
  20. package/dist/src/dx-tag-picker/dx-tag-picker-item.d.ts.map +1 -1
  21. package/dist/src/dx-tag-picker/dx-tag-picker-item.js +1 -1
  22. package/dist/src/dx-tag-picker/dx-tag-picker-item.js.map +1 -1
  23. package/dist/src/index.d.ts +2 -2
  24. package/dist/src/index.d.ts.map +1 -1
  25. package/dist/src/index.js +2 -2
  26. package/dist/src/index.js.map +1 -1
  27. package/dist/src/react.d.ts +6 -5
  28. package/dist/src/react.d.ts.map +1 -1
  29. package/dist/src/react.js +6 -5
  30. package/dist/src/react.js.map +1 -1
  31. package/dist/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +20 -21
  33. package/src/defs.ts +1 -1
  34. package/src/{dx-ref-tag/dx-ref-tag.ts → dx-anchor/dx-anchor.ts} +9 -24
  35. package/src/{dx-ref-tag → dx-anchor}/index.ts +1 -1
  36. package/src/dx-avatar/dx-avatar.lit-stories.ts +7 -6
  37. package/src/dx-avatar/dx-avatar.pcss +57 -31
  38. package/src/dx-avatar/dx-avatar.ts +67 -37
  39. package/src/dx-icon/dx-icon.ts +1 -1
  40. package/src/dx-tag-picker/dx-tag-picker-item.ts +1 -1
  41. package/src/dx-tag-picker/dx-tag-picker.pcss +9 -6
  42. package/src/index.ts +2 -2
  43. package/src/react.ts +12 -10
  44. package/dist/src/dx-ref-tag/dx-ref-tag.d.ts +0 -19
  45. package/dist/src/dx-ref-tag/dx-ref-tag.d.ts.map +0 -1
  46. package/dist/src/dx-ref-tag/dx-ref-tag.js.map +0 -1
  47. package/dist/src/dx-ref-tag/index.d.ts +0 -2
  48. package/dist/src/dx-ref-tag/index.d.ts.map +0 -1
  49. package/dist/src/dx-ref-tag/index.js +0 -5
  50. package/dist/src/dx-ref-tag/index.js.map +0 -1
  51. package/dist/types/src/defs.d.ts +0 -2
  52. package/dist/types/src/defs.d.ts.map +0 -1
  53. package/dist/types/src/defs.js +0 -4
  54. package/dist/types/src/defs.js.map +0 -1
  55. package/dist/types/src/dx-avatar/dx-avatar.d.ts +0 -31
  56. package/dist/types/src/dx-avatar/dx-avatar.d.ts.map +0 -1
  57. package/dist/types/src/dx-avatar/dx-avatar.js +0 -187
  58. package/dist/types/src/dx-avatar/dx-avatar.js.map +0 -1
  59. package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts +0 -12
  60. package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts.map +0 -1
  61. package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js +0 -16
  62. package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js.map +0 -1
  63. package/dist/types/src/dx-avatar/index.d.ts +0 -2
  64. package/dist/types/src/dx-avatar/index.d.ts.map +0 -1
  65. package/dist/types/src/dx-avatar/index.js +0 -5
  66. package/dist/types/src/dx-avatar/index.js.map +0 -1
  67. package/dist/types/src/dx-icon/dx-icon.d.ts +0 -10
  68. package/dist/types/src/dx-icon/dx-icon.d.ts.map +0 -1
  69. package/dist/types/src/dx-icon/dx-icon.js +0 -43
  70. package/dist/types/src/dx-icon/dx-icon.js.map +0 -1
  71. package/dist/types/src/dx-icon/index.d.ts +0 -2
  72. package/dist/types/src/dx-icon/index.d.ts.map +0 -1
  73. package/dist/types/src/dx-icon/index.js +0 -5
  74. package/dist/types/src/dx-icon/index.js.map +0 -1
  75. package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts +0 -19
  76. package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts.map +0 -1
  77. package/dist/types/src/dx-ref-tag/dx-ref-tag.js +0 -65
  78. package/dist/types/src/dx-ref-tag/dx-ref-tag.js.map +0 -1
  79. package/dist/types/src/dx-ref-tag/index.d.ts +0 -2
  80. package/dist/types/src/dx-ref-tag/index.d.ts.map +0 -1
  81. package/dist/types/src/dx-ref-tag/index.js +0 -5
  82. package/dist/types/src/dx-ref-tag/index.js.map +0 -1
  83. package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts +0 -21
  84. package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts.map +0 -1
  85. package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js +0 -68
  86. package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js.map +0 -1
  87. package/dist/types/src/dx-tag-picker/index.d.ts +0 -2
  88. package/dist/types/src/dx-tag-picker/index.d.ts.map +0 -1
  89. package/dist/types/src/dx-tag-picker/index.js +0 -5
  90. package/dist/types/src/dx-tag-picker/index.js.map +0 -1
  91. package/dist/types/src/index.d.ts +0 -5
  92. package/dist/types/src/index.d.ts.map +0 -1
  93. package/dist/types/src/index.js +0 -8
  94. package/dist/types/src/index.js.map +0 -1
  95. package/dist/types/src/react.d.ts +0 -18
  96. package/dist/types/src/react.d.ts.map +0 -1
  97. package/dist/types/src/react.js +0 -34
  98. package/dist/types/src/react.js.map +0 -1
  99. package/dist/types/tsconfig.tsbuildinfo +0 -1
  100. package/src/dx-ref-tag/dx-ref-tag.pcss +0 -8
package/package.json CHANGED
@@ -1,48 +1,47 @@
1
1
  {
2
2
  "name": "@dxos/lit-ui",
3
- "version": "0.8.3",
3
+ "version": "0.8.4-main.03d5cd7b56",
4
4
  "description": "Web Components for DXOS using Lit",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/dxos/dxos"
10
+ },
7
11
  "license": "MIT",
8
12
  "author": "DXOS.org",
9
- "sideEffects": true,
13
+ "sideEffects": [
14
+ "*.css",
15
+ "*.pcss"
16
+ ],
10
17
  "type": "module",
11
18
  "exports": {
12
19
  ".": {
13
- "types": "./dist/types/src/index.d.ts",
14
- "browser": "./dist/src/index.js",
15
- "node": "./dist/src/index.js"
20
+ "types": "./dist/src/index.d.ts",
21
+ "default": "./dist/src/index.js"
16
22
  },
17
23
  "./react": {
18
- "types": "./dist/types/src/react.d.ts",
19
- "browser": "./dist/src/react.js",
20
- "node": "./dist/src/react.js"
24
+ "types": "./dist/src/react.d.ts",
25
+ "default": "./dist/src/react.js"
21
26
  },
22
27
  "./dx-avatar.pcss": "./src/dx-avatar/dx-avatar.pcss",
23
- "./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss",
24
- "./dx-ref-tag.pcss": "./src/dx-ref-tag/dx-ref-tag.pcss"
28
+ "./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss"
25
29
  },
26
30
  "main": "dist/src/index.js",
27
31
  "types": "dist/src/index.d.ts",
28
- "typesVersions": {
29
- "*": {
30
- "react": [
31
- "./dist/types/src/react.d.ts"
32
- ]
33
- }
34
- },
35
32
  "files": [
36
33
  "src",
37
34
  "dist"
38
35
  ],
39
36
  "dependencies": {
40
- "@lit/react": "^1.0.5",
41
- "lit": "^3.2.0",
42
- "@dxos/react-hooks": "0.8.3"
37
+ "@lit/react": "^1.0.8",
38
+ "lit": "^3.3.1",
39
+ "@dxos/react-hooks": "0.8.4-main.03d5cd7b56",
40
+ "@dxos/util": "0.8.4-main.03d5cd7b56",
41
+ "@dxos/ui-types": "0.8.4-main.03d5cd7b56"
43
42
  },
44
43
  "devDependencies": {
45
- "@dxos/test-utils": "0.8.3"
44
+ "@dxos/test-utils": "0.8.4-main.03d5cd7b56"
46
45
  },
47
46
  "publishConfig": {
48
47
  "access": "public"
package/src/defs.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- // TODO(thure): I was unable to bring this in from `react-ui-types` because toolbox.ts would not acknowledge
5
+ // TODO(thure): I was unable to bring this in from `ui-types` because toolbox.ts would not acknowledge
6
6
  // `"@dxos/lit-ui": [ "packages/ui/lit-ui/src/index.ts" ]` in tsconfig.paths.json. How is this meant to work? How is it
7
7
  // okay with `react-hooks`?
8
8
  export type Size =
@@ -5,41 +5,28 @@
5
5
  // TODO(thure): Find a way to instruct ESLint & Prettier to treat any whitespace between tags rendered in the `html` template function as significant.
6
6
  /* eslint-disable */
7
7
 
8
- import { html, LitElement } from 'lit';
8
+ import { LitElement } from 'lit';
9
9
  import { customElement, property } from 'lit/decorators.js';
10
10
 
11
- import { makeId } from '@dxos/react-hooks';
12
-
13
- export class DxRefTagActivate extends Event {
14
- public readonly refId: string;
15
- public readonly label: string;
16
- public readonly trigger: DxRefTag;
17
- constructor(props: { refId: string; label: string; trigger: DxRefTag }) {
18
- super('dx-ref-tag-activate');
19
- this.refId = props.refId;
20
- this.label = props.label;
21
- this.trigger = props.trigger;
22
- }
23
- }
24
-
25
- @customElement('dx-ref-tag')
26
- export class DxRefTag extends LitElement {
11
+ import { DxAnchorActivate } from '@dxos/ui-types';
27
12
 
13
+ @customElement('dx-anchor')
14
+ export class DxAnchor extends LitElement {
28
15
  // TODO(thure): There is a case (in)sensitivity issue here which is pernicious:
29
16
  // Only refactoring the properties here to all-lowercase fixes the binding in `RefField.tsx`, but that
30
17
  // should be unnecessary, and it isn’t an issue for `DxAvatar` or `DxGrid`. What’s going on?
31
18
 
32
19
  @property({ type: String })
33
- refid: string = makeId('dx-ref-tag');
20
+ dxn: string = '';
34
21
 
35
22
  @property({ type: String })
36
23
  rootclassname: string | undefined = undefined;
37
24
 
38
- override connectedCallback (): void {
25
+ override connectedCallback(): void {
39
26
  super.connectedCallback();
40
27
  this.tabIndex = 0;
41
- this.classList.add('dx-focus-ring');
42
- if(this.rootclassname){
28
+ this.classList.add(this.getAttribute('data-visible-focus') === 'false' ? 'outline-hidden' : 'dx-focus-ring');
29
+ if (this.rootclassname) {
43
30
  this.classList.add(this.rootclassname);
44
31
  }
45
32
  this.setAttribute('role', 'button');
@@ -52,9 +39,7 @@ export class DxRefTag extends LitElement {
52
39
  }
53
40
 
54
41
  private handleActivate(event: { type: string }): void {
55
- this.dispatchEvent(
56
- new DxRefTagActivate({ refId: this.refid, label: this.textContent ?? '', trigger: this }),
57
- );
42
+ this.dispatchEvent(new DxAnchorActivate({ dxn: this.dxn, label: this.textContent ?? '', trigger: this }));
58
43
  }
59
44
 
60
45
  override createRenderRoot(): this {
@@ -2,4 +2,4 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './dx-ref-tag';
5
+ export * from './dx-anchor';
@@ -2,19 +2,20 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import './dx-avatar.ts';
5
+ import '@dxos-theme';
6
6
  import './dx-avatar.pcss';
7
+
7
8
  import { html } from 'lit';
8
9
 
9
10
  import { type DxAvatarProps } from './dx-avatar';
10
11
 
11
12
  export default {
12
13
  title: 'dx-avatar',
13
- parameters: { layout: 'fullscreen' },
14
+ parameters: {
15
+ layout: 'centered',
16
+ },
14
17
  };
15
18
 
16
- export const Basic = (props: DxAvatarProps) => {
17
- return html`<div class="dark" style="position:fixed;inset:0;">
18
- <dx-avatar></dx-avatar>
19
- </div>`;
19
+ export const Basic = (_props: DxAvatarProps) => {
20
+ return html` <dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar> `;
20
21
  };
@@ -1,14 +1,23 @@
1
+ /* Tailwind v4: Fixed @apply directives - converted to direct CSS */
1
2
  .dx-avatar-group {
2
- @apply inline-flex items-center pie-2;
3
+ display: inline-flex;
4
+ align-items: center;
5
+ padding-right: 0.5rem;
3
6
  }
4
7
 
5
8
  .dx-avatar-group .dx-avatar {
6
- @apply -mie-2
9
+ margin-right: -0.5rem;
7
10
  }
8
11
 
9
12
  .dx-avatar-group .dx-avatar {
10
- &[size="0"], &[size="px"], &[size="0.5"], &[size="1"], &[size="1.5"], &[size="2"], &[size="2.5"] {
11
- @apply -mie-1
13
+ &[size='0'],
14
+ &[size='px'],
15
+ &[size='0.5'],
16
+ &[size='1'],
17
+ &[size='1.5'],
18
+ &[size='2'],
19
+ &[size='2.5'] {
20
+ margin-right: -0.25rem;
12
21
  }
13
22
  }
14
23
 
@@ -17,62 +26,79 @@ dx-avatar {
17
26
  }
18
27
 
19
28
  .dx-avatar {
20
- @apply relative inline-flex shrink-0;
29
+ position: relative;
30
+ display: inline-flex;
31
+ flex-shrink: 0;
32
+ /* Tailwind v4 migration: converted @apply to direct CSS properties */
21
33
 
22
34
  .dx-avatar__frame {
23
- @apply is-full bs-full bg-[--surface-bg];
35
+ width: 100%;
36
+ height: 100%;
24
37
  }
25
38
 
26
- .dx-avatar__frame, .dx-avatar__ring {
27
- @apply rounded-full;
39
+ .dx-avatar__frame,
40
+ .dx-avatar__ring {
41
+ border-radius: 9999px;
28
42
  }
29
43
 
30
- &[data-variant="square"] {
31
- .dx-avatar__frame, .dx-avatar__ring {
32
- @apply rounded-sm;
44
+ &[data-variant='square'] {
45
+ .dx-avatar__frame,
46
+ .dx-avatar__ring {
47
+ border-radius: 0.125rem;
33
48
  }
34
49
  }
35
50
 
36
51
  .dx-avatar__status-icon {
37
- @apply absolute block-end-0 inline-end-0;
52
+ position: absolute;
53
+ bottom: 0;
54
+ right: 0;
38
55
  }
39
56
 
40
57
  .dx-avatar__ring {
41
- @apply absolute inset-0 border-2 border-[color:var(--surface-bg)];
58
+ position: absolute;
59
+ inset: 0;
60
+ border-width: 2px;
61
+ border-color: var(--surface-bg);
42
62
  }
43
63
 
44
- &[data-status="current"] .dx-avatar__ring {
45
- @apply border-[color:var(--dx-currentCursor)];
64
+ &[data-status='active'] .dx-avatar__ring {
65
+ border-color: var(--color-success-border);
46
66
  }
47
67
 
48
- &[data-status="active"] .dx-avatar__ring {
49
- @apply border-[color:var(--dx-successCursor)];
68
+ &[data-status='inactive'] .dx-avatar__ring {
69
+ border-color: var(--color-neutral-border);
50
70
  }
51
71
 
52
- &[data-status="error"] .dx-avatar__ring {
53
- @apply border-[color:var(--dx-errorCursor)];
72
+ &[data-status='current'] .dx-avatar__ring {
73
+ border-color: var(--color-accent-focus-indicator);
54
74
  }
55
75
 
56
- &[data-status="warning"] .dx-avatar__ring {
57
- @apply border-[color:var(--dx-warningCursor)];
76
+ &[data-status='internal'] .dx-avatar__ring {
77
+ border-color: var(--color-separator);
58
78
  }
59
79
 
60
- &[data-status="internal"] .dx-avatar__ring {
61
- @apply border-[color:var(--dx-internalCursor)];
80
+ &[data-status='error'] .dx-avatar__ring {
81
+ border-color: var(--color-error-border);
62
82
  }
63
83
 
64
- &[data-status="inactive"] .dx-avatar__ring {
65
- @apply border-separator;
84
+ &[data-status='warning'] .dx-avatar__ring {
85
+ border-color: var(--color-warning-border);
66
86
  }
67
87
 
68
- &[data-animation="pulse"] .dx-avatar__ring {
69
- @apply animate-halo-pulse;
88
+ &[data-animation='pulse'] .dx-avatar__ring {
89
+ animation: halo-pulse var(--duration, 1s) ease-in-out infinite;
70
90
  }
71
91
 
72
- &[data-state-loading-status="loaded"] {
73
- .dx-avatar__fallback-text, .dx-avatar__status-icon {
74
- @apply hidden;
92
+ &[data-state-loading-status='loaded'] {
93
+ .dx-avatar__fallback-text,
94
+ .dx-avatar__status-icon {
95
+ display: none;
75
96
  }
76
97
  }
77
- }
78
98
 
99
+ &[data-state-loading-status='error'] {
100
+ .dx-avatar__image {
101
+ display: none;
102
+ }
103
+ }
104
+ }
@@ -2,8 +2,8 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { html, svg, LitElement } from 'lit';
6
- import { customElement, state, property } from 'lit/decorators.js';
5
+ import { LitElement, html, svg } from 'lit';
6
+ import { customElement, property, state } from 'lit/decorators.js';
7
7
  import { styleMap } from 'lit/directives/style-map.js';
8
8
 
9
9
  import { makeId } from '@dxos/react-hooks';
@@ -13,7 +13,7 @@ import { type Size } from '../defs';
13
13
  export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
14
14
 
15
15
  export type AvatarVariant = 'square' | 'circle';
16
- export type AvatarStatus = 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
16
+ export type AvatarStatus = 'active' | 'inactive' | 'current' | 'internal' | 'error' | 'warning';
17
17
  export type AvatarAnimation = 'pulse' | 'none';
18
18
 
19
19
  const rx = '0.125rem';
@@ -36,6 +36,7 @@ export type DxAvatarProps = Partial<
36
36
  >
37
37
  >;
38
38
 
39
+ // TODO(burdon): Needs popover.
39
40
  @customElement('dx-avatar')
40
41
  export class DxAvatar extends LitElement {
41
42
  private maskId: string;
@@ -46,7 +47,7 @@ export class DxAvatar extends LitElement {
46
47
  }
47
48
 
48
49
  @property({ type: String })
49
- fallback: string = 'never';
50
+ fallback: string = '🫥';
50
51
 
51
52
  @property({ type: String })
52
53
  imgSrc: string | undefined = undefined;
@@ -70,7 +71,7 @@ export class DxAvatar extends LitElement {
70
71
  hue: string | undefined = undefined;
71
72
 
72
73
  @property({ type: String })
73
- hueVariant: 'fill' | 'surface' = 'fill';
74
+ hueVariant: 'fill' | 'surface' | 'transparent' = 'fill';
74
75
 
75
76
  @property({ type: String })
76
77
  size: Size = 10;
@@ -112,13 +113,19 @@ export class DxAvatar extends LitElement {
112
113
  const r = sizePx / 2 - ringGap - ringWidth;
113
114
  const isTextOnly = Boolean(this.fallback && /[0-9a-zA-Z]+/.test(this.fallback));
114
115
  const fontScale = (isTextOnly ? 3 : 3.6) * (1 / 1.612);
115
- const bg = this.hue
116
- ? this.hueVariant === 'surface'
117
- ? `var(--dx-${this.hue}Surface)`
118
- : `var(--dx-${this.hue}Fill)`
119
- : 'var(--surface-bg)';
116
+ const bg =
117
+ this.hueVariant === 'transparent'
118
+ ? 'transparent'
119
+ : this.hue
120
+ ? this.hueVariant === 'surface'
121
+ ? `var(--color-${this.hue}-surface)`
122
+ : `var(--color-${this.hue === 'neutral' ? 'input-surface' : `${this.hue}-fill`})`
123
+ : 'var(--surface-bg)';
120
124
  const fg =
121
- this.hue && this.hueVariant === 'surface' ? `var(--dx-${this.hue}SurfaceText)` : 'var(--dx-accentSurfaceText)';
125
+ this.hue && this.hueVariant === 'surface'
126
+ ? `var(--color-${this.hue}-surface-text)`
127
+ : 'var(--color-accent-surface-text)';
128
+
122
129
  return html`<span
123
130
  role="none"
124
131
  class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
@@ -138,62 +145,71 @@ export class DxAvatar extends LitElement {
138
145
  ${
139
146
  this.variant === 'circle'
140
147
  ? svg`<circle fill="white" cx="50%" cy="50%" r=${r} />`
141
- : svg`<rect
142
- fill="white"
143
- width=${2 * r}
144
- height=${2 * r}
145
- x=${ringGap + ringWidth}
146
- y=${ringGap + ringWidth}
147
- rx=${rx}
148
- />`
148
+ : svg`
149
+ <rect
150
+ fill="white"
151
+ width=${2 * r}
152
+ height=${2 * r}
153
+ x=${ringGap + ringWidth}
154
+ y=${ringGap + ringWidth}
155
+ rx=${rx}
156
+ />`
149
157
  }
150
158
  </mask>
151
159
  </defs>
152
160
  ${
153
161
  this.variant === 'circle'
154
- ? svg` <circle
155
- cx="50%"
156
- cy="50%"
157
- r=${r}
158
- fill=${bg}
159
- />`
160
- : svg` <rect
161
- fill=${bg}
162
- x=${ringGap + ringWidth}
163
- y=${ringGap + ringWidth}
164
- width=${2 * r}
165
- height=${2 * r}
166
- rx=${rx}
167
- />`
162
+ ? svg`
163
+ <circle
164
+ cx="50%"
165
+ cy="50%"
166
+ r=${r}
167
+ fill=${bg}
168
+ />`
169
+ : svg`
170
+ <rect
171
+ fill=${bg}
172
+ x=${ringGap + ringWidth}
173
+ y=${ringGap + ringWidth}
174
+ width=${2 * r}
175
+ height=${2 * r}
176
+ rx=${rx}
177
+ />`
168
178
  }
169
179
  ${
170
180
  this.icon
171
- ? svg`<use
181
+ ? svg`
182
+ <use
172
183
  class="dx-avatar__icon"
173
184
  href=${this.icon}
174
185
  x=${sizePx / 5}
175
186
  y=${sizePx / 5}
176
187
  width=${(3 * sizePx) / 5}
177
188
  height=${(3 * sizePx) / 5} />`
178
- : svg`<text
189
+ : // NOTE: Firefox currently doesn't fully support alignment-baseline.
190
+ svg`
191
+ <text
179
192
  x="50%"
180
193
  y="50%"
181
194
  class="dx-avatar__fallback-text"
182
195
  fill=${fg}
183
196
  text-anchor="middle"
184
197
  alignment-baseline="central"
198
+ dominant-baseline="middle"
185
199
  font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
186
200
  mask=${`url(#${this.maskId})`}
187
201
  >
188
- ${this.fallback}
202
+ ${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
189
203
  </text>`
190
204
  }
191
205
  ${
192
206
  this.imgSrc &&
193
- svg`<image
207
+ svg`
208
+ <image
194
209
  width="100%"
195
210
  height="100%"
196
211
  preserveAspectRatio="xMidYMid slice"
212
+ class="dx-avatar__image"
197
213
  href=${this.imgSrc}
198
214
  mask=${`url(#${this.maskId})`}
199
215
  crossorigin=${this.imgCrossOrigin}
@@ -209,3 +225,17 @@ export class DxAvatar extends LitElement {
209
225
  return this;
210
226
  }
211
227
  }
228
+
229
+ /**
230
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
231
+ * Handles Unicode characters correctly.
232
+ */
233
+ const getInitials = (label = ''): string[] => {
234
+ return label
235
+ .trim()
236
+ .split(/\s+/)
237
+ .map((str) => str.replace(/[^\p{L}\p{N}\s]/gu, ''))
238
+ .filter(Boolean)
239
+ .slice(0, 2)
240
+ .map((word) => word[0].toUpperCase());
241
+ };
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { svg, LitElement } from 'lit';
5
+ import { LitElement, svg } from 'lit';
6
6
  import { customElement, property } from 'lit/decorators.js';
7
7
 
8
8
  import { type Size } from '../defs';
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { html, LitElement } from 'lit';
5
+ import { LitElement, html } from 'lit';
6
6
  import { customElement, property } from 'lit/decorators.js';
7
7
 
8
8
  import { makeId } from '@dxos/react-hooks';
@@ -1,22 +1,25 @@
1
+ @reference "../../../ui-theme/src/main.css";
2
+
1
3
  @layer dx-components {
2
4
  dx-tag-picker-item {
3
- display: contents;
5
+ display: inline-block;
6
+ @apply p-0.5;
4
7
  }
5
8
 
6
9
  .dx-tag-picker-item.dx-tag {
7
- @apply p-0 inline-flex;
10
+ @apply p-0 m-0 flex;
8
11
 
9
12
  button {
10
- @apply pli-1;
11
- padding-block: var(--dx-tag-padding-block);
13
+ @apply px-1;
14
+ padding-block: var(--spacing-tag-padding-block);
12
15
  }
13
16
 
14
17
  &[data-remove='true'] {
15
18
  button:first-child {
16
- @apply pie-0.5;
19
+ @apply pr-0.5;
17
20
  }
18
21
  button:last-child {
19
- @apply pis-0.5;
22
+ @apply pl-0.5;
20
23
  }
21
24
  }
22
25
  }
package/src/index.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ export * from './dx-anchor';
5
6
  export * from './dx-avatar';
6
- export * from './dx-tag-picker';
7
- export * from './dx-ref-tag';
8
7
  export * from './dx-icon';
8
+ export * from './dx-tag-picker';
package/src/react.ts CHANGED
@@ -2,28 +2,29 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { createComponent, type EventName } from '@lit/react';
5
+ import { type EventName, createComponent } from '@lit/react';
6
6
  import React, { type ComponentPropsWithRef } from 'react';
7
7
 
8
+ import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/ui-types';
9
+
8
10
  import {
11
+ type DxTagPickerItemClick,
12
+ DxAnchor as NaturalDxAnchor,
9
13
  DxAvatar as NaturalDxAvatar,
10
- DxRefTag as NaturalDxRefTag,
11
- DxIcon as NaturalIcon,
12
- type DxRefTagActivate,
13
14
  DxTagPickerItem as NaturalDxTagPickerItem,
14
- type DxTagPickerItemClick,
15
+ DxIcon as NaturalIcon,
15
16
  } from './index';
16
17
 
17
- export const DxRefTag = createComponent({
18
- tagName: 'dx-ref-tag',
19
- elementClass: NaturalDxRefTag,
18
+ export const DxAnchor = createComponent({
19
+ tagName: 'dx-anchor',
20
+ elementClass: NaturalDxAnchor,
20
21
  react: React,
21
22
  events: {
22
- onActivate: 'dx-ref-tag-activate' as EventName<DxRefTagActivate>,
23
+ onActivate: DX_ANCHOR_ACTIVATE as EventName<DxAnchorActivate>,
23
24
  },
24
25
  });
25
26
 
26
- export type DxRefTagProps = ComponentPropsWithRef<typeof DxRefTag>;
27
+ export type DxAnchorProps = ComponentPropsWithRef<typeof DxAnchor>;
27
28
 
28
29
  export const DxAvatar = createComponent({
29
30
  tagName: 'dx-avatar',
@@ -53,4 +54,5 @@ export const DxTagPickerItem = createComponent({
53
54
  export type DxTagPickerItemProps = ComponentPropsWithRef<typeof DxTagPickerItem>;
54
55
 
55
56
  export { createComponent };
57
+
56
58
  export type { EventName };
@@ -1,19 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class DxRefTagActivate extends Event {
3
- readonly refId: string;
4
- readonly label: string;
5
- readonly trigger: DxRefTag;
6
- constructor(props: {
7
- refId: string;
8
- label: string;
9
- trigger: DxRefTag;
10
- });
11
- }
12
- export declare class DxRefTag extends LitElement {
13
- refid: string;
14
- rootclassname: string | undefined;
15
- connectedCallback(): void;
16
- private handleActivate;
17
- createRenderRoot(): this;
18
- }
19
- //# sourceMappingURL=dx-ref-tag.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,2 +0,0 @@
1
- export * from './dx-ref-tag';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
@@ -1,5 +0,0 @@
1
- //
2
- // Copyright 2025 DXOS.org
3
- //
4
- export * from './dx-ref-tag';
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,2 +0,0 @@
1
- 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;
2
- //# sourceMappingURL=defs.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}