origam 2.23.2 → 2.25.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.
Files changed (44) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/dist/src/assets/css/main.css +1 -1
  3. package/dist/src/assets/css/tokens/dark.css +24 -22
  4. package/dist/src/assets/css/tokens/light.css +12 -11
  5. package/dist/src/assets/css/tokens/origam-utilities.css +84 -0
  6. package/dist/src/assets/css/tokens/primitive.css +1 -0
  7. package/dist/src/assets/scss/tokens/_dark.scss +24 -22
  8. package/dist/src/assets/scss/tokens/_light.scss +12 -11
  9. package/dist/src/assets/scss/tokens/_origam-utilities.scss +84 -0
  10. package/dist/src/assets/scss/tokens/_primitive.scss +1 -0
  11. package/dist/src/components/Btn/OrigamBtn.vue +89 -124
  12. package/dist/src/components/Field/OrigamField.vue +120 -152
  13. package/dist/src/components/Skeleton/OrigamSkeleton.vue +89 -125
  14. package/dist/src/components/Skeleton/OrigamSkeletonGroup.vue +52 -0
  15. package/dist/src/components/Skeleton/index.cjs +7 -0
  16. package/dist/src/components/Skeleton/index.d.ts +1 -0
  17. package/dist/src/components/Skeleton/index.js +1 -0
  18. package/dist/src/components/Switch/OrigamSwitch.vue +1 -69
  19. package/dist/src/consts/Skeleton/skeleton.const.cjs +7 -0
  20. package/dist/src/consts/Skeleton/skeleton.const.d.ts +11 -0
  21. package/dist/src/consts/Skeleton/skeleton.const.js +1 -0
  22. package/dist/src/consts/index.cjs +11 -0
  23. package/dist/src/consts/index.d.ts +1 -0
  24. package/dist/src/consts/index.js +1 -0
  25. package/dist/src/enums/Skeleton/skeleton.enum.cjs +9 -2
  26. package/dist/src/enums/Skeleton/skeleton.enum.d.ts +27 -4
  27. package/dist/src/enums/Skeleton/skeleton.enum.js +7 -0
  28. package/dist/src/interfaces/Btn/btn.interface.d.ts +3 -3
  29. package/dist/src/interfaces/Commons/loader.interface.d.ts +13 -1
  30. package/dist/src/interfaces/Field/field.interface.d.ts +2 -2
  31. package/dist/src/interfaces/Skeleton/skeleton-group.interface.cjs +1 -0
  32. package/dist/src/interfaces/Skeleton/skeleton-group.interface.d.ts +34 -0
  33. package/dist/src/interfaces/Skeleton/skeleton-group.interface.js +0 -0
  34. package/dist/src/interfaces/Skeleton/skeleton.interface.d.ts +27 -10
  35. package/dist/src/interfaces/Switch/switch.interface.d.ts +2 -2
  36. package/dist/src/interfaces/index.cjs +11 -0
  37. package/dist/src/interfaces/index.d.ts +1 -0
  38. package/dist/src/interfaces/index.js +1 -0
  39. package/dist/src/themes/origam.theme.cjs +2 -4
  40. package/dist/src/themes/origam.theme.js +2 -2
  41. package/dist/src/types/Commons/loader.type.d.ts +24 -0
  42. package/dist/src/types/Skeleton/skeleton.type.d.ts +4 -1
  43. package/dist/src/types/tokens.type.d.ts +1 -1
  44. package/package.json +1 -1
package/dist/src/assets/css/tokens/dark.css CHANGED
@@ -331,8 +331,6 @@
331
331
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
332
332
  --origam-btn---overlay-opacity-active: 0.2;
333
333
  --origam-btn---overlay-opacity-active-hover: 0.28;
334
- --origam-btn--loader-skeleton---min-width: 96px;
335
- --origam-btn--loader-skeleton---min-height: 36px;
336
334
  --origam-btn__progress---linear-height: 3px;
337
335
  --origam-btn__progress---linear-position: 0px;
