@medyll/idae-slotui-svelte 0.40.0 → 0.42.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 (10) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +1 -1
  3. package/dist/slotui-css/marquee.css +11 -11
  4. package/dist/slotui-css/marquee.min.css +11 -11
  5. package/dist/slotui-css/slotui-css.css +25 -25
  6. package/dist/slotui-css/slotui-min-css.css +25 -25
  7. package/dist/ui/marquee/Marquee.demo.svelte +9 -13
  8. package/dist/ui/marquee/Marquee.svelte +13 -13
  9. package/dist/ui/marquee/marquee.scss +17 -11
  10. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export * from './componentCite.js';
2
- export * from './csss/csss.js';
3
2
  export * as windowMinCss from './slotui-css/window.min.css';
4
3
  export * as windowCss from './slotui-css/window.css';
5
4
  export * as treeMinCss from './slotui-css/tree.min.css';
@@ -109,6 +108,7 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
109
108
  export * as autoCompleteCss from './slotui-css/auto-complete.css';
110
109
  export * as alertMinCss from './slotui-css/alert.min.css';
111
110
  export * as alertCss from './slotui-css/alert.css';
111
+ export * from './csss/csss.js';
112
112
  export * from './utils/uses/toggler.js';
113
113
  export * from './utils/uses/positioner.js';
114
114
  export * from './utils/uses/navigation.js';
package/dist/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  // auto exports of entry components
2
2
  export * from './componentCite.js';
3
- export * from './csss/csss.js';
4
3
  export * as windowMinCss from './slotui-css/window.min.css';
5
4
  export * as windowCss from './slotui-css/window.css';
6
5
  export * as treeMinCss from './slotui-css/tree.min.css';
@@ -110,6 +109,7 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
110
109
  export * as autoCompleteCss from './slotui-css/auto-complete.css';
111
110
  export * as alertMinCss from './slotui-css/alert.min.css';
112
111
  export * as alertCss from './slotui-css/alert.css';
112
+ export * from './csss/csss.js';
113
113
  export * from './utils/uses/toggler.js';
114
114
  export * from './utils/uses/positioner.js';
115
115
  export * from './utils/uses/navigation.js';
package/dist/slotui-css/marquee.css CHANGED
@@ -5,47 +5,47 @@
5
5
  scroll-snap-type: x mandatory;
6
6
  width: 300px;
7
7
  }
8
- .marquee-container {
8
+ .marquee :global(-container) {
9
9
  display: flex;
10
10
  align-items: center;
11
11
  --preset-gutter: var(--sld-gutter-default);
12
12
  }
13
- .marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
13
+ .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
14
14
  padding: var(--sld-gutter-tiny);
15
15
  gap: var(--sld-gutter-tiny);
16
16
  --preset-gutter: var(--sld-gutter-tiny);
17
17
  }
18
- .marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
18
+ .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
19
19
  padding: var(--sld-gutter-mini);
20
20
  gap: var(--sld-gutter-mini);
21
21
  --preset-gutter: var(--sld-gutter-mini);
22
22
  }
23
- .marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
23
+ .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
24
24
  padding: var(--sld-gutter-small);
25
25
  gap: var(--sld-gutter-small);
26
26
  --preset-gutter: var(--sld-gutter-small);
27
27
  }
28
- .marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
28
+ .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
29
29
  padding: var(--sld-gutter-med);
30
30
  gap: var(--sld-gutter-med);
31
31
  --preset-gutter: var(--sld-gutter-med);
32
32
  }
33
- .marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
33
+ .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
34
34
  padding: var(--sld-gutter-kind);
35
35
  gap: var(--sld-gutter-kind);
36
36
  --preset-gutter: var(--sld-gutter-kind);
37
37
  }
38
- .marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
38
+ .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
39
39
  padding: var(--sld-gutter-default);
40
40
  gap: var(--sld-gutter-default);
41
41
  --preset-gutter: var(--sld-gutter-default);
42
42
  }
