@bspk/ui 1.0.0 → 1.0.1

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 (42) hide show
  1. package/{Profile.d.ts → Avatar.d.ts} +11 -13
  2. package/{Profile.js → Avatar.js} +12 -14
  3. package/Avatar.js.map +1 -0
  4. package/ListItem.d.ts +2 -2
  5. package/ListItem.js +2 -2
  6. package/ListItem.js.map +1 -1
  7. package/MenuButton.d.ts +2 -3
  8. package/MenuButton.js +1 -1
  9. package/MenuButton.js.map +1 -1
  10. package/meta.d.ts +2 -2
  11. package/meta.js +188 -188
  12. package/meta.js.map +1 -1
  13. package/package.json +3 -3
  14. package/src/{Profile.tsx → Avatar.tsx} +18 -20
  15. package/src/ListItem.tsx +3 -3
  16. package/src/MenuButton.tsx +2 -5
  17. package/src/meta.ts +191 -191
  18. package/src/utils/errors.tsx +9 -4
  19. package/utils/errors.d.ts +1 -4
  20. package/utils/errors.js +7 -3
  21. package/utils/errors.js.map +1 -1
  22. package/Profile.js.map +0 -1
  23. package/styles/anywhere.css +0 -1693
  24. package/styles/anywhere.ts +0 -1694
  25. package/styles/base.css +0 -160
  26. package/styles/base.ts +0 -161
  27. package/styles/better-homes-gardens.css +0 -1693
  28. package/styles/better-homes-gardens.ts +0 -1694
  29. package/styles/cartus.css +0 -1691
  30. package/styles/cartus.ts +0 -1692
  31. package/styles/century-21.css +0 -1689
  32. package/styles/century-21.ts +0 -1690
  33. package/styles/coldwell-banker.css +0 -1691
  34. package/styles/coldwell-banker.ts +0 -1692
  35. package/styles/corcoran.css +0 -1685
  36. package/styles/corcoran.ts +0 -1686
  37. package/styles/denali-boss.css +0 -1681
  38. package/styles/denali-boss.ts +0 -1682
  39. package/styles/era.css +0 -1685
  40. package/styles/era.ts +0 -1686
  41. package/styles/sothebys.css +0 -1677
  42. package/styles/sothebys.ts +0 -1678
package/meta.js CHANGED
@@ -8,7 +8,17 @@ const componentsMeta = [
8
8
  slug: 'accordion',
9
9
  css: '\n display: flex;\n',
10
10
  dependencies: [],
11
- modified: '2025-05-09T17:27:22.585Z',
11
+ modified: '2025-05-12T18:33:57.709Z',
12
+ hasTouchTarget: false,
13
+ },
14
+ {
15
+ description: 'A profile component.\n\nA profile is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an overflowCount.',
16
+ file: '/Avatar.tsx',
17
+ name: 'Avatar',
18
+ slug: 'avatar',
19
+ css: "\n --height: var(--spacing-sizing-10);\n --font: var(--labels-base);\n --foreground: var(--foreground-neutral-on-surface);\n --background: var(--surface-neutral-t3-low);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0;\n height: var(--height);\n width: var(--height);\n aspect-ratio: 1 / 1;\n border-radius: 999px;\n background-color: var(--background);\n color: var(--foreground);\n font: var(--font);\n\n &:has(img) {\n overflow: hidden;\n }\n\n img {\n max-width: 100%;\n }\n\n \n &[data-size='x-small'] {\n --height: var(--spacing-sizing-06);\n --font: var(--labels-x-small);\n }\n \n &[data-size='small'] {\n --height: var(--spacing-sizing-08);\n --font: var(--labels-small);\n }\n \n &[data-size='medium'] {\n --height: var(--spacing-sizing-10);\n --font: var(--labels-base);\n }\n \n &[data-size='large'] {\n --height: var(--spacing-sizing-12);\n --font: var(--labels-large);\n }\n \n &[data-size='x-large'] {\n --height: var(--spacing-sizing-14);\n --font: var(--desktop-subheader-x-large);\n }\n \n &[data-size='xx-large'] {\n --height: var(--spacing-sizing-17);\n --font: var(--desktop-subheader-xx-large);\n }\n \n &[data-size='xxx-large'] {\n --height: var(--spacing-sizing-19);\n --font: var(--desktop-display-regular-small);\n }\n \n &[data-size='xxxx-large'] {\n --height: var(--spacing-sizing-21);\n --font: var(--desktop-display-regular-medium);\n }\n \n &[data-size='xxxxx-large'] {\n --height: var(--spacing-sizing-23);\n --font: var(--desktop-display-regular-large);\n }\n \n\n \n &[data-color='grey'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t2-lowest);\n }\n \n &[data-color='white'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t1-base);\n }\n \n &[data-color='primary'] {\n --foreground: var(--foreground-brand-primary-depth);\n --background: var(--surface-brand-primary-highlight);\n }\n \n &[data-color='secondary'] {\n --foreground: var(--foreground-brand-secondary-depth);\n --background: var(--surface-brand-secondary-highlight);\n }\n \n &[data-color='blue'] {\n --foreground: var(--foreground-spectrum-blue);\n --background: var(--surface-spectrum-blue);\n }\n \n &[data-color='green'] {\n --foreground: var(--foreground-spectrum-green);\n --background: var(--surface-spectrum-green);\n }\n \n &[data-color='lime'] {\n --foreground: var(--foreground-spectrum-lime);\n --background: var(--surface-spectrum-lime);\n }\n \n &[data-color='magenta'] {\n --foreground: var(--foreground-spectrum-magenta);\n --background: var(--surface-spectrum-magenta);\n }\n \n &[data-color='orange'] {\n --foreground: var(--foreground-spectrum-orange);\n --background: var(--surface-spectrum-orange);\n }\n \n &[data-color='pink'] {\n --foreground: var(--foreground-spectrum-pink);\n --background: var(--surface-spectrum-pink);\n }\n \n &[data-color='purple'] {\n --foreground: var(--foreground-spectrum-purple);\n --background: var(--surface-spectrum-purple);\n }\n \n &[data-color='red'] {\n --foreground: var(--foreground-spectrum-red);\n --background: var(--surface-spectrum-red);\n }\n \n &[data-color='teal'] {\n --foreground: var(--foreground-spectrum-teal);\n --background: var(--surface-spectrum-teal);\n }\n \n &[data-color='yellow'] {\n --foreground: var(--foreground-spectrum-yellow);\n --background: var(--surface-spectrum-yellow);\n }\n ;\n",
20
+ dependencies: [],
21
+ modified: '2025-05-13T20:38:50.508Z',
12
22
  hasTouchTarget: false,
13
23
  },