338
336
  --origam-btn__progress---linear-position-top: auto;
@@ -2303,10 +2301,6 @@
2303
2301
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
2304
2302
  --origam-switch__thumb---color: currentColor;
2305
2303
  --origam-switch__selection-control---min-height: 56px;
2306
- --origam-switch__skeleton---width: 52px;
2307
- --origam-switch__skeleton---height: 32px;
2308
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
2309
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
2310
2304
  --origam-switch__track--inset---height: 32px;
2311
2305
  --origam-switch__track--inset---width: 52px;
2312
2306
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -2486,13 +2480,20 @@
2486
2480
  --origam-grid---justify-items: stretch;
2487
2481
  --origam-grid---align-content: normal;
2488
2482
  --origam-grid---justify-content: normal;
2489
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2483
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
2484
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
2490
2485
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2491
2486
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
2492
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
2493
- --origam-skeleton---opacity-min: 0.4;
2494
- --origam-skeleton---opacity-max: 0.8;
2495
- --origam-skeleton---text-height: 1.2em;
2487
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
2488
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
2489
+ --origam-skeleton---animation-iterations: 6;
2490
+ --origam-skeleton---opacity-min: 0.55;
2491
+ --origam-skeleton---opacity-max: 1;
2492
+ --origam-skeleton---text-height: 0.7em;
2493
+ --origam-skeleton---text-margin-block: 0.35em;
2494
+ --origam-skeleton---circular-size: 36px;
2495
+ --origam-skeleton---pill-height: 1.5em;
2496
+ --origam-skeleton---pill-width: 4em;
2496
2497
  --origam-skeleton---gap: var(--origam-space---3);
2497
2498
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
2498
2499
  --origam-kbd---color: var(--origam-color__text---primary);
@@ -3344,8 +3345,6 @@
3344
3345
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
3345
3346
  --origam-btn---overlay-opacity-active: 0.2;
3346
3347
  --origam-btn---overlay-opacity-active-hover: 0.28;
3347
- --origam-btn--loader-skeleton---min-width: 96px;
3348
- --origam-btn--loader-skeleton---min-height: 36px;
3349
3348
  --origam-btn__progress---linear-height: 3px;
3350
3349
  --origam-btn__progress---linear-position: 0px;
3351
3350
  --origam-btn__progress---linear-position-top: auto;
@@ -5315,10 +5314,6 @@
5315
5314
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
5316
5315
  --origam-switch__thumb---color: currentColor;
5317
5316
  --origam-switch__selection-control---min-height: 56px;
5318
- --origam-switch__skeleton---width: 52px;
5319
- --origam-switch__skeleton---height: 32px;
5320
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
5321
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
5322
5317
  --origam-switch__track--inset---height: 32px;
5323
5318
  --origam-switch__track--inset---width: 52px;
5324
5319
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -5498,13 +5493,20 @@
5498
5493
  --origam-grid---justify-items: stretch;
5499
5494
  --origam-grid---align-content: normal;
5500
5495
  --origam-grid---justify-content: normal;
5501
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
5496
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
5497
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
5502
5498
  --origam-skeleton---border-radius: var(--origam-radius---sm);
5503
5499
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
5504
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
5505
- --origam-skeleton---opacity-min: 0.4;
5506
- --origam-skeleton---opacity-max: 0.8;
5507
- --origam-skeleton---text-height: 1.2em;
5500
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
5501
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
5502
+ --origam-skeleton---animation-iterations: 6;
5503
+ --origam-skeleton---opacity-min: 0.55;
5504
+ --origam-skeleton---opacity-max: 1;
5505
+ --origam-skeleton---text-height: 0.7em;
5506
+ --origam-skeleton---text-margin-block: 0.35em;
5507
+ --origam-skeleton---circular-size: 36px;
5508
+ --origam-skeleton---pill-height: 1.5em;
5509
+ --origam-skeleton---pill-width: 4em;
5508
5510
  --origam-skeleton---gap: var(--origam-space---3);