43
- .marquee :global(.marquee-children) {
44
- display: inline-flex;
43
+ .marquee-children {
44
+ display: flex;
45
+ border: 1px solid red;
45
46
  }
46
- .marquee :global(.marquee-children) > :global(*) {
47
+ .marquee-children > * {
47
48
  border: 1px solid red;
48
- width: 90px;
49
49
  height: 300px;
50
50
  }
51
51
  .marquee-controls-prev {
package/dist/slotui-css/marquee.min.css CHANGED
@@ -5,47 +5,47 @@
5
5
  scroll-snap-type: x mandatory;
6
6
  width: 300px;
7
7
  }
8
- .marquee-container {
8
+ .marquee :global(-container) {
9
9
  display: flex;
10
10
  align-items: center;
11
11
  --preset-gutter: var(--sld-gutter-default);
12
12
  }
13
- .marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
13
+ .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
14
14
  padding: var(--sld-gutter-tiny);
15
15
  gap: var(--sld-gutter-tiny);
16
16
  --preset-gutter: var(--sld-gutter-tiny);
17
17
  }
18
- .marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
18
+ .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
19
19
  padding: var(--sld-gutter-mini);
20
20
  gap: var(--sld-gutter-mini);
21
21
  --preset-gutter: var(--sld-gutter-mini);
22
22
  }
23
- .marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
23
+ .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
24
24
  padding: var(--sld-gutter-small);
25
25
  gap: var(--sld-gutter-small);
26
26
  --preset-gutter: var(--sld-gutter-small);
27
27
  }
28
- .marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
28
+ .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
29
29
  padding: var(--sld-gutter-med);
30
30
  gap: var(--sld-gutter-med);
31
31
  --preset-gutter: var(--sld-gutter-med);
32
32
  }
33
- .marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
33
+ .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
34
34
  padding: var(--sld-gutter-kind);
35
35
  gap: var(--sld-gutter-kind);
36
36
  --preset-gutter: var(--sld-gutter-kind);
37
37
  }
38
- .marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
38
+ .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
39
39
  padding: var(--sld-gutter-default);
40
40
  gap: var(--sld-gutter-default);
41
41
  --preset-gutter: var(--sld-gutter-default);
42
42
  }
43
- .marquee :global(.marquee-children) {
44
- display: inline-flex;
43
+ .marquee-children {
44
+ display: flex;
45
+ border: 1px solid red;
45
46
  }
46
- .marquee :global(.marquee-children) > :global(*) {
47
+ .marquee-children > * {
47
48
  border: 1px solid red;
48
- width: 90px;
49
49
  height: 300px;
50
50
  }
51
51
  .marquee-controls-prev {
package/dist/slotui-css/slotui-css.css CHANGED
@@ -1270,47 +1270,47 @@ li.menuItem .menu-list-item-action {
1270
1270
  scroll-snap-type: x mandatory;
1271
1271
  width: 300px;
1272
1272
  }
1273
- .marquee-container {
1273
+ .marquee :global(-container) {
1274
1274
  display: flex;
1275
1275
  align-items: center;
1276
1276
  --preset-gutter: var(--sld-gutter-default);
1277
1277
  }
1278
- .marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
1278
+ .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
1279
1279
  padding: var(--sld-gutter-tiny);
1280
1280
  gap: var(--sld-gutter-tiny);
1281
1281
  --preset-gutter: var(--sld-gutter-tiny);
1282
1282
  }
1283
- .marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
1283
+ .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
1284
1284
  padding: var(--sld-gutter-mini);
1285
1285
  gap: var(--sld-gutter-mini);
1286
1286
  --preset-gutter: var(--sld-gutter-mini);
1287
1287
  }
1288
- .marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
1288
+ .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
1289
1289
  padding: var(--sld-gutter-small);
1290
1290
  gap: var(--sld-gutter-small);
1291
1291
  --preset-gutter: var(--sld-gutter-small);
1292
1292
  }
1293
- .marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
1293
+ .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
1294
1294
  padding: var(--sld-gutter-med);
1295
1295
  gap: var(--sld-gutter-med);
1296
1296
  --preset-gutter: var(--sld-gutter-med);
1297
1297
  }
1298
- .marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
1298
+ .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
1299
1299
  padding: var(--sld-gutter-kind);
1300
1300
  gap: var(--sld-gutter-kind);
1301
1301
  --preset-gutter: var(--sld-gutter-kind);
1302
1302
  }
1303
- .marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
1303
+ .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
1304
1304
  padding: var(--sld-gutter-default);
1305
1305
  gap: var(--sld-gutter-default);
