panelset 0.5.0 → 0.5.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 (38) hide show
  1. package/dist/index.d.ts +4 -1
  2. package/dist/panelset.js +25 -12
  3. package/dist/panelset.js.map +1 -1
  4. package/package.json +5 -6
  5. package/src/docs/assets/scripts/copybutton.js +0 -44
  6. package/src/docs/assets/scripts/example-async.js +0 -161
  7. package/src/docs/assets/scripts/example-closable.js +0 -27
  8. package/src/docs/assets/scripts/example-megamenu.js +0 -84
  9. package/src/docs/assets/scripts/example.js +0 -29
  10. package/src/docs/assets/scripts/main.js +0 -7
  11. package/src/docs/assets/styles/_base.scss +0 -13
  12. package/src/docs/assets/styles/_code.scss +0 -121
  13. package/src/docs/assets/styles/_demos.scss +0 -180
  14. package/src/docs/assets/styles/_landingpage.scss +0 -41
  15. package/src/docs/assets/styles/_layout.scss +0 -80
  16. package/src/docs/assets/styles/_sidebar.scss +0 -67
  17. package/src/docs/assets/styles/_typography.scss +0 -116
  18. package/src/docs/assets/styles/_variables.scss +0 -32
  19. package/src/docs/assets/styles/docs.scss +0 -64
  20. package/src/docs/views/api-reference.pug +0 -474
  21. package/src/docs/views/configuration.pug +0 -173
  22. package/src/docs/views/events.pug +0 -222
  23. package/src/docs/views/examples/async.pug +0 -268
  24. package/src/docs/views/examples/basic.pug +0 -155
  25. package/src/docs/views/examples/closable.pug +0 -97
  26. package/src/docs/views/getting-started.pug +0 -99
  27. package/src/docs/views/index.pug +0 -38
  28. package/src/docs/views/templates/includes/_head.pug +0 -11
  29. package/src/docs/views/templates/includes/_mixins.pug +0 -100
  30. package/src/docs/views/templates/includes/_scripts.pug +0 -14
  31. package/src/docs/views/templates/includes/_sidebar.pug +0 -18
  32. package/src/docs/views/templates/layouts/_base.pug +0 -36
  33. package/src/docs/views/transitions.pug +0 -141
  34. package/src/lib/index.ts +0 -685
  35. package/src/lib/styles/_base.scss +0 -99
  36. package/src/lib/styles/_loading.scss +0 -47
  37. package/src/lib/styles/_variables.scss +0 -19
  38. package/src/lib/styles/panelset.scss +0 -3
