@mirai/ui 2.0.7 → 2.0.8

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 (28) hide show
  1. package/build/components/Action/Action.module.css +4 -0
  2. package/build/components/Button/Button.module.css +27 -27
  3. package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap +32 -32
  4. package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +64 -64
  5. package/build/components/InputNumber/InputNumber.js +4 -2
  6. package/build/components/InputNumber/InputNumber.js.map +1 -1
  7. package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +81 -57
  8. package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +14 -14
  9. package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +6 -6
  10. package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap +30 -30
  11. package/build/components/Tooltip/__tests__/__snapshots__/Tooltip.test.jsx.snap +20 -20
  12. package/build/components/components.customElements.js +6 -0
  13. package/build/components/components.customElements.js.map +1 -0
  14. package/build/components/index.js +1 -0
  15. package/build/components/index.js.map +1 -1
  16. package/build/helpers/CustomElement.js +39 -0
  17. package/build/helpers/CustomElement.js.map +1 -0
  18. package/build/helpers/index.js +11 -0
  19. package/build/helpers/index.js.map +1 -1
  20. package/build/primitives/Layer/__tests__/__snapshots__/Layer.test.js.snap +14 -14
  21. package/build/primitives/Pressable/Pressable.module.css +8 -0
  22. package/build/primitives/Primitive/Primitive.constants.js +0 -2
  23. package/build/primitives/Primitive/Primitive.constants.js.map +1 -1
  24. package/build/primitives/index.js +1 -64
  25. package/build/primitives/index.js.map +1 -1
  26. package/build/primitives/primitives.customElements.js +20 -0
  27. package/build/primitives/primitives.customElements.js.map +1 -0
  28. package/package.json +1 -1
package/build/components/Action/Action.module.css CHANGED
@@ -10,6 +10,10 @@
10
10
  width: fit-content;
11
11
  }
12
12
 
