@a-type/ui 6.0.50 → 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 (69) 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/dist/colors.module.css +0 -59
  5. package/dist/components/actions/ActionBar.module.css +0 -34
  6. package/dist/components/actions/ActionButton.module.css +0 -6
  7. package/dist/components/avatar/Avatar.module.css +0 -35
  8. package/dist/components/box/Box.module.css +0 -291
  9. package/dist/components/button/Button.module.css +0 -148
  10. package/dist/components/camera/Camera.module.css +0 -65
  11. package/dist/components/card/Card.module.css +0 -183
  12. package/dist/components/checkbox/Checkbox.module.css +0 -74
  13. package/dist/components/chip/Chip.module.css +0 -32
  14. package/dist/components/collapsible/Collapsible.module.css +0 -36
  15. package/dist/components/combobox/Combobox.module.css +0 -170
  16. package/dist/components/datePicker/Calendar.module.css +0 -167
  17. package/dist/components/datePicker/datePicker.module.css +0 -7
  18. package/dist/components/datePicker/dateRangePicker.module.css +0 -38
  19. package/dist/components/dialog/Dialog.module.css +0 -188
  20. package/dist/components/divider/Divider.module.css +0 -10
  21. package/dist/components/dropdownMenu/DropdownMenu.module.css +0 -3
  22. package/dist/components/editableText/EditableText.module.css +0 -44
  23. package/dist/components/emojiPicker/EmojiPicker.module.css +0 -84
  24. package/dist/components/forms/EmojiField.module.css +0 -8
  25. package/dist/components/forms/Field.module.css +0 -62
  26. package/dist/components/forms/Form.module.css +0 -6
  27. package/dist/components/forms/NumberStepperField.module.css +0 -5
  28. package/dist/components/forms/TextField.module.css +0 -11
  29. package/dist/components/horizontalList/HorizontalList.module.css +0 -50
  30. package/dist/components/icon/Icon.module.css +0 -20
  31. package/dist/components/imageUploader/ImageUploader.module.css +0 -67
  32. package/dist/components/img/Img.module.css +0 -42
  33. package/dist/components/input/Input.module.css +0 -100
  34. package/dist/components/layouts/PageContent.module.css +0 -25
  35. package/dist/components/layouts/PageFixedArea.module.css +0 -11
  36. package/dist/components/layouts/PageNav.module.css +0 -31
  37. package/dist/components/layouts/PageNowPlaying.module.css +0 -46
  38. package/dist/components/layouts/PageRoot.module.css +0 -29
  39. package/dist/components/layouts/PageSection.module.css +0 -19
  40. package/dist/components/lightbox/Lightbox.module.css +0 -104
  41. package/dist/components/lists/lists.module.css +0 -31
  42. package/dist/components/marquee/marquee.module.css +0 -32
  43. package/dist/components/navBar/NavBar.module.css +0 -143
  44. package/dist/components/note/Note.module.css +0 -114
  45. package/dist/components/numberStepper/NumberStepper.module.css +0 -32
  46. package/dist/components/particles/ParticleLayer.module.css +0 -8
  47. package/dist/components/peek/Peek.module.css +0 -96
  48. package/dist/components/popover/Popover.module.css +0 -24
  49. package/dist/components/primitives/menus.module.css +0 -262
  50. package/dist/components/progress/Progress.module.css +0 -54
  51. package/dist/components/pwaInstall/PwaInstall.module.css +0 -23
  52. package/dist/components/quickAction/QuickAction.module.css +0 -59
  53. package/dist/components/richEditor/richEditor.module.css +0 -102
  54. package/dist/components/scrollArea/ScrollArea.module.css +0 -187
  55. package/dist/components/select/Select.module.css +0 -46
  56. package/dist/components/skeletons/skeletons.module.css +0 -33
  57. package/dist/components/slider/Slider.module.css +0 -97
  58. package/dist/components/spinner/Spinner.module.css +0 -54
  59. package/dist/components/splashScreen/SplashScreen.module.css +0 -54
  60. package/dist/components/switch/Switch.module.css +0 -63
  61. package/dist/components/tabs/tabs.module.css +0 -139
  62. package/dist/components/textArea/TextArea.module.css +0 -14
  63. package/dist/components/toasts/toasts.module.css +0 -201
  64. package/dist/components/toggleGroup/toggleGroup.module.css +0 -55
  65. package/dist/components/tooltip/Tooltip.module.css +0 -72
  66. package/dist/components/typography/typography.module.css +0 -74
  67. package/dist/components/viewport/Viewport.module.css +0 -44
  68. package/dist/components/viewport/ViewportContent.module.css +0 -8
  69. package/dist/theme.stories.module.css +0 -13
