sakana-element 2.4.2 → 2.5.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 (138) hide show
  1. package/README.md +26 -2
  2. package/dist/es/Alert-Cq5F0XNt.js +57 -0
  3. package/dist/es/Avatar-CbgoH75Q.js +5 -0
  4. package/dist/es/Badge-BVu3hO8V.js +7 -0
  5. package/dist/es/Breadcrumb-Bh5y4LbC.js +6 -0
  6. package/dist/es/Button-B1wRI6I7.js +28 -0
  7. package/dist/es/Card-VMxMFix8.js +8 -0
  8. package/dist/es/Carousel-QnDHp3Ka.js +11 -0
  9. package/dist/es/ChatBubble-DYao4l85.js +5 -0
  10. package/dist/es/Checkbox-BbLzAqK2.js +228 -0
  11. package/dist/es/Collapse-BkKmhGQf.js +11 -0
  12. package/dist/es/Collapsible-B56M9eUW.js +12 -0
  13. package/dist/es/Command-CORaZKsJ.js +45 -0
  14. package/dist/es/ConfigProvider-CGLQ9b8M.js +35 -0
  15. package/dist/es/Diff-gDYKT1cl.js +17 -0
  16. package/dist/es/Divider-bI4lEaol.js +5 -0
  17. package/dist/es/Drawer-AnXxT-V6.js +6 -0
  18. package/dist/es/Dropdown-80RoE7gX.js +115 -0
  19. package/dist/es/FileInput-B6CyElTd.js +113 -0
  20. package/dist/es/Filter-CtIs_iO4.js +13 -0
  21. package/dist/es/Icon-hbRhI1iH.js +3 -0
  22. package/dist/es/Indicator-Bs6f41iJ.js +5 -0
  23. package/dist/es/Input-DJsDXAG1.js +8 -0
  24. package/dist/es/Kbd-DZf70Cdz.js +5 -0
  25. package/dist/es/Link-CLXoAvDl.js +5 -0
  26. package/dist/es/Loading-BHzOi8J-.js +27 -0
  27. package/dist/es/Message-DOxtRo8V.js +51 -0
  28. package/dist/es/Notification-F5UfnGWs.js +22 -0
  29. package/dist/es/Pixelate-DFpR42b2.js +12 -0
  30. package/dist/es/Popconfirm-C1LNG9db.js +8 -0
  31. package/dist/es/Progress-CDHJJUVL.js +6 -0
  32. package/dist/es/Radio-HMaWtyx9.js +11 -0
  33. package/dist/es/Resizable-DSYUZwLE.js +59 -0
  34. package/dist/es/Select-DaBVMoMB.js +31 -0
  35. package/dist/es/Skeleton-4hCbgDOF.js +7 -0
  36. package/dist/es/Switch-BCTrn4hn.js +11 -0
  37. package/dist/es/Table-B5twhEZC.js +5 -0
  38. package/dist/es/Tooltip-CDjXpGHn.js +4 -0
  39. package/dist/es/Validator-DoWa9KfA.js +16 -0
  40. package/dist/es/index.js +41 -140
  41. package/dist/index.css +2 -1
  42. package/dist/theme/Alert.css +1 -295
  43. package/dist/theme/Avatar.css +1 -86
  44. package/dist/theme/Badge.css +1 -214
  45. package/dist/theme/Breadcrumb.css +1 -192
  46. package/dist/theme/Button.css +1 -1570
  47. package/dist/theme/Card.css +1 -347
  48. package/dist/theme/Carousel.css +1 -0
  49. package/dist/theme/ChatBubble.css +1 -218
  50. package/dist/theme/Checkbox.css +1 -604
  51. package/dist/theme/Collapse.css +1 -764
  52. package/dist/theme/Collapsible.css +1 -0
  53. package/dist/theme/Command.css +1 -0
  54. package/dist/theme/Diff.css +1 -110
  55. package/dist/theme/Divider.css +1 -150
  56. package/dist/theme/Drawer.css +1 -206
  57. package/dist/theme/Dropdown.css +1 -471
  58. package/dist/theme/FileInput.css +1 -397
  59. package/dist/theme/Filter.css +1 -598
  60. package/dist/theme/Indicator.css +1 -159
  61. package/dist/theme/Input.css +1 -647
  62. package/dist/theme/Kbd.css +1 -104
  63. package/dist/theme/Link.css +1 -69
  64. package/dist/theme/Loading.css +1 -266
  65. package/dist/theme/Message.css +1 -565
  66. package/dist/theme/Notification.css +1 -316
  67. package/dist/theme/Popconfirm.css +1 -46
  68. package/dist/theme/Progress.css +1 -278
  69. package/dist/theme/Radio.css +1 -492
  70. package/dist/theme/Resizable.css +1 -95
  71. package/dist/theme/Select.css +1 -584
  72. package/dist/theme/Skeleton.css +1 -192
  73. package/dist/theme/Switch.css +1 -323
  74. package/dist/theme/Table.css +1 -680
  75. package/dist/theme/Validator.css +1 -25
  76. package/dist/theme/index.css +1 -341
  77. package/dist/types/components/Badge/types.d.ts +2 -0
  78. package/dist/types/components/Carousel/constants.d.ts +6 -0
  79. package/dist/types/components/Carousel/index.d.ts +77 -0
  80. package/dist/types/components/Carousel/types.d.ts +27 -0
  81. package/dist/types/components/Collapsible/constants.d.ts +6 -0
  82. package/dist/types/components/Collapsible/index.d.ts +85 -0
  83. package/dist/types/components/Collapsible/types.d.ts +22 -0
  84. package/dist/types/components/Command/constants.d.ts +4 -0
  85. package/dist/types/components/Command/index.d.ts +216 -0
  86. package/dist/types/components/Command/types.d.ts +59 -0
  87. package/dist/types/components/Validator/index.d.ts +1 -0
  88. package/dist/types/components/index.d.ts +3 -0
  89. package/dist/types/hooks/index.d.ts +1 -1
  90. package/dist/umd/index.css +2 -1
  91. package/dist/umd/index.css.gz +0 -0
  92. package/dist/umd/index.umd.cjs +1255 -5
  93. package/dist/umd/index.umd.cjs.gz +0 -0
  94. package/package.json +15 -3
  95. package/dist/es/Alert-DdAShH-x.js +0 -19
  96. package/dist/es/Avatar-BGTH7x40.js +0 -9
  97. package/dist/es/Badge-CYZ55qNe.js +0 -14
  98. package/dist/es/Breadcrumb-BTWTtzrN.js +0 -15
  99. package/dist/es/Button-GsSCWg5x.js +0 -24
  100. package/dist/es/Card-BhgzwQqo.js +0 -16
  101. package/dist/es/ChatBubble-4F481Agj.js +0 -9
  102. package/dist/es/Checkbox-C7vZGSTh.js +0 -51
  103. package/dist/es/Collapse-CbcSQig5.js +0 -53
  104. package/dist/es/ConfigProvider-K1UzjlRm.js +0 -45
  105. package/dist/es/Diff-B747pgwb.js +0 -64
  106. package/dist/es/Divider-BSu_1-AU.js +0 -9
  107. package/dist/es/Drawer-I2lCgyba.js +0 -40
  108. package/dist/es/Dropdown-B0J_c8Wv.js +0 -104
  109. package/dist/es/FileInput-CFg1wpsH.js +0 -33
  110. package/dist/es/Filter-nA8j-62U.js +0 -40
  111. package/dist/es/Form-C1b8Igns.js +0 -123
  112. package/dist/es/Icon-BulvH9Wm.js +0 -27
  113. package/dist/es/Indicator-BbW4iUkh.js +0 -9
  114. package/dist/es/Input-BUHFulIW.js +0 -42
  115. package/dist/es/Kbd-CeP2wkdE.js +0 -13
  116. package/dist/es/Link-Dks2bXo8.js +0 -11
  117. package/dist/es/Loading-DoBtVGWo.js +0 -92
  118. package/dist/es/Message-Ba_P4Wvy.js +0 -152
  119. package/dist/es/Notification-DzG8dLuk.js +0 -69
  120. package/dist/es/Overlay-DeyTycv0.js +0 -12
  121. package/dist/es/Pixelate-B21HKbSE.js +0 -39
  122. package/dist/es/Popconfirm-BqN3JxJ_.js +0 -23
  123. package/dist/es/Progress--6EJjbbM.js +0 -12
  124. package/dist/es/Radio-CrdrvrFH.js +0 -33
  125. package/dist/es/Resizable-By3ijQf0.js +0 -151
  126. package/dist/es/Select-Cq1Ucs_U.js +0 -133
  127. package/dist/es/Skeleton-ChCVgMSk.js +0 -15
  128. package/dist/es/Switch-DURmSH-T.js +0 -34
  129. package/dist/es/Table-BE2f9u65.js +0 -10
  130. package/dist/es/Tooltip-DR4Mc5Fh.js +0 -74
  131. package/dist/es/Validator-BYn72MYn.js +0 -40
  132. package/dist/es/hooks-dJGu-5DG.js +0 -170
  133. package/dist/es/utils-CnCdZsHG.js +0 -155
  134. package/dist/es/vendor-eombfMkP.js +0 -1351
  135. package/dist/theme/Form.css +0 -83
  136. package/dist/theme/Icon.css +0 -168
  137. package/dist/theme/Overlay.css +0 -12
  138. package/dist/theme/Tooltip.css +0 -235