5509
5511
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
5510
5512
  --origam-kbd---color: var(--origam-color__text---primary);
package/dist/src/assets/css/tokens/light.css CHANGED
@@ -231,8 +231,6 @@
231
231
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
232
232
  --origam-btn---overlay-opacity-active: 0.2;
233
233
  --origam-btn---overlay-opacity-active-hover: 0.28;
234
- --origam-btn--loader-skeleton---min-width: 96px;
235
- --origam-btn--loader-skeleton---min-height: 36px;
236
234
  --origam-btn__progress---linear-height: 3px;
237
235
  --origam-btn__progress---linear-position: 0px;
238
236
  --origam-btn__progress---linear-position-top: auto;
@@ -2217,10 +2215,6 @@
2217
2215
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
2218
2216
  --origam-switch__thumb---color: currentColor;
2219
2217
  --origam-switch__selection-control---min-height: 56px;
2220
- --origam-switch__skeleton---width: 52px;
2221
- --origam-switch__skeleton---height: 32px;
2222
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
2223
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
2224
2218
  --origam-switch__track--inset---height: 32px;
2225
2219
  --origam-switch__track--inset---width: 52px;
2226
2220
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -2400,13 +2394,20 @@
2400
2394
  --origam-grid---justify-items: stretch;
2401
2395
  --origam-grid---align-content: normal;
2402
2396
  --origam-grid---justify-content: normal;
2403
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2397
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 10%, transparent);
2398
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 5%, transparent);
2404
2399
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2405
2400
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
2406
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
2407
- --origam-skeleton---opacity-min: 0.4;
2408
- --origam-skeleton---opacity-max: 0.8;
2409
- --origam-skeleton---text-height: 1.2em;
2401
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
2402
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
2403
+ --origam-skeleton---animation-iterations: 6;
2404
+ --origam-skeleton---opacity-min: 0.55;
2405
+ --origam-skeleton---opacity-max: 1;
2406
+ --origam-skeleton---text-height: 0.7em;
2407
+ --origam-skeleton---text-margin-block: 0.35em;
2408
+ --origam-skeleton---circular-size: 36px;
2409
+ --origam-skeleton---pill-height: 1.5em;
2410
+ --origam-skeleton---pill-width: 4em;
2410
2411
  --origam-skeleton---gap: var(--origam-space---3);
2411
2412
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
2412
2413
  --origam-kbd---color: var(--origam-color__text---primary);
package/dist/src/assets/css/tokens/origam-utilities.css CHANGED
@@ -153,3 +153,87 @@
153
153
  .origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
154
154
  .origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
155
155
  .origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }
