@esportsplus/ui 0.51.7 → 0.53.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 (150) hide show
  1. package/README.md +2 -3
  2. package/build/components/accordion/index.d.ts +15 -10
  3. package/build/components/accordion/index.js +8 -34
  4. package/build/components/accordion/scss/index.scss +1 -1
  5. package/build/components/back/index.d.ts +14 -11
  6. package/build/components/back/index.js +3 -3
  7. package/build/components/button/index.js +2 -2
  8. package/build/components/checkbox/index.js +7 -3
  9. package/build/components/clipboard/index.d.ts +23 -20
  10. package/build/components/clipboard/index.js +1 -0
  11. package/build/components/clipboard/onclick.js +3 -3
  12. package/build/components/form/input.js +3 -3
  13. package/build/components/frame/index.d.ts +16 -15
  14. package/build/components/frame/index.js +11 -5
  15. package/build/components/highlight/index.js +2 -2
  16. package/build/components/icon/index.js +2 -2
  17. package/build/components/index.d.ts +1 -4
  18. package/build/components/index.js +1 -4
  19. package/build/components/loader/index.js +4 -4
  20. package/build/components/loader/scss/index.scss +1 -1
  21. package/build/components/overlay/index.d.ts +16 -15
  22. package/build/components/overlay/index.js +11 -5
  23. package/build/components/overlay/scss/index.scss +1 -1
  24. package/build/components/page/scss/index.scss +1 -1
  25. package/build/components/root/scss/index.scss +1 -1
  26. package/build/components/select/index.d.ts +3 -6
  27. package/build/components/select/index.js +72 -78
  28. package/build/components/sidebar/index.d.ts +16 -15
  29. package/build/components/sidebar/index.js +11 -5
  30. package/build/components/sidebar/scss/index.scss +1 -1
  31. package/build/components/toast/index.d.ts +9 -0
  32. package/build/components/toast/index.js +157 -0
  33. package/build/components/toast/manager.d.ts +60 -0
  34. package/build/components/toast/manager.js +203 -0
  35. package/build/components/toast/scss/index.scss +2 -0
  36. package/build/components/toast/svg/check.svg +1 -0
  37. package/build/components/toast/svg/chevron.svg +1 -0
  38. package/build/components/toast/svg/close.svg +1 -0
  39. package/build/components/toast/svg/copy.svg +1 -0
  40. package/build/components/toast/svg/error.svg +1 -0
  41. package/build/components/toast/svg/info.svg +1 -0
  42. package/build/components/toast/svg/loading.svg +1 -0
  43. package/build/components/toast/svg/success.svg +1 -0
  44. package/build/components/toast/svg/warning.svg +1 -0
  45. package/build/components/tooltip/index.d.ts +40 -40
  46. package/build/components/tooltip/menu.js +37 -23
  47. package/build/components/tooltip/onclick.d.ts +20 -20
  48. package/build/components/tooltip/onclick.js +2 -2
  49. package/build/components/tooltip/onhover.js +2 -2
  50. package/build/components/typewriter/index.js +2 -2
  51. package/build/css-utilities/index.scss +1 -1
  52. package/build/css-utilities/scroll-fade/scss/index.scss +2 -0
  53. package/build/css-utilities/scrollbar/scss/index.scss +2 -0
  54. package/build/themes/dark/back.d.ts +8 -4
  55. package/build/themes/dark/index.d.ts +0 -1
  56. package/build/themes/dark/index.js +0 -1
  57. package/build/themes/dark/input.d.ts +2 -2
  58. package/build/themes/dark/select.d.ts +60 -110
  59. package/build/themes/dark/textarea.d.ts +2 -2
  60. package/package.json +15 -15
  61. package/pnpm-workspace.yaml +11 -8
  62. package/src/components/accordion/index.ts +7 -30
  63. package/src/components/accordion/scss/index.scss +9 -12
  64. package/src/components/back/index.ts +4 -5
  65. package/src/components/button/index.ts +2 -3
  66. package/src/components/checkbox/index.ts +7 -2
  67. package/src/components/clipboard/index.ts +2 -1
  68. package/src/components/clipboard/onclick.ts +3 -4
  69. package/src/components/form/input.ts +4 -4
  70. package/src/components/frame/index.ts +9 -5
  71. package/src/components/highlight/index.ts +2 -3
  72. package/src/components/icon/index.ts +2 -3
  73. package/src/components/index.ts +1 -4
  74. package/src/components/loader/index.ts +5 -6
  75. package/src/components/loader/scss/index.scss +1 -1
  76. package/src/components/overlay/index.ts +9 -5
  77. package/src/components/overlay/scss/index.scss +0 -1
  78. package/src/components/page/scss/index.scss +1 -1
  79. package/src/components/root/scss/index.scss +35 -4
  80. package/src/components/root/scss/variables.scss +1 -2
  81. package/src/components/select/index.ts +71 -83
  82. package/src/components/sidebar/index.ts +9 -5
  83. package/src/components/sidebar/scss/index.scss +0 -1
  84. package/src/components/toast/index.ts +188 -0
  85. package/src/components/toast/manager.ts +312 -0
  86. package/src/components/toast/scss/index.scss +276 -0
  87. package/src/components/toast/scss/variables.scss +19 -0
  88. package/src/components/toast/svg/check.svg +1 -0
  89. package/src/components/toast/svg/chevron.svg +1 -0
  90. package/src/components/toast/svg/close.svg +1 -0
  91. package/src/components/toast/svg/copy.svg +1 -0
  92. package/src/components/toast/svg/error.svg +1 -0
  93. package/src/components/toast/svg/info.svg +1 -0
  94. package/src/components/toast/svg/loading.svg +1 -0
  95. package/src/components/toast/svg/success.svg +1 -0
  96. package/src/components/toast/svg/warning.svg +1 -0
  97. package/src/components/tooltip/menu.ts +8 -4
  98. package/src/components/tooltip/onclick.ts +2 -3
  99. package/src/components/tooltip/onhover.ts +2 -3
  100. package/src/components/typewriter/index.ts +2 -3
  101. package/src/css-utilities/index.scss +3 -2
  102. package/src/css-utilities/scroll-fade/scss/index.scss +47 -0
  103. package/src/css-utilities/scroll-fade/scss/variables.scss +3 -0
  104. package/src/css-utilities/scrollbar/scss/index.scss +53 -0
  105. package/src/css-utilities/scrollbar/scss/variables.scss +5 -0
  106. package/src/themes/dark/index.ts +0 -1
  107. package/src/tokens/scss/color.scss +14 -14
  108. package/src/tokens/scss/font-size.scss +12 -11
  109. package/src/tokens/scss/line-height.scss +7 -4
  110. package/src/tokens/scss/scale.scss +22 -0
  111. package/src/tokens/scss/size.scss +12 -9
  112. package/src/tokens/scss/spacer.scss +9 -9
  113. package/storage/svg/bolt.svg +1 -0
  114. package/storage/svg/star.svg +1 -0
  115. package/tsconfig.json +6 -2
  116. package/vite-env.d.ts +1 -0
  117. package/vite.config.ts +73 -72
  118. package/build/components/alert/index.d.ts +0 -19
  119. package/build/components/alert/index.js +0 -151
  120. package/build/components/alert/scss/index.scss +0 -2
  121. package/build/components/alert/svg/check.svg +0 -11
  122. package/build/components/alert/svg/close.svg +0 -12
  123. package/build/components/alert/svg/error.svg +0 -18
  124. package/build/components/scrollbar/index.d.ts +0 -27
  125. package/build/components/scrollbar/index.js +0 -56
  126. package/build/components/scrollbar/scss/index.scss +0 -2
  127. package/build/components/site/index.d.ts +0 -20
  128. package/build/components/site/index.js +0 -9
  129. package/build/components/site/scss/index.scss +0 -2
  130. package/build/components/template/index.d.ts +0 -14
  131. package/build/components/template/index.js +0 -21
  132. package/build/css-utilities/scroller/scss/index.scss +0 -2
  133. package/build/themes/dark/alert.d.ts +0 -11
  134. package/build/themes/dark/alert.js +0 -20
  135. package/src/components/accordion/scss/variables.scss +0 -9
  136. package/src/components/alert/index.ts +0 -165
  137. package/src/components/alert/scss/index.scss +0 -25
  138. package/src/components/alert/scss/variables.scss +0 -3
  139. package/src/components/alert/svg/check.svg +0 -11
  140. package/src/components/alert/svg/close.svg +0 -12
  141. package/src/components/alert/svg/error.svg +0 -18
  142. package/src/components/scrollbar/index.ts +0 -70
  143. package/src/components/scrollbar/scss/index.scss +0 -82
  144. package/src/components/scrollbar/scss/variables.scss +0 -6
  145. package/src/components/site/index.ts +0 -11
  146. package/src/components/site/scss/index.scss +0 -3
  147. package/src/components/template/index.ts +0 -40
  148. package/src/css-utilities/scroller/scss/index.scss +0 -8
  149. package/src/css-utilities/scroller/scss/variables.scss +0 -4
  150. package/src/themes/dark/alert.ts +0 -23