@@ -1,25 +0,0 @@
1
- .root {
2
- display: flex;
3
- flex-direction: column;
4
- align-items: stretch;
5
- justify-content: start;
6
- width: 100%;
7
- anchor-name: --page-content;
8
- flex: 1;
9
-
10
- gap: var(--m-space-md);
11
-
12
- padding: var(--m-space-md);
13
- @media (min-width: 768px) {
14
- padding: var(--m-space-lg);
15
- }
16
-
17
- margin-inline: auto;
18
- max-width: 100%;
19
- min-width: 0;
20
-
21
- container-type: inline-size;
22
- container-name: --page-content;
23
-
24
- grid-area: content;
25
- }
@@ -1,11 +0,0 @@
1
- .root {
2
- position: sticky;
3
- top: 0;
4
- z-index: var(--z-nav);
5
- width: 100%;
6
- display: flex;
7
- flex-direction: column;
8
- align-items: stretch;
9
- gap: var(--m-space-sm);
10
- @apply --mx-bg(inherit);
11
- }
@@ -1,31 +0,0 @@
1
- .root {
2
- grid-area: nav;
3
- position: sticky;
4
- bottom: 0;
5
- z-index: var(--z-nav);
6
-
7
- padding-block-end: calc(0.25rem + env(safe-area-inset-bottom, 0px));
8
-
9
- @apply --mx-bg(inherit);
10
-
11
- &::before {
12
- position: absolute;
13
- content: '';
14
- top: 0;
15
- left: var(--m-space-md);
16
- right: var(--m-space-md);
17
- height: 1px;
18
- @apply --mx-bg(var(--m-color-neutral-heavy));
19
- @media (min-width: 768px) {
20
- display: none;
21
- }
22
- }
23
-
24
- @media (min-width: 768px) {
25
- bottom: auto;
26
- left: auto;
27
- right: auto;
28
- top: var(--m-space-lg);
29
- height: auto;
30
- }
31
- }
@@ -1,46 +0,0 @@
1
- .root {
2
- display: flex;
3
- flex-direction: column;
4
- align-items: center;
5
- gap: var(--m-space-sm);
6
-
7
- padding: var(--m-space-sm);
8
-
9
- position: fixed;
10
- position-anchor: --page-content;
11
- left: anchor(left);
12
- right: anchor(right);
13
- top: auto;
14
- bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
15
-
16
- @media (min-width: 768px) {
17
- bottom: var(--m-space-md);
18
- align-items: center;
19
- transition: bottom var(--m-duration) var(--m-easing);
20
- }
21
-
22
- &[data-disable-portal='true'] {
23
- z-index: var(--z-now-playing);
24
- }
25
-
26
- &[data-keep-above-keyboard='true'] {
27
- @media (max-width: 767px) {
28
- top: auto;
29
- &[data-virtual-keyboard-behavior='overlay'] {
30
- bottom: max(
31
- var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)),
32
- var(--nav-height, env(safe-area-inset-bottom, 0px))
33
- );
34
- }
35
- &[data-virtual-keyboard-behavior='displace'] {
36
- bottom: max(
37
- var(
38
- --mock-virtual-keyboard-height,
39
- var(--viewport-bottom-offset, 0px)
40
- ),
41
- var(--nav-height, env(safe-area-inset-bottom, 0px))
42
- );
43
- }
44
- }
45
- }
46
- }
@@ -1,29 +0,0 @@
1
- .root {
2
- align-items: stretch;
3
- justify-content: center;
4
- min-height: 100dvh;
5
- flex-shrink: 1;
6
- flex-grow: 1;
7
- flex-basis: auto;
8
- height: max-content;
9
-
10
- display: flex;
11
- flex-direction: column;
12
-
13
- @apply --mx-bg(var(--m-color-main-paper));
14
-
15
- @media (min-width: 768px) {
16
- display: grid;
17
- grid-template-areas: 'gutter1 nav content gutter2';
18
- grid-template-columns: 1fr auto 20fr 1fr;
19
- grid-template-rows: auto;
20
- height: auto;
21
- min-height: auto;
22
- align-items: start;
23
- flex-basis: 0;
24
- }
25
-
26
- @media (min-width: 1024px) {
27
- grid-template-columns: 1fr auto min(800px, 70vw) 1fr;
28
- }
29
- }
@@ -1,19 +0,0 @@
1
- .root {
2
- max-width: 80vw;
3
- width: 100%;
4
- padding: var(--m-space-md);
5
- @apply --mx-bg(var(--m-surface-ambient-bg));
6
- border-radius: var(--m-radius-lg);
7
- @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
8
-
9
- @media (min-width: 768px) {
10
- min-width: 0;
11
- }
12
- }
13
-
14
- .grid {
15
- display: grid;
16
- gap: var(--m-space-md);
17
- align-items: start;
18
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
19
- }
@@ -1,104 +0,0 @@
1
- .trigger {
2
- cursor: pointer;
3
-
4
- &:focus {
5
- outline: none;
6
- }
7
-
8
- &:focus-visible {
9
- @apply --mx-shadow;
10
- --mx-ring-value: --fn-focus-ring();
11
- border-radius: var(--m-action-radius);
12
- }
13
- }
14
-
15
- .title {
16
- position: absolute;
17
- width: 1px;
18
- height: 1px;
19
- padding: 0;
20
- margin: -1px;
21
- overflow: hidden;
22
- clip: rect(0, 0, 0, 0);
23
- white-space: nowrap;
24
- border: 0;
25
- }
26
-
27
- .close {
28
- position: absolute;
29
- right: var(--m-space-md);
30
- top: var(--m-space-md);
31
- }
32
-
33
- .overlay {
34
- position: fixed;
35
- inset: 0;
36
- z-index: 1000;
37
- backdrop-filter: blur(4px);
38
- transition: opacity 0.2s ease;
39
-
40
- @apply --mx-bg(var(--m-color-neutral-ink));
41
- @apply --mx-bg-faded(50%);
42
-
43
- &[data-state='closed'] {
44
- opacity: 0;
45
- }
46
- }
47
-
48
- .contentRoot {
49
- position: fixed;
50
- left: 50%;
51
- top: 50%;
52
- z-index: 1001;
53
-
54
- display: flex;
55
- align-items: center;
56
- justify-content: center;
57
-
58
- height: 100%;
59
- max-height: 85vh;
60
- width: 90vw;
61
- max-width: 100%;
62
-
63
- padding: var(--m-space-lg);
64
- border: none;
65
- background: none;
66
- pointer-events: none;
67
-
68
- transform: translate(-50%, -50%);
69
- transition:
70
- opacity 0.2s ease,
71
- transform 0.2s ease;
72
-
73
- &[data-state='closed'] {
74
- opacity: 0;
75
- transform: translate(-50%, -45%) scale(0.95);
76
- }
77
- }
78
-
79
- .contentInner {
80
- max-height: 100%;
81
- max-width: 100%;
82
- display: flex;
83
- flex-direction: column;
84
- align-items: center;
85
- justify-content: center;
86
- overflow: hidden;
87
- pointer-events: none;
88
-
89
- & > * {
90
- pointer-events: auto;
91
- }
92
- }
93
-
94
- .pointerEventsAuto {
95
- pointer-events: auto;
96
- }
97
-
98
- .image {
99
- object-fit: contain;
100
- max-height: 100%;
101
- max-width: 100%;
102
- min-height: 80px;
103
- min-width: 80px;
104
- }
@@ -1,31 +0,0 @@
1
- .ol,
2
- .ul {
3
- list-style-position: inside;
4
- margin: 0;
5
- padding: 0;
6
- padding-inline-start: var(--m-space-lg);
7
- display: flex;
8
- flex-direction: column;
9
- gap: var(--m-space-sm);
10
-
11
- & > li {
12
- margin-left: var(--m-space-sm);
13
- }
14
-
15
- &[data-unstyled] {
16
- list-style: none;
17
- gap: 0;
18
- padding-inline-start: 0;
19
- & > li {
20
- margin-left: 0;
21
- }
22
- }
23
- }
24
-
25
- .ol {
26
- list-style: decimal;
27
- }
28
-
29
- .ul {
30
- list-style: disc;
31
- }
@@ -1,32 +0,0 @@
1
- .root {
2
- position: relative;
3
- height: 100%;
4
- width: 100%;
5
- overflow: clip;
6
- }
7
-
8
- .inner {
9
- position: absolute;
10
- left: 0;
11
- top: 0;
12
- width: 100%;
13
- height: 100%;
14
- display: flex;
15
- flex-direction: row;
16
- overflow: visible;
17
- transition: transform var(--m-duration-long) var(--m-easing);
18
- }
19
-
20
- .item {
21
- height: 100%;
22
- width: 100%;
23
- min-width: 0;
24
- flex-shrink: 0;
25
- object-fit: cover;
26
-
27
- & img {
28
- width: 100%;
29
- height: 100%;
30
- object-fit: cover;
31
- }
32
- }
@@ -1,143 +0,0 @@
1
- .root {
2
- display: grid;
3
- grid-auto-columns: 1fr;
4
- grid-auto-flow: column;
5
- height: auto;
6
- justify-items: center;
7
- overflow: clip;
8
- border-radius: 0;
9
- padding: var(--m-space-sm);
10
- z-index: 50;
11
- padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0px));
12
-
13
- @media (min-width: 768px) {
14
- height: min-content;
15
- display: flex;
16
- flex-direction: column;
17
- align-items: stretch;
18
- justify-content: start;
19
- gap: var(--m-space-sm);
20
- overflow-x: clip;
21
- overflow-y: auto;
22
- border-radius: 0;
23
- padding-bottom: var(--m-space-xl);
24
- box-shadow: none;
25
- @apply --mx-bg(transparent);
26
- border: none;
27
- }
28
- }
29
-
30
- .item {
31
- position: relative;
32
- height: 100%;
33
- display: flex;
34
- flex-direction: column;
35
- cursor: pointer;
36
- user-select: none;
37
- align-items: center;
38
- justify-content: center;
39
- gap: var(--m-space-sm);
40
- white-space: nowrap;
41
- padding: var(--m-action-padding);
42
- transition: all var(--m-duration) var(--m-easing);
43
- @apply --mx-fg(var(--m-color-neutral-ink));
44
- @apply --mx-bg(transparent);
45
- border-radius: var(--m-radius-sm);
46
- border: none;
47
- font-size: var(--m-prose-ambient-size);
48
- line-height: 1;
49
- font-weight: var(--m-prose-ambient-weight);
50
- @apply --mx-shadow;
51
-
52
- &:active {
53
- @apply --mx-bg-heavier(1);
54
- }
55
-
56
- &:hover {
57
- @apply --mx-bg(var(--m-action-light-bg));
58
- @apply --mx-bg-faded(50%);
59
- }
60
-
61
- &:focus {
62
- outline: none;
63
- }
64
- &:focus-visible {
65
- --mx-ring-value: --fn-focus-ring();
66
- }
67
-
68
- &[data-active='true'] {
69
- @apply --mx-bg(var(--m-action-light-bg));
70
- @apply --mx-fg(var(--m-action-light-fg));
71
- }
72
-
73
- @media (min-width: 768px) {
74
- height: auto;
75
- display: flex;
76
- flex-direction: row-reverse;
77
- justify-content: end;
78
- align-items: center;
79
- gap: var(--m-space-md);
80
- padding: var(--m-action-padding);
81
- overflow: visible;
82
- font-size: var(--m-prose-secondary-size);
83
- &:active {
84
- @apply --mx-bg-heavier(1);
85
- }
86
- }
87
- }
88
-
89
- .itemIconWrapper {
90
- position: relative;
91
- display: flex;
92
-
93
- & img,
94
- & svg {
95
- width: --fn-literal(15px);
96
- height: --fn-literal(15px);
97
- }
98
-
99
- @media (min-width: 768px) {
100
- @apply --mx-bg(var(--m-color-neutral-light));
101
- @apply --mx-bg-faded(50%);
102
- padding: var(--m-space-sm);
103
- border-radius: var(--m-action-radius);
104
-
105
- [data-active='true'] & {
106
- @apply --mx-bg(inherit);
107
- }
108
- }
109
- }
110
-
111
- .itemText {
112
- @apply --mx-fg(var(--m-color-neutral-ink));
113
- font-size: var(--m-prose-ambient-size);
114
- line-height: 1;
115
- font-weight: inherit;
116
- display: inline-block;
117
- overflow: clip;
118
- text-overflow: ellipsis;
119
- white-space: nowrap;
120
- }
121
-
122
- .icon {
123
- position: relative;
124
- z-index: 1;
125
- display: flex;
126
- @apply --mx-fg(inherit);
127
-
128
- [data-active='true'] & {
129
- @apply --mx-fill(var(--m-color-main));
130
- }
131
- }
132
-
133
- .pip {
134
- position: absolute;
135
- top: var(--m-space-sm);
136
- right: var(--m-space-sm);
137
- width: 6px;
138
- height: 6px;
139
- border-radius: 50%;
140
- background-color: var(--m-color-main);
141
- @apply --mx-shadow;
142
- --mx-shadow-value: var(--m-shadow-sm);
143
- }
@@ -1,114 +0,0 @@
1
- .root {
2
- @apply --mx-shadow;
3
-
4
- &:has(input:focus[data-focus-clicked]),
5
- &:has(textarea:focus[data-focus-clicked]) {
6
- @apply --mx-bg(var(--m-color-main-light));
7
- @apply --mx-bg-lighter(3);
8
- --mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
9
- }
10
-
11
- &:has(input:focus-visible),
12
- &:has(textarea:focus-visible) {
13
- @apply --mx-bg(var(--m-color-main-light));
14
- @apply --mx-bg-lighter(3);
15
- --mx-ring-value: --fn-focus-ring();
16
- }
17
- }
18
-
19
- .layout {
20
- display: flex;
21
- flex-direction: row;
22
- }
23
-
24
- .content {
25
- position: relative;
26
- flex: 1;
27
- padding: var(--m-space-sm);
28
-
29
- font-size: var(--m-prose-ambient-size);
30
- line-height: var(--m-prose-ambient-lineHeight);
31
- font-weight: var(--m-prose-ambient-weight);
32
- font-style: italic;
33
-
34
- @apply --mx-fg(var(--m-color-neutral-ink));
35
- @apply --mx-bg(var(--m-color-main-wash));
36
- @apply --mx-bg-heavier(1);
37
- @apply --mx-borderColor(var(--m-color-main-heavy));
38
- border-right-width: 0;
39
-
40
- & input,
41
- & textarea {
42
- padding: 0;
43
- box-shadow: none;
44
- background: transparent;
45
- outline: none;
46
- border: none;
47
- }
48
- }
49
-
50
- .fold {
51
- display: flex;
52
- flex: 0 0 20px;
53
- flex-direction: column;
54
- align-items: stretch;
55
- justify-content: stretch;
56
- }
57
-
58
- .foldTop {
59
- position: relative;
60
- height: 20px;
61
- width: 20px;
62
- flex: 0 0 20px;
63
-
64
- @apply --mx-borderColor(var(--m-color-main-heavy));
65
- border-bottom-width: var(--m-lineWidth-md);
66
- border-left-width: var(--m-lineWidth-md);
67
- border-top-width: 0;
68
- border-right-width: 0;
69
- }
70
-
71
- .topCorner {
72
- box-sizing: content-box;
73
- height: 0;
74
- width: 0;
75
- top: 0;
76
- right: 0;
77
- transform-origin: right bottom;
78
-
79
- @apply --mx-borderColor(var(--m-color-main-wash));
80
- @apply --mx-borderColor-heavier(1);
81
- border-width: 9.5px;
82
- border-style: solid;
83
- border-color: transparent;
84
- border-bottom-color: var(--mx-borderColor-ref);
85
- border-left-color: var(--mx-borderColor-ref);
86
- }
87
-
88
- .diagonal {
89
- position: absolute;
90
- left: 9px;
91
- top: -3px;
92
- height: 27px;
93
- width: 0.5px;
94
- transform-origin: center center;
95
- transform: rotate(-45deg);
96
-
97
- @apply --mx-bg(var(--m-color-main-heavy));
98
- }
99
-
100
- .foldBottom {
101
- flex: 1;
102
- @apply --mx-borderColor(var(--m-color-main-heavy));
103
- @apply --mx-bg(var(--m-color-main-wash));
104
- @apply --mx-bg-heavier(1);
105
- border-right-width: var(--m-lineWidth-md);
106
- border-bottom-width: var(--m-lineWidth-md);
107
- border-left-width: 0;
108
- border-top-width: 0;
109
- }
110
-
111
- .input {
112
- width: 100%;
113
- padding: 0;
114
- }
@@ -1,32 +0,0 @@
1
- .root {
2
- width: min-content;
3
- display: flex;
4
- flex-shrink: 0;
5
- align-items: center;
6
- overflow: clip;
7
- @apply --mx-shadow;
8
- --mx-shadow-value: var(--m-shadow-sm);
9
-
10
- @apply --mx-bg(var(--m-control-bg));
11
- @apply --mx-fg(var(--m-control-fg));
12
- @apply --mx-borderColor(var(--m-control-borderColor));
13
- border-radius: var(--m-control-radius);
14
-
15
- &:disabled,
16
- &[data-disabled='true'] {
17
- --mx-shadow-value: 0 0 0 0 transparent;
18
- @apply --mx-bg(transparent);
19
- @apply --mx-borderColor-lighter(2);
20
- @apply --mx-fg-lighter(2);
21
- }
22
-
23
- &[data-emphasis='primary'] {
24
- @apply --mx-bg(var(--m-color-main-wash));
25
- @apply --mx-fg(var(--m-color-main-ink));
26
- }
27
- }
28
-
29
- .value {
30
- width: 80px;
31
- text-align: center;
32
- }
@@ -1,8 +0,0 @@
1
- .canvas {
2
- pointer-events: none;
3
- position: fixed;
4
- inset: 0;
5
- z-index: 999999;
6
- width: 100%;
7
- height: 100%;
8
- }