1306
1306
  --preset-gutter: var(--sld-gutter-default);
1307
1307
  }
1308
- .marquee :global(.marquee-children) {
1309
- display: inline-flex;
1308
+ .marquee-children {
1309
+ display: flex;
1310
+ border: 1px solid red;
1310
1311
  }
1311
- .marquee :global(.marquee-children) > :global(*) {
1312
+ .marquee-children > * {
1312
1313
  border: 1px solid red;
1313
- width: 90px;
1314
1314
  height: 300px;
1315
1315
  }
1316
1316
  .marquee-controls-prev {
@@ -3381,20 +3381,6 @@ label {
3381
3381
  transform: scale(1.1);
3382
3382
  }
3383
3383
 
3384
- /** auto-complete.scss ----------------*/
3385
- :root {
3386
- --auto-complete-pad: var(--sld-pad-medium);
3387
- --auto-complete-gap: var(--sld-gap-small);
3388
- }
3389
-
3390
- .auto-complete-no-results, .auto-complete-boot {
3391
- padding: var(--auto-complete-pad);
3392
- gap: var(--auto-complete-gap);
3393
- display: flex;
3394
- flex-direction: row;
3395
- align-items: center;
3396
- }
3397
-
3398
3384
  /** button.scss ----------------*/
3399
3385
  :global(:root) {
3400
3386
  --sld-button-font-size: inherit;
@@ -4595,6 +4581,20 @@ label {
4595
4581
  flex-shrink: 1;
4596
4582
  }
4597
4583
 
4584
+ /** auto-complete.scss ----------------*/
4585
+ :root {
4586
+ --auto-complete-pad: var(--sld-pad-medium);
4587
+ --auto-complete-gap: var(--sld-gap-small);
4588
+ }
4589
+
4590
+ .auto-complete-no-results, .auto-complete-boot {
4591
+ padding: var(--auto-complete-pad);
4592
+ gap: var(--auto-complete-gap);
4593
+ display: flex;
4594
+ flex-direction: row;
4595
+ align-items: center;
4596
+ }
4597
+
4598
4598
  /** title-bar.scss ----------------*/
4599
4599
  :root {
4600
4600
  --title-bar-gap: var(--sld-gap-med);
package/dist/slotui-css/slotui-min-css.css CHANGED
@@ -1270,47 +1270,47 @@ li.menuItem .menu-list-item-action {
1270
1270
  scroll-snap-type: x mandatory;
1271
1271
  width: 300px;
1272
1272
  }
1273
- .marquee-container {
1273
+ .marquee :global(-container) {
1274
1274
  display: flex;
1275
1275
  align-items: center;
1276
1276
  --preset-gutter: var(--sld-gutter-default);
1277
1277
  }
1278
- .marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
1278
+ .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
1279
1279
  padding: var(--sld-gutter-tiny);
1280
1280
  gap: var(--sld-gutter-tiny);
1281
1281
  --preset-gutter: var(--sld-gutter-tiny);
1282
1282
  }
1283
- .marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
1283
+ .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
1284
1284
  padding: var(--sld-gutter-mini);
1285
1285
  gap: var(--sld-gutter-mini);
1286
1286
  --preset-gutter: var(--sld-gutter-mini);
1287
1287
  }
1288
- .marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
1288
+ .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
1289
1289
  padding: var(--sld-gutter-small);
1290
1290
  gap: var(--sld-gutter-small);
1291
1291
  --preset-gutter: var(--sld-gutter-small);
1292
1292
  }
1293
- .marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
1293
+ .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
1294
1294
  padding: var(--sld-gutter-med);
1295
1295
  gap: var(--sld-gutter-med);
1296
1296
  --preset-gutter: var(--sld-gutter-med);
1297
1297
  }
1298
- .marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
1298
+ .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
1299
1299
  padding: var(--sld-gutter-kind);
1300
1300
  gap: var(--sld-gutter-kind);
1301
1301
  --preset-gutter: var(--sld-gutter-kind);
1302
1302
  }
1303
- .marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
1303
+ .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
1304
1304
  padding: var(--sld-gutter-default);
1305
1305
  gap: var(--sld-gutter-default);
1306
1306
  --preset-gutter: var(--sld-gutter-default);
1307
1307
  }