156
+
157
+ /* --- Skeleton (host placeholder state) ------------------- */
158
+ /* */
159
+ /* The shared mechanism that lets ANY element paint ITSELF as */
160
+ /* a loading placeholder — no node is added, no component is */
161
+ /* mounted. Put `.origam--skeleton` on the element; its */
162
+ /* geometry (size, radius) stays whatever the element already */
163
+ /* has, so the placeholder keeps the real silhouette. */
164
+ /* */
165
+ /* fill ::after colour = --origam-skeleton---background-color */
166
+ /* shimmer ::before only with `.origam--skeleton-wave` */
167
+ /* content hidden: glyphs via text-fill, children via */
168
+ /* visibility — the layout box is untouched */
169
+ /* */
170
+ /* ⛔ CONSTRAINTS, read before using it on a new host: */
171
+ /* - a pseudo-element is not rendered on replaced elements: */
172
+ /* `<input>`, `<textarea>`, `<select>`, images: can NOT be */
173
+ /* a host (measured: the ::after never paints on <input>, */
174
+ /* <textarea> or <select>, although getComputedStyle still */
175
+ /* reports it). */
176
+ /* Put the class on the wrapper that draws the field. */
177
+ /* - the host's own ::before / ::after are taken over. */
178
+ /* - the host becomes `position: relative` when it is static */
179
+ /* (a component's own scoped `position` still wins). */
180
+ /* - it is purely visual: the host still has to carry */
181
+ /* `aria-busy="true"` (and `aria-disabled` on a control). */
182
+ /* */
183
+ /* The fill is currentColor mixed with transparent, so it */
184
+ /* follows themes, modes and surfaces with no extra token. */
185
+ /* Motion: pulse by default, capped by */
186
+ /* --origam-skeleton---animation-iterations (WCAG 2.2.2), */
187
+ /* and switched off under prefers-reduced-motion. */
188
+ .origam--skeleton {
189
+ position: relative;
190
+ -webkit-text-fill-color: transparent;
191
+ text-shadow: none;
192
+ pointer-events: none;
193
+ user-select: none;
194
+ }
195
+ .origam--skeleton > * { visibility: hidden; }
196
+ .origam--skeleton::after {
197
+ content: "";
198
+ position: absolute;
199
+ inset: 0;
200
+ border-radius: inherit;
201
+ background-color: var(--origam-skeleton---background-color);
202
+ animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
203
+ }
204
+ .origam--skeleton-none::after { animation: none; }
205
+ .origam--skeleton-wave { overflow: hidden; }
206
+ .origam--skeleton-wave::after { animation: none; }
207
+ .origam--skeleton-wave::before {
208
+ content: "";
209
+ position: absolute;
210
+ inset: 0;
211
+ z-index: 1;
212
+ background: linear-gradient(105deg, transparent 35%, var(--origam-skeleton---highlight-color) 50%, transparent 65%);
213
+ transform: translateX(-100%);
214
+ animation: origam-skeleton-wave var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
215
+ }
216
+
217
+ /* A group is ONE animation clock: the container pulses, its */
218
+ /* blocks do not, so blocks mounted at different moments still */
219
+ /* breathe together. */
220
+ .origam--skeleton-group-pulse {
221
+ animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
222
+ }
223
+ .origam--skeleton-group-pulse .origam--skeleton::after { animation: none; }
224
+
225
+ @keyframes origam-skeleton-pulse {
226
+ 0%, 100% { opacity: var(--origam-skeleton---opacity-max); }
227
+ 50% { opacity: var(--origam-skeleton---opacity-min); }
228
+ }
229
+ @keyframes origam-skeleton-wave {
230
+ to { transform: translateX(100%); }
231
+ }
232
+
233
+ /* Last on purpose: same specificity as the rules above, so */
234
+ /* source order makes this one win (#1074). */
235
+ @media (prefers-reduced-motion: reduce) {
236
+ .origam--skeleton::after,
237
+ .origam--skeleton::before,
238
+ .origam--skeleton-group-pulse { animation: none; }
239
+ }
package/dist/src/assets/css/tokens/primitive.css CHANGED
@@ -139,6 +139,7 @@
139
139
  --origam-motion__duration---medium: 200ms;
140
140
  --origam-motion__duration---slow: 280ms;
141
141
  --origam-motion__duration---xslow: 400ms;
142
+ --origam-motion__duration---loop: 1600ms;
142
143
  --origam-motion__easing---standard: cubic-bezier(0.4, 0, 0.2, 1);
143
144
  --origam-motion__easing---decelerate: cubic-bezier(0, 0, 0.2, 1);
144
145
  --origam-motion__easing---accelerate: cubic-bezier(0.4, 0, 1, 1);
package/dist/src/assets/scss/tokens/_dark.scss CHANGED
@@ -331,8 +331,6 @@
331
331
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
332
332
  --origam-btn---overlay-opacity-active: 0.2;
333
333
  --origam-btn---overlay-opacity-active-hover: 0.28;
334
- --origam-btn--loader-skeleton---min-width: 96px;
335
- --origam-btn--loader-skeleton---min-height: 36px;
336
334
  --origam-btn__progress---linear-height: 3px;
337
335
  --origam-btn__progress---linear-position: 0px;
