@a-type/ui 6.0.49 → 6.0.51

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 (70) hide show
  1. package/dist/behaviors/iconOnly.module.css +2 -1
  2. package/dist/css/util.css +2 -1
  3. package/package.json +8 -5
  4. package/src/components/card/Card.module.css +1 -1
  5. package/dist/colors.module.css +0 -59
  6. package/dist/components/actions/ActionBar.module.css +0 -34
  7. package/dist/components/actions/ActionButton.module.css +0 -6
  8. package/dist/components/avatar/Avatar.module.css +0 -35
  9. package/dist/components/box/Box.module.css +0 -291
  10. package/dist/components/button/Button.module.css +0 -148
  11. package/dist/components/camera/Camera.module.css +0 -65
  12. package/dist/components/card/Card.module.css +0 -183
  13. package/dist/components/checkbox/Checkbox.module.css +0 -74
  14. package/dist/components/chip/Chip.module.css +0 -32
  15. package/dist/components/collapsible/Collapsible.module.css +0 -36
  16. package/dist/components/combobox/Combobox.module.css +0 -170
  17. package/dist/components/datePicker/Calendar.module.css +0 -167
  18. package/dist/components/datePicker/datePicker.module.css +0 -7
  19. package/dist/components/datePicker/dateRangePicker.module.css +0 -38
  20. package/dist/components/dialog/Dialog.module.css +0 -188
  21. package/dist/components/divider/Divider.module.css +0 -10
  22. package/dist/components/dropdownMenu/DropdownMenu.module.css +0 -3
  23. package/dist/components/editableText/EditableText.module.css +0 -44
  24. package/dist/components/emojiPicker/EmojiPicker.module.css +0 -84
  25. package/dist/components/forms/EmojiField.module.css +0 -8
  26. package/dist/components/forms/Field.module.css +0 -62
  27. package/dist/components/forms/Form.module.css +0 -6
  28. package/dist/components/forms/NumberStepperField.module.css +0 -5
  29. package/dist/components/forms/TextField.module.css +0 -11
  30. package/dist/components/horizontalList/HorizontalList.module.css +0 -50
  31. package/dist/components/icon/Icon.module.css +0 -20
  32. package/dist/components/imageUploader/ImageUploader.module.css +0 -67
  33. package/dist/components/img/Img.module.css +0 -42
  34. package/dist/components/input/Input.module.css +0 -100
  35. package/dist/components/layouts/PageContent.module.css +0 -25
  36. package/dist/components/layouts/PageFixedArea.module.css +0 -11
  37. package/dist/components/layouts/PageNav.module.css +0 -31
  38. package/dist/components/layouts/PageNowPlaying.module.css +0 -46
  39. package/dist/components/layouts/PageRoot.module.css +0 -29
  40. package/dist/components/layouts/PageSection.module.css +0 -19
  41. package/dist/components/lightbox/Lightbox.module.css +0 -104
  42. package/dist/components/lists/lists.module.css +0 -31
  43. package/dist/components/marquee/marquee.module.css +0 -32
  44. package/dist/components/navBar/NavBar.module.css +0 -143
  45. package/dist/components/note/Note.module.css +0 -114
  46. package/dist/components/numberStepper/NumberStepper.module.css +0 -32
  47. package/dist/components/particles/ParticleLayer.module.css +0 -8
  48. package/dist/components/peek/Peek.module.css +0 -96
  49. package/dist/components/popover/Popover.module.css +0 -24
  50. package/dist/components/primitives/menus.module.css +0 -262
  51. package/dist/components/progress/Progress.module.css +0 -54
  52. package/dist/components/pwaInstall/PwaInstall.module.css +0 -23
  53. package/dist/components/quickAction/QuickAction.module.css +0 -59
  54. package/dist/components/richEditor/richEditor.module.css +0 -102
  55. package/dist/components/scrollArea/ScrollArea.module.css +0 -187
  56. package/dist/components/select/Select.module.css +0 -46
  57. package/dist/components/skeletons/skeletons.module.css +0 -33
  58. package/dist/components/slider/Slider.module.css +0 -97
  59. package/dist/components/spinner/Spinner.module.css +0 -54
  60. package/dist/components/splashScreen/SplashScreen.module.css +0 -54
  61. package/dist/components/switch/Switch.module.css +0 -63
  62. package/dist/components/tabs/tabs.module.css +0 -139
  63. package/dist/components/textArea/TextArea.module.css +0 -14
  64. package/dist/components/toasts/toasts.module.css +0 -201
  65. package/dist/components/toggleGroup/toggleGroup.module.css +0 -55
  66. package/dist/components/tooltip/Tooltip.module.css +0 -72
  67. package/dist/components/typography/typography.module.css +0 -74
  68. package/dist/components/viewport/Viewport.module.css +0 -44
  69. package/dist/components/viewport/ViewportContent.module.css +0 -8
  70. package/dist/theme.stories.module.css +0 -13