13
+ .action:focus-visible {
14
+ outline-offset: calc(var(--mirai-ui-focus-width) / 2);
15
+ }
16
+
13
17
  .action.bold {
14
18
  font-family: var(--mirai-ui-font-bold);
15
19
  font-weight: var(--mirai-ui-font-bold-weight);
package/build/components/Button/Button.module.css CHANGED
@@ -1,4 +1,4 @@
1
- button.button {
1
+ .button {
2
2
  align-items: center;
3
3
  background-color: var(--mirai-ui-button-background);
4
4
  border-radius: var(--mirai-ui-button-radius);
@@ -10,112 +10,112 @@ button.button {
10
10
  justify-content: center;
11
11
  max-height: var(--mirai-ui-button-height);
12
12
  min-height: var(--mirai-ui-button-height);
13
- outline: none;
14
13
  overflow: hidden;
15
14
  padding: 0 var(--mirai-ui-button-padding-x);
16
15
  position: relative;
16
+ text-align: center;
17
17
  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
18
18
  box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
19
19
  color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
20
20
  width: fit-content;
21
21
  }
22
22
 
23
- button.button,
24
- button.button .children {
23
+ .button,
24
+ .button .children {
25
25
  gap: var(--mirai-ui-space-XXS);
26
26
  }
27
27
 
28
28
  /* -- variants */
29
- button.button:disabled:not(.busy) {
29
+ .button.disabled:not(.busy) {
30
30
  background-color: var(--mirai-ui-button-disabled-background);
31
31
  color: var(--mirai-ui-button-disabled-color);
32
32
  }
33
33
 
34
- button.secondary {
34
+ .secondary {
35
35
  background-color: var(--mirai-ui-button-secondary-background);
36
36
  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-color);
37
37
  color: var(--mirai-ui-button-secondary-color);
38
38
  }
39
39
 
40
- button.button:not(:disabled).secondary:active,
41
- button.button:not(:disabled).secondary:hover {
40
+ .button:not(.disabled).secondary:active,
41
+ .button:not(.disabled).secondary:hover {
42
42
  background-color: var(--mirai-ui-button-secondary-background-active);
43
43
  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color);
44
44
  color: var(--mirai-ui-button-secondary-focus-color);
45
45
  }
46
46
 
47
- button.transparent {
47
+ .transparent {
48
48
  background-color: transparent;
49
49
  color: var(--mirai-ui-button-transparent-color);
50
50
  }
51
51
 
52
- button.transparent:not(:disabled):active,
53
- button.transparent:not(:disabled):hover {
52
+ .transparent:not(.disabled):active,
53
+ .transparent:not(.disabled):hover {
54
54
  background-color: var(--mirai-ui-button-transparent-background-active);
55
55
  color: var(--mirai-ui-button-focus-color);
56
56
  }
57
57
 
58
- button.button:not(:disabled):not(.secondary):not(.transparent):active,
59
- button.button:not(:disabled):not(.secondary):not(.transparent):hover {
58
+ .button:not(.disabled):not(.secondary):not(.transparent):active,
59
+ .button:not(.disabled):not(.secondary):not(.transparent):hover {
60
60
  background-color: var(--mirai-ui-button-focus-color);
61
61
  }
62
62
 
63
63
  /* -- sizing */
64
- button.large {
64
+ .large {
65
65
  font-size: var(--mirai-ui-font-size-paragraph);
66
66
  max-height: var(--mirai-ui-button-large-height);
67
67
  min-height: var(--mirai-ui-button-large-height);
68
68
  }
69
69
 
70
- button.rounded {
70
+ .rounded {
71
71
  border-radius: var(--mirai-ui-space-XXL);
72
72
  }
73
73
 
74
- button.small {
74
+ .small {
75
75
  font-size: var(--mirai-ui-font-size-small);
76
76
  max-height: var(--mirai-ui-button-small-height);
77
77
  min-height: var(--mirai-ui-button-small-height);
78
78
  padding: 0 calc(var(--mirai-ui-button-padding-x) / 2);
79
79
  }
80
80
 
81
- button.squared {
81
+ .squared {
82
82
  padding: 0;
83
83
  min-width: var(--mirai-ui-button-height);
84
84
  max-width: var(--mirai-ui-button-height);
85
85
  }
86
86
 
87
- button.large.squared {
87
+ .large.squared {
88
88
  min-width: var(--mirai-ui-button-large-height);
89
89
  max-width: var(--mirai-ui-button-large-height);
90
90
  }
91
91
 
92
- button.small.squared {
92
+ .small.squared {
93
93
  min-width: var(--mirai-ui-button-small-height);
94
94
  max-width: var(--mirai-ui-button-small-height);
95
95
  }
96
96
 
97
- button.wide {
98
- width: 100%;
97
+ .wide {
98
+ width: auto;
99
99
  }
100
100
 
101
101
  /* -- children */
102
- button.button .children,
103
- button.button .spinner {
102
+ .button .children,
103
+ .button .spinner {
104
104
  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
105
105
  transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
106
106
  }
107
107
 
108
- button.button.busy .children {
108
+ .button.busy .children {
109
109
  opacity: 0;
110
110
  transform: translateY(var(--mirai-ui-space-XL));
111
111
  }
112
112
 
113
- button.button .spinner {
113
+ .button .spinner {
114
114
  opacity: 0;
115
115
  transform: translateY(calc(var(--mirai-ui-space-XL) * -1));
116
116
  }
117
117
 
118
- button.button.busy .spinner {
118
+ .button.busy .spinner {
119
119
  opacity: 1;
120
120
  transform: translateY(0%);
121
121
  }
@@ -144,7 +144,7 @@ button.button.busy .spinner {
144
144
  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
145
145
  }
146
146
 
147
- .secondary:not(:disabled) .busyContainer:before {
147
+ .secondary:not(.disabled) .busyContainer:before {
148
148
  background-color: var(--mirai-ui-button-background);
149
149
  }
150
150
 
package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap CHANGED
@@ -2,20 +2,20 @@
2
2
 
3
3
  exports[`component:<Button> inherit:className 1`] = `
4
4
  <DocumentFragment>
5
- <button
5
+ <ui-button
6
6
  class="pressable button mirai"
7
7
  tabindex="0"
8
8
  >
9
9
  children
10
- </button>
10
+ </ui-button>
11
11
  </DocumentFragment>
12
12
  `;
13
13
 
14
14
  exports[`component:<Button> prop:busy 1`] = `
15
15
  <DocumentFragment>
16
- <button
16
+ <ui-button
17
17
  class="pressable disabled button busy disabled"
18
- disabled=""
18
+ disabled="true"
19
19
  >
20
20
  <ui-view
21
21
  class="view busyContainer active"
@@ -29,37 +29,37 @@ exports[`component:<Button> prop:busy 1`] = `
29
29
  >
30
30
  children
31
31
  </ui-view>
32
- </button>
32
+ </ui-button>
33
33
  </DocumentFragment>
34
34
  `;
35
35
 
36
36
  exports[`component:<Button> prop:disabled 1`] = `
37
37
  <DocumentFragment>
38
- <button
38
+ <ui-button
39
39
  class="pressable disabled button disabled"
40
- disabled=""
40
+ disabled="true"
41
41
  >
42
42
  children
43
- </button>
43
+ </ui-button>
44
44
  </DocumentFragment>
45
45
  `;
46
46
 
47
47
  exports[`component:<Button> prop:large 1`] = `
48
48
  <DocumentFragment>
49
- <button
49
+ <ui-button
50
50
  class="pressable button large"
51
51
  tabindex="0"
52
52
  >
53
53
  children
54
- </button>
54
+ </ui-button>
55
55
  </DocumentFragment>
56
56
  `;
57
57
 
58
58
  exports[`component:<Button> prop:secondary && prop:busy 1`] = `
59
59
  <DocumentFragment>
60
- <button
60
+ <ui-button
61
61
  class="pressable disabled button busy secondary disabled"
62
- disabled=""
62
+ disabled="true"
63
63
  >
64
64
  <ui-view
65
65
  class="view busyContainer active"
@@ -73,15 +73,15 @@ exports[`component:<Button> prop:secondary && prop:busy 1`] = `
73
73
  >
74
74
  children
75
75
  </ui-view>
76
- </button>
76
+ </ui-button>
77
77
  </DocumentFragment>
78
78
  `;
79
79
 
80
80
  exports[`component:<Button> prop:secondary && prop:busy 2`] = `
81
81
  <DocumentFragment>
82
- <button
82
+ <ui-button
83
83
  class="pressable disabled button busy transparent disabled"
84
- disabled=""
84
+ disabled="true"
85
85
  >
86
86
  <ui-view
87
87
  class="view busyContainer active"
@@ -95,40 +95,40 @@ exports[`component:<Button> prop:secondary && prop:busy 2`] = `
95
95
  >
96
96
  children
97
97
  </ui-view>
98
- </button>
98
+ </ui-button>
99
99
  </DocumentFragment>
100
100
  `;
101
101
 
102
102
  exports[`component:<Button> prop:secondary 1`] = `
103
103
  <DocumentFragment>
104
- <button
104
+ <ui-button
105
105
  class="pressable button secondary"
106
106
  tabindex="0"
107
107
  >
108
108
  children
109
- </button>
109
+ </ui-button>
110
110
  </DocumentFragment>
111
111
  `;
112
112
 
113
113
  exports[`component:<Button> prop:small 1`] = `
114
114
  <DocumentFragment>
115
- <button
115
+ <ui-button
116
116
  class="pressable button small"
117
117
  tabindex="0"
118
118
  >
119
119
  children
120
- </button>
120
+ </ui-button>
121
121
  </DocumentFragment>
122
122
  `;
123
123
 
124
124
  exports[`component:<Button> prop:squared 1`] = `
125
125
  <DocumentFragment>
126
- <button
126
+ <ui-button
127
127
  class="pressable button squared"
128
128
  tabindex="0"
129
129
  >
130
130
  children
131
- </button>
131
+ </ui-button>
132
132
  </DocumentFragment>
133
133
  `;
134
134
 
@@ -137,57 +137,57 @@ exports[`component:<Button> prop:tooltip 1`] = `
137
137
  <ui-tooltip
138
138
  class="container"
139
139
  >
140
- <button
140
+ <ui-button
141
141
  class="pressable dispatcher button"
142
142
  tabindex="0"
143
143
  >
144
144
  children
145
- </button>
145
+ </ui-button>
146
146
  </ui-tooltip>
147
147
  </DocumentFragment>
148
148
  `;
149
149
 
150
150
  exports[`component:<Button> prop:transparent 1`] = `
151
151
  <DocumentFragment>
152
- <button
152
+ <ui-button
153
153
  class="pressable button transparent"
154
154
  tabindex="0"
155
155
  >
156
156
  children
157
- </button>
157
+ </ui-button>
158
158
  </DocumentFragment>
159
159
  `;
160
160
 
161
161
  exports[`component:<Button> prop:wide 1`] = `
162
162
  <DocumentFragment>
163
- <button
163
+ <ui-button
164
164
  class="pressable button wide"
165
165
  tabindex="0"
166
166
  >
167
167
  children
168
- </button>
168
+ </ui-button>
169
169
  </DocumentFragment>
170
170
  `;
171
171
 
172
172
  exports[`component:<Button> renders 1`] = `
173
173
  <DocumentFragment>
174
- <button
174
+ <ui-button
175
175
  class="pressable button"
176
176
  tabindex="0"
177
177
  >
178
178
  children
179
- </button>
179
+ </ui-button>
180
180
  </DocumentFragment>
181
181
  `;
182
182
 
183
183
  exports[`component:<Button> testId 1`] = `
184
184
  <DocumentFragment>
185
- <button
185
+ <ui-button
186
186
  class="pressable button"
187
187
  data-testid="mirai"
188
188
  tabindex="0"
189
189
  >
190
190
  children
191
- </button>
191
+ </ui-button>
192
192
  </DocumentFragment>
193
193
  `;