338
336
  --origam-btn__progress---linear-position-top: auto;
@@ -2303,10 +2301,6 @@
2303
2301
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
2304
2302
  --origam-switch__thumb---color: currentColor;
2305
2303
  --origam-switch__selection-control---min-height: 56px;
2306
- --origam-switch__skeleton---width: 52px;
2307
- --origam-switch__skeleton---height: 32px;
2308
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
2309
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
2310
2304
  --origam-switch__track--inset---height: 32px;
2311
2305
  --origam-switch__track--inset---width: 52px;
2312
2306
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -2486,13 +2480,20 @@
2486
2480
  --origam-grid---justify-items: stretch;
2487
2481
  --origam-grid---align-content: normal;
2488
2482
  --origam-grid---justify-content: normal;
2489
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2483
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
2484
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
2490
2485
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2491
2486
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
2492
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
2493
- --origam-skeleton---opacity-min: 0.4;
2494
- --origam-skeleton---opacity-max: 0.8;
2495
- --origam-skeleton---text-height: 1.2em;
2487
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
2488
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
2489
+ --origam-skeleton---animation-iterations: 6;
2490
+ --origam-skeleton---opacity-min: 0.55;
2491
+ --origam-skeleton---opacity-max: 1;
2492
+ --origam-skeleton---text-height: 0.7em;
2493
+ --origam-skeleton---text-margin-block: 0.35em;
2494
+ --origam-skeleton---circular-size: 36px;
2495
+ --origam-skeleton---pill-height: 1.5em;
2496
+ --origam-skeleton---pill-width: 4em;
2496
2497
  --origam-skeleton---gap: var(--origam-space---3);
2497
2498
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
2498
2499
  --origam-kbd---color: var(--origam-color__text---primary);
@@ -3344,8 +3345,6 @@
3344
3345
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
3345
3346
  --origam-btn---overlay-opacity-active: 0.2;
3346
3347
  --origam-btn---overlay-opacity-active-hover: 0.28;
3347
- --origam-btn--loader-skeleton---min-width: 96px;
3348
- --origam-btn--loader-skeleton---min-height: 36px;
3349
3348
  --origam-btn__progress---linear-height: 3px;
3350
3349
  --origam-btn__progress---linear-position: 0px;
3351
3350
  --origam-btn__progress---linear-position-top: auto;
@@ -5315,10 +5314,6 @@
5315
5314
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
5316
5315
  --origam-switch__thumb---color: currentColor;
5317
5316
  --origam-switch__selection-control---min-height: 56px;
5318
- --origam-switch__skeleton---width: 52px;
5319
- --origam-switch__skeleton---height: 32px;
5320
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
5321
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
5322
5317
  --origam-switch__track--inset---height: 32px;
5323
5318
  --origam-switch__track--inset---width: 52px;
5324
5319
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -5498,13 +5493,20 @@
5498
5493
  --origam-grid---justify-items: stretch;
5499
5494
  --origam-grid---align-content: normal;
5500
5495
  --origam-grid---justify-content: normal;
5501
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
5496
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
5497
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
5502
5498
  --origam-skeleton---border-radius: var(--origam-radius---sm);
5503
5499
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
5504
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
5505
- --origam-skeleton---opacity-min: 0.4;
5506
- --origam-skeleton---opacity-max: 0.8;
5507
- --origam-skeleton---text-height: 1.2em;
5500
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
5501
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
5502
+ --origam-skeleton---animation-iterations: 6;
5503
+ --origam-skeleton---opacity-min: 0.55;
5504
+ --origam-skeleton---opacity-max: 1;
5505
+ --origam-skeleton---text-height: 0.7em;
5506
+ --origam-skeleton---text-margin-block: 0.35em;
5507
+ --origam-skeleton---circular-size: 36px;
5508
+ --origam-skeleton---pill-height: 1.5em;
5509
+ --origam-skeleton---pill-width: 4em;
5508
5510
  --origam-skeleton---gap: var(--origam-space---3);
