@umamichi-ui/common-components 0.3.1 → 0.3.2

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 (40) hide show
  1. package/README.md +112 -112
  2. package/dist/dialog/AboutDialog.d.ts +1 -1
  3. package/dist/dialog/AboutDialog.d.ts.map +1 -1
  4. package/dist/dialog/AboutDialog.js.map +1 -1
  5. package/dist/dialog/ConfirmDialog.d.ts +1 -1
  6. package/dist/dialog/ConfirmDialog.d.ts.map +1 -1
  7. package/dist/dialog/ConfirmDialog.js.map +1 -1
  8. package/dist/dialog/ConfirmDialogOverlay.d.ts +1 -1
  9. package/dist/dialog/ConfirmDialogOverlay.d.ts.map +1 -1
  10. package/dist/icons/ChevronIcons.d.ts +2 -2
  11. package/dist/icons/ChevronIcons.d.ts.map +1 -1
  12. package/dist/icons/ChevronIcons.js.map +1 -1
  13. package/dist/icons/DropdownMenuChevron.d.ts +1 -1
  14. package/dist/icons/DropdownMenuChevron.d.ts.map +1 -1
  15. package/dist/icons/DropdownMenuChevron.js.map +1 -1
  16. package/dist/icons/InfoCircleIcon.d.ts +1 -1
  17. package/dist/icons/InfoCircleIcon.d.ts.map +1 -1
  18. package/dist/icons/InfoCircleIcon.js.map +1 -1
  19. package/dist/menu/FloatingMenu.d.ts +1 -1
  20. package/dist/menu/FloatingMenu.d.ts.map +1 -1
  21. package/dist/menu/FloatingMenu.js.map +1 -1
  22. package/dist/menu/MobileActionSheet.d.ts +1 -1
  23. package/dist/menu/MobileActionSheet.d.ts.map +1 -1
  24. package/dist/menu/MobileActionSheet.js.map +1 -1
  25. package/dist/menu/MobileActionSheetContent.d.ts +1 -1
  26. package/dist/menu/MobileActionSheetContent.d.ts.map +1 -1
  27. package/dist/menu/MobileActionSheetContent.js.map +1 -1
  28. package/dist/menu/computeFloatingMenuGeometry.js.map +1 -1
  29. package/dist/menu/useFloatingMenuGeometry.js.map +1 -1
  30. package/dist/overlay/OverlayStackProvider.d.ts +1 -1
  31. package/dist/overlay/OverlayStackProvider.d.ts.map +1 -1
  32. package/dist/overlay/OverlayStackProvider.js.map +1 -1
  33. package/dist/overlay/overlayHistory.js.map +1 -1
  34. package/dist/overlay/overlayStackTypes.js.map +1 -1
  35. package/dist/overlay/useOverlayStackEntry.js.map +1 -1
  36. package/package.json +2 -2
  37. package/src/styles/about-dialog.css +122 -122
  38. package/src/styles/index.css +3 -3
  39. package/src/styles/mobile-action-sheet.css +167 -167
  40. package/src/styles/overlay.css +61 -61