@@ -1,13 +1,16 @@
1
+ // Golden-ratio size ladder: 400 = 16px (1em), each key one φ half-step (×1.272).
2
+ @use 'scale';
3
+
1
4
  $size: (
2
- 100: 4px,
3
- 200: 8px,
4
- 300: 12px,
5
- 400: 16px,
6
- 500: 20px,
7
- 600: 24px,
8
- 700: 32px,
9
- 800: 40px,
10
- 900: 48px,
5
+ 100: scale.px(scale.step(-1.5)),
6
+ 200: scale.px(scale.step(-1)),
7
+ 300: scale.px(scale.step(-0.5)),
8
+ 400: scale.px(scale.step(0)),
9
+ 500: scale.px(scale.step(0.5)),
10
+ 600: scale.px(scale.step(1)),
11
+ 700: scale.px(scale.step(1.5)),
12
+ 800: scale.px(scale.step(2)),
13
+ 900: scale.px(scale.step(2.5)),
11
14
 
12
15
  0px: 0px,
13
16
  );
@@ -1,12 +1,12 @@
1
- @use '../../lib';
2
- @use 'size';
1
+ // Golden-ratio spacer ladder: 400 = 120px, each key one φ half-step (×1.272).
2
+ @use 'scale';
3
3
 
4
4
  $spacer: (
5
- 100: 40px,
6
- 200: 60px,
7
- 300: 80px,
8
- 400: 120px,
9
- 500: 160px,
10
- 600: 180px,
11
- 700: 220px,
5
+ 100: scale.px(scale.step(-1.5), 120),
6
+ 200: scale.px(scale.step(-1), 120),
7
+ 300: scale.px(scale.step(-0.5), 120),
8
+ 400: scale.px(scale.step(0), 120),
9
+ 500: scale.px(scale.step(0.5), 120),
10
+ 600: scale.px(scale.step(1), 120),
11
+ 700: scale.px(scale.step(1.5), 120),
12
12
  );
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 18l-6.2 3.2 1.6-7L2 9.5l7.1-.6z"/></svg>
package/tsconfig.json CHANGED
@@ -4,5 +4,9 @@
4
4
  "plugins": [
5
5
  { "transform": "@esportsplus/template/compiler/tsc" }
6
6
  ]