5509
5511
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
5510
5512
  --origam-kbd---color: var(--origam-color__text---primary);
package/dist/src/assets/scss/tokens/_light.scss CHANGED
@@ -231,8 +231,6 @@
231
231
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
232
232
  --origam-btn---overlay-opacity-active: 0.2;
233
233
  --origam-btn---overlay-opacity-active-hover: 0.28;
234
- --origam-btn--loader-skeleton---min-width: 96px;
235
- --origam-btn--loader-skeleton---min-height: 36px;
236
234
  --origam-btn__progress---linear-height: 3px;
237
235
  --origam-btn__progress---linear-position: 0px;
238
236
  --origam-btn__progress---linear-position-top: auto;
@@ -2217,10 +2215,6 @@
2217
2215
  --origam-switch__thumb---border-color: rgba(0, 0, 0, 0.18);
2218
2216
  --origam-switch__thumb---color: currentColor;
2219
2217
  --origam-switch__selection-control---min-height: 56px;
2220
- --origam-switch__skeleton---width: 52px;
2221
- --origam-switch__skeleton---height: 32px;
2222
- --origam-switch__skeleton-track---background-color: color-mix(in srgb, currentColor 14%, transparent);
2223
- --origam-switch__skeleton-thumb---background-color: color-mix(in srgb, currentColor 28%, transparent);
2224
2218
  --origam-switch__track--inset---height: 32px;
2225
2219
  --origam-switch__track--inset---width: 52px;
2226
2220
  --origam-switch---opacity-disabled: var(--origam-opacity---32);
@@ -2400,13 +2394,20 @@
2400
2394
  --origam-grid---justify-items: stretch;
2401
2395
  --origam-grid---align-content: normal;
2402
2396
  --origam-grid---justify-content: normal;
2403
- --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2397
+ --origam-skeleton---background-color: color-mix(in srgb, currentColor 10%, transparent);
2398
+ --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 5%, transparent);
2404
2399
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2405
2400
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
2406
- --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
2407
- --origam-skeleton---opacity-min: 0.4;
2408
- --origam-skeleton---opacity-max: 0.8;
2409
- --origam-skeleton---text-height: 1.2em;
2401
+ --origam-skeleton---border-radius-pill: var(--origam-radius---full);
2402
+ --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
2403
+ --origam-skeleton---animation-iterations: 6;
2404
+ --origam-skeleton---opacity-min: 0.55;
2405
+ --origam-skeleton---opacity-max: 1;
2406
+ --origam-skeleton---text-height: 0.7em;
2407
+ --origam-skeleton---text-margin-block: 0.35em;
2408
+ --origam-skeleton---circular-size: 36px;
2409
+ --origam-skeleton---pill-height: 1.5em;
2410
+ --origam-skeleton---pill-width: 4em;
2410
2411
  --origam-skeleton---gap: var(--origam-space---3);
2411
2412
  --origam-kbd---background-color: var(--origam-color__surface---overlay);
2412
2413
  --origam-kbd---color: var(--origam-color__text---primary);
package/dist/src/assets/scss/tokens/_origam-utilities.scss CHANGED
@@ -153,3 +153,87 @@
153
153
  .origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
154
154
  .origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
155
155
  .origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }
