@orioncactuscorp/ui 1.13.0 → 1.15.0
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.
- package/CHANGELOG.md +155 -0
- package/README.md +133 -36
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +19 -17
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +38 -36
- package/dist/components/FloatingWindow/FloatingWindow.css +1 -0
- package/dist/components/FloatingWindow/FloatingWindow.js +693 -0
- package/dist/components/FloatingWindow/FloatingWindow.module.scss.js +17 -0
- package/dist/components/FloatingWindow/FloatingWindowManager.js +36 -0
- package/dist/components/FloatingWindow/contexts.js +25 -0
- package/dist/components/FloatingWindow/geometry.js +222 -0
- package/dist/components/FloatingWindow/stack.js +31 -0
- package/dist/components/FloatingWindow.d.ts +6 -0
- package/dist/components/FloatingWindow.js +18 -0
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Menu/Menu.js +95 -87
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/Modal.js +558 -723
- package/dist/components/Modal/Modal.module.scss.js +69 -60
- package/dist/components/Modal/initialFocus.js +11 -0
- package/dist/components/Modal/keyboardSession.js +104 -0
- package/dist/components/Modal/snapPoints.js +95 -82
- package/dist/components/Modal/useModalDrag.js +730 -762
- package/dist/components/Modal/useModalKeyboardAvoidance.js +159 -0
- package/dist/components/Modal/useModalViewportGeometry.js +36 -0
- package/dist/components/PositionSnap/PositionSnap.css +1 -0
- package/dist/components/PositionSnap/PositionSnap.js +330 -0
- package/dist/components/PositionSnap/PositionSnap.module.scss.js +9 -0
- package/dist/components/PositionSnap/contexts.js +12 -0
- package/dist/components/PositionSnap/geometry.js +75 -0
- package/dist/components/PositionSnap/gesture.js +7 -0
- package/dist/components/PositionSnap/policy.js +60 -0
- package/dist/components/PositionSnap.d.ts +6 -0
- package/dist/components/PositionSnap.js +7 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.css +1 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.js +45 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.module.scss.js +13 -0
- package/dist/components/ProgressIndicator.d.ts +6 -0
- package/dist/components/ProgressIndicator.js +4 -0
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.js +26 -24
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.js +18 -16
- package/dist/components/Tabs/Tabs.css +1 -1
- package/dist/components/Tooltip/Tooltip.css +1 -1
- package/dist/components/Tooltip/Tooltip.js +59 -56
- package/dist/components/Tooltip/Tooltip.module.scss.js +6 -4
- package/dist/components/internal/ModalPresentation.js +361 -0
- package/dist/components/internal/OverlayPortalContext.js +20 -0
- package/dist/index.js +135 -112
- package/dist/styles.css +13 -10
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/types.d.ts +2 -1
- package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/types.d.ts +2 -1
- package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
- package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts +32 -0
- package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/FloatingWindowManager.d.ts +4 -0
- package/dist/ui/src/components/FloatingWindow/FloatingWindowManager.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/contexts.d.ts +36 -0
- package/dist/ui/src/components/FloatingWindow/contexts.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/geometry.d.ts +31 -0
- package/dist/ui/src/components/FloatingWindow/geometry.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/index.d.ts +4 -0
- package/dist/ui/src/components/FloatingWindow/index.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/stack.d.ts +9 -0
- package/dist/ui/src/components/FloatingWindow/stack.d.ts.map +1 -0
- package/dist/ui/src/components/FloatingWindow/types.d.ts +121 -0
- package/dist/ui/src/components/FloatingWindow/types.d.ts.map +1 -0
- package/dist/ui/src/components/Interaction/index.d.ts +1 -1
- package/dist/ui/src/components/Interaction/index.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/types.d.ts +9 -1
- package/dist/ui/src/components/Interaction/types.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/Menu.d.ts +2 -2
- package/dist/ui/src/components/Menu/Menu.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/types.d.ts +9 -2
- package/dist/ui/src/components/Menu/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts +2 -2
- package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/contexts.d.ts +3 -0
- package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/initialFocus.d.ts +18 -0
- package/dist/ui/src/components/Modal/initialFocus.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/keyboardSession.d.ts +46 -0
- package/dist/ui/src/components/Modal/keyboardSession.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/types.d.ts +17 -2
- package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts +17 -0
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts +9 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts +11 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts +17 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts +2 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts +3 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts +24 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts +4 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts +3 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts +17 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts.map +1 -0
- package/dist/ui/src/components/Radio/Radio.d.ts +1 -1
- package/dist/ui/src/components/Radio/Radio.d.ts.map +1 -1
- package/dist/ui/src/components/Radio/types.d.ts +2 -1
- package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/types.d.ts +2 -1
- package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/types.d.ts +6 -0
- package/dist/ui/src/components/Tooltip/types.d.ts.map +1 -1
- package/dist/ui/src/components/internal/ModalPresentation.d.ts +62 -0
- package/dist/ui/src/components/internal/ModalPresentation.d.ts.map +1 -0
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts +10 -0
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts.map +1 -0
- package/dist/ui/src/index.d.ts +7 -1
- package/dist/ui/src/index.d.ts.map +1 -1
- package/dist/ui/src/utils/motion.d.ts.map +1 -1
- package/dist/utils/motion.js +194 -135
- package/docs/api-conventions.md +4 -0
- package/docs/motion.md +4 -0
- package/docs/overlay-stacking.md +48 -0
- package/docs/responsive-foundation-profile.md +1 -1
- package/docs/scss-helpers.md +110 -5
- package/docs/selector-contract.md +126 -2
- package/docs/tokens.md +2 -0
- package/package.json +1 -1
- package/src/scss/foundations/atomic.scss +9 -8
- package/src/scss/index.scss +2 -0
- package/src/scss/mixins/_fluid.scss +57 -0
- package/src/scss/mixins/_fluid.test.ts +87 -0
- package/src/scss/mixins/_gradient.scss +99 -0
- package/src/scss/mixins/_gradient.test.ts +111 -0
- package/src/scss/mixins/_responsive.scss +2 -1
- package/src/scss/mixins/_typo.scss +2 -1
- package/src/scss/mixins/_units.scss +14 -0
- package/src/scss/mixins/_utils.scss +3 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../src/utils/motion.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../src/utils/motion.ts"],"names":[],"mappings":"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"}
|
package/dist/utils/motion.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ocSpring as
|
|
2
|
-
const
|
|
1
|
+
import { ocSpring as U } from "./spring.js";
|
|
2
|
+
const g = [
|
|
3
3
|
"feedback",
|
|
4
4
|
"fade",
|
|
5
5
|
"reject",
|
|
@@ -11,13 +11,13 @@ const f = [
|
|
|
11
11
|
"gesture",
|
|
12
12
|
"ambient",
|
|
13
13
|
"continuous"
|
|
14
|
-
],
|
|
14
|
+
], S = [
|
|
15
15
|
"change",
|
|
16
16
|
"enter",
|
|
17
17
|
"exit",
|
|
18
18
|
"release",
|
|
19
19
|
"loop"
|
|
20
|
-
],
|
|
20
|
+
], O = ["quick", "normal", "slow"], T = [
|
|
21
21
|
"auto",
|
|
22
22
|
"preserve",
|
|
23
23
|
"fade",
|
|
@@ -94,7 +94,7 @@ const f = [
|
|
|
94
94
|
release: "cubic-bezier(0.32, 0.72, 0, 1)"
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
-
},
|
|
97
|
+
}, Y = o, z = {
|
|
98
98
|
feedback: "feedback",
|
|
99
99
|
fade: "fade",
|
|
100
100
|
reject: "feedback",
|
|
@@ -106,7 +106,7 @@ const f = [
|
|
|
106
106
|
gesture: "feedback",
|
|
107
107
|
ambient: "static",
|
|
108
108
|
continuous: "static"
|
|
109
|
-
},
|
|
109
|
+
}, G = /* @__PURE__ */ new Set([
|
|
110
110
|
"opacity",
|
|
111
111
|
"color",
|
|
112
112
|
"background-color",
|
|
@@ -115,13 +115,13 @@ const f = [
|
|
|
115
115
|
"outline-color",
|
|
116
116
|
"fill",
|
|
117
117
|
"stroke"
|
|
118
|
-
]),
|
|
118
|
+
]), K = {
|
|
119
119
|
disclosure: { preset: "smooth" },
|
|
120
120
|
surface: { preset: "smooth" },
|
|
121
121
|
sheet: { preset: "smooth" },
|
|
122
122
|
expand: { preset: "smooth" },
|
|
123
123
|
move: { preset: "smooth" }
|
|
124
|
-
},
|
|
124
|
+
}, H = {
|
|
125
125
|
reject: {
|
|
126
126
|
change: { preset: "smooth" },
|
|
127
127
|
enter: { preset: "smooth" }
|
|
@@ -142,39 +142,58 @@ const f = [
|
|
|
142
142
|
},
|
|
143
143
|
exit: null
|
|
144
144
|
}
|
|
145
|
-
},
|
|
146
|
-
if (
|
|
145
|
+
}, J = H, Q = (t, e) => e.includes(t), p = (t, e, r) => {
|
|
146
|
+
if (!Q(e, r))
|
|
147
147
|
throw new Error(`Unknown oc-motion ${t}: ${e}.`);
|
|
148
148
|
return e;
|
|
149
|
-
},
|
|
149
|
+
}, W = (t) => {
|
|
150
150
|
if (!Number.isFinite(t) || t < 0)
|
|
151
151
|
throw new Error("oc-motion durationFactor must be a non-negative number.");
|
|
152
152
|
return t;
|
|
153
|
-
},
|
|
153
|
+
}, X = (t) => {
|
|
154
154
|
if (t !== void 0) {
|
|
155
155
|
if (!Number.isFinite(t))
|
|
156
156
|
throw new Error("oc-motion extraBounce must be a finite number.");
|
|
157
157
|
return t;
|
|
158
158
|
}
|
|
159
|
-
},
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
159
|
+
}, l = (t, e) => {
|
|
160
|
+
if (!Number.isFinite(e) || e < 0)
|
|
161
|
+
throw new Error(`oc-motion ${t} must be a non-negative finite number.`);
|
|
162
|
+
return e;
|
|
163
|
+
}, Z = /^\+?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i, d = (t, e, r) => {
|
|
164
|
+
const i = e.trim();
|
|
165
|
+
if (!i) return r;
|
|
166
|
+
if (!Z.test(i))
|
|
167
|
+
throw new Error(
|
|
168
|
+
`oc-motion CSS token ${t} must be a non-negative unitless number.`
|
|
169
|
+
);
|
|
170
|
+
const a = Number(i);
|
|
171
|
+
return l(`CSS token ${t}`, a);
|
|
172
|
+
}, R = (t, e) => {
|
|
173
|
+
const i = t.trim().match(/^(-?\d*\.?\d+)(ms|s)?$/);
|
|
174
|
+
if (!i) return e;
|
|
175
|
+
const a = Number.parseFloat(i[1]);
|
|
176
|
+
return !Number.isFinite(a) || a < 0 ? e : i[2] === "ms" ? a / 1e3 : a;
|
|
177
|
+
}, n = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", s = (t, e, r) => {
|
|
178
|
+
const i = n(t, e);
|
|
179
|
+
if (!i) return r;
|
|
180
|
+
const a = R(i, Number.NaN);
|
|
181
|
+
if (!Number.isFinite(a) || a < 0)
|
|
182
|
+
throw new Error(
|
|
183
|
+
`oc-motion CSS token ${e} must be a non-negative finite duration in seconds or milliseconds.`
|
|
184
|
+
);
|
|
185
|
+
return a;
|
|
186
|
+
}, w = (t, e) => {
|
|
168
187
|
const r = { ...t };
|
|
169
|
-
for (const
|
|
170
|
-
const
|
|
171
|
-
|
|
172
|
-
...t[
|
|
173
|
-
...
|
|
188
|
+
for (const i of g) {
|
|
189
|
+
const a = e?.[i];
|
|
190
|
+
a && (r[i] = {
|
|
191
|
+
...t[i],
|
|
192
|
+
...a
|
|
174
193
|
});
|
|
175
194
|
}
|
|
176
195
|
return r;
|
|
177
|
-
},
|
|
196
|
+
}, ee = (t) => ({
|
|
178
197
|
durationFactor: t?.durationFactor ?? o.durationFactor,
|
|
179
198
|
durationFactorReduced: t?.durationFactorReduced ?? o.durationFactorReduced,
|
|
180
199
|
durationFactorPreserve: t?.durationFactorPreserve ?? o.durationFactorPreserve,
|
|
@@ -186,7 +205,7 @@ const f = [
|
|
|
186
205
|
...o.durationByIntent,
|
|
187
206
|
...t?.durationByIntent
|
|
188
207
|
},
|
|
189
|
-
durationByPhase:
|
|
208
|
+
durationByPhase: w(
|
|
190
209
|
o.durationByPhase,
|
|
191
210
|
t?.durationByPhase
|
|
192
211
|
),
|
|
@@ -194,118 +213,141 @@ const f = [
|
|
|
194
213
|
...o.timingByIntent,
|
|
195
214
|
...t?.timingByIntent
|
|
196
215
|
},
|
|
197
|
-
timingByPhase:
|
|
216
|
+
timingByPhase: w(
|
|
198
217
|
o.timingByPhase,
|
|
199
218
|
t?.timingByPhase
|
|
200
219
|
)
|
|
201
220
|
});
|
|
202
|
-
function
|
|
221
|
+
function _(t) {
|
|
203
222
|
const e = t && typeof getComputedStyle == "function" ? getComputedStyle(t) : null;
|
|
204
223
|
return {
|
|
205
224
|
durationFactor: d(
|
|
225
|
+
"--oc-motion-duration-factor",
|
|
206
226
|
n(e, "--oc-motion-duration-factor"),
|
|
207
227
|
o.durationFactor
|
|
208
228
|
),
|
|
209
229
|
durationFactorReduced: d(
|
|
230
|
+
"--oc-motion-duration-factor-reduced",
|
|
210
231
|
n(e, "--oc-motion-duration-factor-reduced"),
|
|
211
232
|
o.durationFactorReduced
|
|
212
233
|
),
|
|
213
234
|
durationFactorPreserve: d(
|
|
235
|
+
"--oc-motion-duration-factor-preserve",
|
|
214
236
|
n(e, "--oc-motion-duration-factor-preserve"),
|
|
215
237
|
o.durationFactorPreserve
|
|
216
238
|
),
|
|
217
239
|
paceFactor: {
|
|
218
240
|
quick: d(
|
|
241
|
+
"--oc-motion-pace-quick",
|
|
219
242
|
n(e, "--oc-motion-pace-quick"),
|
|
220
243
|
o.paceFactor.quick
|
|
221
244
|
),
|
|
222
245
|
normal: d(
|
|
246
|
+
"--oc-motion-pace-normal",
|
|
223
247
|
n(e, "--oc-motion-pace-normal"),
|
|
224
248
|
o.paceFactor.normal
|
|
225
249
|
),
|
|
226
250
|
slow: d(
|
|
251
|
+
"--oc-motion-pace-slow",
|
|
227
252
|
n(e, "--oc-motion-pace-slow"),
|
|
228
253
|
o.paceFactor.slow
|
|
229
254
|
)
|
|
230
255
|
},
|
|
231
256
|
durationByIntent: {
|
|
232
|
-
feedback:
|
|
233
|
-
|
|
257
|
+
feedback: s(
|
|
258
|
+
e,
|
|
259
|
+
"--oc-motion-duration-feedback",
|
|
234
260
|
o.durationByIntent.feedback
|
|
235
261
|
),
|
|
236
|
-
fade:
|
|
237
|
-
|
|
262
|
+
fade: s(
|
|
263
|
+
e,
|
|
264
|
+
"--oc-motion-duration-fade",
|
|
238
265
|
o.durationByIntent.fade
|
|
239
266
|
),
|
|
240
|
-
reject:
|
|
241
|
-
|
|
267
|
+
reject: s(
|
|
268
|
+
e,
|
|
269
|
+
"--oc-motion-duration-reject",
|
|
242
270
|
o.durationByIntent.reject
|
|
243
271
|
),
|
|
244
|
-
disclosure:
|
|
245
|
-
|
|
272
|
+
disclosure: s(
|
|
273
|
+
e,
|
|
274
|
+
"--oc-motion-duration-disclosure",
|
|
246
275
|
o.durationByIntent.disclosure
|
|
247
276
|
),
|
|
248
|
-
surface:
|
|
249
|
-
|
|
277
|
+
surface: s(
|
|
278
|
+
e,
|
|
279
|
+
"--oc-motion-duration-surface",
|
|
250
280
|
o.durationByIntent.surface
|
|
251
281
|
),
|
|
252
|
-
sheet:
|
|
253
|
-
|
|
282
|
+
sheet: s(
|
|
283
|
+
e,
|
|
284
|
+
"--oc-motion-duration-sheet",
|
|
254
285
|
o.durationByIntent.sheet
|
|
255
286
|
),
|
|
256
|
-
expand:
|
|
257
|
-
|
|
287
|
+
expand: s(
|
|
288
|
+
e,
|
|
289
|
+
"--oc-motion-duration-expand",
|
|
258
290
|
o.durationByIntent.expand
|
|
259
291
|
),
|
|
260
|
-
move:
|
|
261
|
-
|
|
292
|
+
move: s(
|
|
293
|
+
e,
|
|
294
|
+
"--oc-motion-duration-move",
|
|
262
295
|
o.durationByIntent.move
|
|
263
296
|
),
|
|
264
|
-
gesture:
|
|
265
|
-
|
|
297
|
+
gesture: s(
|
|
298
|
+
e,
|
|
299
|
+
"--oc-motion-duration-gesture",
|
|
266
300
|
o.durationByIntent.gesture
|
|
267
301
|
),
|
|
268
|
-
ambient:
|
|
269
|
-
|
|
302
|
+
ambient: s(
|
|
303
|
+
e,
|
|
304
|
+
"--oc-motion-duration-ambient",
|
|
270
305
|
o.durationByIntent.ambient
|
|
271
306
|
),
|
|
272
|
-
continuous:
|
|
273
|
-
|
|
307
|
+
continuous: s(
|
|
308
|
+
e,
|
|
309
|
+
"--oc-motion-duration-continuous",
|
|
274
310
|
o.durationByIntent.continuous
|
|
275
311
|
)
|
|
276
312
|
},
|
|
277
313
|
durationByPhase: {
|
|
278
314
|
disclosure: {
|
|
279
|
-
exit:
|
|
280
|
-
|
|
315
|
+
exit: s(
|
|
316
|
+
e,
|
|
317
|
+
"--oc-motion-duration-disclosure-exit",
|
|
281
318
|
o.durationByPhase.disclosure?.exit ?? o.durationByIntent.disclosure
|
|
282
319
|
)
|
|
283
320
|
},
|
|
284
321
|
surface: {
|
|
285
|
-
exit:
|
|
286
|
-
|
|
322
|
+
exit: s(
|
|
323
|
+
e,
|
|
324
|
+
"--oc-motion-duration-surface-exit",
|
|
287
325
|
o.durationByPhase.surface?.exit ?? o.durationByIntent.surface
|
|
288
326
|
)
|
|
289
327
|
},
|
|
290
328
|
sheet: {
|
|
291
|
-
exit:
|
|
292
|
-
|
|
329
|
+
exit: s(
|
|
330
|
+
e,
|
|
331
|
+
"--oc-motion-duration-sheet-exit",
|
|
293
332
|
o.durationByPhase.sheet?.exit ?? o.durationByIntent.sheet
|
|
294
333
|
),
|
|
295
|
-
release:
|
|
296
|
-
|
|
334
|
+
release: s(
|
|
335
|
+
e,
|
|
336
|
+
"--oc-motion-duration-sheet-release",
|
|
297
337
|
o.durationByPhase.sheet?.release ?? o.durationByIntent.sheet
|
|
298
338
|
)
|
|
299
339
|
},
|
|
300
340
|
expand: {
|
|
301
|
-
exit:
|
|
302
|
-
|
|
341
|
+
exit: s(
|
|
342
|
+
e,
|
|
343
|
+
"--oc-motion-duration-expand-exit",
|
|
303
344
|
o.durationByPhase.expand?.exit ?? o.durationByIntent.expand
|
|
304
345
|
)
|
|
305
346
|
},
|
|
306
347
|
gesture: {
|
|
307
|
-
release:
|
|
308
|
-
|
|
348
|
+
release: s(
|
|
349
|
+
e,
|
|
350
|
+
"--oc-motion-duration-gesture-release",
|
|
309
351
|
o.durationByPhase.gesture?.release ?? o.durationByIntent.gesture
|
|
310
352
|
)
|
|
311
353
|
}
|
|
@@ -343,115 +385,132 @@ function N(t) {
|
|
|
343
385
|
}
|
|
344
386
|
};
|
|
345
387
|
}
|
|
346
|
-
function
|
|
347
|
-
return
|
|
388
|
+
function D(t, e = "auto") {
|
|
389
|
+
return p("intent", t, g), p("reduced policy", e, T), e === "auto" ? z[t] : e;
|
|
348
390
|
}
|
|
349
|
-
function
|
|
350
|
-
return
|
|
391
|
+
function j(t) {
|
|
392
|
+
return G.has(t);
|
|
351
393
|
}
|
|
352
|
-
function
|
|
394
|
+
function M({
|
|
353
395
|
property: t,
|
|
354
396
|
reducedMotion: e,
|
|
355
397
|
reducedPolicy: r
|
|
356
398
|
}) {
|
|
357
|
-
return !e || r === "preserve" ? !0 : r === "static" || t === void 0 ? !1 :
|
|
399
|
+
return !e || r === "preserve" ? !0 : r === "static" || t === void 0 ? !1 : j(t);
|
|
358
400
|
}
|
|
359
|
-
const
|
|
360
|
-
const
|
|
401
|
+
const x = (t, e, r, i) => t[e]?.[r] ?? i, te = (t, e, r, i) => {
|
|
402
|
+
const a = J[t], m = a !== void 0 && Object.prototype.hasOwnProperty.call(a, e) ? a[e] : void 0;
|
|
361
403
|
if (m === null) return null;
|
|
362
|
-
const c = m ??
|
|
404
|
+
const c = m ?? K[t];
|
|
363
405
|
if (c === void 0) return null;
|
|
364
|
-
const
|
|
406
|
+
const f = r === void 0 ? void 0 : c.propertyExtraBounce?.[r];
|
|
365
407
|
return {
|
|
366
408
|
preset: (r === void 0 ? void 0 : c.propertyPreset?.[r]) ?? c.preset,
|
|
367
|
-
extraBounce:
|
|
409
|
+
extraBounce: i ?? f ?? c.extraBounce
|
|
368
410
|
};
|
|
369
411
|
};
|
|
370
|
-
function
|
|
412
|
+
function oe({
|
|
371
413
|
intent: t,
|
|
372
414
|
phase: e = "change",
|
|
373
415
|
pace: r = "normal",
|
|
374
|
-
durationFactor:
|
|
375
|
-
extraBounce:
|
|
416
|
+
durationFactor: i = 1,
|
|
417
|
+
extraBounce: a,
|
|
376
418
|
reduced: m = "auto",
|
|
377
419
|
reducedMotion: c = !1,
|
|
378
|
-
property:
|
|
379
|
-
element:
|
|
380
|
-
tokens:
|
|
420
|
+
property: f,
|
|
421
|
+
element: b,
|
|
422
|
+
tokens: q
|
|
381
423
|
}) {
|
|
382
|
-
|
|
383
|
-
const
|
|
384
|
-
|
|
385
|
-
),
|
|
386
|
-
property:
|
|
424
|
+
p("intent", t, g), p("phase", e, S), p("pace", r, O);
|
|
425
|
+
const I = W(i), F = X(a), u = ee(
|
|
426
|
+
q ?? _(b)
|
|
427
|
+
), B = D(t, m), v = M({
|
|
428
|
+
property: f,
|
|
387
429
|
reducedMotion: c,
|
|
388
|
-
reducedPolicy:
|
|
389
|
-
}),
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
430
|
+
reducedPolicy: B
|
|
431
|
+
}), k = l(
|
|
432
|
+
"duration factor token",
|
|
433
|
+
c && B === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor
|
|
434
|
+
), h = l(
|
|
435
|
+
"duration token",
|
|
436
|
+
x(
|
|
437
|
+
u.durationByPhase,
|
|
438
|
+
t,
|
|
439
|
+
e,
|
|
440
|
+
u.durationByIntent[t]
|
|
441
|
+
)
|
|
442
|
+
), E = l(
|
|
443
|
+
"pace factor token",
|
|
444
|
+
u.paceFactor[r]
|
|
445
|
+
), A = v ? h * k * E * I : 0, y = l(
|
|
446
|
+
"effective duration",
|
|
447
|
+
A
|
|
448
|
+
), C = v && y > 0, $ = x(
|
|
395
449
|
u.timingByPhase,
|
|
396
450
|
t,
|
|
397
451
|
e,
|
|
398
452
|
u.timingByIntent[t]
|
|
399
|
-
),
|
|
453
|
+
), P = te(
|
|
400
454
|
t,
|
|
401
455
|
e,
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
),
|
|
405
|
-
if (!
|
|
456
|
+
f,
|
|
457
|
+
F
|
|
458
|
+
), N = P !== null;
|
|
459
|
+
if (!N && F !== void 0)
|
|
406
460
|
throw new Error(
|
|
407
461
|
"oc-motion extraBounce is only supported for spring-backed motion."
|
|
408
462
|
);
|
|
409
|
-
const
|
|
463
|
+
const V = x(
|
|
464
|
+
o.durationByPhase,
|
|
465
|
+
t,
|
|
466
|
+
e,
|
|
467
|
+
o.durationByIntent[t]
|
|
468
|
+
), L = y > 0 ? y : h > 0 ? h : V;
|
|
410
469
|
return {
|
|
411
470
|
intent: t,
|
|
412
471
|
phase: e,
|
|
413
472
|
pace: r,
|
|
414
473
|
reduced: m,
|
|
415
|
-
reducedPolicy:
|
|
474
|
+
reducedPolicy: B,
|
|
416
475
|
reducedMotion: c,
|
|
417
|
-
property:
|
|
418
|
-
durationFactor:
|
|
419
|
-
durationFactorToken:
|
|
420
|
-
paceFactor:
|
|
421
|
-
durationSeconds:
|
|
422
|
-
timingFunction:
|
|
423
|
-
animate:
|
|
424
|
-
springBacked:
|
|
425
|
-
spring:
|
|
426
|
-
duration:
|
|
427
|
-
extraBounce:
|
|
476
|
+
property: f,
|
|
477
|
+
durationFactor: I,
|
|
478
|
+
durationFactorToken: k,
|
|
479
|
+
paceFactor: E,
|
|
480
|
+
durationSeconds: y,
|
|
481
|
+
timingFunction: $,
|
|
482
|
+
animate: C,
|
|
483
|
+
springBacked: N,
|
|
484
|
+
spring: U[P?.preset ?? "smooth"]({
|
|
485
|
+
duration: L,
|
|
486
|
+
extraBounce: P?.extraBounce
|
|
428
487
|
})
|
|
429
488
|
};
|
|
430
489
|
}
|
|
431
|
-
const
|
|
432
|
-
intents:
|
|
433
|
-
phases:
|
|
434
|
-
paces:
|
|
435
|
-
reducedPolicies:
|
|
436
|
-
defaultTokens:
|
|
437
|
-
parseDuration:
|
|
438
|
-
readTokens:
|
|
439
|
-
resolve:
|
|
440
|
-
resolveReducedPolicy:
|
|
441
|
-
isFeedbackSafeProperty:
|
|
442
|
-
shouldAnimateProperty:
|
|
490
|
+
const re = {
|
|
491
|
+
intents: g,
|
|
492
|
+
phases: S,
|
|
493
|
+
paces: O,
|
|
494
|
+
reducedPolicies: T,
|
|
495
|
+
defaultTokens: Y,
|
|
496
|
+
parseDuration: R,
|
|
497
|
+
readTokens: _,
|
|
498
|
+
resolve: oe,
|
|
499
|
+
resolveReducedPolicy: D,
|
|
500
|
+
isFeedbackSafeProperty: j,
|
|
501
|
+
shouldAnimateProperty: M
|
|
443
502
|
};
|
|
444
503
|
export {
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
504
|
+
j as isOcMotionFeedbackSafeProperty,
|
|
505
|
+
re as ocMotion,
|
|
506
|
+
Y as ocMotionDefaultTokens,
|
|
507
|
+
g as ocMotionIntents,
|
|
508
|
+
O as ocMotionPaces,
|
|
509
|
+
S as ocMotionPhases,
|
|
510
|
+
T as ocMotionReducedPolicies,
|
|
511
|
+
R as parseOcMotionDuration,
|
|
512
|
+
_ as readOcMotionTokens,
|
|
513
|
+
oe as resolveOcMotion,
|
|
514
|
+
D as resolveOcMotionReducedPolicy,
|
|
515
|
+
M as shouldAnimateOcMotionProperty
|
|
457
516
|
};
|
package/docs/api-conventions.md
CHANGED
|
@@ -85,3 +85,7 @@ named preset이 아니라 외부 문맥이나 직접 지정한 치수로 크기
|
|
|
85
85
|
|
|
86
86
|
`Badge`의 작은 preset도 `size='xsmall'`을 사용하므로 모든 named size가 이
|
|
87
87
|
표준 순서를 따릅니다.
|
|
88
|
+
|
|
89
|
+
`ProgressIndicator`는 선의 block size를 `small | medium | large`로 제공합니다.
|
|
90
|
+
기본 `small`은 모바일과 navigation chrome에 사용하고, `medium`과 `large`는
|
|
91
|
+
태블릿·데스크톱의 독립적인 작업 진행 표시에 사용합니다.
|
package/docs/motion.md
CHANGED
|
@@ -17,6 +17,10 @@ oc-motion($properties, $intent, $phase, $pace)
|
|
|
17
17
|
|
|
18
18
|
React runtime에서 height/expand처럼 CSS transition만으로 안정적으로 다루기 어려운 motion은 `@orioncactuscorp/ui/utils/motion`과 `@orioncactuscorp/ui/react/motion` subpath를 사용합니다. 이 runtime layer도 같은 intent, phase, pace, reduced-motion policy, `--oc-motion-duration-factor*` token vocabulary를 공유하고, 실제 프레임 계산은 low-level `ocSpring` engine에 위임합니다.
|
|
19
19
|
|
|
20
|
+
Runtime motion도 CSS helper와 동일하게 최종 계산 duration이 `0`이면 spring을 시작하지 않고 최종 상태로 즉시 완료합니다. instance factor, global factor token, intent duration, phase duration 중 어느 값으로 `0`이 만들어져도 같은 계약을 적용합니다. `resolveOcMotion`을 직접 사용하는 consumer는 `animate`가 `true`일 때만 반환된 `spring`을 scheduler에 전달해야 합니다.
|
|
21
|
+
|
|
22
|
+
Runtime duration, duration factor, pace factor는 모두 `0` 이상의 유한한 값이어야 합니다. CSS의 factor/pace token은 표준 CSS `<number>` 형태의 단위 없는 숫자만 허용하므로 `+1.2`, `5e-1` 같은 표기는 유효하지만, `1s`, `0px`, 숫자 뒤 임의 문자열처럼 CSS 계산과 runtime 해석이 달라질 수 있는 값은 설정 오류로 처리합니다. 여러 multiplier를 곱한 최종 duration이 overflow로 비유한 값이 되는 경우(예: 매우 큰 programmatic factor 조합)도 오류입니다.
|
|
23
|
+
|
|
20
24
|
## 빠른 시작
|
|
21
25
|
|
|
22
26
|
```scss
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Overlay Stacking
|
|
2
|
+
|
|
3
|
+
oc-ui의 `--oc-zindex-*` 토큰은 그림자·블러·radius로 표현하는 시각적 elevation이 아니라 브라우저 paint order를 위한 단계입니다. Material elevation의 상대적 계층 개념처럼, 자식 overlay는 전역 숫자만 높이는 대신 자신을 소유한 surface의 stacking context 안에서 위로 올라갑니다.
|
|
4
|
+
|
|
5
|
+
## 단계
|
|
6
|
+
|
|
7
|
+
| 토큰 | 기본값 | 의미 |
|
|
8
|
+
| --------------- | -----: | -------------------------------------------------------------- |
|
|
9
|
+
| `--oc-zindex-0` | `-1` | 명시적으로 뒤로 보내는 장식·비활성 layer |
|
|
10
|
+
| `--oc-zindex-1` | `0` | 기본 document flow와 component 내부 base layer |
|
|
11
|
+
| `--oc-zindex-2` | `10` | 같은 layout context 안의 docked·raised control |
|
|
12
|
+
| `--oc-zindex-3` | `1000` | trigger에 연결된 Menu·popover 같은 transient disclosure |
|
|
13
|
+
| `--oc-zindex-4` | `1400` | Modal·dialog·FloatingWindow처럼 작업 맥락을 소유하는 surface |
|
|
14
|
+
| `--oc-zindex-5` | `1800` | Tooltip·toast처럼 현재 맥락 위에서 전달되는 advisory/status UI |
|
|
15
|
+
|
|
16
|
+
숫자 간격은 각 단계 안에서 component-owned stack offset을 사용할 여유를 둡니다. 새 component가 생겼다는 이유만으로 다음 전역 단계를 추가하거나 큰 정수를 하드코딩하지 않습니다.
|
|
17
|
+
|
|
18
|
+
## 상대적 overlay boundary
|
|
19
|
+
|
|
20
|
+
`ModalContent`와 `FloatingWindowContent`는 자신을 가장 가까운 overlay boundary로 제공합니다. 그 안에서 렌더링된 `MenuContent`와 `TooltipContent`는 별도 설정 없이 해당 surface를 portal container로 사용합니다.
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<ModalRoot>
|
|
24
|
+
<ModalContent>
|
|
25
|
+
<ModalHeader title='설정' />
|
|
26
|
+
<ModalBody>
|
|
27
|
+
<MenuRoot>
|
|
28
|
+
<MenuTrigger>더보기</MenuTrigger>
|
|
29
|
+
<MenuContent>
|
|
30
|
+
<MenuItem>복제</MenuItem>
|
|
31
|
+
</MenuContent>
|
|
32
|
+
</MenuRoot>
|
|
33
|
+
</ModalBody>
|
|
34
|
+
</ModalContent>
|
|
35
|
+
</ModalRoot>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
이때 Menu는 여전히 `--oc-zindex-3`을 사용하지만 Modal의 stacking context 안에 있으므로 Modal backdrop이나 surface 뒤로 내려가지 않습니다. Tooltip도 같은 방식으로 자기 의미인 `--oc-zindex-5`를 유지합니다. 중첩 surface에서는 가장 가까운 boundary가 우선됩니다.
|
|
39
|
+
|
|
40
|
+
surface 밖에서 단독으로 사용하면 기존처럼 document body에 portal됩니다. Shadow DOM이나 별도 overlay root가 필요한 경우 `MenuContent`, `TooltipContent`, `ModalContent`, `FloatingWindowContent`의 `container` prop으로 명시적으로 덮어쓸 수 있습니다. 명시적 `container`는 자동 boundary보다 우선하며, focus trap과 `aria-hidden` 범위도 소비자가 함께 책임져야 합니다.
|
|
41
|
+
|
|
42
|
+
## Component authoring 규칙
|
|
43
|
+
|
|
44
|
+
- 화면 맥락을 소유하는 새 portaled surface는 전역 z-index를 올리기 전에 기존 `--oc-zindex-*` 의미 단계에 매핑합니다.
|
|
45
|
+
- surface 안에서 다시 열리는 disclosure/advisory overlay는 가장 가까운 owner surface를 portal boundary로 사용합니다.
|
|
46
|
+
- Modal의 focus trap 밖에 portal host를 두면 overlay가 inert 또는 `aria-hidden` 처리될 수 있으므로, host는 접근성 tree에서도 owner surface 안에 있어야 합니다.
|
|
47
|
+
- DOM 중첩, computed z-index만으로 완료를 판단하지 않고 실제 브라우저의 `elementFromPoint()`와 pointer/keyboard interaction으로 paint order를 검증합니다.
|
|
48
|
+
- 그림자·블러·radius 같은 시각적 elevation과 `--oc-zindex-*` paint order를 서로 대체하지 않습니다.
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
### `$oc-responsive-mode`
|
|
28
28
|
|
|
29
|
-
- `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `
|
|
29
|
+
- `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `oc-fluid()`로 보간한다.
|
|
30
30
|
- `stepped`: `clamp()` 없이 stop 값이 breakpoint에서 계단식으로 바뀐다.
|
|
31
31
|
- `static`: 선택한 stop 하나를 전체 viewport에 고정한다.
|
|
32
32
|
|