@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/src/meta.ts CHANGED
@@ -54,7 +54,18 @@ export const componentsMeta: ComponentMeta[] = [
54
54
  slug: 'accordion',
55
55
  css: '\n display: flex;\n',
56
56
  dependencies: [],
57
- modified: '2025-05-09T17:27:22.585Z',
57
+ modified: '2025-05-14T17:33:14.316Z',
58
+ hasTouchTarget: false,
59
+ },
60
+ {
61
+ description:
62
+ 'An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an overflowCount.',
63
+ file: '/Avatar.tsx',
64
+ name: 'Avatar',
65
+ slug: 'avatar',
66
+ 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(--subheader-x-large);\n }\n \n &[data-size='xx-large'] {\n --height: var(--spacing-sizing-17);\n --font: var(--subheader-xx-large);\n }\n \n &[data-size='xxx-large'] {\n --height: var(--spacing-sizing-19);\n --font: var(--display-regular-small);\n }\n \n &[data-size='xxxx-large'] {\n --height: var(--spacing-sizing-21);\n --font: var(--display-regular-medium);\n }\n \n &[data-size='xxxxx-large'] {\n --height: var(--spacing-sizing-23);\n --font: var(--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",
67
+ dependencies: [],
68
+ modified: '2025-05-14T17:33:14.316Z',
58
69
  hasTouchTarget: false,
59
70
  },
60
71
  {
@@ -65,7 +76,7 @@ export const componentsMeta: ComponentMeta[] = [
65
76
  slug: 'badge',
66
77
  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",
67
78
  dependencies: [],
68
- modified: '2025-05-09T17:27:22.585Z',
79
+ modified: '2025-05-14T17:33:14.316Z',
69
80
  hasTouchTarget: false,
70
81
  },
71
82
  {
@@ -76,7 +87,7 @@ export const componentsMeta: ComponentMeta[] = [
76
87
  slug: 'banner-alert',
77
88
  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",
78
89
  dependencies: [],
79
- modified: '2025-05-09T17:27:22.585Z',
90
+ modified: '2025-05-14T17:33:14.316Z',
80
91
  hasTouchTarget: false,
81
92
  },
82
93
  {
@@ -86,7 +97,7 @@ export const componentsMeta: ComponentMeta[] = [
86
97
  slug: 'bottom-navigation',
87
98
  css: '\n display: flex;\n',
88
99
  dependencies: [],
89
- modified: '2025-05-09T17:27:22.585Z',
100
+ modified: '2025-05-14T17:33:14.316Z',
90
101
  hasTouchTarget: false,
91
102
  },
92
103
  {
@@ -96,7 +107,7 @@ export const componentsMeta: ComponentMeta[] = [
96
107
  slug: 'bottom-sheet',
97
108
  css: '\n display: flex;\n',
98
109
  dependencies: [],
99
- modified: '2025-05-09T17:27:22.585Z',
110
+ modified: '2025-05-14T17:33:14.316Z',
100
111
  hasTouchTarget: false,
101
112
  },
102
113
  {
@@ -106,7 +117,7 @@ export const componentsMeta: ComponentMeta[] = [
106
117
  slug: 'breadcrumb',
107
118
  css: '\n display: flex;\n',
108
119
  dependencies: [],
109
- modified: '2025-05-09T17:27:22.585Z',
120
+ modified: '2025-05-14T17:33:14.316Z',
110
121
  hasTouchTarget: false,
111
122
  },
112
123
  {
@@ -117,7 +128,7 @@ export const componentsMeta: ComponentMeta[] = [
117
128
  slug: 'button',
118
129
  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",
119
130
  dependencies: ['Tooltip'],
120
- modified: '2025-05-09T17:27:22.585Z',
131
+ modified: '2025-05-14T17:33:14.317Z',
121
132
  hasTouchTarget: true,
122
133
  },
123
134
  {
@@ -127,7 +138,7 @@ export const componentsMeta: ComponentMeta[] = [
127
138
  slug: 'button-dock',
128
139
  css: '\n display: flex;\n',
129
140
  dependencies: [],
130
- modified: '2025-05-09T17:27:22.585Z',
141
+ modified: '2025-05-14T17:33:14.317Z',
131
142
  hasTouchTarget: false,
132
143
  },
133
144
  {
@@ -138,7 +149,7 @@ export const componentsMeta: ComponentMeta[] = [
138
149
  slug: 'card',
139
150
  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",
140
151
  dependencies: [],
141
- modified: '2025-05-09T17:27:22.585Z',
152
+ modified: '2025-05-14T17:33:14.317Z',
142
153
  hasTouchTarget: false,
143
154
  },
144
155
  {
@@ -148,7 +159,7 @@ export const componentsMeta: ComponentMeta[] = [
148
159
  slug: 'chart',
149
160
  css: '\n display: flex;\n',
150
161
  dependencies: [],
151
- modified: '2025-05-09T17:27:22.585Z',
162
+ modified: '2025-05-14T17:33:14.317Z',
152
163
  hasTouchTarget: false,
153
164
  },
154
165
  {
@@ -159,7 +170,7 @@ export const componentsMeta: ComponentMeta[] = [
159
170
  slug: 'checkbox',
160
171
  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",
161
172
  dependencies: [],
162
- modified: '2025-05-09T17:27:22.585Z',
173
+ modified: '2025-05-14T17:33:14.317Z',
163
174
  hasTouchTarget: false,
164
175
  },
165
176
  {
@@ -170,7 +181,7 @@ export const componentsMeta: ComponentMeta[] = [
170
181
  slug: 'checkbox-group',
171
182
  css: '',
172
183
  dependencies: ['Checkbox', 'ToggleOption'],
173
- modified: '2025-05-09T17:27:22.585Z',
184
+ modified: '2025-05-14T17:33:14.317Z',
174
185
  hasTouchTarget: false,
175
186
  },
176
187
  {
@@ -181,7 +192,7 @@ export const componentsMeta: ComponentMeta[] = [
181
192
  slug: 'checkbox-option',
182
193
  css: '',
183
194
  dependencies: ['Checkbox', 'ToggleOption'],
184
- modified: '2025-05-09T17:27:22.585Z',
195
+ modified: '2025-05-14T17:33:14.317Z',
185
196
  hasTouchTarget: false,
186
197
  },
187
198
  {
@@ -191,7 +202,7 @@ export const componentsMeta: ComponentMeta[] = [
191
202
  slug: 'chip',
192
203
  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",
193
204
  dependencies: [],
194
- modified: '2025-05-09T17:27:22.585Z',
205
+ modified: '2025-05-14T17:33:14.317Z',
195
206
  hasTouchTarget: false,
196
207
  },
197
208
  {
@@ -201,7 +212,7 @@ export const componentsMeta: ComponentMeta[] = [
201
212
  slug: 'date-picker',
202
213
  css: '\n display: flex;\n',
203
214
  dependencies: [],
204
- modified: '2025-05-09T17:27:22.585Z',
215
+ modified: '2025-05-14T17:33:14.317Z',
205
216
  hasTouchTarget: false,
206
217
  },
207
218
  {
@@ -212,7 +223,7 @@ export const componentsMeta: ComponentMeta[] = [
212
223
  slug: 'dialog',
213
224
  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",
214
225
  dependencies: ['Portal'],
215
- modified: '2025-05-09T17:27:22.586Z',
226
+ modified: '2025-05-14T17:33:14.317Z',
216
227
  hasTouchTarget: false,
217
228
  },
218
229
  {
@@ -223,7 +234,7 @@ export const componentsMeta: ComponentMeta[] = [
223
234
  slug: 'divider',
224
235
  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",
225
236
  dependencies: [],
226
- modified: '2025-05-09T17:27:22.586Z',
237
+ modified: '2025-05-14T17:33:14.317Z',
227
238
  hasTouchTarget: false,
228
239
  },
229
240
  {
@@ -233,7 +244,7 @@ export const componentsMeta: ComponentMeta[] = [
233
244
  slug: 'drawer',
234
245
  css: '\n display: flex;\n',
235
246
  dependencies: [],
236
- modified: '2025-05-09T17:27:22.586Z',
247
+ modified: '2025-05-14T17:33:14.317Z',
237
248
  hasTouchTarget: false,
238
249
  },
239
250
  {
@@ -243,7 +254,7 @@ export const componentsMeta: ComponentMeta[] = [
243
254
  slug: 'dropdown',
244
255
  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",
245
256
  dependencies: ['ListItem', 'Menu', 'Portal'],
246
- modified: '2025-05-09T17:27:22.586Z',
257
+ modified: '2025-05-14T17:33:14.317Z',
247
258
  hasTouchTarget: false,
248
259
  },
249
260
  {
@@ -254,7 +265,7 @@ export const componentsMeta: ComponentMeta[] = [
254
265
  slug: 'dropdown-field',
255
266
  css: '',
256
267
  dependencies: ['Dropdown', 'FormField'],
257
- modified: '2025-05-09T17:27:22.586Z',
268
+ modified: '2025-05-14T17:33:14.317Z',
258
269
  hasTouchTarget: false,
259
270
  },
260
271
  {
@@ -264,7 +275,7 @@ export const componentsMeta: ComponentMeta[] = [
264
275
  slug: 'empty-state',
265
276
  css: '',
266
277
  dependencies: ['Button', 'Layout', 'Txt'],
267
- modified: '2025-05-09T17:27:22.586Z',
278
+ modified: '2025-05-14T17:33:14.317Z',
268
279
  hasTouchTarget: false,
269
280
  },
270
281
  {
@@ -275,7 +286,7 @@ export const componentsMeta: ComponentMeta[] = [
275
286
  slug: 'fab',
276
287
  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",
277
288
  dependencies: ['Button', 'Tooltip'],
278
- modified: '2025-05-09T17:27:22.586Z',
289
+ modified: '2025-05-14T17:33:14.317Z',
279
290
  hasTouchTarget: false,
280
291
  },
281
292
  {
@@ -285,7 +296,7 @@ export const componentsMeta: ComponentMeta[] = [
285
296
  slug: 'file-upload',
286
297
  css: '\n display: flex;\n',
287
298
  dependencies: [],
288
- modified: '2025-05-09T17:27:22.586Z',
299
+ modified: '2025-05-14T17:33:14.317Z',
289
300
  hasTouchTarget: false,
290
301
  },
291
302
  {
@@ -296,7 +307,7 @@ export const componentsMeta: ComponentMeta[] = [
296
307
  slug: 'form-field',
297
308
  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',
298
309
  dependencies: ['InlineAlert', 'Layout', 'Txt'],
299
- modified: '2025-05-09T17:27:22.586Z',
310
+ modified: '2025-05-14T17:33:14.317Z',
300
311
  hasTouchTarget: false,
301
312
  },
302
313
  {
@@ -306,7 +317,7 @@ export const componentsMeta: ComponentMeta[] = [
306
317
  slug: 'image',
307
318
  css: '\n display: flex;\n',
308
319
  dependencies: [],
309
- modified: '2025-05-09T17:27:22.586Z',
320
+ modified: '2025-05-14T17:33:14.317Z',
310
321
  hasTouchTarget: false,
311
322
  },
312
323
  {
@@ -316,7 +327,7 @@ export const componentsMeta: ComponentMeta[] = [
316
327
  slug: 'img',
317
328
  css: '',
318
329
  dependencies: [],
319
- modified: '2025-05-09T17:27:22.586Z',
330
+ modified: '2025-05-14T17:33:14.317Z',
320
331
  hasTouchTarget: false,
321
332
  },
322
333
  {
@@ -327,7 +338,7 @@ export const componentsMeta: ComponentMeta[] = [
327
338
  slug: 'inline-alert',
328
339
  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",
329
340
  dependencies: ['Txt'],
330
- modified: '2025-05-09T17:27:22.586Z',
341
+ modified: '2025-05-14T17:33:14.317Z',
331
342
  hasTouchTarget: false,
332
343
  },
333
344
  {
@@ -337,7 +348,7 @@ export const componentsMeta: ComponentMeta[] = [
337
348
  slug: 'layout',
338
349
  css: '',
339
350
  dependencies: [],
340
- modified: '2025-05-09T17:27:22.586Z',
351
+ modified: '2025-05-14T17:33:14.317Z',
341
352
  hasTouchTarget: false,
342
353
  },
343
354
  {
@@ -347,18 +358,18 @@ export const componentsMeta: ComponentMeta[] = [
347
358
  slug: 'link',
348
359
  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",
349
360
  dependencies: [],
350
- modified: '2025-05-09T17:27:22.586Z',
361
+ modified: '2025-05-14T17:33:14.317Z',
351
362
  hasTouchTarget: false,
352
363
  },
353
364
  {
354
365
  description:
355
- '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.',
366
+ '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.',
356
367
  file: '/ListItem.tsx',
357
368
  name: 'ListItem',
358
369
  slug: 'list-item',
359
370
  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",
360
371
  dependencies: ['Button'],
361
- modified: '2025-05-09T17:27:22.587Z',
372
+ modified: '2025-05-14T17:33:14.318Z',
362
373
  hasTouchTarget: false,
363
374
  },
364
375
  {
@@ -369,7 +380,7 @@ export const componentsMeta: ComponentMeta[] = [
369
380
  slug: 'menu',
370
381
  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',
371
382
  dependencies: ['Checkbox', 'ListItem', 'Txt'],
372
- modified: '2025-05-09T17:27:22.587Z',
383
+ modified: '2025-05-14T17:33:14.318Z',
373
384
  hasTouchTarget: false,
374
385
  },
375
386
  {
@@ -379,7 +390,7 @@ export const componentsMeta: ComponentMeta[] = [
379
390
  slug: 'menu-button',
380
391
  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',
381
392
  dependencies: ['Button'],
382
- modified: '2025-05-09T17:27:22.587Z',
393
+ modified: '2025-05-14T17:33:14.318Z',
383
394
  hasTouchTarget: false,
384
395
  },
385
396
  {
@@ -390,7 +401,7 @@ export const componentsMeta: ComponentMeta[] = [
390
401
  slug: 'modal',
391
402
  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',
392
403
  dependencies: ['Button', 'Dialog', 'Txt'],
393
- modified: '2025-05-09T17:27:22.587Z',
404
+ modified: '2025-05-14T17:33:14.318Z',
394
405
  hasTouchTarget: false,
395
406
  },
396
407
  {
@@ -400,7 +411,7 @@ export const componentsMeta: ComponentMeta[] = [
400
411
  slug: 'multi-selection',
401
412
  css: '\n display: flex;\n',
402
413
  dependencies: [],
403
- modified: '2025-05-09T17:27:22.587Z',
414
+ modified: '2025-05-14T17:33:14.318Z',
404
415
  hasTouchTarget: false,
405
416
  },
406
417
  {
@@ -410,7 +421,7 @@ export const componentsMeta: ComponentMeta[] = [
410
421
  slug: 'navigation-rail',
411
422
  css: '\n display: flex;\n',
412
423
  dependencies: [],
413
- modified: '2025-05-09T17:27:22.587Z',
424
+ modified: '2025-05-14T17:33:14.318Z',
414
425
  hasTouchTarget: false,
415
426
  },
416
427
  {
@@ -421,7 +432,7 @@ export const componentsMeta: ComponentMeta[] = [
421
432
  slug: 'number-field',
422
433
  css: '',
423
434
  dependencies: ['FormField', 'NumberInput'],
424
- modified: '2025-05-09T17:27:22.587Z',
435
+ modified: '2025-05-14T17:33:14.318Z',
425
436
  hasTouchTarget: false,
426
437
  },
427
438
  {
@@ -432,7 +443,7 @@ export const componentsMeta: ComponentMeta[] = [
432
443
  slug: 'number-input',
433
444
  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",
434
445
  dependencies: [],
435
- modified: '2025-05-09T17:27:22.587Z',
446
+ modified: '2025-05-14T17:33:14.318Z',
436
447
  hasTouchTarget: false,
437
448
  },
438
449
  {
@@ -442,7 +453,7 @@ export const componentsMeta: ComponentMeta[] = [
442
453
  slug: 'otp-input',
443
454
  css: '\n display: flex;\n',
444
455
  dependencies: [],
445
- modified: '2025-05-09T17:27:22.587Z',
456
+ modified: '2025-05-14T17:33:14.318Z',
446
457
  hasTouchTarget: false,
447
458
  },
448
459
  {
@@ -452,7 +463,7 @@ export const componentsMeta: ComponentMeta[] = [
452
463
  slug: 'page-control',
453
464
  css: '\n display: flex;\n',
454
465
  dependencies: [],
455
- modified: '2025-05-09T17:27:22.587Z',
466
+ modified: '2025-05-14T17:33:14.318Z',
456
467
  hasTouchTarget: false,
457
468
  },
458
469
  {
@@ -462,7 +473,7 @@ export const componentsMeta: ComponentMeta[] = [
462
473
  slug: 'password-input',
463
474
  css: '\n display: flex;\n',
464
475
  dependencies: [],
465
- modified: '2025-05-09T17:27:22.587Z',
476
+ modified: '2025-05-14T17:33:14.318Z',
466
477
  hasTouchTarget: false,
467
478
  },
468
479
  {
@@ -472,7 +483,7 @@ export const componentsMeta: ComponentMeta[] = [
472
483
  slug: 'phone-number-input',
473
484
  css: '\n display: flex;\n',
474
485
  dependencies: [],
475
- modified: '2025-05-09T17:27:22.587Z',
486
+ modified: '2025-05-14T17:33:14.318Z',
476
487
  hasTouchTarget: false,
477
488
  },
478
489
  {
@@ -482,7 +493,7 @@ export const componentsMeta: ComponentMeta[] = [
482
493
  slug: 'popover',
483
494
  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",
484
495
  dependencies: ['Button', 'Portal', 'Txt'],
485
- modified: '2025-05-09T17:27:22.587Z',
496
+ modified: '2025-05-14T17:33:14.318Z',
486
497
  hasTouchTarget: false,
487
498
  },
488
499
  {
@@ -493,18 +504,7 @@ export const componentsMeta: ComponentMeta[] = [
493
504
  slug: 'portal',
494
505
  css: '',
495
506
  dependencies: [],
496
- modified: '2025-05-09T17:27:22.587Z',
497
- hasTouchTarget: false,
498
- },
499
- {
500
- description:
501
- '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.',
502
- file: '/Profile.tsx',
503
- name: 'Profile',
504
- slug: 'profile',
505
- 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",
506
- dependencies: [],
507
- modified: '2025-05-09T17:27:22.587Z',
507
+ modified: '2025-05-14T17:33:14.318Z',
508
508
  hasTouchTarget: false,
509
509
  },
510
510
  {
@@ -515,7 +515,7 @@ export const componentsMeta: ComponentMeta[] = [
515
515
  slug: 'progress-bar',
516
516
  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",
517
517
  dependencies: [],
518
- modified: '2025-05-09T17:27:22.587Z',
518
+ modified: '2025-05-14T17:33:14.318Z',
519
519
  hasTouchTarget: false,
520
520
  },
521
521
  {
@@ -526,7 +526,7 @@ export const componentsMeta: ComponentMeta[] = [
526
526
  slug: 'progress-circle',
527
527
  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",
528
528
  dependencies: ['Txt'],
529
- modified: '2025-05-09T17:27:22.588Z',
529
+ modified: '2025-05-14T17:33:14.318Z',
530
530
  hasTouchTarget: false,
531
531
  },
532
532
  {
@@ -537,7 +537,7 @@ export const componentsMeta: ComponentMeta[] = [
537
537
  slug: 'progression-stepper',
538
538
  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",
539
539
  dependencies: [],
540
- modified: '2025-05-09T17:27:22.588Z',
540
+ modified: '2025-05-14T17:33:14.318Z',
541
541
  hasTouchTarget: false,
542
542
  },
543
543
  {
@@ -547,7 +547,7 @@ export const componentsMeta: ComponentMeta[] = [
547
547
  slug: 'progression-stepper-bar',
548
548
  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",
549
549
  dependencies: [],
550
- modified: '2025-05-09T17:27:22.588Z',
550
+ modified: '2025-05-14T17:33:14.318Z',
551
551
  hasTouchTarget: false,
552
552
  },
553
553
  {
@@ -558,7 +558,7 @@ export const componentsMeta: ComponentMeta[] = [
558
558
  slug: 'radio',
559
559
  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",
560
560
  dependencies: [],
561
- modified: '2025-05-09T17:27:22.588Z',
561
+ modified: '2025-05-14T17:33:14.318Z',
562
562
  hasTouchTarget: false,
563
563
  },
564
564
  {
@@ -569,7 +569,7 @@ export const componentsMeta: ComponentMeta[] = [
569
569
  slug: 'radio-group',
570
570
  css: '',
571
571
  dependencies: ['Radio', 'ToggleOption'],
572
- modified: '2025-05-09T17:27:22.588Z',
572
+ modified: '2025-05-14T17:33:14.318Z',
573
573
  hasTouchTarget: false,
574
574
  },
575
575
  {
@@ -580,7 +580,7 @@ export const componentsMeta: ComponentMeta[] = [
580
580
  slug: 'radio-option',
581
581
  css: '',
582
582
  dependencies: ['Radio', 'ToggleOption'],
583
- modified: '2025-05-09T17:27:22.588Z',
583
+ modified: '2025-05-14T17:33:14.318Z',
584
584
  hasTouchTarget: false,
585
585
  },
586
586
  {
@@ -590,7 +590,7 @@ export const componentsMeta: ComponentMeta[] = [
590
590
  slug: 'rating',
591
591
  css: '\n display: flex;\n',
592
592
  dependencies: [],
593
- modified: '2025-05-09T17:27:22.588Z',
593
+ modified: '2025-05-14T17:33:14.319Z',
594
594
  hasTouchTarget: false,
595
595
  },
596
596
  {
@@ -600,7 +600,7 @@ export const componentsMeta: ComponentMeta[] = [
600
600
  slug: 'search-bar',
601
601
  css: '\n display: flex;\n width: 100%;\n min-width: 300px;\n',
602
602
  dependencies: ['Menu', 'Portal', 'TextInput'],
603
- modified: '2025-05-09T17:27:22.588Z',
603
+ modified: '2025-05-14T17:33:14.319Z',
604
604
  hasTouchTarget: false,
605
605
  },
606
606
  {
@@ -610,7 +610,7 @@ export const componentsMeta: ComponentMeta[] = [
610
610
  slug: 'segmented-control',
611
611
  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",
612
612
  dependencies: ['Tooltip'],
613
- modified: '2025-05-09T17:27:22.588Z',
613
+ modified: '2025-05-14T17:33:14.319Z',
614
614
  hasTouchTarget: false,
615
615
  },
616
616
  {
@@ -620,7 +620,7 @@ export const componentsMeta: ComponentMeta[] = [
620
620
  slug: 'skeleton',
621
621
  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',
622
622
  dependencies: [],
623
- modified: '2025-05-09T17:27:22.588Z',
623
+ modified: '2025-05-14T17:33:14.319Z',
624
624
  hasTouchTarget: false,
625
625
  },
626
626
  {
@@ -630,7 +630,7 @@ export const componentsMeta: ComponentMeta[] = [
630
630
  slug: 'slider-input',
631
631
  css: '\n display: flex;\n',
632
632
  dependencies: [],
633
- modified: '2025-05-09T17:27:22.588Z',
633
+ modified: '2025-05-14T17:33:14.319Z',
634
634
  hasTouchTarget: false,
635
635
  },
636
636
  {
@@ -640,7 +640,7 @@ export const componentsMeta: ComponentMeta[] = [
640
640
  slug: 'snackbar',
641
641
  css: '\n display: flex;\n',
642
642
  dependencies: [],
643
- modified: '2025-05-09T17:27:22.588Z',
643
+ modified: '2025-05-14T17:33:14.319Z',
644
644
  hasTouchTarget: false,
645
645
  },
646
646
  {
@@ -650,7 +650,7 @@ export const componentsMeta: ComponentMeta[] = [
650
650
  slug: 'styles-provider-anywhere',
651
651
  css: '',
652
652
  dependencies: [],
653
- modified: '2025-05-09T17:29:10.213Z',
653
+ modified: '2025-05-14T17:33:14.319Z',
654
654
  hasTouchTarget: false,
655
655
  },
656
656
  {
@@ -660,7 +660,7 @@ export const componentsMeta: ComponentMeta[] = [
660
660
  slug: 'styles-provider-better-homes-gardens',
661
661
  css: '',
662
662
  dependencies: [],
663
- modified: '2025-05-09T17:29:10.923Z',
663
+ modified: '2025-05-14T17:33:14.319Z',
664
664
  hasTouchTarget: false,
665
665
  },
666
666
  {
@@ -670,7 +670,7 @@ export const componentsMeta: ComponentMeta[] = [
670
670
  slug: 'styles-provider-cartus',
671
671
  css: '',
672
672
  dependencies: [],
673
- modified: '2025-05-09T17:29:14.891Z',
673
+ modified: '2025-05-14T17:33:14.319Z',
674
674
  hasTouchTarget: false,
675
675
  },
676
676
  {
@@ -680,7 +680,7 @@ export const componentsMeta: ComponentMeta[] = [
680
680
  slug: 'styles-provider-century21',
681
681
  css: '',
682
682
  dependencies: [],
683
- modified: '2025-05-09T17:29:18.796Z',
683
+ modified: '2025-05-14T17:33:14.319Z',
684
684
  hasTouchTarget: false,
685
685
  },
686
686
  {
@@ -690,7 +690,7 @@ export const componentsMeta: ComponentMeta[] = [
690
690
  slug: 'styles-provider-coldwell-banker',
691
691
  css: '',
692
692
  dependencies: [],
693
- modified: '2025-05-09T17:29:22.755Z',
693
+ modified: '2025-05-14T17:33:14.319Z',
694
694
  hasTouchTarget: false,
695
695
  },
696
696
  {
@@ -700,7 +700,7 @@ export const componentsMeta: ComponentMeta[] = [
700
700
  slug: 'styles-provider-corcoran',
701
701
  css: '',
702
702
  dependencies: [],
703
- modified: '2025-05-09T17:29:26.786Z',
703
+ modified: '2025-05-14T17:33:14.319Z',
704
704
  hasTouchTarget: false,
705
705
  },
706
706
  {
@@ -710,7 +710,7 @@ export const componentsMeta: ComponentMeta[] = [
710
710
  slug: 'styles-provider-denali-boss',
711
711
  css: '',
712
712
  dependencies: [],
713
- modified: '2025-05-09T17:29:30.747Z',
713
+ modified: '2025-05-14T17:33:14.319Z',
714
714
  hasTouchTarget: false,
715
715
  },
716
716
  {
@@ -720,7 +720,7 @@ export const componentsMeta: ComponentMeta[] = [
720
720
  slug: 'styles-provider-era',
721
721
  css: '',
722
722
  dependencies: [],
723
- modified: '2025-05-09T17:29:34.701Z',
723
+ modified: '2025-05-14T17:33:14.319Z',
724
724
  hasTouchTarget: false,
725
725
  },
726
726
  {
@@ -730,7 +730,7 @@ export const componentsMeta: ComponentMeta[] = [
730
730
  slug: 'styles-provider-sothebys',
731
731
  css: '',
732
732
  dependencies: [],
733
- modified: '2025-05-09T17:29:38.615Z',
733
+ modified: '2025-05-14T17:33:14.319Z',
734
734
  hasTouchTarget: false,
735
735
  },
736
736
  {
@@ -741,7 +741,7 @@ export const componentsMeta: ComponentMeta[] = [
741
741
  slug: 'switch',
742
742
  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",
743
743
  dependencies: [],
744
- modified: '2025-05-09T17:27:22.589Z',
744
+ modified: '2025-05-14T17:33:14.319Z',
745
745
  hasTouchTarget: false,
746
746
  },
747
747
  {
@@ -752,7 +752,7 @@ export const componentsMeta: ComponentMeta[] = [
752
752
  slug: 'switch-group',
753
753
  css: '',
754
754
  dependencies: ['Switch', 'ToggleOption'],
755
- modified: '2025-05-09T17:27:22.589Z',
755
+ modified: '2025-05-14T17:33:14.319Z',
756
756
  hasTouchTarget: false,
757
757
  },
758
758
  {
@@ -763,7 +763,7 @@ export const componentsMeta: ComponentMeta[] = [
763
763
  slug: 'switch-option',
764
764
  css: '',
765
765
  dependencies: ['Switch', 'ToggleOption'],
766
- modified: '2025-05-09T17:27:22.589Z',
766
+ modified: '2025-05-14T17:33:14.319Z',
767
767
  hasTouchTarget: false,
768
768
  },
769
769
  {
@@ -773,7 +773,7 @@ export const componentsMeta: ComponentMeta[] = [
773
773
  slug: 'tab-group',
774
774
  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",
775
775
  dependencies: ['Badge'],
776
- modified: '2025-05-09T17:27:22.589Z',
776
+ modified: '2025-05-14T17:33:14.319Z',
777
777
  hasTouchTarget: false,
778
778
  },
779
779
  {
@@ -783,7 +783,7 @@ export const componentsMeta: ComponentMeta[] = [
783
783
  slug: 'table',
784
784
  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",
785
785
  dependencies: [],
786
- modified: '2025-05-09T17:27:22.589Z',
786
+ modified: '2025-05-14T17:33:14.320Z',
787
787
  hasTouchTarget: false,
788
788
  },
789
789
  {
@@ -793,7 +793,7 @@ export const componentsMeta: ComponentMeta[] = [
793
793
  slug: 'tag',
794
794
  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",
795
795
  dependencies: [],
796
- modified: '2025-05-09T17:27:22.589Z',
796
+ modified: '2025-05-14T17:33:14.320Z',
797
797
  hasTouchTarget: false,
798
798
  },
799
799
  {
@@ -803,7 +803,7 @@ export const componentsMeta: ComponentMeta[] = [
803
803
  slug: 'textarea',
804
804
  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",
805
805
  dependencies: [],
806
- modified: '2025-05-09T17:27:22.590Z',
806
+ modified: '2025-05-14T17:33:14.320Z',
807
807
  hasTouchTarget: false,
808
808
  },
809
809
  {
@@ -814,7 +814,7 @@ export const componentsMeta: ComponentMeta[] = [
814
814
  slug: 'textarea-field',
815
815
  css: '',
816
816
  dependencies: ['FormField', 'Textarea', 'Txt'],
817
- modified: '2025-05-09T17:27:22.590Z',
817
+ modified: '2025-05-14T17:33:14.320Z',
818
818
  hasTouchTarget: false,
819
819
  },
820
820
  {
@@ -825,7 +825,7 @@ export const componentsMeta: ComponentMeta[] = [
825
825
  slug: 'text-field',
826
826
  css: '',
827
827
  dependencies: ['FormField', 'TextInput'],
828
- modified: '2025-05-09T17:27:22.589Z',
828
+ modified: '2025-05-14T17:33:14.320Z',
829
829
  hasTouchTarget: false,
830
830
  },
831
831
  {
@@ -836,7 +836,7 @@ export const componentsMeta: ComponentMeta[] = [
836
836
  slug: 'text-input',
837
837
  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",
838
838
  dependencies: [],
839
- modified: '2025-05-09T17:27:22.590Z',
839
+ modified: '2025-05-14T17:33:14.320Z',
840
840
  hasTouchTarget: false,
841
841
  },
842
842
  {
@@ -846,7 +846,7 @@ export const componentsMeta: ComponentMeta[] = [
846
846
  slug: 'time-picker',
847
847
  css: '\n display: flex;\n',
848
848
  dependencies: [],
849
- modified: '2025-05-09T17:27:22.590Z',
849
+ modified: '2025-05-14T17:33:14.320Z',
850
850
  hasTouchTarget: false,
851
851
  },
852
852
  {
@@ -856,7 +856,7 @@ export const componentsMeta: ComponentMeta[] = [
856
856
  slug: 'toggle-option',
857
857
  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",
858
858
  dependencies: [],
859
- modified: '2025-05-09T17:27:22.590Z',
859
+ modified: '2025-05-14T17:33:14.320Z',
860
860
  hasTouchTarget: false,
861
861
  },
862
862
  {
@@ -866,7 +866,7 @@ export const componentsMeta: ComponentMeta[] = [
866
866
  slug: 'tooltip',
867
867
  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",
868
868
  dependencies: ['Portal'],
869
- modified: '2025-05-09T17:27:22.590Z',
869
+ modified: '2025-05-14T17:33:14.320Z',
870
870
  hasTouchTarget: false,
871
871
  },
872
872
  {
@@ -876,7 +876,7 @@ export const componentsMeta: ComponentMeta[] = [
876
876
  slug: 'top-navigation',
877
877
  css: '\n display: flex;\n',
878
878
  dependencies: [],
879
- modified: '2025-05-09T17:27:22.590Z',
879
+ modified: '2025-05-14T17:33:14.320Z',
880
880
  hasTouchTarget: false,
881
881
  },
882
882
  {
@@ -886,7 +886,7 @@ export const componentsMeta: ComponentMeta[] = [
886
886
  slug: 'txt',
887
887
  css: '',
888
888
  dependencies: [],
889
- modified: '2025-05-09T17:27:22.590Z',
889
+ modified: '2025-05-14T17:33:14.320Z',
890
890
  hasTouchTarget: false,
891
891
  },
892
892
  ] as const;
@@ -965,6 +965,102 @@ export const typesMeta: TypeMeta[] = [
965
965
  ],
966
966
  id: 'accordion-props',
967
967
  },
968
+ {
969
+ name: 'AvatarProps',
970
+ properties: [
971
+ {
972
+ name: 'aria-label',
973
+ required: true,
974
+ description: 'The aria-label for the element.',
975
+ type: 'string',
976
+ },
977
+ {
978
+ name: 'size',
979
+ description: 'The size of the avatar.',
980
+ default: 'small',
981
+ type: [
982
+ 'x-small',
983
+ 'small',
984
+ 'medium',
985
+ 'large',
986
+ 'x-large',
987
+ 'xx-large',
988
+ 'xxx-large',
989
+ 'xxxx-large',
990
+ 'xxxxx-large',
991
+ ],
992
+ options: [
993
+ 'x-small',
994
+ 'small',
995
+ 'medium',
996
+ 'large',
997
+ 'x-large',
998
+ 'xx-large',
999
+ 'xxx-large',
1000
+ 'xxxx-large',
1001
+ 'xxxxx-large',
1002
+ ],
1003
+ },
1004
+ {
1005
+ name: 'color',
1006
+ description: 'The color of the avatar.',
1007
+ default: 'grey',
1008
+ type: [
1009
+ 'blue',
1010
+ 'green',
1011
+ 'grey',
1012
+ 'lime',
1013
+ 'magenta',
1014
+ 'orange',
1015
+ 'pink',
1016
+ 'primary',
1017
+ 'purple',
1018
+ 'red',
1019
+ 'secondary',
1020
+ 'teal',
1021
+ 'white',
1022
+ 'yellow',
1023
+ ],
1024
+ options: [
1025
+ 'blue',
1026
+ 'green',
1027
+ 'grey',
1028
+ 'lime',
1029
+ 'magenta',
1030
+ 'orange',
1031
+ 'pink',
1032
+ 'primary',
1033
+ 'purple',
1034
+ 'red',
1035
+ 'secondary',
1036
+ 'teal',
1037
+ 'white',
1038
+ 'yellow',
1039
+ ],
1040
+ },
1041
+ {
1042
+ name: 'initials',
1043
+ description: 'The initials to display in the avatar limited to 2 characters.',
1044
+ type: 'string',
1045
+ },
1046
+ {
1047
+ name: 'icon',
1048
+ description: 'The icon to display in the avatar.',
1049
+ type: 'React.ReactNode',
1050
+ },
1051
+ {
1052
+ name: 'image',
1053
+ description: 'The url to the image to display in the avatar.',
1054
+ type: 'string',
1055
+ },
1056
+ {
1057
+ name: 'overflowCount',
1058
+ description: 'The number of notifications not displayed in a list.',
1059
+ type: 'number',
1060
+ },
1061
+ ],
1062
+ id: 'avatar-props',
1063
+ },
968
1064
  {
969
1065
  name: 'BadgeProps',
970
1066
  properties: [
@@ -2779,7 +2875,7 @@ export const typesMeta: TypeMeta[] = [
2779
2875
  name: 'leading',
2780
2876
  required: false,
2781
2877
  description:
2782
- 'The leading element to display in the ListItem.\n\nLeading elements may only be one of the following [Icon](/icons), Img, Profile.',
2878
+ 'The leading element to display in the ListItem.\n\nLeading elements may only be one of the following [Icon](/icons), Img, Avatar.',
2783
2879
  type: 'React.ReactNode',
2784
2880
  },
2785
2881
  {
@@ -4092,102 +4188,6 @@ export const typesMeta: TypeMeta[] = [
4092
4188
  ],
4093
4189
  id: 'portal-props',
4094
4190
  },
4095
- {
4096
- name: 'ProfileProps',
4097
- properties: [
4098
- {
4099
- name: 'aria-label',
4100
- required: true,
4101
- description: 'The aria-label for the element.',
4102
- type: 'string',
4103
- },
4104
- {
4105
- name: 'size',
4106
- description: 'The size of the profile.',
4107
- default: 'small',
4108
- type: [
4109
- 'x-small',
4110
- 'small',
4111
- 'medium',
4112
- 'large',
4113
- 'x-large',
4114
- 'xx-large',
4115
- 'xxx-large',
4116
- 'xxxx-large',
4117
- 'xxxxx-large',
4118
- ],
4119
- options: [
4120
- 'x-small',
4121
- 'small',
4122
- 'medium',
4123
- 'large',
4124
- 'x-large',
4125
- 'xx-large',
4126
- 'xxx-large',
4127
- 'xxxx-large',
4128
- 'xxxxx-large',
4129
- ],
4130
- },
4131
- {
4132
- name: 'color',
4133
- description: 'The color of the profile.',
4134
- default: 'grey',
4135
- type: [
4136
- 'blue',
4137
- 'green',
4138
- 'grey',
4139
- 'lime',
4140
- 'magenta',
4141
- 'orange',
4142
- 'pink',
4143
- 'primary',
4144
- 'purple',
4145
- 'red',
4146
- 'secondary',
4147
- 'teal',
4148
- 'white',
4149
- 'yellow',
4150
- ],
4151
- options: [
4152
- 'blue',
4153
- 'green',
4154
- 'grey',
4155
- 'lime',
4156
- 'magenta',
4157
- 'orange',
4158
- 'pink',
4159
- 'primary',
4160
- 'purple',
4161
- 'red',
4162
- 'secondary',
4163
- 'teal',
4164
- 'white',
4165
- 'yellow',
4166
- ],
4167
- },
4168
- {
4169
- name: 'initials',
4170
- description: 'The initials to display in the profile limited to 2 characters.',
4171
- type: 'string',
4172
- },
4173
- {
4174
- name: 'icon',
4175
- description: 'The icon to display in the profile.',
4176
- type: 'React.ReactNode',
4177
- },
4178
- {
4179
- name: 'image',
4180
- description: 'The url to the image to display in the profile.',
4181
- type: 'string',
4182
- },
4183
- {
4184
- name: 'overflowCount',
4185
- description: 'The number of notifications not displayed in a list.',
4186
- type: 'number',
4187
- },
4188
- ],
4189
- id: 'profile-props',
4190
- },
4191
4191
  {
4192
4192
  name: 'ProgressBarProps',
4193
4193
  properties: [
@@ -6030,6 +6030,7 @@ export const typesMeta: TypeMeta[] = [
6030
6030
 
6031
6031
  export type MetaTypeName =
6032
6032
  | 'AccordionProps'
6033
+ | 'AvatarProps'
6033
6034
  | 'BadgeProps'
6034
6035
  | 'BannerAlertProps'
6035
6036
  | 'BottomNavigationProps'
@@ -6113,7 +6114,6 @@ export type MetaTypeName =
6113
6114
  | 'Pick<ToggleOptionProps,"label"|"size"|"description">'
6114
6115
  | 'PopoverProps'
6115
6116
  | 'PortalProps'
6116
- | 'ProfileProps'
6117
6117
  | 'ProgressBarProps'
6118
6118
  | 'ProgressCircleProps'
6119
6119
  | 'ProgressionStepperBarProps'
@@ -6156,6 +6156,7 @@ export type MetaTypeName =
6156
6156
 
6157
6157
  export type MetaComponentName =
6158
6158
  | 'Accordion'
6159
+ | 'Avatar'
6159
6160
  | 'Badge'
6160
6161
  | 'BannerAlert'
6161
6162
  | 'BottomNavigation'
@@ -6198,7 +6199,6 @@ export type MetaComponentName =
6198
6199
  | 'PhoneNumberInput'
6199
6200
  | 'Popover'
6200
6201
  | 'Portal'
6201
- | 'Profile'
6202
6202
  | 'ProgressBar'
6203
6203
  | 'ProgressCircle'
6204
6204
  | 'ProgressionStepper'