156
+
157
+ /* --- Skeleton (host placeholder state) ------------------- */
158
+ /* */
159
+ /* The shared mechanism that lets ANY element paint ITSELF as */
160
+ /* a loading placeholder — no node is added, no component is */
161
+ /* mounted. Put `.origam--skeleton` on the element; its */
162
+ /* geometry (size, radius) stays whatever the element already */
163
+ /* has, so the placeholder keeps the real silhouette. */
164
+ /* */
165
+ /* fill ::after colour = --origam-skeleton---background-color */
166
+ /* shimmer ::before only with `.origam--skeleton-wave` */
167
+ /* content hidden: glyphs via text-fill, children via */
168
+ /* visibility — the layout box is untouched */
169
+ /* */
170
+ /* ⛔ CONSTRAINTS, read before using it on a new host: */
171
+ /* - a pseudo-element is not rendered on replaced elements: */
172
+ /* `<input>`, `<textarea>`, `<select>`, images: can NOT be */
173
+ /* a host (measured: the ::after never paints on <input>, */
174
+ /* <textarea> or <select>, although getComputedStyle still */
175
+ /* reports it). */
176
+ /* Put the class on the wrapper that draws the field. */
177
+ /* - the host's own ::before / ::after are taken over. */
178
+ /* - the host becomes `position: relative` when it is static */
179
+ /* (a component's own scoped `position` still wins). */
180
+ /* - it is purely visual: the host still has to carry */
181
+ /* `aria-busy="true"` (and `aria-disabled` on a control). */
182
+ /* */
183
+ /* The fill is currentColor mixed with transparent, so it */
184
+ /* follows themes, modes and surfaces with no extra token. */
185
+ /* Motion: pulse by default, capped by */
186
+ /* --origam-skeleton---animation-iterations (WCAG 2.2.2), */
187
+ /* and switched off under prefers-reduced-motion. */
188
+ .origam--skeleton {
189
+ position: relative;
190
+ -webkit-text-fill-color: transparent;
191
+ text-shadow: none;
192
+ pointer-events: none;
193
+ user-select: none;
194
+ }
195
+ .origam--skeleton > * { visibility: hidden; }
196
+ .origam--skeleton::after {
197
+ content: "";
198
+ position: absolute;
199
+ inset: 0;
200
+ border-radius: inherit;
201
+ background-color: var(--origam-skeleton---background-color);
202
+ animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
203
+ }
204
+ .origam--skeleton-none::after { animation: none; }
205
+ .origam--skeleton-wave { overflow: hidden; }
206
+ .origam--skeleton-wave::after { animation: none; }
207
+ .origam--skeleton-wave::before {
208
+ content: "";
209
+ position: absolute;
210
+ inset: 0;
211
+ z-index: 1;
212
+ background: linear-gradient(105deg, transparent 35%, var(--origam-skeleton---highlight-color) 50%, transparent 65%);
213
+ transform: translateX(-100%);
214
+ animation: origam-skeleton-wave var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
215
+ }
216
+
217
+ /* A group is ONE animation clock: the container pulses, its */
218
+ /* blocks do not, so blocks mounted at different moments still */
219
+ /* breathe together. */
220
+ .origam--skeleton-group-pulse {
221
+ animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
222
+ }
223
+ .origam--skeleton-group-pulse .origam--skeleton::after { animation: none; }
224
+
225
+ @keyframes origam-skeleton-pulse {
226
+ 0%, 100% { opacity: var(--origam-skeleton---opacity-max); }
227
+ 50% { opacity: var(--origam-skeleton---opacity-min); }
228
+ }
229
+ @keyframes origam-skeleton-wave {
230
+ to { transform: translateX(100%); }
231
+ }
232
+
233
+ /* Last on purpose: same specificity as the rules above, so */
234
+ /* source order makes this one win (#1074). */
235
+ @media (prefers-reduced-motion: reduce) {
236
+ .origam--skeleton::after,
237
+ .origam--skeleton::before,
238
+ .origam--skeleton-group-pulse { animation: none; }
239
+ }
package/dist/src/assets/scss/tokens/_primitive.scss CHANGED
@@ -139,6 +139,7 @@
139
139
  --origam-motion__duration---medium: 200ms;
140
140
  --origam-motion__duration---slow: 280ms;
141
141
  --origam-motion__duration---xslow: 400ms;
142
+ --origam-motion__duration---loop: 1600ms;
142
143
  --origam-motion__easing---standard: cubic-bezier(0.4, 0, 0.2, 1);
143
144
  --origam-motion__easing---decelerate: cubic-bezier(0, 0, 0.2, 1);
144
145
  --origam-motion__easing---accelerate: cubic-bezier(0.4, 0, 1, 1);