@jsenv/dom 0.6.0 → 0.6.1

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 (3) hide show
  1. package/dist/jsenv_dom.js +8 -21
  2. package/package.json +1 -1
  3. package/src/ui_transition/ui_transition.js +24 -45
package/dist/jsenv_dom.js CHANGED
@@ -10287,34 +10287,21 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
10287
10287
 
10288
10288
  installImportMetaCss(import.meta);
10289
10289
  import.meta.css = /* css */ `
10290
- .ui_transition_container {
10291
- position: relative;
10292
- display: inline-flex;
10293
- flex: 1;
10294
- }
10295
-
10296
- .ui_transition_outer_wrapper {
10297
- display: inline-flex;
10298
- flex: 1;
10299
- }
10300
-
10301
- .ui_transition_measure_wrapper {
10290
+ .ui_transition_container,
10291
+ .ui_transition_outer_wrapper,
10292
+ .ui_transition_measure_wrapper,
10293
+ .ui_transition_slot {
10302
10294
  display: inline-flex;
10303
- flex: 1;
10295
+ width: fit-content;
10296
+ height: fit-content;
10304
10297
  }
10305
10298
 
10299
+ .ui_transition_container,
10306
10300
  .ui_transition_slot {
10307
10301
  position: relative;
10308
- display: inline-flex;
10309
- flex: 1;
10310
- }
10311
-
10312
- .ui_transition_phase_overlay {
10313
- position: absolute;
10314
- inset: 0;
10315
- pointer-events: none;
10316
10302
  }
10317
10303
 
10304
+ .ui_transition_phase_overlay,
10318
10305
  .ui_transition_content_overlay {
10319
10306
  position: absolute;
10320
10307
  inset: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/dom",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "DOM utilities for writing frontend code",
5
5
  "repository": {
6
6
  "type": "git",
package/src/ui_transition/ui_transition.js CHANGED
@@ -1,34 +1,26 @@
1
1
  /**
2
2
  * Required HTML structure for UI transitions with smooth size and phase/content animations:
3
3
  *
4
- * <div class="ui_transition_container"
5
- * data-size-transition <!-- Optional: enable size animations -->
6
- * data-size-transition-duration <!-- Optional: size transition duration, default 300ms -->
7
- * data-content-transition <!-- Content transition type: cross-fade, slide-left -->
8
- * data-content-transition-duration <!-- Content transition duration -->
9
- * data-phase-transition <!-- Phase transition type: cross-fade only -->
10
- * data-phase-transition-duration <!-- Phase transition duration -->
4
+ * <div
5
+ * class="ui_transition_container" <!-- Main container with relative positioning and overflow hidden -->
6
+ * data-size-transition <!-- Optional: enable size animations -->
7
+ * data-size-transition-duration <!-- Optional: size transition duration, default 300ms -->
8
+ * data-content-transition <!-- Content transition type: cross-fade, slide-left -->
9
+ * data-content-transition-duration <!-- Content transition duration -->
10
+ * data-phase-transition <!-- Phase transition type: cross-fade only -->
11
+ * data-phase-transition-duration <!-- Phase transition duration -->
11
12
  * >
12
- * <!-- Main container with relative positioning and overflow hidden -->
13
- *
14
- * <div class="ui_transition_outer_wrapper">
15
- * <!-- Size animation target: width/height constraints are applied here during transitions -->
16
- *
17
- * <div class="ui_transition_measure_wrapper">
18
- * <!-- Content measurement layer: ResizeObserver watches this to detect natural content size changes -->
19
- *
20
- * <div class="ui_transition_slot" data-content-key>
21
- * <!-- Content slot: actual content is inserted here via children -->
22
- * </div>
23
- *
24
- * <div class="ui_transition_phase_overlay">
25
- * <!-- Phase transition overlay: clone old content phase is positioned here for content phase transitions (loading/error) -->
26
- * </div>
13
+ * <div class="ui_transition_outer_wrapper"> <!-- Size animation target: width/height constraints are applied here during transitions -->
14
+ * <div class="ui_transition_measure_wrapper"> <!-- Content measurement layer: ResizeObserver watches this to detect natural content size changes -->
15
+ * <div class="ui_transition_slot" data-content-key></div> <!-- Content slot: actual content is here -->
16
+ * <div class="ui_transition_phase_overlay"> <!-- Used to transition to new phase: crossfade to new phase -->
17
+ * <!-- Clone of ".ui_transition_slot" children for phase transition -->
18
+ * </div>
27
19
  * </div>
28
20
  * </div>
29
21
  *
30
- * <div class="ui_transition_content_overlay">
31
- * <!-- Content transition overlay: cloned old content is positioned here for slide/fade animations -->
22
+ * <div class="ui_transition_content_overlay"> <!-- Used to transition to new content: crossfade/slide to new content -->
23
+ * <!-- Clone of ".ui_transition_slot" children for content transition -->
32
24
  * </div>
33
25
  * </div>
34
26
  *
@@ -58,34 +50,21 @@ import {
58
50
  import { createGroupTransitionController } from "../transition/group_transition.js";
59
51
 
60
52
  import.meta.css = /* css */ `
61
- .ui_transition_container {
62
- position: relative;
63
- display: inline-flex;
64
- flex: 1;
65
- }
66
-
67
- .ui_transition_outer_wrapper {
68
- display: inline-flex;
69
- flex: 1;
70
- }
71
-
72
- .ui_transition_measure_wrapper {
53
+ .ui_transition_container,
54
+ .ui_transition_outer_wrapper,
55
+ .ui_transition_measure_wrapper,
56
+ .ui_transition_slot {
73
57
  display: inline-flex;
74
- flex: 1;
58
+ width: fit-content;
59
+ height: fit-content;
75
60
  }
76
61
 
62
+ .ui_transition_container,
77
63
  .ui_transition_slot {
78
64
  position: relative;
79
- display: inline-flex;
80
- flex: 1;
81
- }
82
-
83
- .ui_transition_phase_overlay {
84
- position: absolute;
85
- inset: 0;
86
- pointer-events: none;
87
65
  }
88
66
 
67
+ .ui_transition_phase_overlay,
89
68
  .ui_transition_content_overlay {
90
69
  position: absolute;
91
70
  inset: 0;