14
24
  {
@@ -18,7 +28,7 @@ const componentsMeta = [
18
28
  slug: 'badge',
19
29
  css: "\n --size: var(--spacing-sizing-06);\n\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-circular);\n height: var(--size);\n min-width: var(--size);\n padding: 0 var(--spacing-sizing-02);\n\n &[data-size='x-small'] {\n --size: var(--spacing-sizing-05);\n padding: 2px var(--spacing-sizing-01);\n }\n\n font: var(--labels-x-small);\n\n color: var(--foreground-brand-on-primary);\n background: var(--surface-brand-primary);\n\n &[data-variant='secondary'] {\n color: var(--foreground-brand-on-secondary);\n background: var(--surface-brand-secondary);\n }\n",
20
30
  dependencies: [],
21
- modified: '2025-05-09T17:27:22.585Z',
31
+ modified: '2025-05-12T18:33:57.709Z',
22
32
  hasTouchTarget: false,
23
33
  },
24
34
  {
@@ -28,7 +38,7 @@ const componentsMeta = [
28
38
  slug: 'banner-alert',
29
39
  css: "\n --color: var(--status-information);\n --on-color: var(--status-on-information);\n display: flex;\n flex-direction: row;\n border: 2px solid var(--color);\n border-radius: var(--radius-medium);\n box-sizing: border-box;\n background-color: var(--surface-neutral-t1-base);\n width: 100%;\n\n &[data-variant='error'] {\n --color: var(--status-error);\n --on-color: var(--status-on-error);\n }\n\n &[data-variant='success'] {\n --color: var(--status-success);\n --on-color: var(--status-on-success);\n }\n\n &[data-variant='warning'] {\n --color: var(--status-warning);\n --on-color: var(--status-on-warning);\n }\n\n &[data-elevated] {\n box-shadow: var(--drop-shadow-raise);\n }\n\n [data-icon-bar] {\n flex: 1;\n padding: var(--spacing-sizing-04) var(--spacing-sizing-03);\n background: var(--color);\n color: var(--on-color);\n svg {\n width: var(--spacing-sizing-06);\n height: var(--spacing-sizing-06);\n }\n }\n\n [data-content] {\n flex: 100%;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);\n\n header {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-sizing-03);\n height: var(--spacing-sizing-12);\n align-items: center;\n\n span {\n flex: 1;\n display: flex;\n align-items: center;\n color: var(--foreground-neutral-on-surface);\n font: var(--heading-h6);\n\n @media (any-pointer: coarse) {\n font: var(--heading-h6);\n }\n }\n\n // close button\n button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n margin: 0 0 0 auto;\n color: var(--foreground-neutral-on-surface-variant-01);\n\n height: var(--spacing-sizing-08);\n width: var(--spacing-sizing-08);\n\n @media (any-pointer: coarse) {\n height: var(--spacing-sizing-12);\n width: var(--spacing-sizing-12);\n }\n\n svg {\n width: var(--spacing-sizing-04);\n height: var(--spacing-sizing-04);\n }\n }\n }\n\n [data-body] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sizing-02);\n padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;\n\n span {\n font: var(--body-base);\n }\n\n button {\n margin-left: auto;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0 var(--spacing-sizing-03);\n height: var(--spacing-sizing-12);\n font: var(--labels-small);\n }\n }\n }\n",
30
40
  dependencies: [],
31
- modified: '2025-05-09T17:27:22.585Z',
41
+ modified: '2025-05-12T18:33:57.709Z',
32
42
  hasTouchTarget: false,
33
43
  },
34
44
  {
@@ -38,7 +48,7 @@ const componentsMeta = [
38
48
  slug: 'bottom-navigation',
39
49
  css: '\n display: flex;\n',
40
50
  dependencies: [],
41
- modified: '2025-05-09T17:27:22.585Z',
51
+ modified: '2025-05-12T18:33:57.710Z',
42
52
  hasTouchTarget: false,
43
53
  },
44
54
  {
@@ -48,7 +58,7 @@ const componentsMeta = [
48
58
  slug: 'bottom-sheet',
49
59
  css: '\n display: flex;\n',
50
60
  dependencies: [],
51
- modified: '2025-05-09T17:27:22.585Z',
61
+ modified: '2025-05-12T18:33:57.710Z',
52
62
  hasTouchTarget: false,
53
63
  },
54
64
  {
@@ -58,7 +68,7 @@ const componentsMeta = [
58
68
  slug: 'breadcrumb',
59
69
  css: '\n display: flex;\n',
60
70
  dependencies: [],
61
- modified: '2025-05-09T17:27:22.585Z',
71
+ modified: '2025-05-12T18:33:57.710Z',
62
72
  hasTouchTarget: false,
63
73
  },
64
74
  {
@@ -68,7 +78,7 @@ const componentsMeta = [
68
78
  slug: 'button',
69
79
  css: "\n &,\n &:is(a) {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-sizing-02);\n border: none;\n cursor: pointer;\n box-sizing: border-box;\n background: transparent;\n text-decoration: none;\n width: fit-content;\n position: relative;\n\n [data-touch-target] {\n min-width: var(--spacing-sizing-12);\n min-height: var(--spacing-sizing-12);\n }\n\n &[data-width='hug'] {\n width: fit-content;\n }\n\n &[data-width='fill'] {\n width: 100%;\n }\n\n &[data-size='x-small'] {\n font-size: var(--typography-size-xs);\n line-height: var(--typography-line-height-lh-1);\n height: var(--spacing-sizing-06);\n min-width: var(--spacing-sizing-06);\n gap: var(--spacing-sizing-02);\n\n &:has([data-button-label]),\n &[data-override] {\n padding: 0 var(--spacing-sizing-02);\n }\n\n > [data-button-icon] {\n width: var(--spacing-sizing-04);\n height: var(--spacing-sizing-04);\n }\n }\n\n &[data-size='small'] {\n font-size: var(--typography-size-sm);\n line-height: var(--typography-line-height-lh-2);\n height: var(--spacing-sizing-08);\n min-width: var(--spacing-sizing-08);\n\n &:has([data-button-label]),\n &[data-override] {\n padding: 6px var(--spacing-sizing-04);\n }\n\n > [data-button-icon] {\n width: var(--spacing-sizing-05);\n height: var(--spacing-sizing-05);\n }\n }\n\n &[data-size='medium'] {\n font-size: var(--typography-size-base);\n line-height: var(--typography-line-height-lh-2);\n height: var(--spacing-sizing-10);\n min-width: var(--spacing-sizing-10);\n\n &:has([data-button-label]),\n &[data-override] {\n padding: var(--spacing-sizing-02) var(--spacing-sizing-04);\n }\n\n > [data-button-icon] {\n width: var(--spacing-sizing-05);\n height: var(--spacing-sizing-05);\n }\n }\n &[data-size='large'] {\n font-size: var(--typography-size-bp-md);\n line-height: var(--typography-line-height-lh-4);\n height: var(--spacing-sizing-12);\n min-width: var(--spacing-sizing-12);\n\n &:has([data-button-label]),\n &[data-override] {\n padding: var(--spacing-sizing-03) var(--spacing-sizing-04);\n }\n\n > [data-button-icon] {\n width: var(--spacing-sizing-06);\n height: var(--spacing-sizing-06);\n }\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n > [data-button-icon] {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n > [data-button-label] {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n &[data-variant='primary'] {\n --primary-background: var(--surface-brand-primary);\n\n background: linear-gradient(var(--primary-background), var(--primary-background));\n color: var(--foreground-brand-on-primary);\n border-radius: var(--radius-small);\n\n &[disabled] {\n color: var(--foreground-neutral-disabled-on-surface);\n background: var(--interactions-disabled-opacity);\n }\n\n &:not([disabled]) {\n [data-pseudo='hover'] > &,\n &:hover {\n background:\n linear-gradient(\n var(--interactions-brand-hover-opacity),\n var(--interactions-brand-hover-opacity)\n ),\n linear-gradient(var(--primary-background), var(--primary-background));\n }\n\n [data-pseudo='active'] > &,\n &:active {\n background:\n linear-gradient(\n var(--interactions-brand-press-opacity),\n var(--interactions-brand-press-opacity)\n ),\n linear-gradient(var(--primary-background), var(--primary-background));\n }\n\n [data-pseudo='focus'] > &,\n &:focus-visible {\n outline: solid 2px var(--stroke-neutral-focus);\n }\n }\n\n &[data-destructive] {\n --primary-background: var(--status-error);\n color: var(--foreground-brand-on-primary);\n }\n }\n\n &[data-variant='secondary'] {\n border: solid 1px var(--stroke-neutral-base);\n border-radius: var(--radius-small);\n color: var(--foreground-neutral-on-surface-variant-01);\n\n &[disabled] {\n color: var(--foreground-neutral-disabled-on-surface);\n border: solid 1px var(--stroke-neutral-disabled-light);\n }\n\n &:not([disabled]) {\n [data-pseudo='hover'] > &,\n &:hover {\n background-color: var(--interactions-neutral-hover-opacity);\n }\n\n [data-pseudo='active'] > &,\n &:active {\n background-color: var(--interactions-neutral-press-opacity);\n }\n\n [data-pseudo='focus'] > &,\n &:focus-visible {\n outline: solid 2px var(--stroke-neutral-focus);\n }\n }\n\n &[data-destructive] {\n background: transparent;\n color: var(--status-error);\n border: solid 1px var(--status-error);\n }\n }\n\n &[data-variant='tertiary'] {\n background: transparent;\n color: var(--foreground-neutral-on-surface-variant-01);\n\n &[disabled] {\n color: var(--foreground-neutral-disabled-on-surface);\n }\n\n &:not([disabled]) {\n [data-pseudo='hover'] > &,\n &:hover {\n background: var(--interactions-neutral-hover-opacity);\n }\n\n [data-pseudo='active'] > &,\n &:active {\n background: var(--interactions-neutral-press-opacity);\n }\n\n [data-pseudo='focus'] > &,\n &:focus-visible {\n outline: solid 2px var(--stroke-neutral-focus);\n }\n }\n\n &[data-destructive] {\n color: var(--status-error);\n }\n }\n }\n",
70
80
  dependencies: ['Tooltip'],
71
- modified: '2025-05-09T17:27:22.585Z',
81
+ modified: '2025-05-12T18:33:57.710Z',
72
82
  hasTouchTarget: true,
73
83
  },
74
84
  {
@@ -78,7 +88,7 @@ const componentsMeta = [
78
88
  slug: 'button-dock',
79
89
  css: '\n display: flex;\n',
80
90
  dependencies: [],
81
- modified: '2025-05-09T17:27:22.585Z',
91
+ modified: '2025-05-12T18:33:57.710Z',
82
92
  hasTouchTarget: false,
83
93
  },
84
94
  {
@@ -88,7 +98,7 @@ const componentsMeta = [
88
98
  slug: 'card',
89
99
  css: "\n display: block;\n background: var(--surface-neutral-t1-base);\n padding: var(--spacing-sizing-03);\n border-radius: var(--radius-medium);\n overflow: hidden;\n\n &[data-hide-padding] {\n padding: 0;\n }\n &[data-variant='outlined'] {\n border: solid 1px var(--stroke-neutral-low);\n }\n &[data-variant='elevated'] {\n box-shadow:\n 0 1px 2px 0 var(--shadow-32),\n 0 1px 3px 1px var(--shadow-15);\n }\n",
90
100
  dependencies: [],
91
- modified: '2025-05-09T17:27:22.585Z',
101
+ modified: '2025-05-12T18:33:57.711Z',
92
102
  hasTouchTarget: false,
93
103
  },
94
104
  {
@@ -98,7 +108,7 @@ const componentsMeta = [
98
108
  slug: 'chart',
99
109
  css: '\n display: flex;\n',
100
110
  dependencies: [],
101
- modified: '2025-05-09T17:27:22.585Z',
111
+ modified: '2025-05-12T18:33:57.711Z',
102
112
  hasTouchTarget: false,
103
113
  },
104
114
  {
@@ -108,7 +118,7 @@ const componentsMeta = [
108
118
  slug: 'checkbox',
109
119
  css: "\n display: block;\n position: relative;\n width: var(--spacing-sizing-06);\n aspect-ratio: 1/1;\n padding: 2px;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n cursor: pointer;\n }\n\n span {\n --stroke: var(--stroke-neutral-base);\n --inner: none;\n --background: none;\n --color: var(--foreground-brand-on-primary);\n\n box-sizing: border-box;\n display: flex;\n width: 20px;\n aspect-ratio: 1/1;\n cursor: pointer;\n border-radius: 2px;\n border: 2px solid var(--stroke);\n align-items: center;\n flex-direction: column;\n justify-content: center;\n position: relative;\n background: var(--background);\n\n svg[data-checked] {\n width: 14px;\n display: none;\n }\n svg[data-indeterminate] {\n width: 12px;\n display: none;\n }\n color: var(--color);\n }\n\n input[type='checkbox']:not(:checked, :indeterminate, :disabled) {\n &:hover + span {\n background-color: var(--interactions-neutral-hover-opacity);\n }\n &:active + span {\n background-color: var(--interactions-neutral-press-opacity);\n }\n }\n\n input[type='checkbox']:checked + span svg[data-checked],\n input[type='checkbox']:indeterminate + span svg[data-indeterminate] {\n display: block;\n }\n\n input[type='checkbox']:checked + span,\n input[type='checkbox']:indeterminate + span {\n --stroke: var(--stroke-brand-primary);\n --background: var(--surface-brand-primary);\n }\n\n input[type='checkbox']:disabled {\n pointer-events: none;\n & + span {\n --stroke: var(--stroke-neutral-interactions-disabled-light);\n }\n &:is(:checked, :indeterminate) + span {\n --stroke: transparent;\n --background: var(--interactions-disabled-opacity);\n --color: var(--foreground-neutral-disabled-on-surface);\n }\n }\n\n input[type='checkbox'][aria-invalid]:not(:disabled) {\n &:checked + span,\n &:indeterminate + span {\n --background: var(--status-error);\n }\n & + span {\n --stroke: var(--status-error);\n }\n }\n",
110
120
  dependencies: [],
111
- modified: '2025-05-09T17:27:22.585Z',
121
+ modified: '2025-05-12T18:33:57.711Z',
112
122
  hasTouchTarget: false,
113
123
  },
114
124
  {
@@ -118,7 +128,7 @@ const componentsMeta = [
118
128
  slug: 'checkbox-group',
119
129
  css: '',
120
130
  dependencies: ['Checkbox', 'ToggleOption'],
121
- modified: '2025-05-09T17:27:22.585Z',
131
+ modified: '2025-05-12T18:33:57.711Z',
122
132
  hasTouchTarget: false,
123
133
  },
124
134
  {
@@ -128,7 +138,7 @@ const componentsMeta = [
128
138
  slug: 'checkbox-option',
129
139
  css: '',
130
140
  dependencies: ['Checkbox', 'ToggleOption'],
131
- modified: '2025-05-09T17:27:22.585Z',
141
+ modified: '2025-05-12T18:33:57.711Z',
132
142
  hasTouchTarget: false,
133
143
  },
134
144
  {
@@ -138,7 +148,7 @@ const componentsMeta = [
138
148
  slug: 'chip',
139
149
  css: "\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: fit-content;\n height: var(--spacing-sizing-06);\n padding: 0 var(--spacing-sizing-02);\n font: var(--labels-small);\n color: var(--foreground-neutral-on-surface-variant-01);\n background-color: var(--surface-neutral-t1-base);\n border: 1px solid var(--stroke-neutral-low);\n border-radius: var(--radius-small);\n\n &:not([data-flat]) {\n box-shadow: var(--drop-shadow-raise);\n }\n\n &[data-variant='filter'] {\n cursor: pointer;\n }\n\n &[data-wrap] {\n height: auto;\n }\n\n &[data-disabled] {\n color: var(--foreground-neutral-disabled-on-surface);\n cursor: not-allowed;\n border-color: var(--stroke-neutral-disabled-light);\n background-image: \n //\n\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &:not([data-disabled]) {\n &:hover {\n background-image: \n //\n\n linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &:active {\n background-image: \n //\n\n linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &:focus {\n outline: 1px solid var(--stroke-neutral-focus);\n border-color: var(--stroke-neutral-focus);\n }\n }\n\n &[data-selected] {\n background-color: var(--surface-brand-primary-highlight);\n border-color: var(--stroke-brand-primary);\n }\n",
140
150
  dependencies: [],
141
- modified: '2025-05-09T17:27:22.585Z',
151
+ modified: '2025-05-12T18:33:57.711Z',
142
152
  hasTouchTarget: false,
143
153
  },
144
154
  {
@@ -148,7 +158,7 @@ const componentsMeta = [
148
158
  slug: 'date-picker',
149
159
  css: '\n display: flex;\n',
150
160
  dependencies: [],
151
- modified: '2025-05-09T17:27:22.585Z',
161
+ modified: '2025-05-12T18:33:57.712Z',
152
162
  hasTouchTarget: false,
153
163
  },
154
164
  {
@@ -158,7 +168,7 @@ const componentsMeta = [
158
168
  slug: 'dialog',
159
169
  css: "\n position: fixed;\n inset: 0;\n z-index: var(--z-index-dialog);\n\n [data-dialog-box] {\n text-align: start;\n position: relative;\n border-radius: var(--radius-large);\n box-shadow: var(--drop-shadow-float);\n background: var(--surface-neutral-t1-base);\n color: var(--foreground-neutral-on-surface);\n max-height: calc(100vh - var(--spacing-sizing-24));\n overflow: scroll;\n z-index: 2;\n\n > :first-of-type {\n margin-top: 0;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n\n // we make the width responsive to the viewport\n @media (min-width: 640px) {\n width: 90%;\n }\n\n @media (min-width: 768px) {\n width: 80%;\n }\n\n @media (min-width: 1024px) {\n width: 60%;\n }\n\n @media (min-width: 1280px) {\n width: 50%;\n }\n }\n\n [data-dialog-backdrop] {\n z-index: 1;\n position: fixed;\n inset: 0;\n background-color: var(--background-scrim);\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n &[data-visibility='show'] {\n [data-dialog-backdrop] {\n opacity: 1;\n }\n }\n\n &[data-placement='center'] {\n display: flex;\n justify-content: center;\n align-items: center;\n\n [data-dialog-box] {\n transition: opacity 1s;\n opacity: 0;\n }\n\n &[data-visibility='show'] {\n [data-dialog-box] {\n opacity: 1;\n }\n }\n }\n\n &[data-placement='bottom'] {\n [data-dialog-box] {\n position: absolute;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n width: 600px;\n left: 50%;\n transform: translateX(-50%);\n bottom: -100vh;\n transition: bottom 0.3s;\n }\n\n &[data-visibility='show'] {\n [data-dialog-box] {\n bottom: 0;\n }\n }\n }\n\n &[data-placement='top'] {\n [data-dialog-box] {\n position: absolute;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n width: 600px;\n left: 50%;\n transform: translateX(-50%);\n top: -100vh;\n transition: top 0.3s;\n }\n\n &[data-visibility='show'] {\n [data-dialog-box] {\n top: 0;\n }\n }\n }\n\n &[data-placement='left'] {\n [data-dialog-box] {\n position: absolute;\n max-height: unset;\n width: 280px;\n height: 100vh;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n left: -100vw;\n transition: left 0.3s;\n }\n\n &[data-visibility='show'] {\n [data-dialog-box] {\n left: 0;\n }\n }\n }\n\n &[data-placement='right'] {\n [data-dialog-box] {\n position: absolute;\n max-height: unset;\n width: 280px;\n height: 100vh;\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n right: -100vw;\n transition: right 0.3s;\n }\n\n &[data-visibility='show'] {\n [data-dialog-box] {\n right: 0;\n }\n }\n }\n",
160
170
  dependencies: ['Portal'],
161
- modified: '2025-05-09T17:27:22.586Z',
171
+ modified: '2025-05-12T18:33:57.712Z',
162
172
  hasTouchTarget: false,
163
173
  },
164
174
  {
@@ -168,7 +178,7 @@ const componentsMeta = [
168
178
  slug: 'divider',
169
179
  css: "\n display: flex;\n background-color: var(--stroke-neutral-low);\n align-self: stretch;\n justify-content: stretch;\n margin: 0;\n padding: 0;\n align-content: stretch;\n content: 'hello';\n\n --length: calc(100% - var(--inset) * 2);\n\n &, // default\n &[data-thickness='light'] {\n --line-thickness: 1px;\n --padding: var(--spacing-sizing-02);\n }\n\n &[data-thickness='heavy'] {\n --line-thickness: 2px;\n --padding: var(--spacing-sizing-04);\n }\n\n &, // default\n &[data-orientation='horizontal'] {\n width: unset;\n min-height: unset;\n\n height: var(--line-thickness);\n min-width: var(--length);\n\n margin: var(--padding) var(--inset);\n }\n\n &[data-orientation='vertical'] {\n height: unset;\n min-width: unset;\n\n width: var(--line-thickness);\n min-height: var(--length);\n\n margin: var(--inset) var(--padding);\n }\n\n &[data-hide-padding] {\n //\n --padding: 0;\n }\n",
170
180
  dependencies: [],
171
- modified: '2025-05-09T17:27:22.586Z',
181
+ modified: '2025-05-12T18:33:57.712Z',
172
182
  hasTouchTarget: false,
173
183
  },
174
184
  {
@@ -178,7 +188,7 @@ const componentsMeta = [
178
188
  slug: 'drawer',
179
189
  css: '\n display: flex;\n',
180
190
  dependencies: [],
181
- modified: '2025-05-09T17:27:22.586Z',
191
+ modified: '2025-05-12T18:33:57.712Z',
182
192
  hasTouchTarget: false,
183
193
  },
184
194
  {
@@ -188,7 +198,7 @@ const componentsMeta = [
188
198
  slug: 'dropdown',
189
199
  css: "\n // default -- size medium not disabled or readonly\n --dropdown-background: var(--surface-neutral-t1-base);\n --dropdown-border-color: var(--stroke-neutral-base);\n --dropdown-text-color: var(--foreground-neutral-on-surface);\n --dropdown-height: var(--spacing-sizing-10);\n --dropdown-font: var(--body-base);\n --dropdown-clear-height: var(--spacing-sizing-05);\n --dropdown-padding: var(--spacing-sizing-03);\n --dropdown-icon-width: var(--spacing-sizing-05);\n\n position: relative;\n width: 100%;\n max-width: 280px;\n outline: unset;\n min-height: var(--dropdown-height);\n max-height: var(--dropdown-height);\n display: flex;\n flex-direction: row;\n gap: var(--spacing-sizing-02);\n flex-grow: 0;\n flex-shrink: 0;\n text-align: left;\n font: var(--dropdown-font);\n border: 1px solid var(--dropdown-border-color);\n border-radius: var(--radius-small);\n background: var(--dropdown-background);\n padding: 0 var(--dropdown-padding);\n\n [data-placeholder] {\n display: block;\n max-width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n padding: 0;\n\n [data-inner] {\n min-height: auto;\n padding: 0;\n }\n\n [data-item-label] [data-text] {\n color: var(--dropdown-text-color);\n }\n }\n\n [data-svg] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n svg {\n transform: rotate(90deg);\n width: var(--dropdown-icon-width);\n }\n }\n\n // &[data-size='medium'] {\n & {\n [data-svg] svg {\n }\n }\n\n &[data-size='small'] {\n --dropdown-height: var(--spacing-sizing-08);\n --dropdown-font: var(--body-small);\n --dropdown-clear-height: var(--spacing-sizing-05);\n --dropdown-padding: var(--spacing-sizing-02);\n --dropdown-icon-width: var(--spacing-sizing-05);\n }\n\n &[data-size='large'] {\n --dropdown-height: var(--spacing-sizing-12);\n --dropdown-font: var(--body-large);\n --dropdown-clear-height: var(--spacing-sizing-06);\n --dropdown-icon-width: var(--spacing-sizing-06);\n }\n\n &:disabled {\n --dropdown-text-color: var(--foreground-neutral-disabled-on-surface);\n --dropdown-border-color: var(--stroke-neutral-disabled-light);\n --dropdown-background:\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n\n &[aria-readonly]:not([data-empty]) {\n --dropdown-text-color: var(--foreground-neutral-on-surface);\n }\n }\n\n &:not(:disabled) {\n &:focus {\n --dropdown-border-color: var(--stroke-brand-primary);\n }\n\n &:hover {\n --dropdown-background:\n linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &:active {\n --dropdown-background:\n linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n }\n\n &[data-invalid] {\n --dropdown-border-color: var(--status-error);\n }\n\n &[data-empty] {\n --dropdown-text-color: var(--foreground-neutral-on-surface-variant-03);\n }\n",
190
200
  dependencies: ['ListItem', 'Menu', 'Portal'],
191
- modified: '2025-05-09T17:27:22.586Z',
201
+ modified: '2025-05-12T18:33:57.712Z',
192
202
  hasTouchTarget: false,
193
203
  },
194
204
  {
@@ -198,7 +208,7 @@ const componentsMeta = [
198
208
  slug: 'dropdown-field',
199
209
  css: '',
200
210
  dependencies: ['Dropdown', 'FormField'],
201
- modified: '2025-05-09T17:27:22.586Z',
211
+ modified: '2025-05-12T18:33:57.712Z',
202
212
  hasTouchTarget: false,
203
213
  },
204
214
  {
@@ -208,7 +218,7 @@ const componentsMeta = [
208
218
  slug: 'empty-state',
209
219
  css: '',
210
220
  dependencies: ['Button', 'Layout', 'Txt'],
211
- modified: '2025-05-09T17:27:22.586Z',
221
+ modified: '2025-05-12T18:33:57.713Z',
212
222
  hasTouchTarget: false,
213
223
  },
214
224
  {
@@ -218,7 +228,7 @@ const componentsMeta = [
218
228
  slug: 'fab',
219
229
  css: "\n --placement-offset: var(--spacing-sizing-04);\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-sizing-02);\n border: none;\n cursor: pointer;\n box-sizing: border-box;\n background: transparent;\n text-decoration: none;\n z-index: var(--z-index-fab);\n box-shadow: var(--drop-shadow-float);\n border-radius: var(--radius-small);\n\n &[data-container='page'] {\n position: fixed;\n }\n\n &[data-container='local'] {\n position: absolute;\n }\n\n &[data-placement='top-right'] {\n top: var(--placement-offset);\n right: var(--placement-offset);\n }\n\n &[data-placement='bottom-right'] {\n bottom: var(--placement-offset);\n right: var(--placement-offset);\n }\n\n &[data-placement='top-left'] {\n top: var(--placement-offset);\n left: var(--placement-offset);\n }\n\n &[data-placement='bottom-left'] {\n bottom: var(--placement-offset);\n left: var(--placement-offset);\n }\n\n > [data-fab-icon] {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n > [data-fab-label] {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n &[data-size='small'] {\n font: var(--labels-base);\n height: var(--spacing-sizing-10);\n padding: 0 var(--spacing-sizing-04);\n\n > [data-fab-icon] {\n width: var(--spacing-sizing-05);\n }\n }\n\n &[data-size='medium'] {\n font: var(--labels-large);\n height: var(--spacing-sizing-14);\n padding: 0 var(--spacing-sizing-07);\n\n > [data-fab-icon] {\n width: var(--spacing-sizing-06);\n }\n }\n\n &[data-variant='primary'] {\n --variant-background: var(--surface-brand-primary);\n --variant-foreground: var(--foreground-brand-on-primary);\n }\n\n &[data-variant='secondary'] {\n --variant-background: var(--surface-brand-secondary);\n --variant-foreground: var(--foreground-brand-on-secondary);\n }\n\n &[data-variant='neutral'] {\n --variant-background: var(--surface-neutral-t1-base);\n --variant-foreground: var(--foreground-neutral-on-surface-variant-01);\n }\n\n background: var(--variant-background);\n color: var(--variant-foreground);\n --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));\n\n [data-pseudo='hover'] > &,\n &:hover {\n background:\n linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),\n var(--variant-gradient);\n }\n\n [data-pseudo='active'] > &,\n &:active {\n background:\n linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),\n var(--variant-gradient);\n }\n\n [data-pseudo='focus'] > &,\n &:focus-visible {\n outline: solid 2px var(--stroke-neutral-focus);\n }\n\n &[data-round] {\n border-radius: var(--radius-circular);\n aspect-ratio: 1/1;\n padding: 0;\n }\n",
220
230
  dependencies: ['Button', 'Tooltip'],
221
- modified: '2025-05-09T17:27:22.586Z',
231
+ modified: '2025-05-12T18:33:57.713Z',
222
232
  hasTouchTarget: false,
223
233
  },
224
234
  {
@@ -228,7 +238,7 @@ const componentsMeta = [
228
238
  slug: 'file-upload',
229
239
  css: '\n display: flex;\n',
230
240
  dependencies: [],
231
- modified: '2025-05-09T17:27:22.586Z',
241
+ modified: '2025-05-12T18:33:57.713Z',
232
242
  hasTouchTarget: false,
233
243
  },
234
244
  {
@@ -238,7 +248,7 @@ const componentsMeta = [
238
248
  slug: 'form-field',
239
249
  css: '\n box-sizing: border-box;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sizing-01);\n\n header label {\n flex-grow: 1;\n }\n',
240
250
  dependencies: ['InlineAlert', 'Layout', 'Txt'],
241
- modified: '2025-05-09T17:27:22.586Z',
251
+ modified: '2025-05-12T18:33:57.713Z',
242
252
  hasTouchTarget: false,
243
253
  },
244
254
  {
@@ -248,7 +258,7 @@ const componentsMeta = [
248
258
  slug: 'image',
249
259
  css: '\n display: flex;\n',
250
260
  dependencies: [],
251
- modified: '2025-05-09T17:27:22.586Z',
261
+ modified: '2025-05-12T18:33:57.713Z',
252
262
  hasTouchTarget: false,
253
263
  },
254
264
  {
@@ -258,7 +268,7 @@ const componentsMeta = [
258
268
  slug: 'img',
259
269
  css: '',
260
270
  dependencies: [],
261
- modified: '2025-05-09T17:27:22.586Z',
271
+ modified: '2025-05-12T18:33:57.713Z',
262
272
  hasTouchTarget: false,
263
273
  },
264
274
  {
@@ -268,7 +278,7 @@ const componentsMeta = [
268
278
  slug: 'inline-alert',
269
279
  css: "\n display: flex;\n align-items: start;\n justify-content: center;\n flex-direction: row;\n gap: var(--spacing-sizing-02);\n\n [data-txt] {\n flex: 1;\n }\n\n &[data-variant='error'] {\n color: var(--status-error);\n --first-tone: var(--status-error);\n --second-tone: var(--status-on-information);\n }\n\n &[data-variant='success'] {\n color: var(--status-success);\n --first-tone: var(--status-success);\n --second-tone: var(--status-on-success);\n }\n\n &[data-variant='warning'] {\n color: var(--foreground-neutral-on-surface);\n --first-tone: var(--status-warning);\n --second-tone: var(--status-on-warning);\n }\n\n &[data-variant='informational'] {\n color: var(--status-information);\n --first-tone: var(--status-information);\n --second-tone: var(--status-on-information);\n }\n\n svg {\n color: var(--first-tone);\n width: var(--spacing-sizing-05);\n height: var(--spacing-sizing-05);\n\n [data-second-tone] {\n fill: var(--second-tone);\n }\n }\n",
270
280
  dependencies: ['Txt'],
271
- modified: '2025-05-09T17:27:22.586Z',
281
+ modified: '2025-05-12T18:33:57.714Z',
272
282
  hasTouchTarget: false,
273
283
  },
274
284
  {
@@ -278,7 +288,7 @@ const componentsMeta = [
278
288
  slug: 'layout',
279
289
  css: '',
280
290
  dependencies: [],
281
- modified: '2025-05-09T17:27:22.586Z',
291
+ modified: '2025-05-12T18:33:57.714Z',
282
292
  hasTouchTarget: false,
283
293
  },
284
294
  {
@@ -288,17 +298,17 @@ const componentsMeta = [
288
298
  slug: 'link',
289
299
  css: "\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-sizing-01);\n font: var(--labels-base);\n\n &[data-size='large'] {\n font: var(--labels-large);\n }\n\n &[data-size='small'] {\n font: var(--labels-small);\n }\n\n svg {\n width: var(--spacing-sizing-05);\n }\n",
290
300
  dependencies: [],
291
- modified: '2025-05-09T17:27:22.586Z',
301
+ modified: '2025-05-12T18:33:57.715Z',
292
302
  hasTouchTarget: false,
293
303
  },
294
304
  {
295
- description: 'A hybrid interactive component that is used frequently to organize content and offers a wide range of control and navigation in most experiences.\n\nWith its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.\n\nThe ListItem has three main elements: leading element, label, and trailing element.\n\nLeading elements may be one of the following [Icon](/icons), Img, Profile.\n\nTrailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.\n\nThe ListItemButton is a more limited Button with context specific options.',
305
+ description: 'A hybrid interactive component that is used frequently to organize content and offers a wide range of control and navigation in most experiences.\n\nWith its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.\n\nThe ListItem has three main elements: leading element, label, and trailing element.\n\nLeading elements may be one of the following [Icon](/icons), Img, Avatar.\n\nTrailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.\n\nThe ListItemButton is a more limited Button with context specific options.',
296
306
  file: '/ListItem.tsx',
297
307
  name: 'ListItem',
298
308
  slug: 'list-item',
299
309
  css: "\n display: block;\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--spacing-sizing-02);\n background: unset;\n border: unset;\n margin: unset;\n text-decoration: unset;\n user-select: none;\n color: var(--foreground-neutral-on-surface);\n\n &:is(a),\n &:is(button),\n &[onclick],\n &[role='button'] {\n cursor: pointer;\n }\n\n [data-inner] {\n height: 100%;\n width: 100%;\n min-height: var(--spacing-sizing-09);\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: var(--spacing-sizing-03);\n padding: var(--spacing-sizing-02) 0;\n justify-items: stretch;\n\n & > * {\n min-height: 100%;\n width: fit-content;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n flex: 1;\n flex-shrink: 0;\n\n svg {\n width: 24px;\n max-width: unset;\n }\n }\n }\n\n /* &:has(+ [data-list-item]) {\n [data-inner] {\n border-bottom: 1px solid var(--stroke-neutral-low);\n }\n } */\n\n &[data-action] {\n [data-pseudo='focus'] &,\n &:focus-visible,\n &:has(*:focus-visible) {\n //outline: 2px solid var(--stroke-neutral-focus);\n box-shadow: inset var(--stroke-neutral-focus) 0 0 0 2px;\n\n [data-inner] {\n border-color: transparent;\n }\n }\n }\n\n [data-component='Img'] > img {\n height: 36px;\n width: 36px;\n max-width: unset;\n }\n\n &:is(label) {\n [data-inner] {\n border-bottom: 0;\n gap: var(--spacing-sizing-02);\n }\n }\n\n [data-item-label] {\n flex: 100%;\n text-align: left;\n\n [data-text] {\n font: var(--labels-base);\n color: var(--foreground-neutral-on-surface);\n }\n\n [data-sub-text] {\n font: var(--body-small);\n color: var(--foreground-neutral-on-surface-variant-01);\n }\n }\n\n &[aria-disabled] {\n [data-text],\n [data-sub-text] {\n color: var(--foreground-neutral-disabled-on-surface);\n }\n }\n\n &[data-action] {\n [data-pseudo='hover'] &,\n &:hover {\n background-color: var(--interactions-neutral-hover-opacity);\n }\n\n [data-pseudo='active'] &,\n &[data-active],\n &:active {\n background-color: var(--interactions-neutral-press-opacity);\n }\n }\n",
300
310
  dependencies: ['Button'],
301
- modified: '2025-05-09T17:27:22.587Z',
311
+ modified: '2025-05-13T20:39:15.130Z',
302
312
  hasTouchTarget: false,
303
313
  },
304
314
  {
@@ -308,7 +318,7 @@ const componentsMeta = [
308
318
  slug: 'menu',
309
319
  css: '\n /** \n --item-count is set via inline style. :)\n */\n\n width: 332px;\n border: 1px solid var(--stroke-neutral-low);\n background-color: var(--surface-neutral-t1-base);\n box-shadow: var(--drop-shadow-float);\n border-radius: var(--radius-large);\n display: flex;\n flex-direction: column;\n\n --item-size: var(--spacing-sizing-12);\n\n &[data-floating] {\n z-index: var(--z-index-dropdown);\n }\n\n &[data-item-count] {\n height: calc(var(--item-count) * var(--item-size));\n overflow-y: scroll;\n }\n\n &[data-no-items] {\n padding: var(--spacing-sizing-08) var(--spacing-sizing-04);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-sizing-03);\n }\n\n [data-list-item] {\n min-height: var(--item-size);\n height: var(--item-size);\n }\n',
310
320
  dependencies: ['Checkbox', 'ListItem', 'Txt'],
311
- modified: '2025-05-09T17:27:22.587Z',
321
+ modified: '2025-05-12T18:33:57.715Z',
312
322
  hasTouchTarget: false,
313
323
  },
314
324
  {
@@ -318,7 +328,7 @@ const componentsMeta = [
318
328
  slug: 'menu-button',
319
329
  css: '\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n height: 48px;\n width: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding-top: var(--spacing-sizing-01);\n color: var(--foreground-neutral-on-surface-variant-01);\n',
320
330
  dependencies: ['Button'],
321
- modified: '2025-05-09T17:27:22.587Z',
331
+ modified: '2025-05-12T18:34:34.535Z',
322
332
  hasTouchTarget: false,
323
333
  },
324
334
  {
@@ -328,7 +338,7 @@ const componentsMeta = [
328
338
  slug: 'modal',
329
339
  css: '\n display: flex;\n flex-direction: column;\n overflow: hidden;\n gap: var(--spacing-sizing-02);\n padding: var(--spacing-sizing-04);\n\n > header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-sizing-04);\n }\n\n main {\n overflow: auto;\n flex: 1;\n }\n',
330
340
  dependencies: ['Button', 'Dialog', 'Txt'],
331
- modified: '2025-05-09T17:27:22.587Z',
341
+ modified: '2025-05-12T18:33:57.716Z',
332
342
  hasTouchTarget: false,
333
343
  },
334
344
  {
@@ -338,7 +348,7 @@ const componentsMeta = [
338
348
  slug: 'multi-selection',
339
349
  css: '\n display: flex;\n',
340
350
  dependencies: [],
341
- modified: '2025-05-09T17:27:22.587Z',
351
+ modified: '2025-05-12T18:33:57.716Z',
342
352
  hasTouchTarget: false,
343
353
  },
344
354
  {
@@ -348,7 +358,7 @@ const componentsMeta = [
348
358
  slug: 'navigation-rail',
349
359
  css: '\n display: flex;\n',
350
360
  dependencies: [],
351
- modified: '2025-05-09T17:27:22.587Z',
361
+ modified: '2025-05-12T18:33:57.717Z',
352
362
  hasTouchTarget: false,
353
363
  },
354
364
  {
@@ -358,7 +368,7 @@ const componentsMeta = [
358
368
  slug: 'number-field',
359
369
  css: '',
360
370
  dependencies: ['FormField', 'NumberInput'],
361
- modified: '2025-05-09T17:27:22.587Z',
371
+ modified: '2025-05-12T18:33:57.717Z',
362
372
  hasTouchTarget: false,
363
373
  },
364
374
  {
@@ -368,7 +378,7 @@ const componentsMeta = [
368
378
  slug: 'number-input',
369
379
  css: "\n // medium\n --font: var(--body-base);\n --height: var(--spacing-sizing-10);\n --svg-width: var(--spacing-sizing-05);\n --color: var(--foreground-neutral-on-surface);\n width: 100%;\n\n display: flex;\n flex-flow: row nowrap;\n font: var(--font);\n height: var(--height);\n border: 1px solid var(--stroke-neutral-base);\n border-radius: var(--radius-small);\n background: var(--surface-neutral-t1-base);\n\n &:focus-within {\n border-color: var(--stroke-brand-primary);\n outline: 1px solid var(--stroke-brand-primary);\n }\n\n [data-divider] {\n width: 4px;\n border-right: 1px solid var(--stroke-neutral-base);\n // account for border - 3(margin) * 2 + 2(border)\n height: calc(var(--height) - 8px);\n margin: 3px 0;\n }\n\n button {\n min-width: var(--height);\n background: none;\n border: none;\n cursor: pointer;\n font: var(--font);\n svg {\n width: var(--svg-width);\n }\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n\n &:disabled {\n cursor: not-allowed;\n color: var(--foreground-neutral-disabled-on-surface);\n }\n }\n\n input {\n color: var(--color);\n min-width: 0;\n display: block;\n font: var(--font);\n text-align: center;\n padding: 0 var(--spacing-sizing-03);\n background: transparent;\n border: none;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type='number'] {\n appearance: textfield;\n -moz-appearance: textfield;\n }\n }\n\n &:not([data-disabled], [data-readonly]) {\n input,\n button:not(:disabled) {\n &:hover {\n background-color: var(--interactions-hover-opacity);\n }\n\n &:active {\n background-color: var(--interactions-press-opacity);\n }\n }\n\n &[data-invalid] {\n border-color: var(--status-error);\n outline-color: var(--status-error);\n }\n }\n\n &[data-disabled],\n &[data-readonly] {\n --color: var(--foreground-neutral-disabled-on-surface);\n border-color: var(--stroke-neutral-disabled-light);\n background:\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n\n [data-divider] {\n border-color: var(--stroke-neutral-disabled-light);\n }\n }\n\n &[data-readonly] {\n input {\n color: var(--foreground-neutral-on-surface) !important;\n }\n }\n\n &[data-size='small'] {\n --font: var(--body-small);\n --height: var(--spacing-sizing-08);\n }\n\n &[data-size='large'] {\n --font: var(--body-large);\n --height: var(--spacing-sizing-12);\n --svg-width: var(--spacing-sizing-06);\n }\n",
370
380
  dependencies: [],
371
- modified: '2025-05-09T17:27:22.587Z',
381
+ modified: '2025-05-12T18:33:57.717Z',
372
382
  hasTouchTarget: false,
373
383
  },
374
384
  {
@@ -378,7 +388,7 @@ const componentsMeta = [
378
388
  slug: 'otp-input',
379
389
  css: '\n display: flex;\n',
380
390
  dependencies: [],
381
- modified: '2025-05-09T17:27:22.587Z',
391
+ modified: '2025-05-12T18:33:57.718Z',
382
392
  hasTouchTarget: false,
383
393
  },
384
394
  {
@@ -388,7 +398,7 @@ const componentsMeta = [
388
398
  slug: 'page-control',
389
399
  css: '\n display: flex;\n',
390
400
  dependencies: [],
391
- modified: '2025-05-09T17:27:22.587Z',
401
+ modified: '2025-05-12T18:33:57.718Z',
392
402
  hasTouchTarget: false,
393
403
  },
394
404
  {
@@ -398,7 +408,7 @@ const componentsMeta = [
398
408
  slug: 'password-input',
399
409
  css: '\n display: flex;\n',
400
410
  dependencies: [],
401
- modified: '2025-05-09T17:27:22.587Z',
411
+ modified: '2025-05-12T18:33:57.718Z',
402
412
  hasTouchTarget: false,
403
413
  },
404
414
  {
@@ -408,7 +418,7 @@ const componentsMeta = [
408
418
  slug: 'phone-number-input',
409
419
  css: '\n display: flex;\n',
410
420
  dependencies: [],
411
- modified: '2025-05-09T17:27:22.587Z',
421
+ modified: '2025-05-12T18:33:57.718Z',
412
422
  hasTouchTarget: false,
413
423
  },
414
424
  {
@@ -418,7 +428,7 @@ const componentsMeta = [
418
428
  slug: 'popover',
419
429
  css: "\n position: absolute;\n z-index: var(--z-index-tooltip-popover);\n background: var(--surface-neutral-t1-base);\n box-shadow: var(--drop-shadow-float);\n padding: var(--spacing-sizing-04);\n width: 300px;\n border-radius: var(--radius-large);\n display: flex;\n flex-direction: column;\n\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--spacing-sizing-02);\n gap: var(--spacing-sizing-04);\n\n button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n margin: 0 0 0 auto;\n color: var(--foreground-neutral-on-surface-variant-01);\n height: var(--spacing-sizing-06);\n width: var(--spacing-sizing-06);\n\n svg {\n width: var(--spacing-sizing-06);\n height: var(--spacing-sizing-06);\n }\n }\n }\n\n --arrow-size: var(--spacing-sizing-02);\n --arrow-offset: calc(var(--arrow-size) * -2);\n --arrow-background-color: var(--surface-neutral-t1-base);\n\n [data-arrow] {\n z-index: 1;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);\n border-color: transparent transparent transparent transparent;\n }\n\n &[data-placement^='top'] {\n [data-arrow] {\n bottom: var(--arrow-offset);\n border-top-color: var(--arrow-background-color);\n filter: drop-shadow(0 2px 1px var(--shadow-10));\n }\n }\n &[data-placement^='right'] {\n [data-arrow] {\n margin-left: calc(var(--arrow-offset) * 2);\n border-right-color: var(--arrow-background-color);\n filter: drop-shadow(-2px 0 1px var(--shadow-10));\n }\n }\n &[data-placement^='bottom'] {\n [data-arrow] {\n top: var(--arrow-offset);\n border-bottom-color: var(--arrow-background-color);\n filter: drop-shadow(0 -2px 1px var(--shadow-10));\n }\n }\n &[data-placement='bottom-start'] {\n [data-arrow] {\n margin-left: var(--arrow-offset);\n }\n }\n &[data-placement='bottom-end'] {\n [data-arrow] {\n margin-left: calc(var(--arrow-offset) * -1);\n }\n }\n &[data-placement^='left'] {\n [data-arrow] {\n right: var(--arrow-offset);\n border-left-color: var(--arrow-background-color);\n filter: drop-shadow(2px 0 1px var(--shadow-10));\n }\n }\n\n [data-content] {\n gap: var(--spacing-sizing-04);\n display: flex;\n flex-direction: column;\n }\n\n [data-call-to-action] {\n margin: 0 0 0 auto;\n /* background: none;\n border: none;\n cursor: pointer;\n padding: 0 var(--spacing-sizing-03);\n height: var(--spacing-sizing-12);\n font: var(--labels-small);\n color: var(--foreground-brand-primary); */\n }\n",
420
430
  dependencies: ['Button', 'Portal', 'Txt'],
421
- modified: '2025-05-09T17:27:22.587Z',
431
+ modified: '2025-05-12T18:33:57.719Z',
422
432
  hasTouchTarget: false,
423
433
  },
424
434
  {
@@ -428,17 +438,7 @@ const componentsMeta = [
428
438
  slug: 'portal',
429
439
  css: '',
430
440
  dependencies: [],
431
- modified: '2025-05-09T17:27:22.587Z',
432
- hasTouchTarget: false,
433
- },
434
- {
435
- description: 'A profile component.\n\nA profile is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an overflowCount.',
436
- file: '/Profile.tsx',
437
- name: 'Profile',
438
- slug: 'profile',
439
- css: "\n --height: var(--spacing-sizing-10);\n --font: var(--labels-base);\n --foreground: var(--foreground-neutral-on-surface);\n --background: var(--surface-neutral-t3-low);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0;\n height: var(--height);\n width: var(--height);\n aspect-ratio: 1 / 1;\n border-radius: 999px;\n background-color: var(--background);\n color: var(--foreground);\n font: var(--font);\n\n &:has(img) {\n overflow: hidden;\n }\n\n img {\n max-width: 100%;\n }\n\n \n &[data-size='x-small'] {\n --height: var(--spacing-sizing-06);\n --font: var(--labels-x-small);\n }\n \n &[data-size='small'] {\n --height: var(--spacing-sizing-08);\n --font: var(--labels-small);\n }\n \n &[data-size='medium'] {\n --height: var(--spacing-sizing-10);\n --font: var(--labels-base);\n }\n \n &[data-size='large'] {\n --height: var(--spacing-sizing-12);\n --font: var(--labels-large);\n }\n \n &[data-size='x-large'] {\n --height: var(--spacing-sizing-14);\n --font: var(--desktop-subheader-x-large);\n }\n \n &[data-size='xx-large'] {\n --height: var(--spacing-sizing-17);\n --font: var(--desktop-subheader-xx-large);\n }\n \n &[data-size='xxx-large'] {\n --height: var(--spacing-sizing-19);\n --font: var(--desktop-display-regular-small);\n }\n \n &[data-size='xxxx-large'] {\n --height: var(--spacing-sizing-21);\n --font: var(--desktop-display-regular-medium);\n }\n \n &[data-size='xxxxx-large'] {\n --height: var(--spacing-sizing-23);\n --font: var(--desktop-display-regular-large);\n }\n \n\n \n &[data-color='grey'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t2-lowest);\n }\n \n &[data-color='white'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t1-base);\n }\n \n &[data-color='primary'] {\n --foreground: var(--foreground-brand-primary-depth);\n --background: var(--surface-brand-primary-highlight);\n }\n \n &[data-color='secondary'] {\n --foreground: var(--foreground-brand-secondary-depth);\n --background: var(--surface-brand-secondary-highlight);\n }\n \n &[data-color='blue'] {\n --foreground: var(--foreground-spectrum-blue);\n --background: var(--surface-spectrum-blue);\n }\n \n &[data-color='green'] {\n --foreground: var(--foreground-spectrum-green);\n --background: var(--surface-spectrum-green);\n }\n \n &[data-color='lime'] {\n --foreground: var(--foreground-spectrum-lime);\n --background: var(--surface-spectrum-lime);\n }\n \n &[data-color='magenta'] {\n --foreground: var(--foreground-spectrum-magenta);\n --background: var(--surface-spectrum-magenta);\n }\n \n &[data-color='orange'] {\n --foreground: var(--foreground-spectrum-orange);\n --background: var(--surface-spectrum-orange);\n }\n \n &[data-color='pink'] {\n --foreground: var(--foreground-spectrum-pink);\n --background: var(--surface-spectrum-pink);\n }\n \n &[data-color='purple'] {\n --foreground: var(--foreground-spectrum-purple);\n --background: var(--surface-spectrum-purple);\n }\n \n &[data-color='red'] {\n --foreground: var(--foreground-spectrum-red);\n --background: var(--surface-spectrum-red);\n }\n \n &[data-color='teal'] {\n --foreground: var(--foreground-spectrum-teal);\n --background: var(--surface-spectrum-teal);\n }\n \n &[data-color='yellow'] {\n --foreground: var(--foreground-spectrum-yellow);\n --background: var(--surface-spectrum-yellow);\n }\n ;\n",
440
- dependencies: [],
441
- modified: '2025-05-09T17:27:22.587Z',
441
+ modified: '2025-05-12T18:33:57.719Z',
442
442
  hasTouchTarget: false,
443
443
  },
444
444
  {
@@ -448,7 +448,7 @@ const componentsMeta = [
448
448
  slug: 'progress-bar',
449
449
  css: "\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: var(--spacing-sizing-01);\n\n progress {\n opacity: 0;\n position: absolute;\n }\n\n [data-bar] {\n width: 100%;\n height: var(--spacing-sizing-02);\n background-color: var(--surface-neutral-t3-low);\n border-radius: var(--radius-small);\n\n &::after {\n content: '';\n display: block;\n height: 100%;\n background-color: var(--foreground-brand-primary);\n border-radius: var(--radius-small);\n width: var(--width);\n transition: width 0.3s;\n }\n }\n\n &[data-size='small'] {\n max-width: 248px;\n\n [data-bar] {\n height: var(--spacing-sizing-01);\n }\n }\n\n label {\n font-size: var(--labels-small);\n width: 100%;\n text-align: center;\n }\n\n &[data-align='left'] label {\n text-align: left;\n }\n",
450
450
  dependencies: [],
451
- modified: '2025-05-09T17:27:22.587Z',
451
+ modified: '2025-05-12T18:33:57.719Z',
452
452
  hasTouchTarget: false,
453
453
  },
454
454
  {
@@ -458,7 +458,7 @@ const componentsMeta = [
458
458
  slug: 'progress-circle',
459
459
  css: "\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sizing-02);\n align-items: center;\n justify-content: center;\n\n &[data-label-position='top'] {\n flex-direction: column-reverse;\n }\n\n &[data-label-position='left'] {\n flex-direction: row-reverse;\n }\n\n &[data-label-position='right'] {\n flex-direction: row;\n }\n\n svg {\n color: var(--foreground-brand-secondary);\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n 0% {\n transform: rotate(0deg);\n }\n }\n\n &[data-size='small'] {\n svg {\n width: 32px;\n }\n }\n\n &[data-size='medium'] {\n svg {\n width: 40px;\n }\n }\n\n &[data-size='large'] {\n svg {\n width: 48px;\n }\n }\n",
460
460
  dependencies: ['Txt'],
461
- modified: '2025-05-09T17:27:22.588Z',
461
+ modified: '2025-05-12T18:33:57.720Z',
462
462
  hasTouchTarget: false,
463
463
  },
464
464
  {
@@ -468,7 +468,7 @@ const componentsMeta = [
468
468
  slug: 'progression-stepper',
469
469
  css: "\n width: 100%;\n --circle-width: var(--spacing-sizing-09);\n\n --active-background-color: var(--surface-brand-primary);\n --active-foreground-color: var(--foreground-brand-on-primary);\n --inactive-background-color: var(--surface-neutral-t3-low);\n --inactive-foreground-color: var(--foreground-neutral-on-surface);\n\n ol {\n display: flex;\n width: 100%;\n margin: 0;\n padding: 0;\n\n li {\n display: flex;\n flex-direction: column;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--spacing-sizing-02);\n [data-line-circle] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n\n [data-line] {\n background-color: var(--inactive-background-color);\n height: 2px;\n flex-grow: 1;\n }\n\n [data-circle] {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--circle-width);\n height: var(--circle-width);\n border-radius: 50%;\n background-color: none;\n border: 2px solid var(--inactive-background-color);\n font: var(--labels-large);\n\n svg {\n display: none;\n width: var(--spacing-sizing-06);\n height: var(--spacing-sizing-06);\n }\n }\n }\n\n [data-content] {\n display: flex;\n padding: 0 var(--spacing-sizing-10);\n font: var(--body-small);\n }\n\n &:first-of-type {\n [data-line='before'] {\n visibility: hidden;\n }\n }\n\n &:last-of-type {\n [data-line='after'] {\n visibility: hidden;\n }\n }\n\n &[data-status='complete'] {\n [data-line] {\n background-color: var(--active-background-color);\n }\n [data-circle] {\n background-color: var(--active-background-color);\n border: 1px solid var(--active-background-color);\n color: var(--active-foreground-color);\n\n span {\n display: none;\n }\n svg {\n display: block;\n }\n }\n }\n\n &[data-status='current'] {\n [data-line='before'] {\n background-color: var(--active-background-color);\n }\n\n [data-circle] {\n border-color: var(--active-background-color);\n }\n }\n }\n }\n\n &[data-variant='vertical'] {\n ol {\n flex-direction: column;\n }\n\n li {\n flex-direction: row;\n\n [data-line-circle] {\n flex-direction: column;\n width: var(--circle-width);\n\n [data-line] {\n width: 2px;\n height: auto;\n }\n }\n [data-content] {\n flex-direction: column;\n padding: var(--spacing-sizing-10) 0;\n }\n }\n }\n\n &[data-variant='widget'] {\n --circle-width: var(--spacing-sizing-05);\n\n label {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sizing-02);\n margin-bottom: var(--spacing-sizing-03);\n font: var(--body-small);\n\n [data-title] {\n font: var(--labels-base);\n color: var(--foreground-neutral-on-surface);\n }\n\n [data-subtitle] {\n font: var(--body-x-small);\n color: var(--foreground-neutral-on-surface-variant-02);\n }\n }\n\n ol {\n align-items: center;\n min-height: var(--spacing-sizing-09);\n\n li {\n [data-line-circle] {\n [data-line] {\n width: 10px;\n }\n }\n\n &[data-status='current'] {\n --circle-width: var(--spacing-sizing-09);\n }\n\n &[data-status='incomplete'] {\n [data-circle] {\n span {\n display: none;\n }\n }\n }\n }\n }\n }\n",
470
470
  dependencies: [],
471
- modified: '2025-05-09T17:27:22.588Z',
471
+ modified: '2025-05-12T18:33:57.720Z',
472
472
  hasTouchTarget: false,
473
473
  },
474
474
  {
@@ -478,7 +478,7 @@ const componentsMeta = [
478
478
  slug: 'progression-stepper-bar',
479
479
  css: "\n &[data-size='large'] {\n --height: var(--spacing-sizing-02);\n }\n\n &[data-size='small'] {\n --height: var(--spacing-sizing-01);\n }\n\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: var(--spacing-sizing-01);\n\n [data-steps] {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-sizing-01);\n height: var(--height);\n [data-step] {\n width: 100%;\n height: var(--height);\n min-width: var(--spacing-sizing-02);\n border-radius: var(--radius-small);\n background: var(--surface-neutral-t3-low);\n &[data-complete] {\n background: var(--surface-brand-primary);\n }\n }\n }\n\n label {\n font: var(--labels-small);\n }\n",
480
480
  dependencies: [],
481
- modified: '2025-05-09T17:27:22.588Z',
481
+ modified: '2025-05-12T18:33:57.720Z',
482
482
  hasTouchTarget: false,
483
483
  },
484
484
  {
@@ -488,7 +488,7 @@ const componentsMeta = [
488
488
  slug: 'radio',
489
489
  css: "\n display: block;\n position: relative;\n width: var(--spacing-sizing-06);\n aspect-ratio: 1/1;\n padding: 2px;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n cursor: pointer;\n }\n\n span {\n --stroke: var(--stroke-neutral-base);\n --inner: var(--foreground-brand-primary);\n --background: none;\n position: relative;\n z-index: 1;\n box-sizing: border-box;\n display: flex;\n width: var(--spacing-sizing-05);\n aspect-ratio: 1/1;\n border-radius: 50%;\n border: 2px solid var(--stroke);\n align-items: center;\n flex-direction: column;\n justify-content: center;\n background: var(--background);\n\n &:before {\n content: '';\n display: block;\n width: var(--spacing-sizing-03);\n aspect-ratio: 1/1;\n background: var(--inner);\n border-radius: var(--radius-circular);\n opacity: 0;\n }\n }\n\n input[type='radio']:not(:disabled) {\n &:hover + span {\n --background: var(--interactions-neutral-hover-opacity);\n }\n\n &:active + span {\n --background: var(--interactions-neutral-press-opacity);\n }\n\n &[data-invalid] + span {\n --stroke: var(--status-error);\n --inner: var(--status-error);\n }\n }\n\n input[type='radio']:checked + span {\n --stroke: var(--stroke-brand-primary);\n\n &:before {\n opacity: 1;\n }\n }\n\n input[type='radio']:disabled {\n pointer-events: none;\n\n & + span {\n --stroke: var(--stroke-neutral-interactions-disabled-light);\n --inner: var(--foreground-neutral-disabled-on-surface);\n }\n }\n",
490
490
  dependencies: [],
491
- modified: '2025-05-09T17:27:22.588Z',
491
+ modified: '2025-05-12T18:33:57.721Z',
492
492
  hasTouchTarget: false,
493
493
  },
494
494
  {
@@ -498,7 +498,7 @@ const componentsMeta = [
498
498
  slug: 'radio-group',
499
499
  css: '',
500
500
  dependencies: ['Radio', 'ToggleOption'],
501
- modified: '2025-05-09T17:27:22.588Z',
501
+ modified: '2025-05-12T18:33:57.721Z',
502
502
  hasTouchTarget: false,
503
503
  },
504
504
  {
@@ -508,7 +508,7 @@ const componentsMeta = [
508
508
  slug: 'radio-option',
509
509
  css: '',
510
510
  dependencies: ['Radio', 'ToggleOption'],
511
- modified: '2025-05-09T17:27:22.588Z',
511
+ modified: '2025-05-12T18:33:57.721Z',
512
512
  hasTouchTarget: false,
513
513
  },
514
514
  {
@@ -518,7 +518,7 @@ const componentsMeta = [
518
518
  slug: 'rating',
519
519
  css: '\n display: flex;\n',
520
520
  dependencies: [],
521
- modified: '2025-05-09T17:27:22.588Z',
521
+ modified: '2025-05-12T18:33:57.721Z',
522
522
  hasTouchTarget: false,
523
523
  },
524
524
  {
@@ -528,7 +528,7 @@ const componentsMeta = [
528
528
  slug: 'search-bar',
529
529
  css: '\n display: flex;\n width: 100%;\n min-width: 300px;\n',
530
530
  dependencies: ['Menu', 'Portal', 'TextInput'],
531
- modified: '2025-05-09T17:27:22.588Z',
531
+ modified: '2025-05-12T18:33:57.721Z',
532
532
  hasTouchTarget: false,
533
533
  },
534
534
  {
@@ -538,7 +538,7 @@ const componentsMeta = [
538
538
  slug: 'segmented-control',
539
539
  css: "\n display: flex;\n flex-direction: row;\n max-width: 100%;\n --outer-height: var(--spacing-sizing-10);\n --inner-height: var(--spacing-sizing-08);\n --svg-width: 20px;\n\n &[data-width='fill'] {\n align-items: stretch;\n width: 100%;\n --btn-flex-grow: 1;\n margin: 0 var(--spacing-sizing-04);\n }\n\n &[data-width='hug'] {\n width: fit-content;\n --btn-flex-grow: 0;\n }\n\n &[data-size='small'] {\n --outer-height: var(--spacing-sizing-08);\n --inner-height: var(--spacing-sizing-06);\n --svg-width: 16px;\n }\n\n svg {\n width: var(--svg-width) !important;\n }\n\n button {\n border: 0;\n cursor: pointer;\n color: var(--foreground-neutral-on-surface);\n flex-grow: var(--btn-flex-grow);\n font: var(--labels-small);\n margin: 0;\n height: var(--spacing-sizing-12);\n background: transparent;\n position: relative;\n\n [data-focus-ring] {\n display: none;\n }\n\n [data-outer] {\n height: var(--outer-height);\n background: var(--surface-neutral-t3-low);\n margin: var(--spacing-sizing-01) 0;\n padding: var(--spacing-sizing-01) 0;\n display: block;\n }\n\n [data-inner] {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: var(--inner-height);\n border-bottom: 1px solid transparent;\n justify-content: center;\n gap: var(--spacing-sizing-01);\n border-radius: var(--radius-small);\n padding: var(--spacing-sizing-02) var(--spacing-sizing-03);\n }\n\n &:first-of-type {\n [data-outer] {\n border-top-left-radius: var(--radius-medium);\n border-bottom-left-radius: var(--radius-medium);\n padding-left: var(--spacing-sizing-01);\n }\n }\n\n &:last-of-type {\n [data-outer] {\n border-top-right-radius: var(--radius-medium);\n border-bottom-right-radius: var(--radius-medium);\n padding-right: var(--spacing-sizing-01);\n }\n }\n\n &:not(:disabled) {\n &:hover {\n [data-inner] {\n background: var(--interactions-neutral-hover-opacity);\n }\n }\n\n &:active {\n [data-inner] {\n background: var(--interactions-neutral-press-opacity);\n }\n }\n\n &[data-selected] {\n [data-inner] {\n background: var(--surface-neutral-t1-base);\n }\n }\n\n &:focus-visible {\n z-index: 2;\n outline: solid 2px var(--stroke-neutral-focus);\n }\n }\n\n &:disabled {\n pointer-events: none;\n color: var(--foreground-neutral-disabled-on-surface);\n cursor: not-allowed;\n }\n }\n",
540
540
  dependencies: ['Tooltip'],
541
- modified: '2025-05-09T17:27:22.588Z',
541
+ modified: '2025-05-12T18:33:57.722Z',
542
542
  hasTouchTarget: false,
543
543
  },
544
544
  {
@@ -548,7 +548,7 @@ const componentsMeta = [
548
548
  slug: 'skeleton',
549
549
  css: '\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--margin);\n\n animation: skeleton-pulse 1.5s infinite;\n @keyframes skeleton-pulse {\n 0% {\n opacity: 0.8;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 0.8;\n }\n }\n\n &:empty {\n width: auto;\n height: auto;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--foreground-neutral-skeleton-element);\n border-radius: var(--radius-small);\n }\n\n [data-line] {\n width: 100%;\n background: var(--foreground-neutral-skeleton-element);\n border-radius: var(--radius-small);\n height: var(--height);\n }\n',
550
550
  dependencies: [],
551
- modified: '2025-05-09T17:27:22.588Z',
551
+ modified: '2025-05-12T18:33:57.722Z',
552
552
  hasTouchTarget: false,
553
553
  },
554
554
  {
@@ -558,7 +558,7 @@ const componentsMeta = [
558
558
  slug: 'slider-input',
559
559
  css: '\n display: flex;\n',
560
560
  dependencies: [],
561
- modified: '2025-05-09T17:27:22.588Z',
561
+ modified: '2025-05-12T18:33:57.722Z',
562
562
  hasTouchTarget: false,
563
563
  },
564
564
  {
@@ -568,7 +568,7 @@ const componentsMeta = [
568
568
  slug: 'snackbar',
569
569
  css: '\n display: flex;\n',
570
570
  dependencies: [],
571
- modified: '2025-05-09T17:27:22.588Z',
571
+ modified: '2025-05-12T18:33:57.722Z',
572
572
  hasTouchTarget: false,
573
573
  },
574
574
  {
@@ -578,7 +578,7 @@ const componentsMeta = [
578
578
  slug: 'styles-provider-anywhere',
579
579
  css: '',
580
580
  dependencies: [],
581
- modified: '2025-05-09T17:27:22.588Z',
581
+ modified: '2025-05-12T18:33:57.722Z',
582
582
  hasTouchTarget: false,
583
583
  },
584
584
  {
@@ -588,7 +588,7 @@ const componentsMeta = [
588
588
  slug: 'styles-provider-better-homes-gardens',
589
589
  css: '',
590
590
  dependencies: [],
591
- modified: '2025-05-09T17:27:22.589Z',
591
+ modified: '2025-05-12T18:33:57.722Z',
592
592
  hasTouchTarget: false,
593
593
  },
594
594
  {
@@ -598,7 +598,7 @@ const componentsMeta = [
598
598
  slug: 'styles-provider-cartus',
599
599
  css: '',
600
600
  dependencies: [],
601
- modified: '2025-05-09T17:27:22.589Z',
601
+ modified: '2025-05-12T18:33:57.722Z',
602
602
  hasTouchTarget: false,
603
603
  },
604
604
  {
@@ -608,7 +608,7 @@ const componentsMeta = [
608
608
  slug: 'styles-provider-century21',
609
609
  css: '',
610
610
  dependencies: [],
611
- modified: '2025-05-09T17:27:22.589Z',
611
+ modified: '2025-05-12T18:33:57.722Z',
612
612
  hasTouchTarget: false,
613
613
  },
614
614
  {
@@ -618,7 +618,7 @@ const componentsMeta = [
618
618
  slug: 'styles-provider-coldwell-banker',
619
619
  css: '',
620
620
  dependencies: [],
621
- modified: '2025-05-09T17:27:22.589Z',
621
+ modified: '2025-05-12T18:33:57.723Z',
622
622
  hasTouchTarget: false,
623
623
  },
624
624
  {
@@ -628,7 +628,7 @@ const componentsMeta = [
628
628
  slug: 'styles-provider-corcoran',
629
629
  css: '',
630
630
  dependencies: [],
631
- modified: '2025-05-09T17:27:22.589Z',
631
+ modified: '2025-05-12T18:33:57.723Z',
632
632
  hasTouchTarget: false,
633
633
  },
634
634
  {
@@ -638,7 +638,7 @@ const componentsMeta = [
638
638
  slug: 'styles-provider-denali-boss',
639
639
  css: '',
640
640
  dependencies: [],
641
- modified: '2025-05-09T17:27:22.589Z',
641
+ modified: '2025-05-12T18:33:57.723Z',
642
642
  hasTouchTarget: false,
643
643
  },
644
644
  {
@@ -648,7 +648,7 @@ const componentsMeta = [
648
648
  slug: 'styles-provider-era',
649
649
  css: '',
650
650
  dependencies: [],
651
- modified: '2025-05-09T17:27:22.589Z',
651
+ modified: '2025-05-12T18:33:57.723Z',
652
652
  hasTouchTarget: false,
653
653
  },
654
654
  {
@@ -658,7 +658,7 @@ const componentsMeta = [
658
658
  slug: 'styles-provider-sothebys',
659
659
  css: '',
660
660
  dependencies: [],
661
- modified: '2025-05-09T17:27:22.589Z',
661
+ modified: '2025-05-12T18:33:57.723Z',
662
662
  hasTouchTarget: false,
663
663
  },
664
664
  {
@@ -668,7 +668,7 @@ const componentsMeta = [
668
668
  slug: 'switch',
669
669
  css: "\n --track-width: var(--spacing-sizing-09);\n --toggle-width: var(--spacing-sizing-04);\n --track-bg: var(--surface-neutral-t4-high);\n --toggle-bg: var(--foreground-neutral-on-color);\n\n display: block;\n position: relative;\n box-sizing: border-box;\n margin: 2px;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 2;\n cursor: pointer;\n }\n\n box-sizing: border-box;\n width: var(--track-width);\n height: var(--spacing-sizing-05);\n border-radius: var(--spacing-sizing-05);\n background-color: var(--track-bg);\n position: relative;\n z-index: 1;\n\n span {\n display: block;\n width: var(--toggle-width);\n height: var(--toggle-width);\n border-radius: var(--radius-circular);\n background-color: var(--toggle-bg);\n transition: left 0.2s;\n box-shadow: var(--drop-shadow-raise);\n left: 2px;\n top: 2px;\n position: absolute;\n }\n\n &:has(input[type='checkbox']:checked) {\n --track-bg: var(--foreground-brand-primary);\n\n span {\n left: calc(var(--track-width) - var(--toggle-width) - 2px);\n }\n }\n\n &:has(input[type='checkbox']:disabled) {\n input[type='checkbox'] {\n pointer-events: none;\n }\n --track-bg: var(--interactions-disabled-opacity);\n --toggle-bg: var(--foreground-neutral-disabled-on-surface);\n\n &:has(input[type='checkbox']:checked) span {\n --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);\n }\n }\n",
670
670
  dependencies: [],
671
- modified: '2025-05-09T17:27:22.589Z',
671
+ modified: '2025-05-12T18:33:57.723Z',
672
672
  hasTouchTarget: false,
673
673
  },
674
674
  {
@@ -678,7 +678,7 @@ const componentsMeta = [
678
678
  slug: 'switch-group',
679
679
  css: '',
680
680
  dependencies: ['Switch', 'ToggleOption'],
681
- modified: '2025-05-09T17:27:22.589Z',
681
+ modified: '2025-05-12T18:33:57.724Z',
682
682
  hasTouchTarget: false,
683
683
  },
684
684
  {
@@ -688,7 +688,7 @@ const componentsMeta = [
688
688
  slug: 'switch-option',
689
689
  css: '',
690
690
  dependencies: ['Switch', 'ToggleOption'],
691
- modified: '2025-05-09T17:27:22.589Z',
691
+ modified: '2025-05-12T18:33:57.724Z',
692
692
  hasTouchTarget: false,
693
693
  },
694
694
  {
@@ -698,7 +698,7 @@ const componentsMeta = [
698
698
  slug: 'tab-group',
699
699
  css: "\n display: flex;\n flex-direction: row;\n width: fit-content;\n --btn-flex-grow: 0;\n border-bottom: 1px solid var(--stroke-neutral-low);\n width: 100%;\n\n &[data-width='fill'] {\n align-items: stretch;\n width: 100%;\n --btn-flex-grow: 1;\n }\n\n --font: var(--labels-base);\n --height: var(--spacing-sizing-10);\n\n &[data-size='small'] {\n --font: var(--labels-small);\n --height: var(--spacing-sizing-08);\n }\n\n &[data-size='large'] {\n --font: var(--labels-large);\n --height: var(--spacing-sizing-12);\n }\n\n button {\n border: 0;\n cursor: pointer;\n color: var(--foreground-neutral-on-surface-variant-02);\n background: none;\n flex-grow: var(--btn-flex-grow);\n font: var(--font);\n\n &:hover {\n background: var(--interactions-neutral-hover-opacity);\n }\n\n &:active {\n background: var(--interactions-neutral-press-opacity);\n }\n\n &:disabled {\n pointer-events: none;\n color: var(--foreground-neutral-disabled-on-surface);\n }\n\n &:focus-visible {\n outline: solid 2px var(--stroke-neutral-focus);\n }\n\n span {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0 var(--spacing-sizing-04);\n height: var(--height);\n justify-content: center;\n position: relative;\n gap: var(--spacing-sizing-02);\n\n svg {\n width: var(--spacing-sizing-05);\n }\n }\n\n &[data-active] {\n color: var(--foreground-brand-primary);\n span {\n &:after {\n content: '';\n display: block;\n width: 100%;\n height: 2px;\n background-color: var(--stroke-brand-primary);\n bottom: -1px;\n position: absolute;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n\n svg {\n color: var(--surface-brand-primary);\n }\n }\n }\n }\n\n &[data-hide-trail] {\n border-bottom: none;\n button {\n border-bottom: 1px solid var(--stroke-neutral-low);\n }\n }\n",
700
700
  dependencies: ['Badge'],
701
- modified: '2025-05-09T17:27:22.589Z',
701
+ modified: '2025-05-12T18:33:57.724Z',
702
702
  hasTouchTarget: false,
703
703
  },
704
704
  {
@@ -708,7 +708,7 @@ const componentsMeta = [
708
708
  slug: 'table',
709
709
  css: "\n width: 100%;\n border-collapse: separate;\n text-align: left;\n border-spacing: 2rem 0.125rem;\n display: grid;\n color: var(--foreground-neutral-on-surface);\n font: var(--labels-base);\n border-radius: var(--radius-medium);\n border: 1px solid var(--stroke-neutral-low);\n\n [data-cell] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sizing-02);\n padding: var(--spacing-sizing-04);\n background-color: var(--surface-neutral-t1-base);\n border-bottom: var(--stroke-neutral-low) solid 1px;\n font: var(--labels-small);\n p {\n margin: 0;\n padding: 0;\n font: var(--body-small);\n }\n }\n\n [data-head] {\n display: flex;\n align-items: center;\n flex-direction: row;\n border-bottom: 1px solid var(--stroke-neutral-base);\n background: var(--surface-neutral-t2-lowest);\n height: var(--spacing-sizing-10);\n padding: 0 var(--spacing-sizing-03);\n font: var(--labels-base);\n\n &[data-head='first'] {\n border-top-left-radius: var(--radius-medium);\n }\n\n &[data-head='last'] {\n border-top-right-radius: var(--radius-medium);\n }\n }\n",
710
710
  dependencies: [],
711
- modified: '2025-05-09T17:27:22.589Z',
711
+ modified: '2025-05-12T18:33:57.725Z',
712
712
  hasTouchTarget: false,
713
713
  },
714
714
  {
@@ -718,7 +718,7 @@ const componentsMeta = [
718
718
  slug: 'tag',
719
719
  css: "\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: fit-content;\n position: relative;\n padding: 0 var(--spacing-sizing-03);\n border-radius: var(--radius-small);\n color: var(--foreground) !important;\n background: var(--background);\n text-decoration: none;\n font: unset;\n text-decoration: unset;\n white-space: nowrap;\n\n &[data-wrap] {\n height: auto;\n }\n\n &[data-variant='pill'] {\n border-radius: var(--radius-circular);\n }\n\n &[data-variant='corner-wrap'] {\n border-bottom-right-radius: 0;\n }\n\n \n &[data-color='grey'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t2-lowest);\n }\n \n &[data-color='white'] {\n --foreground: var(--foreground-neutral-on-surface-variant-01);\n --background: var(--surface-neutral-t1-base);\n }\n \n &[data-color='primary'] {\n --foreground: var(--foreground-brand-primary-depth);\n --background: var(--surface-brand-primary-highlight);\n }\n \n &[data-color='secondary'] {\n --foreground: var(--foreground-brand-secondary-depth);\n --background: var(--surface-brand-secondary-highlight);\n }\n \n &[data-color='blue'] {\n --foreground: var(--foreground-spectrum-blue);\n --background: var(--surface-spectrum-blue);\n }\n \n &[data-color='green'] {\n --foreground: var(--foreground-spectrum-green);\n --background: var(--surface-spectrum-green);\n }\n \n &[data-color='lime'] {\n --foreground: var(--foreground-spectrum-lime);\n --background: var(--surface-spectrum-lime);\n }\n \n &[data-color='magenta'] {\n --foreground: var(--foreground-spectrum-magenta);\n --background: var(--surface-spectrum-magenta);\n }\n \n &[data-color='orange'] {\n --foreground: var(--foreground-spectrum-orange);\n --background: var(--surface-spectrum-orange);\n }\n \n &[data-color='pink'] {\n --foreground: var(--foreground-spectrum-pink);\n --background: var(--surface-spectrum-pink);\n }\n \n &[data-color='purple'] {\n --foreground: var(--foreground-spectrum-purple);\n --background: var(--surface-spectrum-purple);\n }\n \n &[data-color='red'] {\n --foreground: var(--foreground-spectrum-red);\n --background: var(--surface-spectrum-red);\n }\n \n &[data-color='teal'] {\n --foreground: var(--foreground-spectrum-teal);\n --background: var(--surface-spectrum-teal);\n }\n \n &[data-color='yellow'] {\n --foreground: var(--foreground-spectrum-yellow);\n --background: var(--surface-spectrum-yellow);\n }\n \n\n &[data-size='small'] {\n font: var(--labels-small);\n height: var(--spacing-sizing-08);\n }\n\n &[data-size='x-small'] {\n font: var(--labels-x-small);\n height: var(--spacing-sizing-06);\n }\n\n &[data-color='white'] {\n box-shadow: var(--drop-shadow-south);\n }\n\n [data-triangle] {\n position: absolute;\n bottom: -12px;\n right: 0;\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 12px 12px 0 0;\n border-color: var(--foreground) transparent transparent transparent;\n transform: rotate(0deg);\n }\n",
720
720
  dependencies: [],
721
- modified: '2025-05-09T17:27:22.589Z',
721
+ modified: '2025-05-12T18:33:57.725Z',
722
722
  hasTouchTarget: false,
723
723
  },
724
724
  {
@@ -728,7 +728,7 @@ const componentsMeta = [
728
728
  slug: 'textarea',
729
729
  css: "\n display: grid;\n width: 100%;\n\n // &[data-size='medium']\n --font: var(--body-base);\n --line-height: 20px;\n --padding: var(--spacing-sizing-03);\n\n &[data-size='small'] {\n --font: var(--body-small);\n --line-height: 20px;\n --padding: var(--spacing-sizing-02);\n }\n\n &[data-size='large'] {\n --font: var(--body-large);\n --line-height: 24px;\n --padding: var(--spacing-sizing-03);\n }\n\n [data-replicated-value] {\n white-space: pre-wrap;\n visibility: hidden;\n }\n\n textarea,\n [data-replicated-value] {\n width: 100%;\n font: var(--font);\n border: 1px solid var(--border-color);\n padding: var(--padding);\n grid-area: 1 / 1 / 2 / 2;\n min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));\n max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));\n }\n\n textarea {\n --border-color: var(--stroke-neutral-base);\n\n resize: vertical;\n color: var(--foreground-neutral-on-surface);\n background-color: var(--surface-neutral-t1-base);\n border-radius: var(--radius-small);\n\n &:focus-within {\n --border-color: var(--stroke-neutral-focus);\n outline: none;\n color: var(--foreground-neutral-on-surface);\n }\n\n &:disabled {\n pointer-events: none;\n background: \n // multiple colors\n\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n color: var(--foreground-neutral-disabled-on-surface);\n }\n\n &:read-only {\n background: \n // multiple colors\n\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n color: var(--foreground-neutral-on-surface-variant-02);\n cursor: not-allowed;\n }\n\n &[aria-invalid] {\n --border-color: var(--status-error);\n }\n }\n",
730
730
  dependencies: [],
731
- modified: '2025-05-09T17:27:22.590Z',
731
+ modified: '2025-05-12T18:33:57.725Z',
732
732
  hasTouchTarget: false,
733
733
  },
734
734
  {
@@ -738,7 +738,7 @@ const componentsMeta = [
738
738
  slug: 'textarea-field',
739
739
  css: '',
740
740
  dependencies: ['FormField', 'Textarea', 'Txt'],
741
- modified: '2025-05-09T17:27:22.590Z',
741
+ modified: '2025-05-12T18:33:57.725Z',
742
742
  hasTouchTarget: false,
743
743
  },
744
744
  {
@@ -748,7 +748,7 @@ const componentsMeta = [
748
748
  slug: 'text-field',
749
749
  css: '',
750
750
  dependencies: ['FormField', 'TextInput'],
751
- modified: '2025-05-09T17:27:22.589Z',
751
+ modified: '2025-05-12T18:33:57.725Z',
752
752
  hasTouchTarget: false,
753
753
  },
754
754
  {
@@ -758,7 +758,7 @@ const componentsMeta = [
758
758
  slug: 'text-input',
759
759
  css: "\n --border-color: var(--stroke-neutral-base);\n display: flex;\n flex-direction: row;\n background-color: var(--surface-neutral-t1-base);\n border: solid 1px var(--border-color);\n height: var(--field-height);\n border-radius: var(--radius-small);\n padding: 0 var(--field-padding);\n gap: var(--spacing-sizing-01);\n flex-wrap: nowrap;\n width: 100%;\n\n &:focus-within {\n --border-color: var(--stroke-brand-primary);\n }\n\n & > * {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--field-height);\n font: var(--field-font);\n color: var(--foreground-neutral-on-surface);\n min-width: 0;\n }\n\n &:hover:not(:focus-within) {\n background: \n // multiple colors\n\n linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &:active:not(:focus-within) {\n background: \n // multiple colors\n\n linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &[data-readonly] {\n --border-color: var(--stroke-neutral-disabled-light);\n\n background: \n // multiple colors\n\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n }\n\n &[data-disabled] {\n --border-color: var(--stroke-neutral-disabled-light);\n\n background:\n // multiple colors\n\n linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),\n linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));\n\n & > * {\n color: var(--foreground-neutral-disabled-on-surface);\n }\n }\n\n &[data-invalid] {\n --border-color: var(--status-error);\n }\n\n &[data-size='small'] {\n --field-padding: var(--spacing-sizing-02);\n --field-height: var(--spacing-sizing-08);\n --field-font: var(--body-small);\n --field-icon-width: var(--spacing-sizing-04);\n --field-clear-width: var(--spacing-sizing-05);\n }\n\n &[data-size='medium'] {\n --field-padding: var(--spacing-sizing-03);\n --field-height: var(--spacing-sizing-10);\n --field-font: var(--body-base);\n --field-icon-width: var(--spacing-sizing-05);\n --field-clear-width: var(--spacing-sizing-05);\n }\n\n &[data-size='large'] {\n --field-padding: var(--spacing-sizing-03);\n --field-height: var(--spacing-sizing-12);\n --field-font: var(--body-large);\n --field-icon-width: var(--spacing-sizing-06);\n --field-clear-width: var(--spacing-sizing-06);\n }\n\n [data-leading],\n [data-trailing] {\n svg {\n width: var(--field-icon-width);\n }\n }\n\n label {\n font: var(--labels-small);\n color: var(--foreground-neutral-on-surface-variant-01);\n }\n\n input {\n flex: 1;\n background-color: transparent !important;\n border: none;\n outline: none;\n padding: 0;\n pointer-events: all;\n text-overflow: ellipsis;\n\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n display: none;\n }\n }\n\n button[data-clear] {\n display: none;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n pointer-events: all;\n margin-left: var(--spacing-sizing-02);\n padding-right: var(--field-padding);\n\n svg {\n pointer-events: none;\n width: var(--field-clear-width);\n }\n }\n\n &:focus-within {\n button[data-clear] {\n display: flex;\n }\n }\n\n &:has(button[data-clear]) {\n padding-right: 0;\n }\n",
760
760
  dependencies: [],
761
- modified: '2025-05-09T17:27:22.590Z',
761
+ modified: '2025-05-12T18:33:57.725Z',
762
762
  hasTouchTarget: false,
763
763
  },
764
764
  {
@@ -768,7 +768,7 @@ const componentsMeta = [
768
768
  slug: 'time-picker',
769
769
  css: '\n display: flex;\n',
770
770
  dependencies: [],
771
- modified: '2025-05-09T17:27:22.590Z',
771
+ modified: '2025-05-12T18:33:57.726Z',
772
772
  hasTouchTarget: false,
773
773
  },
774
774
  {
@@ -778,7 +778,7 @@ const componentsMeta = [
778
778
  slug: 'toggle-option',
779
779
  css: "\n display: flex;\n width: 100%;\n box-sizing: border-box;\n flex-direction: row;\n padding: 0 var(--spacing-sizing-01) 0 0;\n gap: var(--spacing-sizing-02);\n user-select: none;\n background: unset;\n border: unset;\n cursor: pointer;\n min-height: var(--spacing-sizing-08);\n align-items: center;\n\n &:has([data-description]) {\n align-items: unset;\n }\n\n @media (any-pointer: coarse) {\n min-height: var(--spacing-sizing-12);\n }\n\n [data-content] {\n display: flex;\n flex-direction: column;\n padding: 2px 0;\n }\n\n [data-label] {\n color: var(--foreground-neutral-on-surface);\n font: var(--labels-base);\n }\n\n [data-description] {\n font: var(--body-small);\n color: var(--foreground-neutral-on-surface-variant-01);\n }\n\n &[data-size='small'] {\n [data-label] {\n font: var(--labels-small);\n }\n\n [data-description] {\n font: var(--body-x-small);\n }\n }\n\n &[data-size='large'] {\n [data-label] {\n font: var(--labels-large);\n }\n\n [data-description] {\n font: var(--body-base);\n }\n }\n\n &:not(:has(:disabled)) {\n [data-pseudo='focus'] &,\n &:focus-visible,\n &:has(*:focus-visible) {\n outline: var(--stroke-neutral-focus) 2px solid;\n }\n }\n\n &:has(:disabled) {\n [data-label] {\n color: var(--foreground-neutral-disabled-on-surface);\n }\n\n [data-description] {\n color: var(--foreground-neutral-disabled-on-surface);\n }\n }\n",
780
780
  dependencies: [],
781
- modified: '2025-05-09T17:27:22.590Z',
781
+ modified: '2025-05-12T18:33:57.726Z',
782
782
  hasTouchTarget: false,
783
783
  },
784
784
  {
@@ -788,7 +788,7 @@ const componentsMeta = [
788
788
  slug: 'tooltip',
789
789
  css: "\n position: fixed;\n pointer-events: none;\n z-index: var(--z-index-tooltip-popover);\n\n [data-text] {\n display: block;\n z-index: 2;\n position: relative;\n background-color: var(--surface-neutral-inverse);\n border-radius: var(--radius-small);\n color: var(--foreground-neutral-on-inverse-surface);\n box-shadow: var(--drop-shadow-float);\n font: var(--labels-small);\n padding: var(--spacing-sizing-01) var(--spacing-sizing-02);\n border: none;\n transition: opacity 0.2s ease-in-out;\n width: max-content;\n }\n\n --arrow-size: var(--spacing-sizing-01);\n --arrow-offset: calc(var(--arrow-size) * -2);\n\n [data-arrow] {\n display: block;\n z-index: 1;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);\n border-color: transparent transparent transparent transparent;\n }\n\n &[data-placement^='bottom'] {\n [data-arrow] {\n top: var(--arrow-offset);\n border-bottom-color: var(--surface-neutral-inverse);\n }\n }\n\n &[data-placement^='top'] {\n [data-arrow] {\n border-top-color: var(--surface-neutral-inverse);\n }\n }\n\n &[data-placement^='right'] {\n [data-arrow] {\n margin-left: var(--arrow-offset);\n border-right-color: var(--surface-neutral-inverse);\n }\n }\n\n &[data-placement^='left'] {\n [data-arrow] {\n right: var(--arrow-offset);\n border-left-color: var(--surface-neutral-inverse);\n }\n }\n",
790
790
  dependencies: ['Portal'],
791
- modified: '2025-05-09T17:27:22.590Z',
791
+ modified: '2025-05-12T18:33:57.726Z',
792
792
  hasTouchTarget: false,
793
793
  },
794
794
  {
@@ -798,7 +798,7 @@ const componentsMeta = [
798
798
  slug: 'top-navigation',
799
799
  css: '\n display: flex;\n',
800
800
  dependencies: [],
801
- modified: '2025-05-09T17:27:22.590Z',
801
+ modified: '2025-05-12T18:33:57.726Z',
802
802
  hasTouchTarget: false,
803
803
  },
804
804
  {
@@ -808,7 +808,7 @@ const componentsMeta = [
808
808
  slug: 'txt',
809
809
  css: '',
810
810
  dependencies: [],
811
- modified: '2025-05-09T17:27:22.590Z',
811
+ modified: '2025-05-12T18:33:57.726Z',
812
812
  hasTouchTarget: false,
813
813
  },
814
814
  ];
@@ -875,6 +875,102 @@ const typesMeta = [
875
875
  ],
876
876
  id: 'accordion-props',
877
877
  },
878
+ {
879
+ name: 'AvatarProps',
880
+ properties: [
881
+ {
882
+ name: 'aria-label',
883
+ required: true,
884
+ description: 'The aria-label for the element.',
885
+ type: 'string',
886
+ },
887
+ {
888
+ name: 'size',
889
+ description: 'The size of the profile.',
890
+ default: 'small',
891
+ type: [
892
+ 'x-small',
893
+ 'small',
894
+ 'medium',
895
+ 'large',
896
+ 'x-large',
897
+ 'xx-large',
898
+ 'xxx-large',
899
+ 'xxxx-large',
900
+ 'xxxxx-large',
901
+ ],
902
+ options: [
903
+ 'x-small',
904
+ 'small',
905
+ 'medium',
906
+ 'large',
907
+ 'x-large',
908
+ 'xx-large',
909
+ 'xxx-large',
910
+ 'xxxx-large',
911
+ 'xxxxx-large',
912
+ ],
913
+ },
914
+ {
915
+ name: 'color',
916
+ description: 'The color of the profile.',
917
+ default: 'grey',
918
+ type: [
919
+ 'blue',
920
+ 'green',
921
+ 'grey',
922
+ 'lime',
923
+ 'magenta',
924
+ 'orange',
925
+ 'pink',
926
+ 'primary',
927
+ 'purple',
928
+ 'red',
929
+ 'secondary',
930
+ 'teal',
931
+ 'white',
932
+ 'yellow',
933
+ ],
934
+ options: [
935
+ 'blue',
936
+ 'green',
937
+ 'grey',
938
+ 'lime',
939
+ 'magenta',
940
+ 'orange',
941
+ 'pink',
942
+ 'primary',
943
+ 'purple',
944
+ 'red',
945
+ 'secondary',
946
+ 'teal',
947
+ 'white',
948
+ 'yellow',
949
+ ],
950
+ },
951
+ {
952
+ name: 'initials',
953
+ description: 'The initials to display in the profile limited to 2 characters.',
954
+ type: 'string',
955
+ },
956
+ {
957
+ name: 'icon',
958
+ description: 'The icon to display in the profile.',
959
+ type: 'React.ReactNode',
960
+ },
961
+ {
962
+ name: 'image',
963
+ description: 'The url to the image to display in the profile.',
964
+ type: 'string',
965
+ },
966
+ {
967
+ name: 'overflowCount',
968
+ description: 'The number of notifications not displayed in a list.',
969
+ type: 'number',
970
+ },
971
+ ],
972
+ id: 'avatar-props',
973
+ },
878
974
  {
879
975
  name: 'BadgeProps',
880
976
  properties: [
@@ -2622,7 +2718,7 @@ const typesMeta = [
2622
2718
  {
2623
2719
  name: 'leading',
2624
2720
  required: false,
2625
- description: 'The leading element to display in the ListItem.\n\nLeading elements may only be one of the following [Icon](/icons), Img, Profile.',
2721
+ description: 'The leading element to display in the ListItem.\n\nLeading elements may only be one of the following [Icon](/icons), Img, Avatar.',
2626
2722
  type: 'React.ReactNode',
2627
2723
  },
2628
2724
  {
@@ -3894,102 +3990,6 @@ const typesMeta = [
3894
3990
  ],
3895
3991
  id: 'portal-props',
3896
3992
  },
3897
- {
3898
- name: 'ProfileProps',
3899
- properties: [
3900
- {
3901
- name: 'aria-label',
3902
- required: true,
3903
- description: 'The aria-label for the element.',
3904
- type: 'string',
3905
- },
3906
- {
3907
- name: 'size',
3908
- description: 'The size of the profile.',
3909
- default: 'small',
3910
- type: [
3911
- 'x-small',
3912
- 'small',
3913
- 'medium',
3914
- 'large',
3915
- 'x-large',
3916
- 'xx-large',
3917
- 'xxx-large',
3918
- 'xxxx-large',
3919
- 'xxxxx-large',
3920
- ],
3921
- options: [
3922
- 'x-small',
3923
- 'small',
3924
- 'medium',
3925
- 'large',
3926
- 'x-large',
3927
- 'xx-large',
3928
- 'xxx-large',
3929
- 'xxxx-large',
3930
- 'xxxxx-large',
3931
- ],
3932
- },
3933
- {
3934
- name: 'color',
3935
- description: 'The color of the profile.',
3936
- default: 'grey',
3937
- type: [
3938
- 'blue',
3939
- 'green',
3940
- 'grey',
3941
- 'lime',
3942
- 'magenta',
3943
- 'orange',
3944
- 'pink',
3945
- 'primary',
3946
- 'purple',
3947
- 'red',
3948
- 'secondary',
3949
- 'teal',
3950
- 'white',
3951
- 'yellow',
3952
- ],
3953
- options: [
3954
- 'blue',
3955
- 'green',
3956
- 'grey',
3957
- 'lime',
3958
- 'magenta',
3959
- 'orange',
3960
- 'pink',
3961
- 'primary',
3962
- 'purple',
3963
- 'red',
3964
- 'secondary',
3965
- 'teal',
3966
- 'white',
3967
- 'yellow',
3968
- ],
3969
- },
3970
- {
3971
- name: 'initials',
3972
- description: 'The initials to display in the profile limited to 2 characters.',
3973
- type: 'string',
3974
- },
3975
- {
3976
- name: 'icon',
3977
- description: 'The icon to display in the profile.',
3978
- type: 'React.ReactNode',
3979
- },
3980
- {
3981
- name: 'image',
3982
- description: 'The url to the image to display in the profile.',
3983
- type: 'string',
3984
- },
3985
- {
3986
- name: 'overflowCount',
3987
- description: 'The number of notifications not displayed in a list.',
3988
- type: 'number',
3989
- },
3990
- ],
3991
- id: 'profile-props',
3992
- },
3993
3993
  {
3994
3994
  name: 'ProgressBarProps',
3995
3995
  properties: [