package/src/lib/styles/_base.scss DELETED
@@ -1,99 +0,0 @@
1
- [data-panelset] {
2
- position: relative;
3
- transition: height calc((var(--fadein-speed) + var(--fadein-delay)) * var(--height-duration-ratio)) var(--transition-timing);
4
- will-change: height;
5
- box-sizing: border-box;
6
-
7
- .panel-wrapper {
8
- position: relative;
9
- }
10
-
11
- &.is-closed {
12
- height: 0 !important;
13
- min-height: 0;
14
-
15
- .panel-wrapper {
16
- opacity: 0;
17
- pointer-events: none;
18
- }
19
- }
20
-
21
- &.is-opening {
22
- transition: height var(--open-speed) var(--open-timing), box-shadow var(--open-speed) var(--open-timing), border-color var(--open-speed) var(--open-timing);
23
-
24
- .panel-wrapper {
25
- transition: opacity var(--open-speed) var(--open-timing);
26
- transition-delay: calc(0.5 * var(--open-speed));
27
- opacity: 1;
28
- }
29
- }
30
-
31
- &.is-closing {
32
- transition: height var(--close-speed) var(--close-timing), box-shadow var(--close-speed) var(--close-timing), border-color var(--open-speed) var(--open-timing);
33
-
34
- .panel-wrapper {
35
- transition: opacity var(--close-speed) var(--close-timing);
36
- opacity: 0;
37
- }
38
- }
39
-
40
-
41
- [role="tabpanel"] {
42
- opacity: 0;
43
- position: absolute;
44
- top: 0;
45
- left: 0;
46
- width: 100%;
47
- box-sizing: border-box;
48
-
49
- &.fade {
50
- transition: all var(--fadeout-speed) var(--transition-timing);
51
- pointer-events: none;
52
-
53
- &.incoming {
54
- transition-duration: var(--fadein-speed);
55
- transition-delay: var(--fadein-delay);
56
- }
57
- }
58
-
59
- &.active {
60
- opacity: 1;
61
- position: relative;
62
- }
63
-
64
- &.no-transition, &.incoming.no-transition {
65
- transition: none;
66
- }
67
- }
68
- &.is-transitioning, &.is-opening, &.is-closing {
69
- overflow: hidden;
70
- }
71
- }
72
-
73
-
74
- @media (prefers-reduced-motion: reduce) {
75
- [data-panelset] {
76
- --fadeout-speed: 0s !important;
77
- --fadein-speed: 0s !important;
78
- --fadein-delay: 0s !important;
79
- --loading-dim-duration: 0s !important;
80
- --loading-fadeout-duration: 0s !important;
81
- --close-speed: 0s !important;
82
- --open-speed: 0s !important;
83
-
84
- transition: none !important;
85
-
86
- [role="tabpanel"] {
87
- transition: none !important;
88
- }
89
-
90
- &::after {
91
- transition: none !important;
92
- animation-play-state: paused !important;
93
- }
94
-
95
- .panel-wrapper {
96
- transition: none !important;
97
- }
98
- }
99
- }
package/src/lib/styles/_loading.scss DELETED
@@ -1,47 +0,0 @@
1
- /**
2
- * Loading Spinner Styles
3
- */
4
-
5
- [data-panelset] {
6
- &::after {
7
- content: '';
8
- position: absolute;
9
- top: 50%;
10
- left: 50%;
11
- width: 40px;
12
- height: 40px;
13
- transform: translate(-50%, -50%);
14
- border: 4px solid rgba(0, 0, 0, 0.1);
15
- border-top-color: rgba(0, 100, 255, 0.8);
16
- border-radius: 50%;
17
- opacity: 0;
18
- pointer-events: none;
19
- transition: opacity var(--loading-dim-duration) var(--transition-timing);
20
- animation: spin 0.8s linear infinite;
21
- animation-play-state: running;
22
- z-index: 11;
23
- }
24
-
25
- .panel-wrapper {
26
- transition: opacity var(--fadeout-speed) var(--transition-timing) var(--fadein-speed);
27
- }
28
- }
29
-
30
- [data-panelset].is-loading {
31
- pointer-events: none;
32
-
33
- &::after {
34
- opacity: 1;
35
- }
36
-
37
- .panel-wrapper {
38
- transition: opacity var(--fadeout-speed) var(--transition-timing);
39
- opacity: var(--loading-panel-opacity);
40
- }
41
- }
42
-
43
- @keyframes spin {
44
- to {
45
- transform: translate(-50%, -50%) rotate(360deg);
46
- }
47
- }
package/src/lib/styles/_variables.scss DELETED
@@ -1,19 +0,0 @@
1
- [data-panelset] {
2
- /* Note: All timing values must include a unit (e.g. '0s', not '0') */
3
- --fadeout-speed: 0.5s;
4
- --fadein-speed: 0.5s;
5
- --fadein-delay: 0.5s;
6
- --height-duration-ratio: 1;
7
- --transition-timing: ease-in-out;
8
- --loading-panel-opacity: 0.1;
9
-
10
- /* NEW: Open/Close specific */
11
- --close-speed: 0.5s;
12
- --open-speed: 0.5s;
13
- --open-timing: ease-in-out;
14
- --close-timing: ease-in-out;
15
-
16
- /* Calculated durations for loading phases */
17
- --loading-dim-duration: calc(var(--fadeout-speed) * (1 - var(--loading-panel-opacity)));
18
- --loading-fadeout-duration: calc(var(--fadeout-speed) * var(--loading-panel-opacity));
19
- }
package/src/lib/styles/panelset.scss DELETED
@@ -1,3 +0,0 @@
1
- @use 'variables';
2
- @use 'base';
3
- @use 'loading';