7
- }
8
- }
7
+ },
8
+ "include": [
9
+ "src/**/*",
10
+ "vite-env.d.ts"
11
+ ]
12
+ }
package/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/vite.config.ts CHANGED
@@ -1,89 +1,90 @@
1
1
  import { glob } from 'glob';
2
2
  import { defineConfig } from 'vite';
3
3
  import autoprefixer from 'autoprefixer';
4
- import { join } from 'path';
5
4
  import shelljs from 'shelljs';
6
5
 
7
6
 
8
- export default defineConfig({
9
- build: {
10
- cssMinify: 'lightningcss',
11
- outDir: 'build',
12
- rollupOptions: {
13
- input: [
14
- ...glob.sync('./src/normalize/scss/index.scss'),
15
- ...glob.sync('./src/{components,css-utilities,fonts,themes/dark,themes/light}/*/scss/index.scss'),
16
- ...glob.sync('./src/css-utilities/index.scss')
17
- ],
18
- output: {
19
- assetFileNames: ({ originalFileNames: [filename] }) => {
20
- if (filename) {
21
- return filename.split('src/').pop()!;
22
- }
7
+ export default defineConfig(() => {
8
+ return {
9
+ build: {
10
+ cssMinify: 'lightningcss',
11
+ outDir: 'build',
12
+ rollupOptions: {
13
+ input: [
14
+ ...glob.sync('./src/normalize/scss/index.scss'),
15
+ ...glob.sync('./src/{components,css-utilities,fonts,themes/dark,themes/light}/*/scss/index.scss'),
16
+ ...glob.sync('./src/css-utilities/index.scss')
17
+ ],
18
+ output: {
19
+ assetFileNames: ({ originalFileNames: [filename] }) => {
20
+ if (filename) {
21
+ return filename.split('src/').pop()!;
22
+ }
23
23
 
24
- return '[name].[ext]';
24
+ return '[name].[ext]';
25
+ },
25
26
  },
26
- },
27
- plugins: [
28
- {
29
- name: '@esportsplus/ui-layers',
30
- generateBundle(_, bundle) {
31
- for (let filename in bundle) {
32
- let file = bundle[filename];
27
+ plugins: [
28
+ {
29
+ name: '@esportsplus/ui-layers',
30
+ generateBundle(_, bundle) {
31
+ for (let filename in bundle) {
32
+ let file = bundle[filename];
33
33
 
34
- if (
35
- !filename.endsWith('.scss') ||
36
- filename.startsWith('fonts') ||
37
- file.type !== 'asset' ||
38
- typeof file.source !== 'string'
39
- ) {
40
- continue;
41
- }
34
+ if (
35
+ !filename.endsWith('.scss') ||
36
+ filename.startsWith('fonts') ||
37
+ file.type !== 'asset' ||
38
+ typeof file.source !== 'string'
39
+ ) {
40
+ continue;
41
+ }
42
42
 
43
- let layer: string,
44
- segments = file.source.split('\n'),
45
- // Vite appends a value on bundle
46
- vite = segments.pop();
43
+ let layer: string,
44
+ segments = file.source.split('\n'),
45
+ // Vite appends a value on bundle
46
+ vite = segments.pop();
47
47
 
48
- if (filename.startsWith('css-utilities')) {
49
- layer = 'css-utilities';
50
- }
51
- else if (filename.startsWith('components')) {
52
- layer = 'components';
53
- }
54
- else if (filename.startsWith('themes')) {
55
- layer = 'themes';
56
- }
57
- else if (filename.startsWith('normalize')) {
58
- layer = 'normalize';
59
- }
60
- else {
61
- continue;
62
- }
48
+ if (filename.startsWith('css-utilities')) {
49
+ layer = 'css-utilities';
50
+ }
51
+ else if (filename.startsWith('components')) {
52
+ layer = 'components';
53
+ }
54
+ else if (filename.startsWith('themes')) {
55
+ layer = 'themes';
56
+ }
57
+ else if (filename.startsWith('normalize')) {
58
+ layer = 'normalize';
59
+ }
60
+ else {
61
+ continue;
62
+ }
63
63
 
64
- file.source = `@layer ${layer} {${segments.join('\n')}}\n${vite}`;
64
+ file.source = `@layer ${layer} {${segments.join('\n')}}\n${vite}`;
65
+ }
65
66
  }
66
- }
67
- },
68
- {
69
- name: '@esportsplus/ui-svg-copy',
70
- writeBundle() {
71
- let directories = glob.sync('./src/components/*/svg/');
67
+ },
68
+ {
69
+ name: '@esportsplus/ui-svg-copy',
70
+ writeBundle() {
71
+ let directories = glob.sync('./src/components/*/svg/');
72
72
 
73
- for (let dir of directories) {
74
- shelljs.cp('-rf', dir, dir.replace('src', 'build'));
73
+ for (let dir of directories) {
74
+ shelljs.cp('-rf', dir, dir.replace('src', 'build'));
75
+ }
75
76
  }
76
77
  }
77
- }
78
- ]
79
- }
80
- },
81
- css: {
82
- postcss: {
83
- plugins: [
84
- autoprefixer()
85
- ]
78
+ ]
79
+ }
80
+ },
81
+ css: {
82
+ postcss: {
83
+ plugins: [
84
+ autoprefixer()
85
+ ]
86
+ },
87
+ transformer: 'lightningcss'
86
88
  },
87
- transformer: 'lightningcss'
88
- },
89
- });
89
+ };
90
+ });
@@ -1,19 +0,0 @@
1
- import '@esportsplus/vite/global.d.ts';
2
- import { Response } from '@esportsplus/action';
3
- import { Attributes, Renderable } from '@esportsplus/template';
4
- import './scss/index.scss';
5
- export default _default;
6
- declare function _default(attributes: Attributes & {
7
- 'alert-close'?: Attributes;
8
- 'alert-messages'?: Attributes;
9
- 'alert-message'?: Attributes;
10
- }): {
11
- content: DocumentFragment | Text;
12
- deactivate: () => void;
13
- error: {
14
- (messages: Renderable<any>, seconds?: number): void;
15
- response: (response: Response<any>) => void;
16
- };
17
- info: (messages: Renderable<any>, seconds?: number) => void;
18
- success: (messages: Renderable<any>, seconds?: number) => void;
19
- };
@@ -1,151 +0,0 @@
1
- import '@esportsplus/vite/global.d.ts';
2
- import * as template_u1 from '@esportsplus/template';
3
- import * as reactivity_u0 from '@esportsplus/reactivity';
4
- import { omit } from '@esportsplus/utilities';
5
- import icon from '../icon/index.js';
6
- import check from './svg/check.svg';
7
- import close from './svg/close.svg';
8
- import e from './svg/error.svg';
9
- import './scss/index.scss';
10
- const template_0id5jvz2 = template_u1.template(`<div class='--flex-vertical'>`);
11
- const template_0id5jvz5 = template_u1.template(`<p >`);
12
- const template_0id5jvz8 = template_u1.template(`<div class='--flex-start'>`);
13
- const template_0id5jvzb = template_u1.template(`<div class='alert anchor anchor--n --flex-row' ><!--$--><div class='alert-messages --flex-column --flex-fill' ></div><div class=--flex-vertical><div class='alert-close button --padding-300' >`);
14
- class ReactiveObject_0id5jvz0 extends reactivity_u0.ReactiveObject {
15
- #active = this[reactivity_u0.SIGNAL](false);
16
- #messages;
17
- #rerender = this[reactivity_u0.SIGNAL](0);
18
- #type;
19
- constructor(_p0, _p1) {
20
- super(null);
21
- this.#messages = this[reactivity_u0.SIGNAL](_p0);
22
- this.#type = this[reactivity_u0.SIGNAL](_p1);
23
- }
24
- get active() {
25
- return reactivity_u0.read(this.#active);
26
- }
27
- set active(_v0) {
28
- reactivity_u0.write(this.#active, _v0);
29
- }
30
- get messages() {
31
- return reactivity_u0.read(this.#messages);
32
- }
33
- set messages(_v1) {
34
- reactivity_u0.write(this.#messages, _v1);
35
- }
36
- get rerender() {
37
- return reactivity_u0.read(this.#rerender);
38
- }
39
- set rerender(_v2) {
40
- reactivity_u0.write(this.#rerender, _v2);
41
- }
42
- get type() {
43
- return reactivity_u0.read(this.#type);
44
- }
45
- set type(_v3) {
46
- reactivity_u0.write(this.#type, _v3);
47
- }
48
- }
49
- const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
50
- let modifiers = {
51
- error: 'red',
52
- info: 'black',
53
- success: 'green'
54
- }, timeout = 250;
55
- function activate(key, messages, seconds, state) {
56
- if (!Array.isArray(messages)) {
57
- messages = [messages];
58
- }
59
- if (!messages.length) {
60
- return;
61
- }
62
- if (state.type !== key) {
63
- state.active = false;
64
- state.messages.clear();
65
- }
66
- state.type = key;
67
- for (let message of messages) {
68
- state.messages.add(message);
69
- }
70
- if (state.active) {
71
- state.rerender++;
72
- if (!seconds) {
73
- return;
74
- }
75
- setTimeout(deactivate, timeout + (500 * seconds));
76
- }
77
- else {
78
- setTimeout(() => {
79
- state.active = true;
80
- state.rerender++;
81
- state.type = key;
82
- if (seconds) {
83
- setTimeout(deactivate, 500 * seconds);
84
- }
85
- }, timeout);
86
- }
87
- }
88
- function deactivate(state) {
89
- state.active = false;
90
- setTimeout(() => {
91
- state.messages.clear();
92
- }, timeout);
93
- }
94
- export default (attributes) => {
95
- let state = new ReactiveObject_0id5jvz0(new Set(), '');
96
- const error = (messages, seconds = 0) => activate('error', messages, seconds, state);
97
- error.response = (response) => {
98
- if (response.ok) {
99
- return;
100
- }
101
- error(response.errors.map(({ message, path }) => {
102
- if (!path) {
103
- return message;
104
- }
105
- return `${String(path).split('.').join(' ')} ${message}`;
106
- }), 5);
107
- };
108
- return {
109
- content: (() => {
110
- let root_0id5jvza = template_0id5jvzb(), element_0id5jvzc = root_0id5jvza.firstChild, element_0id5jvzd = element_0id5jvzc.firstChild, element_0id5jvze = element_0id5jvzc.firstElementChild, element_0id5jvzf = element_0id5jvze.nextElementSibling.firstElementChild;
111
- template_u1.setList(element_0id5jvzc, 'class', () => state.active && '--active');
112
- template_u1.setProperties(element_0id5jvzc, omit(attributes, OMIT));
113
- new template_u1.EffectSlot(element_0id5jvzd, () => {
114
- let type = state.type;
115
- return (() => {
116
- let root_0id5jvz1 = template_0id5jvz2(), element_0id5jvz3 = root_0id5jvz1.firstChild;
117
- template_u1.setList(element_0id5jvz3, 'style', `--color: var(--color-${modifiers[type]}-400);`);
118
- template_u1.slot(element_0id5jvz3, icon({ class: '--size-500' }, type === 'error' ? e : check), 1);
119
- return root_0id5jvz1;
120
- })();
121
- });
122
- template_u1.setProperties(element_0id5jvze, attributes['alert-messages']);
123
- new template_u1.EffectSlot(element_0id5jvze, () => {
124
- let message = attributes['alert-message'];
125
- return state.rerender && [...state.messages].map((content) => {
126
- if (typeof content === 'string') {
127
- return (() => {
128
- let root_0id5jvz4 = template_0id5jvz5(), element_0id5jvz6 = root_0id5jvz4.firstChild;
129
- template_u1.setProperties(element_0id5jvz6, message);
130
- template_u1.slot(element_0id5jvz6, content, 1);
131
- return root_0id5jvz4;
132
- })();
133
- }
134
- return (() => {
135
- let root_0id5jvz7 = template_0id5jvz8(), element_0id5jvz9 = root_0id5jvz7.firstChild;
136
- template_u1.slot(element_0id5jvz9, content, 1);
137
- return root_0id5jvz7;
138
- })();
139
- });
140
- }, 1);
141
- template_u1.delegate(element_0id5jvzf, 'click', () => deactivate(state));
142
- template_u1.setProperties(element_0id5jvzf, attributes['alert-close']);
143
- template_u1.slot(element_0id5jvzf, icon({ style: '--size: 14px;' }, close), 1);
144
- return root_0id5jvza;
145
- })(),
146
- deactivate: () => deactivate(state),
147
- error,
148
- info: (messages, seconds = 0) => activate('info', messages, seconds, state),
149
- success: (messages, seconds = 0) => activate('success', messages, seconds, state)
150
- };
151
- };
@@ -1,2 +0,0 @@
1
- @layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical) * 2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal) * 2);transition:opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}.alert{--max-width:640px;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);width:calc(100% - var(--margin-horizontal) * 2);z-index:9999;position:fixed}.alert.anchor--n:not(.--active){transform:translate(50%,-100%)}.alert.anchor--ne:not(.--active){transform:translateY(-100%)}}
2
- /*$vite$:1*/
@@ -1,11 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
6
- <g>
7
- <path d="M9,19.5c-0.397,0-0.779-0.158-1.061-0.439l-5-5c-0.586-0.586-0.586-1.535,0-2.121s1.535-0.586,2.121,0l3.893,3.893
8
- l9.941-10.846c0.561-0.611,1.509-0.651,2.119-0.092c0.61,0.56,0.651,1.509,0.092,2.12l-11,12c-0.277,0.302-0.665,0.478-1.073,0.486
9
- C9.022,19.5,9.011,19.5,9,19.5z"/>
10
- </g>
11
- </svg>
@@ -1,12 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
6
- <g>
7
- <path d="M18,19.5c-0.384,0-0.768-0.146-1.061-0.439L12,14.121l-4.939,4.939c-0.586,0.586-1.535,0.586-2.121,0s-0.586-1.535,0-2.121
8
- L9.879,12L4.939,7.061c-0.586-0.585-0.586-1.536,0-2.121c0.586-0.586,1.535-0.586,2.121,0L12,9.879l4.939-4.939
9
- c0.586-0.586,1.535-0.586,2.121,0c0.586,0.585,0.586,1.536,0,2.121L14.121,12l4.939,4.939c0.586,0.586,0.586,1.535,0,2.121
10
- C18.768,19.354,18.384,19.5,18,19.5z"/>
11
- </g>
12
- </svg>
@@ -1,18 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
6
- <g>
7
- <path d="M12.351,23h-0.702c-4.697,0-7.055,0-8.626-1.132c-1.368-0.986-2.262-2.512-2.454-4.186
8
- c-0.22-1.925,0.932-3.981,3.227-8.079l0.352-0.628c2.386-4.26,3.583-6.398,5.383-7.211c1.57-0.708,3.369-0.708,4.939,0
9
- c1.8,0.813,2.997,2.95,5.383,7.209l0.352,0.629l-0.873,0.488l0.881-0.474c2.29,4.09,3.439,6.143,3.219,8.064
10
- c-0.191,1.675-1.086,3.201-2.453,4.187C19.405,23,17.048,23,12.351,23z M12,3.233c-0.562,0-1.123,0.118-1.646,0.354
11
- c-1.2,0.542-2.358,2.61-4.46,6.364L5.542,10.58c-2.02,3.606-3.132,5.592-2.985,6.875c0.128,1.116,0.724,2.133,1.636,2.79
12
- C5.24,21,7.516,21,11.649,21h0.702c4.132,0,6.41,0,7.457-0.755c0.912-0.657,1.509-1.674,1.637-2.791
13
- c0.146-1.28-0.963-3.262-2.978-6.86l-0.009-0.015l-0.351-0.627c-2.103-3.755-3.261-5.823-4.461-6.365
14
- C13.123,3.352,12.562,3.233,12,3.233z M12,18c-0.827,0-1.499-0.672-1.5-1.498c0-0.002,0-0.002,0-0.004
15
- C10.501,15.672,11.173,15,12,15c0.826,0,1.499,0.672,1.5,1.498c0,0.002,0,0.002,0,0.004C13.499,17.328,12.826,18,12,18z M12,14
16
- c-0.552,0-1-0.447-1-1V9c0-0.552,0.448-1,1-1c0.553,0,1,0.448,1,1v4C13,13.553,12.553,14,12,14z"/>
17
- </g>
18
- </svg>
@@ -1,27 +0,0 @@
1
- import * as template_u1 from '@esportsplus/template';
2
- import { type Attributes } from '@esportsplus/template';
3
- import './scss/index.scss';
4
- type A = Attributes & {
5
- scrollbar?: Attributes;
6
- 'scrollbar-container-content'?: Attributes;
7
- };
8
- declare const _default: {
9
- (): ReturnType<(this: {
10
- attributes?: A | undefined;
11
- content?: template_u1.Renderable<any>;
12
- }, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
13
- <T extends A>(attributes: T): ReturnType<(this: {
14
- attributes?: A | undefined;
15
- content?: template_u1.Renderable<any>;
16
- }, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
17
- <T extends template_u1.Renderable<any>>(content: T): ReturnType<(this: {
18
- attributes?: A | undefined;
19
- content?: template_u1.Renderable<any>;
20
- }, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
21
- (attributes: A, content: template_u1.Renderable<any>): ReturnType<(this: {
22
- attributes?: A | undefined;
23
- content?: template_u1.Renderable<any>;
24
- }, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
25
- };
26
- export default _default;
27
- export type { A as Attributes };
@@ -1,56 +0,0 @@
1
- import * as template_u1 from '@esportsplus/template';
2
- import * as reactivity_u0 from '@esportsplus/reactivity';
3
- import { omit } from '@esportsplus/utilities';
4
- import template from '../template/index.js';
5
- import './scss/index.scss';
6
- const template_1aruxaj2 = template_u1.template(`<div class='scrollbar-container' ><div class='scrollbar-container-content' ></div><div class='scrollbar' >`);
7
- class ReactiveObject_1aruxaj0 extends reactivity_u0.ReactiveObject {
8
- #height = this[reactivity_u0.SIGNAL](100);
9
- #translate = this[reactivity_u0.SIGNAL](0);
10
- constructor() {
11
- super(null);
12
- }
13
- get height() {
14
- return reactivity_u0.read(this.#height);
15
- }
16
- set height(_v0) {
17
- reactivity_u0.write(this.#height, _v0);
18
- }
19
- get translate() {
20
- return reactivity_u0.read(this.#translate);
21
- }
22
- set translate(_v1) {
23
- reactivity_u0.write(this.#translate, _v1);
24
- }
25
- }
26
- const OMIT = ['scrollbar', 'scrollbar-container-content'];
27
- let root = document.body, width;
28
- export default template.factory(function (attributes, content) {
29
- let state = new ReactiveObject_1aruxaj0();
30
- return (() => {
31
- let root_1aruxaj1 = template_1aruxaj2(), element_1aruxaj3 = root_1aruxaj1.firstChild, element_1aruxaj4 = element_1aruxaj3.firstElementChild, element_1aruxaj5 = element_1aruxaj4.nextElementSibling;
32
- template_u1.setProperties(element_1aruxaj3, this?.attributes && omit(this.attributes, OMIT));
33
- template_u1.setProperties(element_1aruxaj3, omit(attributes, OMIT));
34
- template_u1.setProperties(element_1aruxaj4, this?.attributes?.['scrollbar-container-content']);
35
- template_u1.setProperties(element_1aruxaj4, attributes['scrollbar-container-content']);
36
- template_u1.on(element_1aruxaj4, 'scroll', function () {
37
- if (width === undefined) {
38
- width = this.offsetWidth - this.clientWidth;
39
- if (width && width !== 17) {
40
- root.style.setProperty('--scrollbar-width', `${width}px`);
41
- }
42
- }
43
- state.height = (this.clientHeight / this.scrollHeight) * 100;
44
- state.translate = (this.scrollTop / this.clientHeight) * 100;
45
- });
46
- template_u1.slot(element_1aruxaj4, content, 1);
47
- template_u1.setProperties(element_1aruxaj5, this?.attributes?.scrollbar);
48
- template_u1.setProperties(element_1aruxaj5, attributes.scrollbar);
49
- template_u1.setList(element_1aruxaj5, 'class', () => state.height >= 100 && 'scrollbar--hidden');
50
- template_u1.setList(element_1aruxaj5, 'style', () => `
51
- --translate: translate3d(0, ${state.translate}%, 0);
52
- --height: ${state.height}%;
53
- `);
54
- return root_1aruxaj1;
55
- })();
56
- });
@@ -1,2 +0,0 @@
1
- @layer components {.scrollbar{--background:var(--color-black-300);--height:0;--translate:translate3d(0, 0, 0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration) ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;width:100%;height:auto;display:flex;position:relative;overflow:hidden}.scrollbar-container--full{height:100%}.scrollbar-container-content{height:100%;margin-right:calc(var(--scrollbar-width) * -1);padding-right:var(--scrollbar-width);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));flex-wrap:wrap;justify-content:flex-start;display:flex;overflow:hidden scroll}.scrollbar-container-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-container-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
2
- /*$vite$:1*/
@@ -1,20 +0,0 @@
1
- import './scss/index.scss';
2
- declare const _default: {
3
- (): ReturnType<(this: {
4
- attributes?: import("../scrollbar/index.js").Attributes | undefined;
5
- content?: import("@esportsplus/template").Renderable<any>;
6
- }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
7
- <T extends import("../scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
8
- attributes?: import("../scrollbar/index.js").Attributes | undefined;
9
- content?: import("@esportsplus/template").Renderable<any>;
10
- }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
11
- <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
12
- attributes?: import("../scrollbar/index.js").Attributes | undefined;
13
- content?: import("@esportsplus/template").Renderable<any>;
14
- }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
15
- (attributes: import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
16
- attributes?: import("../scrollbar/index.js").Attributes | undefined;
17
- content?: import("@esportsplus/template").Renderable<any>;
18
- }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
19
- };
20
- export default _default;
@@ -1,9 +0,0 @@
1
- import { onclick } from '../root/index.js';
2
- import scrollbar from '../scrollbar/index.js';
3
- import './scss/index.scss';
4
- export default scrollbar.bind({
5
- attributes: {
6
- class: 'site',
7
- onclick
8
- }
9
- });
@@ -1,2 +0,0 @@
1
- @layer components {.site{z-index:0}}
2
- /*$vite$:1*/
@@ -1,14 +0,0 @@
1
- import { Attributes, Renderable } from '@esportsplus/template';
2
- declare const factory: <A extends Attributes, C = Renderable<any>, Context = {
3
- attributes?: A;
4
- content?: C;
5
- }>(template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<any>) => {
6
- (): ReturnType<typeof template>;
7
- <T extends A>(attributes: T): ReturnType<typeof template>;
8
- <T extends C>(content: T): ReturnType<typeof template>;
9
- (attributes: A, content: C): ReturnType<typeof template>;
10
- };
11
- declare const _default: {
12
- factory: typeof factory;
13
- };
14
- export default _default;
@@ -1,21 +0,0 @@
1
- const factory = (template) => {
2
- function factory(one, two) {
3
- let attributes = {}, content;
4
- if (two === undefined) {
5
- if (typeof one === 'object') {
6
- attributes = one;
7
- content = null;
8
- }
9
- else {
10
- content = one;
11
- }
12
- }
13
- else {
14
- attributes = one;
15
- content = two;
16
- }
17
- return template.call(this, attributes, content);
18
- }
19
- return factory;
20
- };
21
- export default { factory };
@@ -1,2 +0,0 @@
1
- @layer css-utilities {.--scroller{--gap-vertical:0px;--margin-vertical:0px;margin-bottom:calc(var(--scrollbar-width) * -1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}}
2
- /*$vite$:1*/
@@ -1,11 +0,0 @@
1
- declare const _default: {
2
- content: DocumentFragment | Text;
3
- deactivate: () => void;
4
- error: {
5
- (messages: import("@esportsplus/template").Renderable<any>, seconds?: number): void;
6
- response: (response: import("@esportsplus/action").Response<any>) => void;
7
- };
8
- info: (messages: import("@esportsplus/template").Renderable<any>, seconds?: number) => void;
9
- success: (messages: import("@esportsplus/template").Renderable<any>, seconds?: number) => void;
10
- };
11
- export default _default;