@@ -1,96 +0,0 @@
1
- @keyframes peekClose {
2
- from {
3
- height: calc(var(--collapsible-height) + 80px);
4
- max-height: none;
5
- }
6
- to {
7
- height: min(var(--peek-height, 120px), var(--collapsible-height));
8
- max-height: var(--peek-height, 120px);
9
- }
10
- }
11
-
12
- @keyframes peekOpen {
13
- from {
14
- height: min(var(--peek-height, 120px), var(--collapsible-height));
15
- }
16
- to {
17
- height: calc(var(--collapsible-height) + 80px);
18
- }
19
- }
20
-
21
- .root {
22
- position: relative;
23
- overflow: clip;
24
-
25
- &[data-state='closed'] {
26
- max-height: var(--peek-height, 120px);
27
- }
28
-
29
- &[data-has-interacted='true'] {
30
- animation-timing-function: var(--m-easing);
31
- animation-fill-mode: forwards;
32
-
33
- &[data-state='closed'] {
34
- animation-name: peekClose;
35
- animation-duration: var(--m-duration);
36
- }
37
- &[data-state='open'] {
38
- animation-name: peekOpen;
39
- animation-duration: var(--m-duration-long);
40
- }
41
- }
42
- }
43
-
44
- .trigger {
45
- position: absolute;
46
- bottom: 0;
47
- z-index: 1;
48
- height: 80px;
49
- width: 100%;
50
- cursor: pointer;
51
- @apply --mx-borderColor(var(--mx-fg-ref));
52
- border-width: 0px;
53
- border-bottom-width: var(--m-lineWidth-sm);
54
-
55
- background: linear-gradient(to bottom, transparent 0%, var(--mx-bg-ref) 100%);
56
-
57
- &:focus {
58
- outline: none;
59
- }
60
- &:focus-visible {
61
- background: linear-gradient(
62
- to bottom,
63
- transparent 0%,
64
- var(--m-color-main-wash) 100%
65
- );
66
- border-color: var(--m-color-main);
67
- }
68
-
69
- &::after {
70
- content: '- tap to expand -';
71
- position: absolute;
72
- inset: 0;
73
- top: auto;
74
- height: 80px;
75
- display: flex;
76
- flex-direction: column;
77
- align-items: center;
78
- justify-content: end;
79
- padding: var(--m-space-sm);
80
- font-size: var(--m-prose-ambient-size);
81
- line-height: var(--m-prose-ambient-lineHeight);
82
- font-weight: var(--m-prose-ambient-weight);
83
- @apply --mx-fg(var(--m-color-neutral-heavy));
84
- }
85
- &[data-state='open'] {
86
- &::after {
87
- content: '- tap to collapse -';
88
- }
89
- }
90
-
91
- @starting-style {
92
- opacity: 0;
93
- }
94
- opacity: 1;
95
- transition: opacity var(--m-duration) var(--m-easing);
96
- }
@@ -1,24 +0,0 @@
1
- .close {
2
- position: absolute;
3
- right: var(--m-space-sm);
4
- top: var(--m-space-sm);
5
- }
6
-
7
- .popup {
8
- padding: var(--m-space-md);
9
- }
10
-
11
- .title {
12
- font-weight: 500;
13
- margin: 0;
14
- margin-block-end: var(--m-space-sm);
15
- font-size: var(--m-prose-secondary-size);
16
- line-height: var(--m-prose-secondary-lineHeight);
17
- }
18
-
19
- .description {
20
- margin: 0;
21
- font-size: var(--m-prose-ambient-size);
22
- line-height: var(--m-prose-ambient-lineHeight);
23
- @apply --mx-fg(var(--m-color-neutral-heavy));
24
- }
@@ -1,262 +0,0 @@
1
- .popup {
2
- box-sizing: border-box;
3
-
4
- min-width: 120px;
5
- max-width: var(--available-width, 95vw);
6
- max-height: var(--available-height);
7
-
8
- transition: all var(--m-duration) var(--m-easing);
9
-
10
- @apply --mx-shadow(var(--m-shadow-lg));
11
- @apply --mx-surface-ambient;
12
- padding: 0;
13
-
14
- transform-origin: var(--transform-origin);
15
- will-change: transform;
16
-
17
- &:focus {
18
- outline: none;
19
- }
20
- &:focus-visible {
21
- @apply --mx-ring(--fn-ring(
22
- --fn-color-faded(var(--m-color-main-ink), 50%),
23
- 2px
24
- ));
25
- }
26
-
27
- @media (forced-colors: active) {
28
- border-color: var(--m-color-main-ink);
29
- }
30
- @media (prefers-reduced-motion: reduce) {
31
- transition: none;
32
- }
33
-
34
- --y: 0px;
35
- --x: 0px;
36
- transform: translate(var(--x), var(--y));
37
-
38
- &[data-starting-style] {
39
- opacity: 0;
40
- &[data-side='bottom'] {
41
- --y: 4px;
42
- }
43
- &[data-side='top'] {
44
- --y: -4px;
45
- }
46
- &[data-side='left'] {
47
- --x: -4px;
48
- }
49
- &[data-side='right'] {
50
- --x: 4px;
51
- }
52
- }
53
- &[data-ending-style] {
54
- opacity: 0;
55
- }
56
- }
57
-
58
- .itemList {
59
- box-sizing: border-box;
60
- max-height: min(var(--available-height, 100%), 95vh);
61
- min-height: 0px;
62
- overflow-x: clip;
63
- overflow-y: auto;
64
- scroll-padding-block: var(--m-space-md);
65
- position: relative;
66
- padding: var(--m-space-xs);
67
-
68
- border-radius: inherit;
69
- }
70
-
71
- .item {
72
- min-height: 30px;
73
- position: relative;
74
- display: flex;
75
- align-items: center;
76
- cursor: pointer;
77
- user-select: none;
78
-
79
- padding: var(--m-action-padding);
80
- padding-left: var(--m-space-lg);
81
- gap: var(--m-space-sm);
82
-
83
- text-align: left;
84
- font-size: var(--m-prose-secondary-size);
85
- font-weight: var(--m-prose-secondary-weight);
86
- line-height: var(--m-prose-secondary-lineHeight);
87
- font-family: var(--m-prose-secondary-font);
88
-
89
- @apply --mx-fg(color-contrast(var(--mx-bg-ref)));
90
-
91
- &[data-disabled],
92
- &:disabled {
93
- pointer-events: none;
94
- @apply --mx-fg(var(--m-color-neutral-heavy));
95
- @apply --mx-bg(var(--m-color-neutral-paper));
96
- }
97
-
98
- &:hover,
99
- &[data-highlighted],
100
- &[data-state='checked'],
101
- &:focus-visible {
102
- @apply --mx-bg(var(--m-color-neutral-light));
103
- }
104
-
105
- &:focus {
106
- outline: none;
107
- }
108
- &:focus-visible {
109
- --mx-ring-value: --fn-focus-ring();
110
- }
111
-
112
- border-radius: var(--m-radius-xs);
113
- &:first-child {
114
- border-top-left-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
115
- border-top-right-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
116
- }
117
- &:last-child {
118
- border-bottom-left-radius: calc(
119
- var(--m-surface-radius) - var(--m-space-xs)
120
- );
121
- border-bottom-right-radius: calc(
122
- var(--m-surface-radius) - var(--m-space-xs)
123
- );
124
- }
125
- }
126
-
127
- .itemText {
128
- flex: 1;
129
- display: flex;
130
- flex-direction: row;
131
- align-items: center;
132
- gap: var(--m-space-sm);
133
- scroll-padding-block: var(--m-space-md);
134
- }
135
-
136
- .itemIndicator {
137
- margin-inline-start: auto;
138
- height: 10px;
139
- flex-shrink: 0;
140
- flex-basis: 10px;
141
- display: flex;
142
- align-items: center;
143
- justify-content: center;
144
- position: relative;
145
- right: calc(-1 * var(--m-space-xs));
146
- }
147
-
148
- .itemRightSlot {
149
- margin-inline-start: auto;
150
- padding-inline-start: var(--m-space-sm);
151
- }
152
-
153
- .arrow {
154
- --size: 18px;
155
- @apply --mx-fill(var(--mx-bg-ref, var(--m-global-trueLightColor)));
156
- @apply --mx-stroke(var(--mx-borderColor-ref, var(--mx-fg-ref, var(--m-global-trueHeavyColor))));
157
- stroke-width: var(--m-lineWidth);
158
- width: var(--size);
159
- height: calc(var(--size) / 2);
160
- position: relative;
161
- --angle: 0deg;
162
- --scale: 1;
163
- transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(var(--scale, 1));
164
- transition: opacity var(--m-duration) var(--m-easing);
165
-
166
- &[data-side='top'] {
167
- --angle: 0deg;
168
- bottom: calc(-1 * var(--size) / 2 + 1px);
169
- }
170
- &[data-side='bottom'] {
171
- --angle: 180deg;
172
- top: calc(-1 * var(--size) / 2 + 1px);
173
- }
174
- &[data-side='left'] {
175
- --angle: 270deg;
176
- right: calc(-1 * var(--size) * 0.75);
177
- }
178
- &[data-side='right'] {
179
- --angle: 90deg;
180
- left: calc(-1 * var(--size) * 0.75);
181
- }
182
-
183
- &[data-open] {
184
- opacity: 1;
185
- --scale: 1;
186
- }
187
- &[data-closed] {
188
- opacity: 0;
189
- --scale: 0.5;
190
- }
191
- }
192
-
193
- .separator {
194
- margin: var(--m-space-xs);
195
- height: var(--m-lineWidth-sm);
196
- @apply --mx-bg(var(--m-color-neutral));
197
- }
198
-
199
- .groupLabel {
200
- user-select: none;
201
- @apply --mx-fg(var(--m-color-neutral-heavy));
202
- font-size: var(--m-prose-ambient-size);
203
- line-height: var(--m-prose-ambient-lineHeight);
204
- font-weight: var(--m-prose-ambient-weight);
205
- }
206
-
207
- .scrollArrow {
208
- box-sizing: border-box;
209
- z-index: 1;
210
- height: 1rem;
211
- left: var(--m-space-md);
212
- right: var(--m-space-md);
213
- cursor: default;
214
- user-select: none;
215
- align-items: center;
216
- justify-content: center;
217
- text-align: center;
218
- @apply --mx-bg(var(--m-surface-ambient-bg));
219
- @apply --mx-fg(var(--m-surface-ambient-fg));
220
- border-radius: inherit;
221
- font-size: var(--m-prose-ambient-size);
222
- line-height: var(--m-prose-ambient-lineHeight);
223
- font-weight: var(--m-prose-ambient-weight);
224
-
225
- &::before {
226
- position: absolute;
227
- left: 0;
228
- height: 100%;
229
- width: 100%;
230
- content: '';
231
- }
232
-
233
- &[data-direction='up'] {
234
- top: 0;
235
- &[data-side='none'] {
236
- &::before {
237
- top: -100%;
238
- }
239
- }
240
- }
241
- &[data-direction='down'] {
242
- bottom: 0;
243
- &[data-side='none'] {
244
- &::before {
245
- bottom: -100%;
246
- }
247
- }
248
- }
249
- }
250
-
251
- .trigger {
252
- user-select: none;
253
- }
254
-
255
- .triggerIcon {
256
- transition: transform var(--m-duration) var(--m-easing);
257
- margin-inline-start: auto;
258
- [data-open] > &,
259
- [data-popup-open] > & {
260
- transform: rotate(180deg);
261
- }
262
- }
@@ -1,54 +0,0 @@
1
- .root {
2
- width: 100%;
3
-
4
- display: grid;
5
- grid-template-columns: 1fr 1fr;
6
- row-gap: var(--m-space-xs);
7
- column-gap: var(--m-space-md);
8
- align-items: center;
9
- box-sizing: border-box;
10
- }
11
-
12
- .indicator {
13
- width: 100%;
14
- transition: transform var(--m-duration) var(--m-easing);
15
- border-radius: var(--m-radius);
16
- @apply --mx-bg(var(--m-color-main));
17
-
18
- &[data-complete] {
19
- @apply --mx-bg(var(--m-color-palette-success));
20
- }
21
- }
22
-
23
- .track {
24
- position: relative;
25
- width: 100%;
26
- height: --fn-literal(8px);
27
- overflow: clip;
28
- grid-column-start: 1;
29
- grid-column-end: 3;
30
- box-sizing: border-box;
31
-
32
- border-radius: var(--m-radius-lg);
33
- @apply --mx-bg(var(--m-color-neutral-paper));
34
- @apply --mx-borderColor(var(--m-color-neutral-ink));
35
- }
36
-
37
- .label {
38
- grid-column-start: 1;
39
- grid-row-start: 1;
40
- @apply --mx-fg(var(--m-color-neutral-ink));
41
- font-size: var(--m-prose-ambient-size);
42
- line-height: var(--m-prose-ambient-lineHeight);
43
- font-weight: var(--m-prose-ambient-weight);
44
- }
45
-
46
- .value {
47
- grid-column-start: 2;
48
- grid-row-start: 1;
49
- justify-self: end;
50
- @apply --mx-fg(var(--m-color-neutral-ink));
51
- font-size: var(--m-prose-ambient-size);
52
- line-height: var(--m-prose-ambient-lineHeight);
53
- font-weight: 500;
54
- }
@@ -1,23 +0,0 @@
1
- .dialogContent {
2
- display: flex;
3
- flex-direction: column;
4
- gap: var(--m-space-xs);
5
- }
6
-
7
- .dialogTitle {
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- gap: var(--m-space-md);
12
- }
13
-
14
- .appIcon {
15
- display: inline-block;
16
- height: 1em;
17
- width: 1em;
18
- border-radius: var(--m-radius);
19
- }
20
-
21
- .appDescription {
22
- margin-bottom: var(--m-space-sm);
23
- }
@@ -1,59 +0,0 @@
1
- .trigger {
2
- position: relative;
3
- justify-content: center;
4
- padding: var(--m-space-xs);
5
- border-radius: var(--m-action-radius);
6
- }
7
-
8
- .popup {
9
- transition-property: all;
10
- transition-duration: var(--m-duration);
11
- transition-timing-function: var(--m-easing-loose);
12
-
13
- position: fixed;
14
- contain: layout;
15
-
16
- @apply --mx-shadow(var(--m-shadow-lg));
17
- @apply --mx-surface-ambient;
18
- padding: 0;
19
-
20
- clip-path: inset(-50px -50px -50px -50px);
21
-
22
- bottom: anchor(bottom);
23
- &[data-align='center'] {
24
- justify-self: anchor-center;
25
- }
26
- &[data-align='start'] {
27
- justify-self: anchor-start;
28
- }
29
- &[data-align='end'] {
30
- justify-self: anchor-end;
31
- }
32
-
33
- &[data-starting-style],
34
- &[data-ending-style] {
35
- &[data-align='center'] {
36
- clip-path: inset(
37
- calc(100% - var(--trigger-height, 0px))
38
- calc((100% - var(--trigger-width, 0px)) / 2) 0
39
- calc((100% - var(--trigger-width, 0px)) / 2) round 200px
40
- );
41
- }
42
- &[data-align='start'] {
43
- clip-path: inset(
44
- calc(100% - var(--trigger-height, 0px))
45
- calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
46
- );
47
- }
48
- &[data-align='end'] {
49
- clip-path: inset(
50
- calc(100% - var(--trigger-height, 0px)) 0 0
51
- calc(100% - var(--trigger-width, 0px)) round 200px
52
- );
53
- }
54
- }
55
-
56
- &[data-ending-style] {
57
- opacity: 0;
58
- }
59
- }
@@ -1,102 +0,0 @@
1
- .root {
2
- @apply --mx-prose-secondary;
3
- width: 100%;
4
-
5
- & .ProseMirror {
6
- box-shadow: inset var(--m-shadow-sm);
7
- @apply --mx-control;
8
- @apply --mx-focus;
9
- }
10
-
11
- & h1,
12
- & h2,
13
- & h3,
14
- & p {
15
- margin-top: 0;
16
- }
17
-
18
- & h1 {
19
- @apply --mx-prose-primary;
20
- &:not(:first-child) {
21
- margin-top: var(--m-space-xl);
22
- }
23
- }
24
- & h2 {
25
- @apply --mx-prose-secondary;
26
- font-weight: var(--m-prose-primary-weight);
27
- &:not(:first-child) {
28
- margin-top: var(--m-space-lg);
29
- }
30
- }
31
- & h3 {
32
- @apply --mx-prose-ambient;
33
- font-weight: var(--m-prose-primary-weight);
34
- text-transform: uppercase;
35
- &:not(:first-child) {
36
- margin-top: var(--m-space-md);
37
- }
38
- }
39
- & h4 {
40
- @apply --mx-prose-ambient;
41
- font-weight: var(--m-prose-primary-weight);
42
- &:not(:first-child) {
43
- margin-top: var(--m-space-md);
44
- }
45
- }
46
- & p {
47
- @apply --mx-prose-secondary;
48
- margin-bottom: var(--m-space-md);
49
- }
50
- & a {
51
- text-decoration: underline;
52
- &:hover {
53
- text-decoration: underline;
54
- }
55
- @apply --mx-focus;
56
- }
57
- & blockquote {
58
- border-left: 4px solid var(--m-color-neutral-heavy);
59
- padding-left: var(--m-space-md);
60
- font-style: italic;
61
- margin-block: var(--m-space-md);
62
- margin-inline-start: var(--m-space-md);
63
- padding-inline: var(--m-space-md);
64
- @apply --mx-bg(var(--m-color-neutral-wash));
65
- }
66
- & ul {
67
- list-style: disc;
68
- }
69
- & ol {
70
- list-style: decimal;
71
- }
72
- & ul,
73
- & ol {
74
- padding-inline-start: var(--m-space-lg);
75
- margin-block: var(--m-space-md);
76
- }
77
- & li {
78
- margin-block-end: var(--m-space-xs);
79
- }
80
- & mark {
81
- @apply --mx-bg(var(--m-color-main-wash));
82
- }
83
- & strong {
84
- font-weight: var(--m-text-weight-bold);
85
- }
86
- & em {
87
- font-style: italic;
88
- }
89
- & hr {
90
- border: none;
91
- border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
92
- margin-block: var(--m-space-lg);
93
- }
94
- }
95
-
96
- .readonly {
97
- & .ProseMirror {
98
- @apply --mx-bg(transparent);
99
- box-shadow: none;
100
- border-width: 0;
101
- }
102
- }