@@ -1,104 +1 @@
1
- /* Kbd Variables */
2
- .px-kbd[data-v-fa07bd0e] {
3
- --px-kbd-text-color: var(--px-text-color-primary);
4
- --px-kbd-bg-color: var(--px-fill-color-blank);
5
- --px-kbd-border-color: var(--px-border-color);
6
- --px-kbd-shadow-color: var(--px-shadow-color);
7
- --px-kbd-font-size: var(--px-font-size-extra-small);
8
- --px-kbd-height: 24px;
9
- --px-kbd-padding: 0 6px;
10
- --px-kbd-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
11
- --px-kbd-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
12
- }
13
- /* Base Kbd Styles - Pixel Keycap Aesthetic */
14
- .px-kbd[data-v-fa07bd0e] {
15
- display: inline-flex;
16
- align-items: center;
17
- gap: 4px;
18
- font-family: var(--px-font-family);
19
- vertical-align: middle;
20
- }
21
- /* Individual key element */
22
- .px-kbd__key[data-v-fa07bd0e] {
23
- display: inline-flex;
24
- justify-content: center;
25
- align-items: center;
26
- height: var(--px-kbd-height);
27
- min-width: var(--px-kbd-height);
28
- padding: var(--px-kbd-padding);
29
- font-size: var(--px-kbd-font-size);
30
- font-family: var(--px-font-family);
31
- font-weight: 500;
32
- color: var(--px-kbd-text-color);
33
- line-height: 1;
34
- white-space: nowrap;
35
- box-sizing: border-box;
36
- position: relative;
37
- background: transparent;
38
-
39
- border: none;
40
-
41
- /* Pixel shadow via drop-shadow */
42
- filter: drop-shadow(2px 2px 0px var(--px-kbd-shadow-color));
43
-
44
- transition: none;
45
- }
46
- /* Border layer — pixel shape with 2px staircase corners */
47
- .px-kbd__key[data-v-fa07bd0e]::before {
48
- content: '';
49
- position: absolute;
50
- inset: 0;
51
- background: var(--px-kbd-border-color);
52
- clip-path: polygon(
53
- 0 2px, 2px 2px, 2px 0,
54
- calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
55
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
56
- 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
57
- );
58
- z-index: -1;
59
- }
60
- /* Fill layer — sunken keycap bevel */
61
- .px-kbd__key[data-v-fa07bd0e]::after {
62
- content: '';
63
- position: absolute;
64
- inset: 2px;
65
- background: var(--px-kbd-bg-color);
66
- clip-path: polygon(
67
- 0 2px, 2px 2px, 2px 0,
68
- calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
69
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
70
- 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
71
- );
72
- box-shadow: var(--px-kbd-inset-shadow), var(--px-kbd-inset-highlight);
73
- z-index: -1;
74
- }
75
- /* Abbr element — remove default underline */
76
- .px-kbd__abbr[data-v-fa07bd0e] {
77
- text-decoration: none;
78
- position: relative;
79
- z-index: 1;
80
- }
81
- /* Icon inside key */
82
- .px-kbd__key .px-icon[data-v-fa07bd0e] {
83
- position: relative;
84
- z-index: 1;
85
- }
86
- /* Size variants */
87
- .px-kbd--large[data-v-fa07bd0e] {
88
- --px-kbd-height: 30px;
89
- --px-kbd-padding: 0 10px;
90
- --px-kbd-font-size: var(--px-font-size-base);
91
- }
92
- .px-kbd--small[data-v-fa07bd0e] {
93
- --px-kbd-height: 20px;
94
- --px-kbd-padding: 0 4px;
95
- --px-kbd-font-size: 10px;
96
- }
97
- .px-kbd--small .px-kbd__key[data-v-fa07bd0e] {
98
- filter: drop-shadow(1px 1px 0px var(--px-kbd-shadow-color));
99
- }
100
- /* Dark mode */
101
- html.dark .px-kbd[data-v-fa07bd0e] {
102
- --px-kbd-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
103
- --px-kbd-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
104
- }
1
+ .px-kbd[data-v-fa07bd0e]{--px-kbd-text-color:var(--px-text-color-primary);--px-kbd-bg-color:var(--px-fill-color-blank);--px-kbd-border-color:var(--px-border-color);--px-kbd-shadow-color:var(--px-shadow-color);--px-kbd-font-size:var(--px-font-size-extra-small);--px-kbd-height:24px;--px-kbd-padding:0 6px;--px-kbd-inset-shadow:inset 2px 2px 0 0 #00000014;--px-kbd-inset-highlight:inset -2px -2px 0 0 #ffffff26;font-family:var(--px-font-family);vertical-align:middle;align-items:center;gap:4px;display:inline-flex}.px-kbd__key[data-v-fa07bd0e]{height:var(--px-kbd-height);min-width:var(--px-kbd-height);padding:var(--px-kbd-padding);font-size:var(--px-kbd-font-size);font-family:var(--px-font-family);color:var(--px-kbd-text-color);white-space:nowrap;box-sizing:border-box;filter:drop-shadow(2px 2px 0px var(--px-kbd-shadow-color));background:0 0;border:none;justify-content:center;align-items:center;font-weight:500;line-height:1;transition:none;display:inline-flex;position:relative}.px-kbd__key[data-v-fa07bd0e]:before{content:"";background:var(--px-kbd-border-color);clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));z-index:-1;position:absolute;inset:0}.px-kbd__key[data-v-fa07bd0e]:after{content:"";background:var(--px-kbd-bg-color);clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));box-shadow:var(--px-kbd-inset-shadow), var(--px-kbd-inset-highlight);z-index:-1;position:absolute;inset:2px}.px-kbd__abbr[data-v-fa07bd0e]{z-index:1;text-decoration:none;position:relative}.px-kbd__key .px-icon[data-v-fa07bd0e]{z-index:1;position:relative}.px-kbd--large[data-v-fa07bd0e]{--px-kbd-height:30px;--px-kbd-padding:0 10px;--px-kbd-font-size:var(--px-font-size-base)}.px-kbd--small[data-v-fa07bd0e]{--px-kbd-height:20px;--px-kbd-padding:0 4px;--px-kbd-font-size:10px}.px-kbd--small .px-kbd__key[data-v-fa07bd0e]{filter:drop-shadow(1px 1px 0px var(--px-kbd-shadow-color))}html.dark .px-kbd[data-v-fa07bd0e]{--px-kbd-inset-shadow:inset 2px 2px 0 0 #0003;--px-kbd-inset-highlight:inset -2px -2px 0 0 #ffffff14}
@@ -1,69 +1 @@
1
- /* Link Variables */
2
- .px-link[data-v-d754ba7d] {
3
- --px-link-text-color: var(--px-text-color-regular);
4
- --px-link-hover-color: var(--px-text-color-primary);
5
- }
6
- /* Base Link Styles */
7
- .px-link[data-v-d754ba7d] {
8
- display: inline-flex;
9
- align-items: center;
10
- gap: 4px;
11
- font-family: var(--px-font-family);
12
- font-size: var(--px-font-size-base);
13
- color: var(--px-link-text-color);
14
- cursor: pointer;
15
- text-decoration: none;
16
- transition: none;
17
- }
18
- .px-link.is-underline[data-v-d754ba7d] {
19
- text-decoration: none;
20
- background-image: repeating-linear-gradient(
21
- to right,
22
- var(--px-link-text-color) 0px,
23
- var(--px-link-text-color) 4px,
24
- transparent 4px,
25
- transparent 8px
26
- );
27
- background-repeat: no-repeat;
28
- background-position: bottom 0 left 0;
29
- background-size: 100% 2px;
30
- padding-bottom: 2px;
31
- }
32
- .px-link[data-v-d754ba7d]:hover {
33
- color: var(--px-link-hover-color);
34
- transform: translate(-1px, -1px);
35
- }
36
- .px-link[data-v-d754ba7d]:focus-visible {
37
- outline: 2px dashed var(--px-color-primary);
38
- outline-offset: 2px;
39
- }
40
- .px-link[data-v-d754ba7d]:active {
41
- transform: translate(1px, 1px);
42
- }
43
- .px-link.is-disabled[data-v-d754ba7d] {
44
- opacity: 0.5;
45
- cursor: not-allowed;
46
- pointer-events: none;
47
- outline: none;
48
- }
49
- /* Type variants */
50
- .px-link--primary[data-v-d754ba7d] {
51
- --px-link-text-color: var(--px-color-primary);
52
- --px-link-hover-color: var(--px-color-primary-dark);
53
- }
54
- .px-link--success[data-v-d754ba7d] {
55
- --px-link-text-color: var(--px-color-success);
56
- --px-link-hover-color: var(--px-color-success-dark);
57
- }
58
- .px-link--info[data-v-d754ba7d] {
59
- --px-link-text-color: var(--px-color-info);
60
- --px-link-hover-color: var(--px-color-info-dark);
61
- }
62
- .px-link--warning[data-v-d754ba7d] {
63
- --px-link-text-color: var(--px-color-warning);
64
- --px-link-hover-color: var(--px-color-warning-dark);
65
- }
66
- .px-link--danger[data-v-d754ba7d] {
67
- --px-link-text-color: var(--px-color-danger);
68
- --px-link-hover-color: var(--px-color-danger-dark);
69
- }
1
+ .px-link[data-v-d754ba7d]{--px-link-text-color:var(--px-text-color-regular);--px-link-hover-color:var(--px-text-color-primary);font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-link-text-color);cursor:pointer;align-items:center;gap:4px;text-decoration:none;transition:none;display:inline-flex}.px-link.is-underline[data-v-d754ba7d]{background-image:repeating-linear-gradient(to right, var(--px-link-text-color) 0px, var(--px-link-text-color) 4px, transparent 4px, transparent 8px);background-position:left 0 bottom 0;background-repeat:no-repeat;background-size:100% 2px;padding-bottom:2px;text-decoration:none}.px-link[data-v-d754ba7d]:hover{color:var(--px-link-hover-color);transform:translate(-1px,-1px)}.px-link[data-v-d754ba7d]:focus-visible{outline:2px dashed var(--px-color-primary);outline-offset:2px}.px-link[data-v-d754ba7d]:active{transform:translate(1px,1px)}.px-link.is-disabled[data-v-d754ba7d]{opacity:.5;cursor:not-allowed;pointer-events:none;outline:none}.px-link--primary[data-v-d754ba7d]{--px-link-text-color:var(--px-color-primary);--px-link-hover-color:var(--px-color-primary-dark)}.px-link--success[data-v-d754ba7d]{--px-link-text-color:var(--px-color-success);--px-link-hover-color:var(--px-color-success-dark)}.px-link--info[data-v-d754ba7d]{--px-link-text-color:var(--px-color-info);--px-link-hover-color:var(--px-color-info-dark)}.px-link--warning[data-v-d754ba7d]{--px-link-text-color:var(--px-color-warning);--px-link-hover-color:var(--px-color-warning-dark)}.px-link--danger[data-v-d754ba7d]{--px-link-text-color:var(--px-color-danger);--px-link-hover-color:var(--px-color-danger-dark)}
@@ -1,266 +1 @@
1
- /* LoadingIndicator Variables */
2
- .px-loading-indicator[data-v-1435ecee] {
3
- --px-loading-indicator-color: var(--px-color-primary);
4
- --px-loading-indicator-size: 24px;
5
- }
6
- /* Base */
7
- .px-loading-indicator[data-v-1435ecee] {
8
- display: inline-flex;
9
- justify-content: center;
10
- align-items: center;
11
- width: var(--px-loading-indicator-size);
12
- height: var(--px-loading-indicator-size);
13
- color: var(--px-loading-indicator-color);
14
- font-family: var(--px-font-family);
15
- vertical-align: middle;
16
- }
17
- /* Size variants */
18
- .px-loading-indicator--xs[data-v-1435ecee] {
19
- --px-loading-indicator-size: 16px;
20
- }
21
- .px-loading-indicator--sm[data-v-1435ecee] {
22
- --px-loading-indicator-size: 20px;
23
- }
24
- .px-loading-indicator--md[data-v-1435ecee] {
25
- --px-loading-indicator-size: 24px;
26
- }
27
- .px-loading-indicator--lg[data-v-1435ecee] {
28
- --px-loading-indicator-size: 32px;
29
- }
30
- /* Type variants */
31
- .px-loading-indicator--primary[data-v-1435ecee] {
32
- --px-loading-indicator-color: var(--px-color-primary);
33
- }
34
- .px-loading-indicator--success[data-v-1435ecee] {
35
- --px-loading-indicator-color: var(--px-color-success);
36
- }
37
- .px-loading-indicator--info[data-v-1435ecee] {
38
- --px-loading-indicator-color: var(--px-color-info);
39
- }
40
- .px-loading-indicator--warning[data-v-1435ecee] {
41
- --px-loading-indicator-color: var(--px-color-warning);
42
- }
43
- .px-loading-indicator--danger[data-v-1435ecee] {
44
- --px-loading-indicator-color: var(--px-color-danger);
45
- }
46
- /* ─── Pixel-art ring mask (24×24 Bresenham circle with 2×2 blocks) ─── */
47
- .px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee],
48
- .px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee] {
49
- --px-ring-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='2' fill='white'/%3E%3Crect x='16' y='4' width='2' height='2' fill='white'/%3E%3Crect x='18' y='6' width='2' height='2' fill='white'/%3E%3Crect x='20' y='8' width='2' height='8' fill='white'/%3E%3Crect x='18' y='16' width='2' height='2' fill='white'/%3E%3Crect x='16' y='18' width='2' height='2' fill='white'/%3E%3Crect x='8' y='20' width='8' height='2' fill='white'/%3E%3Crect x='6' y='18' width='2' height='2' fill='white'/%3E%3Crect x='4' y='16' width='2' height='2' fill='white'/%3E%3Crect x='2' y='8' width='2' height='8' fill='white'/%3E%3Crect x='4' y='6' width='2' height='2' fill='white'/%3E%3Crect x='6' y='4' width='2' height='2' fill='white'/%3E%3C/svg%3E");
50
- }
51
- /* ─── Spinner variant ─── */
52
- .px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee] {
53
- display: block;
54
- width: 100%;
55
- height: 100%;
56
- box-sizing: border-box;
57
- background: conic-gradient(
58
- var(--px-loading-indicator-color) 0deg 180deg,
59
- transparent 180deg 360deg
60
- );
61
- -webkit-mask-image: var(--px-ring-mask);
62
- -webkit-mask-size: contain;
63
- -webkit-mask-repeat: no-repeat;
64
- mask-image: var(--px-ring-mask);
65
- mask-size: contain;
66
- mask-repeat: no-repeat;
67
- animation: px-indicator-spin-1435ecee 0.8s steps(8) infinite;
68
- }
69
- @keyframes px-indicator-spin-1435ecee {
70
- 0% { transform: rotate(0deg);
71
- }
72
- 100% { transform: rotate(360deg);
73
- }
74
- }
75
- /* ─── Dots variant ─── */
76
- .px-loading-indicator--dots[data-v-1435ecee] {
77
- gap: 3px;
78
- }
79
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee] {
80
- display: flex;
81
- align-items: center;
82
- gap: 3px;
83
- width: 100%;
84
- height: 100%;
85
- justify-content: center;
86
- }
87
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::before,
88
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::after {
89
- content: '';
90
- display: block;
91
- width: calc(var(--px-loading-indicator-size) * 0.2);
92
- height: calc(var(--px-loading-indicator-size) * 0.2);
93
- background: var(--px-loading-indicator-color);
94
- }
95
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::before {
96
- animation: px-indicator-dot-1435ecee 0.9s steps(3) infinite;
97
- }
98
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee] {
99
- background: var(--px-loading-indicator-color);
100
- width: calc(var(--px-loading-indicator-size) * 0.2);
101
- height: calc(var(--px-loading-indicator-size) * 0.2);
102
- animation: px-indicator-dot-1435ecee 0.9s steps(3) 0.15s infinite;
103
- }
104
- .px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::after {
105
- animation: px-indicator-dot-1435ecee 0.9s steps(3) 0.3s infinite;
106
- }
107
- @keyframes px-indicator-dot-1435ecee {
108
- 0%, 100% { opacity: 0.2;
109
- }
110
- 50% { opacity: 1;
111
- }
112
- }
113
- /* ─── Bars variant ─── */
114
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee] {
115
- display: flex;
116
- align-items: flex-end;
117
- gap: 2px;
118
- width: 100%;
119
- height: 100%;
120
- justify-content: center;
121
- }
122
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::before,
123
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::after {
124
- content: '';
125
- display: block;
126
- width: calc(var(--px-loading-indicator-size) * 0.18);
127
- background: var(--px-loading-indicator-color);
128
- }
129
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::before {
130
- height: 40%;
131
- animation: px-indicator-bar-1435ecee 0.8s steps(4) infinite;
132
- }
133
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee] {
134
- background: var(--px-loading-indicator-color);
135
- width: calc(var(--px-loading-indicator-size) * 0.18);
136
- animation: px-indicator-bar-1435ecee 0.8s steps(4) 0.15s infinite;
137
- }
138
- .px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::after {
139
- height: 60%;
140
- animation: px-indicator-bar-1435ecee 0.8s steps(4) 0.3s infinite;
141
- }
142
- @keyframes px-indicator-bar-1435ecee {
143
- 0%, 100% { height: 30%;
144
- }
145
- 50% { height: 100%;
146
- }
147
- }
148
- /* ─── Ring variant ─── */
149
- .px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee] {
150
- display: block;
151
- width: 80%;
152
- height: 80%;
153
- box-sizing: border-box;
154
- background: conic-gradient(
155
- var(--px-loading-indicator-color) 0deg 120deg,
156
- transparent 120deg 360deg
157
- );
158
- -webkit-mask-image: var(--px-ring-mask);
159
- -webkit-mask-size: contain;
160
- -webkit-mask-repeat: no-repeat;
161
- mask-image: var(--px-ring-mask);
162
- mask-size: contain;
163
- mask-repeat: no-repeat;
164
- animation: px-indicator-spin-1435ecee 1s steps(8) infinite;
165
- }
166
- /* Loading Variables */
167
- .px-loading {
168
- --px-loading-icon-color: var(--px-color-primary);
169
- --px-loading-mask-margin: 0;
170
- --px-loading-mask-size: 100%;
171
- --px-loading-icon-size: 32px;
172
- --px-loading-font-size: var(--px-font-size-base);
173
- --px-loading-z-index: 20000;
174
- --px-loading-bg-color: rgba(255, 255, 255, 0.8);
175
- --px-loading-dot-color: rgba(0, 0, 0, 0.02);
176
- }
177
- /* Base Loading Styles - Pixel Game Loading */
178
- .px-loading {
179
- opacity: 1;
180
- transition: none;
181
- font-family: var(--px-font-family);
182
- }
183
- .px-loading.px-loading__mask {
184
- position: absolute;
185
- margin: var(--px-loading-mask-margin);
186
- top: var(--px-loading-mask-margin);
187
- right: var(--px-loading-mask-margin);
188
- bottom: var(--px-loading-mask-margin);
189
- left: var(--px-loading-mask-margin);
190
- height: var(--px-loading-mask-size);
191
- width: var(--px-loading-mask-size);
192
- z-index: var(--px-loading-z-index);
193
- background:
194
- repeating-linear-gradient(
195
- to right,
196
- var(--px-loading-dot-color) 0px,
197
- var(--px-loading-dot-color) 2px,
198
- transparent 2px,
199
- transparent 4px
200
- ),
201
- var(--px-loading-bg-color);
202
- display: flex;
203
- justify-content: center;
204
- align-items: center;
205
- }
206
- .px-loading.px-loading__mask.is-fullscreen {
207
- position: fixed;
208
- }
209
- .px-loading .px-loading__spinner {
210
- color: var(--px-loading-icon-color);
211
- text-align: center;
212
- display: flex;
213
- flex-direction: column;
214
- align-items: center;
215
- gap: 8px;
216
- }
217
- .px-loading .px-loading__spinner .px-loading-text {
218
- margin: 0;
219
- font-size: var(--px-loading-font-size);
220
- font-family: var(--px-font-family);
221
- color: var(--px-text-color-primary);
222
- letter-spacing: 1px;
223
- animation: px-loading-text-pulse 1.5s steps(2) infinite;
224
- }
225
- .px-loading .px-loading__spinner i {
226
- font-size: var(--px-loading-icon-size);
227
- /* Pixel-style animation - stepping */
228
- animation: px-loading-spin 1s steps(8) infinite;
229
- }
230
- /* Pixel-style spinning animation */
231
- @keyframes px-loading-spin {
232
- 0% {
233
- transform: rotate(0deg);
234
- }
235
- 100% {
236
- transform: rotate(360deg);
237
- }
238
- }
239
- /* Pixel-style text pulse */
240
- @keyframes px-loading-text-pulse {
241
- 0% {
242
- opacity: 1;
243
- }
244
- 50% {
245
- opacity: 0.4;
246
- }
247
- 100% {
248
- opacity: 1;
249
- }
250
- }
251
- /* Parent element states */
252
- .px-loading-parent--relative {
253
- position: relative !important;
254
- }
255
- .px-loading-parent--hiden {
256
- overflow: hidden !important;
257
- }
258
- /* Dark mode loading */
259
- .px-dark .px-loading {
260
- --px-loading-bg-color: rgba(30, 30, 46, 0.85);
261
- --px-loading-dot-color: rgba(255, 255, 255, 0.02);
262
- }
263
- .px-loading {
264
- --px-loading-bg-color: var(--d4003bba) !important;
265
- --px-loading-z-index: var(--b5c47826) !important;
266
- }
1
+ .px-loading-indicator[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-primary);--px-loading-indicator-size:24px;width:var(--px-loading-indicator-size);height:var(--px-loading-indicator-size);color:var(--px-loading-indicator-color);font-family:var(--px-font-family);vertical-align:middle;justify-content:center;align-items:center;display:inline-flex}.px-loading-indicator--xs[data-v-1435ecee]{--px-loading-indicator-size:16px}.px-loading-indicator--sm[data-v-1435ecee]{--px-loading-indicator-size:20px}.px-loading-indicator--md[data-v-1435ecee]{--px-loading-indicator-size:24px}.px-loading-indicator--lg[data-v-1435ecee]{--px-loading-indicator-size:32px}.px-loading-indicator--primary[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-primary)}.px-loading-indicator--success[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-success)}.px-loading-indicator--info[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-info)}.px-loading-indicator--warning[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-warning)}.px-loading-indicator--danger[data-v-1435ecee]{--px-loading-indicator-color:var(--px-color-danger)}.px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee],.px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee]{--px-ring-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='2' fill='white'/%3E%3Crect x='16' y='4' width='2' height='2' fill='white'/%3E%3Crect x='18' y='6' width='2' height='2' fill='white'/%3E%3Crect x='20' y='8' width='2' height='8' fill='white'/%3E%3Crect x='18' y='16' width='2' height='2' fill='white'/%3E%3Crect x='16' y='18' width='2' height='2' fill='white'/%3E%3Crect x='8' y='20' width='8' height='2' fill='white'/%3E%3Crect x='6' y='18' width='2' height='2' fill='white'/%3E%3Crect x='4' y='16' width='2' height='2' fill='white'/%3E%3Crect x='2' y='8' width='2' height='8' fill='white'/%3E%3Crect x='4' y='6' width='2' height='2' fill='white'/%3E%3Crect x='6' y='4' width='2' height='2' fill='white'/%3E%3C/svg%3E")}.px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee]{box-sizing:border-box;background:conic-gradient(var(--px-loading-indicator-color) 0deg 180deg, transparent 180deg 360deg);width:100%;height:100%;-webkit-mask-image:var(--px-ring-mask);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-image:var(--px-ring-mask);mask-image:var(--px-ring-mask);animation:.8s steps(8,end) infinite px-indicator-spin-1435ecee;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes px-indicator-spin-1435ecee{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.px-loading-indicator--dots[data-v-1435ecee]{gap:3px}.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]{justify-content:center;align-items:center;gap:3px;width:100%;height:100%;display:flex}.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]:before,.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]:after{content:"";width:calc(var(--px-loading-indicator-size) * .2);height:calc(var(--px-loading-indicator-size) * .2);background:var(--px-loading-indicator-color);display:block}.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]:before{animation:.9s steps(3,end) infinite px-indicator-dot-1435ecee}.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]{background:var(--px-loading-indicator-color);width:calc(var(--px-loading-indicator-size) * .2);height:calc(var(--px-loading-indicator-size) * .2);animation:.9s steps(3,end) .15s infinite px-indicator-dot-1435ecee}.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]:after{animation:.9s steps(3,end) .3s infinite px-indicator-dot-1435ecee}@keyframes px-indicator-dot-1435ecee{0%,to{opacity:.2}50%{opacity:1}}.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]{justify-content:center;align-items:flex-end;gap:2px;width:100%;height:100%;display:flex}.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]:before,.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]:after{content:"";width:calc(var(--px-loading-indicator-size) * .18);background:var(--px-loading-indicator-color);display:block}.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]:before{height:40%;animation:.8s steps(4,end) infinite px-indicator-bar-1435ecee}.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]{background:var(--px-loading-indicator-color);width:calc(var(--px-loading-indicator-size) * .18);animation:.8s steps(4,end) .15s infinite px-indicator-bar-1435ecee}.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]:after{height:60%;animation:.8s steps(4,end) .3s infinite px-indicator-bar-1435ecee}@keyframes px-indicator-bar-1435ecee{0%,to{height:30%}50%{height:100%}}.px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee]{box-sizing:border-box;background:conic-gradient(var(--px-loading-indicator-color) 0deg 120deg, transparent 120deg 360deg);width:80%;height:80%;-webkit-mask-image:var(--px-ring-mask);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-image:var(--px-ring-mask);mask-image:var(--px-ring-mask);animation:1s steps(8,end) infinite px-indicator-spin-1435ecee;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.px-loading{--px-loading-icon-color:var(--px-color-primary);--px-loading-mask-margin:0;--px-loading-mask-size:100%;--px-loading-icon-size:32px;--px-loading-font-size:var(--px-font-size-base);--px-loading-z-index:20000;--px-loading-bg-color:#fffc;--px-loading-dot-color:#00000005;opacity:1;font-family:var(--px-font-family);transition:none}.px-loading.px-loading__mask{margin:var(--px-loading-mask-margin);top:var(--px-loading-mask-margin);right:var(--px-loading-mask-margin);bottom:var(--px-loading-mask-margin);left:var(--px-loading-mask-margin);height:var(--px-loading-mask-size);width:var(--px-loading-mask-size);z-index:var(--px-loading-z-index);background:repeating-linear-gradient(to right, var(--px-loading-dot-color) 0px, var(--px-loading-dot-color) 2px, transparent 2px, transparent 4px), var(--px-loading-bg-color);justify-content:center;align-items:center;display:flex;position:absolute}.px-loading.px-loading__mask.is-fullscreen{position:fixed}.px-loading .px-loading__spinner{color:var(--px-loading-icon-color);text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.px-loading .px-loading__spinner .px-loading-text{font-size:var(--px-loading-font-size);font-family:var(--px-font-family);color:var(--px-text-color-primary);letter-spacing:1px;margin:0;animation:1.5s steps(2,end) infinite px-loading-text-pulse}.px-loading .px-loading__spinner i{font-size:var(--px-loading-icon-size);animation:1s steps(8,end) infinite px-loading-spin}@keyframes px-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes px-loading-text-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.px-loading-parent--relative{position:relative!important}.px-loading-parent--hiden{overflow:hidden!important}.px-dark .px-loading{--px-loading-bg-color:#1e1e2ed9;--px-loading-dot-color:#ffffff05}.px-loading{--px-loading-bg-color:var(--d4003bba)!important;--px-loading-z-index:var(--b5c47826)!important}