package/src/styles/mobile-action-sheet.css CHANGED
@@ -1,167 +1,167 @@
1
- .mobile-action-sheet {
2
- display: flex;
3
- flex-direction: column;
4
- width: 100%;
5
- max-height: min(85dvh, 100%);
6
- box-sizing: border-box;
7
- border-top: 1px solid var(--site-border);
8
- background: var(--site-surface);
9
- color: var(--site-fg);
10
- opacity: 0;
11
- transform: translateY(100%);
12
- transition:
13
- transform var(--transition-overlay, 0.22s ease),
14
- opacity var(--transition-overlay, 0.22s ease);
15
- padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
16
- }
17
-
18
- .mobile-action-sheet-panels {
19
- display: flex;
20
- width: 100%;
21
- min-width: 0;
22
- overflow: hidden;
23
- transition: transform var(--transition-overlay, 0.22s ease);
24
- }
25
-
26
- .mobile-action-sheet-panels--slide {
27
- width: 200%;
28
- }
29
-
30
- .mobile-action-sheet-panels--slide > .mobile-action-sheet-panel {
31
- flex: 0 0 50%;
32
- width: 50%;
33
- }
34
-
35
- .mobile-action-sheet-panel {
36
- flex: 0 0 100%;
37
- width: 100%;
38
- min-width: 0;
39
- overflow: auto;
40
- box-sizing: border-box;
41
- }
42
-
43
- .mobile-action-sheet-subheader {
44
- display: flex;
45
- align-items: center;
46
- gap: 8px;
47
- padding: 12px 12px 10px 8px;
48
- border-bottom: 1px solid var(--site-border);
49
- }
50
-
51
- .mobile-action-sheet-back {
52
- display: inline-flex;
53
- flex-shrink: 0;
54
- align-items: center;
55
- justify-content: center;
56
- width: 40px;
57
- height: 40px;
58
- padding: 0;
59
- border: none;
60
- border-radius: 0;
61
- background: transparent;
62
- color: inherit;
63
- line-height: 0;
64
- cursor: pointer;
65
- }
66
-
67
- .mobile-action-sheet-back-chevron {
68
- display: block;
69
- flex-shrink: 0;
70
- }
71
-
72
- .mobile-action-sheet-back:hover {
73
- background: var(--site-hover-bg);
74
- }
75
-
76
- .mobile-action-sheet-subheader-title {
77
- font-size: 1rem;
78
- font-weight: var(--site-weight-regular);
79
- line-height: 1.35;
80
- }
81
-
82
- .mobile-action-sheet-list {
83
- margin: 0;
84
- padding: 8px 0 0;
85
- list-style: none;
86
- }
87
-
88
- .mobile-action-sheet-list-item {
89
- margin: 0;
90
- }
91
-
92
- .mobile-action-sheet-item {
93
- display: flex;
94
- align-items: center;
95
- justify-content: space-between;
96
- gap: 12px;
97
- width: 100%;
98
- min-height: 52px;
99
- padding: 14px 20px;
100
- border: none;
101
- border-radius: 0;
102
- background: transparent;
103
- color: inherit;
104
- font: inherit;
105
- font-size: 1rem;
106
- font-weight: var(--site-weight-regular);
107
- line-height: 1.35;
108
- text-align: left;
109
- cursor: pointer;
110
- }
111
-
112
- .mobile-action-sheet-item:hover {
113
- background: var(--site-hover-bg);
114
- }
115
-
116
- .mobile-action-sheet-item:active {
117
- background: var(--site-active-bg);
118
- }
119
-
120
- .mobile-action-sheet-item:disabled {
121
- opacity: 0.38;
122
- cursor: not-allowed;
123
- }
124
-
125
- .mobile-action-sheet-item:disabled:hover,
126
- .mobile-action-sheet-item:disabled:active {
127
- background: transparent;
128
- }
129
-
130
- .mobile-action-sheet-item-icon {
131
- display: inline-flex;
132
- flex-shrink: 0;
133
- align-items: center;
134
- justify-content: center;
135
- width: 24px;
136
- height: 24px;
137
- color: var(--site-header-fg, var(--site-fg));
138
- }
139
-
140
- .mobile-action-sheet-item-icon svg {
141
- display: block;
142
- }
143
-
144
- .mobile-action-sheet-item-label {
145
- flex: 1 1 auto;
146
- min-width: 0;
147
- }
148
-
149
- .mobile-action-sheet-item-chevron {
150
- display: block;
151
- flex-shrink: 0;
152
- color: var(--site-subtle-fg);
153
- }
154
-
155
- .mobile-action-sheet-separator {
156
- height: 0;
157
- margin: 0 20px;
158
- border: none;
159
- border-top: 1px solid var(--site-border);
160
- }
161
-
162
- @media (prefers-reduced-motion: reduce) {
163
- .mobile-action-sheet,
164
- .mobile-action-sheet-panels {
165
- transition: none;
166
- }
167
- }
1
+ .mobile-action-sheet {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 100%;
5
+ max-height: min(85dvh, 100%);
6
+ box-sizing: border-box;
7
+ border-top: 1px solid var(--site-border);
8
+ background: var(--site-surface);
9
+ color: var(--site-fg);
10
+ opacity: 0;
11
+ transform: translateY(100%);
12
+ transition:
13
+ transform var(--transition-overlay, 0.22s ease),
14
+ opacity var(--transition-overlay, 0.22s ease);
15
+ padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
16
+ }
17
+
18
+ .mobile-action-sheet-panels {
19
+ display: flex;
20
+ width: 100%;
21
+ min-width: 0;
22
+ overflow: hidden;
23
+ transition: transform var(--transition-overlay, 0.22s ease);
24
+ }
25
+
26
+ .mobile-action-sheet-panels--slide {
27
+ width: 200%;
28
+ }
29
+
30
+ .mobile-action-sheet-panels--slide > .mobile-action-sheet-panel {
31
+ flex: 0 0 50%;
32
+ width: 50%;
33
+ }
34
+
35
+ .mobile-action-sheet-panel {
36
+ flex: 0 0 100%;
37
+ width: 100%;
38
+ min-width: 0;
39
+ overflow: auto;
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ .mobile-action-sheet-subheader {
44
+ display: flex;
45
+ align-items: center;
46
+ gap: 8px;
47
+ padding: 12px 12px 10px 8px;
48
+ border-bottom: 1px solid var(--site-border);
49
+ }
50
+
51
+ .mobile-action-sheet-back {
52
+ display: inline-flex;
53
+ flex-shrink: 0;
54
+ align-items: center;
55
+ justify-content: center;
56
+ width: 40px;
57
+ height: 40px;
58
+ padding: 0;
59
+ border: none;
60
+ border-radius: 0;
61
+ background: transparent;
62
+ color: inherit;
63
+ line-height: 0;
64
+ cursor: pointer;
65
+ }
66
+
67
+ .mobile-action-sheet-back-chevron {
68
+ display: block;
69
+ flex-shrink: 0;
70
+ }
71
+
72
+ .mobile-action-sheet-back:hover {
73
+ background: var(--site-hover-bg);
74
+ }
75
+
76
+ .mobile-action-sheet-subheader-title {
77
+ font-size: 1rem;
78
+ font-weight: var(--site-weight-regular);
79
+ line-height: 1.35;
80
+ }
81
+
82
+ .mobile-action-sheet-list {
83
+ margin: 0;
84
+ padding: 8px 0 0;
85
+ list-style: none;
86
+ }
87
+
88
+ .mobile-action-sheet-list-item {
89
+ margin: 0;
90
+ }
91
+
92
+ .mobile-action-sheet-item {
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: space-between;
96
+ gap: 12px;
97
+ width: 100%;
98
+ min-height: 52px;
99
+ padding: 14px 20px;
100
+ border: none;
101
+ border-radius: 0;
102
+ background: transparent;
103
+ color: inherit;
104
+ font: inherit;
105
+ font-size: 1rem;
106
+ font-weight: var(--site-weight-regular);
107
+ line-height: 1.35;
108
+ text-align: left;
109
+ cursor: pointer;
110
+ }
111
+
112
+ .mobile-action-sheet-item:hover {
113
+ background: var(--site-hover-bg);
114
+ }
115
+
116
+ .mobile-action-sheet-item:active {
117
+ background: var(--site-active-bg);
118
+ }
119
+
120
+ .mobile-action-sheet-item:disabled {
121
+ opacity: 0.38;
122
+ cursor: not-allowed;
123
+ }
124
+
125
+ .mobile-action-sheet-item:disabled:hover,
126
+ .mobile-action-sheet-item:disabled:active {
127
+ background: transparent;
128
+ }
129
+
130
+ .mobile-action-sheet-item-icon {
131
+ display: inline-flex;
132
+ flex-shrink: 0;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: 24px;
136
+ height: 24px;
137
+ color: var(--site-header-fg, var(--site-fg));
138
+ }
139
+
140
+ .mobile-action-sheet-item-icon svg {
141
+ display: block;
142
+ }
143
+
144
+ .mobile-action-sheet-item-label {
145
+ flex: 1 1 auto;
146
+ min-width: 0;
147
+ }
148
+
149
+ .mobile-action-sheet-item-chevron {
150
+ display: block;
151
+ flex-shrink: 0;
152
+ color: var(--site-subtle-fg);
153
+ }
154
+
155
+ .mobile-action-sheet-separator {
156
+ height: 0;
157
+ margin: 0 20px;
158
+ border: none;
159
+ border-top: 1px solid var(--site-border);
160
+ }
161
+
162
+ @media (prefers-reduced-motion: reduce) {
163
+ .mobile-action-sheet,
164
+ .mobile-action-sheet-panels {
165
+ transition: none;
166
+ }
167
+ }
package/src/styles/overlay.css CHANGED
@@ -1,61 +1,61 @@
1
- /* Full-viewport overlays（统一毛玻璃 backdrop，z-index 由 OverlayStack 内联设置） */
2
- .site-overlay-backdrop {
3
- position: fixed;
4
- inset: 0;
5
- width: 100%;
6
- min-width: 100vw;
7
- min-height: 100vh;
8
- min-height: 100dvh;
9
- margin: 0;
10
- }
11
-
12
- .site-overlay-backdrop-inactive {
13
- pointer-events: none;
14
- }
15
-
16
- .site-overlay-backdrop--centered {
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- padding: 24px;
21
- box-sizing: border-box;
22
- }
23
-
24
- .site-overlay-backdrop--top {
25
- display: flex;
26
- align-items: flex-start;
27
- justify-content: center;
28
- padding: 20px;
29
- box-sizing: border-box;
30
- }
31
-
32
- .site-overlay-backdrop--bottom {
33
- display: flex;
34
- align-items: flex-end;
35
- justify-content: stretch;
36
- padding: 0;
37
- box-sizing: border-box;
38
- }
39
-
40
- .site-overlay-backdrop--centered.is-open > .confirm-dialog,
41
- .site-overlay-backdrop--centered.is-open > .modal-card,
42
- .site-overlay-backdrop--centered.is-open > .example-modal,
43
- .site-overlay-backdrop--top.is-open > .site-overlay-panel,
44
- .site-overlay-backdrop--bottom.is-open > .mobile-action-sheet {
45
- opacity: 1;
46
- transform: translateY(0);
47
- }
48
-
49
- @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
50
- .site-overlay-backdrop {
51
- background: var(--site-backdrop);
52
- }
53
- }
54
-
55
- @media (prefers-reduced-transparency: reduce) {
56
- .site-overlay-backdrop {
57
- backdrop-filter: none;
58
- -webkit-backdrop-filter: none;
59
- background: var(--site-backdrop);
60
- }
61
- }
1
+ /* Full-viewport overlays（统一毛玻璃 backdrop，z-index 由 OverlayStack 内联设置） */
2
+ .site-overlay-backdrop {
3
+ position: fixed;
4
+ inset: 0;
5
+ width: 100%;
6
+ min-width: 100vw;
7
+ min-height: 100vh;
8
+ min-height: 100dvh;
9
+ margin: 0;
10
+ }
11
+
12
+ .site-overlay-backdrop-inactive {
13
+ pointer-events: none;
14
+ }
15
+
16
+ .site-overlay-backdrop--centered {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ padding: 24px;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .site-overlay-backdrop--top {
25
+ display: flex;
26
+ align-items: flex-start;
27
+ justify-content: center;
28
+ padding: 20px;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ .site-overlay-backdrop--bottom {
33
+ display: flex;
34
+ align-items: flex-end;
35
+ justify-content: stretch;
36
+ padding: 0;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ .site-overlay-backdrop--centered.is-open > .confirm-dialog,
41
+ .site-overlay-backdrop--centered.is-open > .modal-card,
42
+ .site-overlay-backdrop--centered.is-open > .example-modal,
43
+ .site-overlay-backdrop--top.is-open > .site-overlay-panel,
44
+ .site-overlay-backdrop--bottom.is-open > .mobile-action-sheet {
45
+ opacity: 1;
46
+ transform: translateY(0);
47
+ }
48
+
49
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
50
+ .site-overlay-backdrop {
51
+ background: var(--site-backdrop);
52
+ }
53
+ }
54
+
55
+ @media (prefers-reduced-transparency: reduce) {
56
+ .site-overlay-backdrop {
57
+ backdrop-filter: none;
58
+ -webkit-backdrop-filter: none;
59
+ background: var(--site-backdrop);
60
+ }
61
+ }