1308
- .marquee :global(.marquee-children) {
1309
- display: inline-flex;
1308
+ .marquee-children {
1309
+ display: flex;
1310
+ border: 1px solid red;
1310
1311
  }
1311
- .marquee :global(.marquee-children) > :global(*) {
1312
+ .marquee-children > * {
1312
1313
  border: 1px solid red;
1313
- width: 90px;
1314
1314
  height: 300px;
1315
1315
  }
1316
1316
  .marquee-controls-prev {
@@ -3381,20 +3381,6 @@ label {
3381
3381
  transform: scale(1.1);
3382
3382
  }
3383
3383
 
3384
- /** auto-complete.scss ----------------*/
3385
- :root {
3386
- --auto-complete-pad: var(--sld-pad-medium);
3387
- --auto-complete-gap: var(--sld-gap-small);
3388
- }
3389
-
3390
- .auto-complete-no-results, .auto-complete-boot {
3391
- padding: var(--auto-complete-pad);
3392
- gap: var(--auto-complete-gap);
3393
- display: flex;
3394
- flex-direction: row;
3395
- align-items: center;
3396
- }
3397
-
3398
3384
  /** button.scss ----------------*/
3399
3385
  :global(:root) {
3400
3386
  --sld-button-font-size: inherit;
@@ -4595,6 +4581,20 @@ label {
4595
4581
  flex-shrink: 1;
4596
4582
  }
4597
4583
 
4584
+ /** auto-complete.scss ----------------*/
4585
+ :root {
4586
+ --auto-complete-pad: var(--sld-pad-medium);
4587
+ --auto-complete-gap: var(--sld-gap-small);
4588
+ }
4589
+
4590
+ .auto-complete-no-results, .auto-complete-boot {
4591
+ padding: var(--auto-complete-pad);
4592
+ gap: var(--auto-complete-gap);
4593
+ display: flex;
4594
+ flex-direction: row;
4595
+ align-items: center;
4596
+ }
4597
+
4598
4598
  /** title-bar.scss ----------------*/
4599
4599
  :root {
4600
4600
  --title-bar-gap: var(--sld-gap-med);
package/dist/ui/marquee/Marquee.demo.svelte CHANGED
@@ -5,6 +5,8 @@
5
5
 
6
6
  import { parameters, componentArgs } from './types.js';
7
7
  import Marquee from './Marquee.svelte';
8
+ import Looper from '../../utils/looper/Looper.svelte';
9
+ import { dataOp } from '@medyll/idae-engine';
8
10
 
9
11
  let code = `
10
12
  <Marquee >
@@ -13,23 +15,17 @@
13
15
  <div></div>
14
16
  </Marquee>`;
15
17
  </script>
16
- cdds
18
+
17
19
  <ComponentDemo component="Marquee">
18
20
  <DemoPage component="Rating" {code}>
19
21
  <Demoer {parameters} {componentArgs}>
20
22
  {#snippet children({ activeParams })}
21
- <Marquee {...activeParams}>
22
- <div>thumb</div>
23
- <div>thumb no !!!</div>
24
- <div>thumb</div>
25
- <div>thumb</div>
26
- <div>thumb</div>
27
- <div>thumb</div>
28
- <div>thumb</div>
29
- <div>thumb</div>
30
- <div>thumb</div>
31
- <div>thumb</div>
32
- <div>thumb</div>
23
+ <Marquee style="width:450px;height:450px;gap!2rem;border:1px solid black;display:flex;" {...activeParams}>
24
+ <Looper style="display:flex;" data={[...Array(90)].map((_,idx)=>({idx}))} >
25
+ {#snippet children({ item ,idx})}
26
+ <div style="min-width:250px;height:250px;border:1px solid green;" >cell {item?.idx} </div>
27
+ {/snippet}
28
+ </Looper>
33
29
  </Marquee>
34
30
  {/snippet}
35
31
  </Demoer>
package/dist/ui/marquee/Marquee.svelte CHANGED
@@ -69,13 +69,13 @@
69
69
  }
70
70
  </script>
71
71
 
72
- <div class="marquee-container">
72
+ <div class="marquee-container" {...rest}>
73
73
  {#if showControls}
74
74
  <div class="marquee-controls-prev">
75
75
  <button onclick={scrollPrev}>Précédent</button>
76
76
  </div>
77
77
  {/if}
78
- <div bind:this={container} class="marquee" {...rest}>
78
+ <div bind:this={container} class="marquee">
79
79
  <Content {gutter} tag="div" class="marquee-children" style="scroll-snap-type: x mandatory;">
80
80
  {#if children}{@render children()}{:else}
81
81
  <div>enter content or data</div>
@@ -101,47 +101,47 @@
101
101
  scroll-snap-type: x mandatory;
102
102
  width: 300px;
103
103
  }
104
- .marquee-container {
104
+ .marquee :global(-container) {
105
105
  display: flex;
106
106
  align-items: center;
107
107
  --preset-gutter: var(--sld-gutter-default);
108
108
  }
109
- .marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
109
+ .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
110
110
  padding: var(--sld-gutter-tiny);
111
111
  gap: var(--sld-gutter-tiny);
112
112
  --preset-gutter: var(--sld-gutter-tiny);
113
113
  }
114
- .marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
114
+ .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
115
115
  padding: var(--sld-gutter-mini);
116
116
  gap: var(--sld-gutter-mini);
117
117
  --preset-gutter: var(--sld-gutter-mini);
118
118
  }
119
- .marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
119
+ .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
120
120
  padding: var(--sld-gutter-small);
121
121
  gap: var(--sld-gutter-small);
122
122
  --preset-gutter: var(--sld-gutter-small);
123
123
  }
124
- .marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
124
+ .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
125
125
  padding: var(--sld-gutter-med);
126
126
  gap: var(--sld-gutter-med);
127
127
  --preset-gutter: var(--sld-gutter-med);
128
128
  }
129
- .marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
129
+ .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
130
130
  padding: var(--sld-gutter-kind);
131
131
  gap: var(--sld-gutter-kind);
132
132
  --preset-gutter: var(--sld-gutter-kind);
133
133
  }
134
- .marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
134
+ .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
135
135
  padding: var(--sld-gutter-default);
136
136
  gap: var(--sld-gutter-default);
137
137
  --preset-gutter: var(--sld-gutter-default);
138
138
  }
139
- .marquee :global(.marquee-children) {
140
- display: inline-flex;
139
+ .marquee-children {
140
+ display: flex;
141
+ border: 1px solid red;
141
142
  }
142
- .marquee :global(.marquee-children) > :global(*) {
143
+ .marquee-children > * {
143
144
  border: 1px solid red;
144
- width: 90px;
145
145
  height: 300px;
146
146
  }
147
147
  .marquee-controls-prev {
package/dist/ui/marquee/marquee.scss CHANGED
@@ -7,19 +7,25 @@
7
7
  scroll-snap-type: x mandatory;
8
8
 
9
9
  width: 300px;
10
- &-container {
11
- display: flex;
12
- align-items: center;
13
- @include ui-gutter-presets;
14
- }
15
- :global(.marquee-children) {
16
- display: inline-flex;
17
- & > :global(*) {
18
- border: 1px solid red;
19
- width: 90px;
20
- height: 300px;
10
+ & {
11
+ :global(-container) {
12
+ display: flex;
13
+ align-items: center;
14
+ @include ui-gutter-presets;
15
+ }
16
+
17
+ & {
18
+ &-children {
19
+ display: flex;
20
+ border: 1px solid red;
21
+ & > * {
22
+ border: 1px solid red;
23
+ height: 300px;
24
+ }
25
+ }
21
26
  }
22
27
  }
28
+
23
29
  &-controls {
24
30
  &-prev {
25
31
  display: contents;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medyll/idae-slotui-svelte",
3
- "version": "0.40.0",
3
+ "version": "0.42.0",
4
4
  "scope": "@medyll",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
@@ -87,8 +87,8 @@
87
87
  "dependencies": {
88
88
  "@iconify/svelte": "^4.0.2",
89
89
  "@medyll/cssfabric": "^0.4.2",
90
- "@medyll/idae-be": "^0.39.0",
91
- "@medyll/idae-engine": "^1.37.0",
90
+ "@medyll/idae-be": "^0.41.0",
91
+ "@medyll/idae-engine": "^1.39.0",
92
92
  "d3": "^7.9.0",
93
93
  "lerna": "^8.1.8",
94
94
  "npm-check-updates": "^17.0.2",