@medyll/idae-slotui-svelte 0.63.0 → 0.65.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 (62) hide show
  1. package/dist/base/cartouche/Cartouche.svelte +13 -9
  2. package/dist/base/cartouche/cartouche.scss +23 -23
  3. package/dist/base/titleBar/TitleBar.svelte +3 -1
  4. package/dist/base/titleBar/title-bar.scss +3 -1
  5. package/dist/controls/button/Button.svelte +466 -516
  6. package/dist/controls/button/ButtonAction.svelte +462 -512
  7. package/dist/controls/button/button.scss +20 -38
  8. package/dist/controls/checkbox/Checkbox.svelte +16 -14
  9. package/dist/controls/checkbox/checkbox.scss +14 -11
  10. package/dist/controls/slider/Slider.svelte +9 -9
  11. package/dist/controls/slider/slider.scss +9 -7
  12. package/dist/controls/textfield/TextField.svelte +2 -2
  13. package/dist/csss/csss.scss +3 -1
  14. package/dist/data/dataList/DataList.svelte +2 -2
  15. package/dist/data/dataList/datalist.scss +1 -1
  16. package/dist/data/finder/Finder.svelte +2 -2
  17. package/dist/index.d.ts +2 -3
  18. package/dist/index.js +2 -3
  19. package/dist/navigation/drawer/Drawer.svelte +10 -8
  20. package/dist/navigation/drawer/drawer.scss +17 -13
  21. package/dist/slotui-css/button.css +462 -512
  22. package/dist/slotui-css/button.min.css +462 -512
  23. package/dist/slotui-css/cartouche.css +13 -9
  24. package/dist/slotui-css/cartouche.min.css +13 -9
  25. package/dist/slotui-css/checkbox.css +16 -14
  26. package/dist/slotui-css/checkbox.min.css +16 -14
  27. package/dist/slotui-css/csss.css +5 -5
  28. package/dist/slotui-css/csss.min.css +5 -5
  29. package/dist/slotui-css/datalist.css +2 -2
  30. package/dist/slotui-css/datalist.min.css +2 -2
  31. package/dist/slotui-css/drawer.css +10 -8
  32. package/dist/slotui-css/drawer.min.css +10 -8
  33. package/dist/slotui-css/finder.css +2 -2
  34. package/dist/slotui-css/finder.min.css +2 -2
  35. package/dist/slotui-css/marquee.css +6 -6
  36. package/dist/slotui-css/marquee.min.css +6 -6
  37. package/dist/slotui-css/menu-list.css +60 -61
  38. package/dist/slotui-css/menu-list.min.css +60 -61
  39. package/dist/slotui-css/menu.css +4 -5
  40. package/dist/slotui-css/menu.min.css +4 -5
  41. package/dist/slotui-css/slider.css +9 -9
  42. package/dist/slotui-css/slider.min.css +9 -9
  43. package/dist/slotui-css/slotui-css.css +628 -671
  44. package/dist/slotui-css/slotui-min-css.css +628 -671
  45. package/dist/slotui-css/textfield.css +2 -2
  46. package/dist/slotui-css/textfield.min.css +2 -2
  47. package/dist/slotui-css/title-bar.css +3 -1
  48. package/dist/slotui-css/title-bar.min.css +3 -1
  49. package/dist/slotui-css/tree.css +4 -5
  50. package/dist/slotui-css/tree.min.css +4 -5
  51. package/dist/styles/slotui-mixins.scss +21 -22
  52. package/dist/ui/marquee/Marquee.svelte +6 -6
  53. package/dist/ui/menu/MenuTitle.svelte +4 -5
  54. package/dist/ui/menu/menu.scss +1 -0
  55. package/dist/ui/menuList/MenuList.svelte +63 -64
  56. package/dist/ui/menuList/MenuListItem.svelte +65 -67
  57. package/dist/ui/menuList/MenuListTitle.svelte +61 -62
  58. package/dist/ui/menuList/menu-list.scss +21 -21
  59. package/dist/ui/tree/Tree.svelte +5 -6
  60. package/dist/utils/content/Content.svelte +8 -8
  61. package/package.json +3 -3
  62. package/dist/slotui-css/slotui-combined.css +0 -5075
package/dist/slotui-css/cartouche.css CHANGED
@@ -27,15 +27,6 @@
27
27
  border-bottom-left-radius: var(--cartouche-radius);
28
28
  border-bottom-right-radius: var(--cartouche-radius);
29
29
  }
30
- .cartouche .control {
31
- transition: all 0.25s ease;
32
- display: flex;
33
- align-items: center;
34
- gap: var(--cartouche-control-gap);
35
- background-color: var(--cartouche-background-color);
36
- padding: auto 0.25rem;
37
- cursor: pointer;
38
- }
39
30
  .cartouche .control {
40
31
  min-height: var(--preset-tall-small);
41
32
  height: var(--preset-tall-small);
@@ -64,6 +55,17 @@
64
55
  .cartouche .control[tall=default], .cartouche .control.tall-default {
65
56
  min-height: var(--sld-tall-default) !important;
66
57
  }
58
+ .cartouche .control {
59
+ transition: all 0.25s ease;
60
+ }
61
+ .cartouche .control {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: var(--cartouche-control-gap);
65
+ background-color: var(--cartouche-background-color);
66
+ padding: auto 0.25rem;
67
+ cursor: pointer;
68
+ }
67
69
  .cartouche .control:hover {
68
70
  background-color: var(--cartouche-background-color-hover);
69
71
  }
@@ -87,6 +89,8 @@
87
89
  }
88
90
  .cartouche .content {
89
91
  transition: all 0.25s ease;
92
+ }
93
+ .cartouche .content {
90
94
  overflow: hidden;
91
95
  background-color: var(--cartouche-background-color);
92
96
  content-visibility: auto;
package/dist/slotui-css/cartouche.min.css CHANGED
@@ -27,15 +27,6 @@
27
27
  border-bottom-left-radius: var(--cartouche-radius);
28
28
  border-bottom-right-radius: var(--cartouche-radius);
29
29
  }
30
- .cartouche .control {
31
- transition: all 0.25s ease;
32
- display: flex;
33
- align-items: center;
34
- gap: var(--cartouche-control-gap);
35
- background-color: var(--cartouche-background-color);
36
- padding: auto 0.25rem;
37
- cursor: pointer;
38
- }
39
30
  .cartouche .control {
40
31
  min-height: var(--preset-tall-small);
41
32
  height: var(--preset-tall-small);
@@ -64,6 +55,17 @@
64
55
  .cartouche .control[tall=default], .cartouche .control.tall-default {
65
56
  min-height: var(--sld-tall-default) !important;
66
57
  }
58
+ .cartouche .control {
59
+ transition: all 0.25s ease;
60
+ }
61
+ .cartouche .control {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: var(--cartouche-control-gap);
65
+ background-color: var(--cartouche-background-color);
66
+ padding: auto 0.25rem;
67
+ cursor: pointer;
68
+ }
67
69
  .cartouche .control:hover {
68
70
  background-color: var(--cartouche-background-color-hover);
69
71
  }
@@ -87,6 +89,8 @@
87
89
  }
88
90
  .cartouche .content {
89
91
  transition: all 0.25s ease;
92
+ }
93
+ .cartouche .content {
90
94
  overflow: hidden;
91
95
  background-color: var(--cartouche-background-color);
92
96
  content-visibility: auto;
package/dist/slotui-css/checkbox.css CHANGED
@@ -12,20 +12,6 @@
12
12
  --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
13
  }
14
14
 
15
- .checkbox {
16
- transition: all 0.25s ease;
17
- appearance: none;
18
- outline: none;
19
- border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
20
- border-radius: var(--sld-checkbox-radius);
21
- background-clip: padding-box;
22
- background-color: var(--sld-checkbox-background);
23
- width: 1.7rem;
24
- height: 1.7rem;
25
- aspect-ratio: 1/1;
26
- padding: 0;
27
- margin: 0;
28
- }
29
15
  .checkbox:hover {
30
16
  border-color: var(--sld-hover-border-color);
31
17
  background-color: var(--sld-background-disabled);
@@ -58,6 +44,22 @@
58
44
  .checkbox[tall=default], .checkbox.tall-default {
59
45
  min-height: var(--sld-tall-default) !important;
60
46
  }
47
+ .checkbox {
48
+ transition: all 0.25s ease;
49
+ }
50
+ .checkbox {
51
+ appearance: none;
52
+ outline: none;
53
+ border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
54
+ border-radius: var(--sld-checkbox-radius);
55
+ background-clip: padding-box;
56
+ background-color: var(--sld-checkbox-background);
57
+ width: 1.7rem;
58
+ height: 1.7rem;
59
+ aspect-ratio: 1/1;
60
+ padding: 0;
61
+ margin: 0;
62
+ }
61
63
  .checkbox:focus-visible {
62
64
  box-shadow: var(--sld-checkbox-shadow);
63
65
  }
package/dist/slotui-css/checkbox.min.css CHANGED
@@ -12,20 +12,6 @@
12
12
  --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
13
  }
14
14
 
15
- .checkbox {
16
- transition: all 0.25s ease;
17
- appearance: none;
18
- outline: none;
19
- border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
20
- border-radius: var(--sld-checkbox-radius);
21
- background-clip: padding-box;
22
- background-color: var(--sld-checkbox-background);
23
- width: 1.7rem;
24
- height: 1.7rem;
25
- aspect-ratio: 1/1;
26
- padding: 0;
27
- margin: 0;
28
- }
29
15
  .checkbox:hover {
30
16
  border-color: var(--sld-hover-border-color);
31
17
  background-color: var(--sld-background-disabled);
@@ -58,6 +44,22 @@
58
44
  .checkbox[tall=default], .checkbox.tall-default {
59
45
  min-height: var(--sld-tall-default) !important;
60
46
  }
47
+ .checkbox {
48
+ transition: all 0.25s ease;
49
+ }
50
+ .checkbox {
51
+ appearance: none;
52
+ outline: none;
53
+ border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
54
+ border-radius: var(--sld-checkbox-radius);
55
+ background-clip: padding-box;
56
+ background-color: var(--sld-checkbox-background);
57
+ width: 1.7rem;
58
+ height: 1.7rem;
59
+ aspect-ratio: 1/1;
60
+ padding: 0;
61
+ margin: 0;
62
+ }
61
63
  .checkbox:focus-visible {
62
64
  box-shadow: var(--sld-checkbox-shadow);
63
65
  }
package/dist/slotui-css/csss.css CHANGED
@@ -1,10 +1,10 @@
1
- :global * {
2
- border: 1px solid red;
3
- }
4
- :global *[variant*=square], :global *[square=true], :global *.square {
1
+ :global *[variant*=square] {
5
2
  aspect-ratio: 1/1 !important;
6
3
  height: auto;
7
4
  }
8
- :global *[variant*=rounded], :global *[rounded=true], :global *.rounded {
5
+ :global *[variant*=rounded] {
9
6
  border-radius: 50%;
7
+ }
8
+ :global * {
9
+ border: 1px solid red;
10
10
  }
package/dist/slotui-css/csss.min.css CHANGED
@@ -1,10 +1,10 @@
1
- :global * {
2
- border: 1px solid red;
3
- }
4
- :global *[variant*=square], :global *[square=true], :global *.square {
1
+ :global *[variant*=square] {
5
2
  aspect-ratio: 1/1 !important;
6
3
  height: auto;
7
4
  }
8
- :global *[variant*=rounded], :global *[rounded=true], :global *.rounded {
5
+ :global *[variant*=rounded] {
9
6
  border-radius: 50%;
7
+ }
8
+ :global * {
9
+ border: 1px solid red;
10
10
  }
package/dist/slotui-css/datalist.css CHANGED
@@ -114,10 +114,10 @@
114
114
  :global(.dataListRow):hover {
115
115
  background-color: var(--datalist-row-background-color-hover);
116
116
  }
117
- :global(.dataListRow)[data-selected=true] {
117
+ :global(.dataListRow)[aria-selected=true] {
118
118
  background-color: var(--datalist-cell-background-color-selected);
119
119
  }
120
- :global(.dataListRow)[data-selected=true] .dataListCell {
120
+ :global(.dataListRow)[aria-selected=true] .dataListCell {
121
121
  color: var(--datalist-cell-color-selected);
122
122
  }
123
123
  :global(.dataListRow) .dataListCell {
package/dist/slotui-css/datalist.min.css CHANGED
@@ -114,10 +114,10 @@
114
114
  :global(.dataListRow):hover {
115
115
  background-color: var(--datalist-row-background-color-hover);
116
116
  }
117
- :global(.dataListRow)[data-selected=true] {
117
+ :global(.dataListRow)[aria-selected=true] {
118
118
  background-color: var(--datalist-cell-background-color-selected);
119
119
  }
120
- :global(.dataListRow)[data-selected=true] .dataListCell {
120
+ :global(.dataListRow)[aria-selected=true] .dataListCell {
121
121
  color: var(--datalist-cell-color-selected);
122
122
  }
123
123
  :global(.dataListRow) .dataListCell {
package/dist/slotui-css/drawer.css CHANGED
@@ -10,6 +10,11 @@
10
10
  --drawer-content-flex: 1;
11
11
  }
12
12
 
13
+ .drawer {
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: flex-start;
17
+ }
13
18
  .drawer {
14
19
  color: var(--drawer-color);
15
20
  background-color: var(--drawer-background-color);
@@ -19,9 +24,6 @@
19
24
  box-shadow: var(--drawer-box-shadow);
20
25
  border-left: 1px solid var(--drawer-border-left);
21
26
  overflow: visible;
22
- display: flex;
23
- flex-direction: column;
24
- align-items: flex-start;
25
27
  height: 100%;
26
28
  transition: all 0.1s;
27
29
  }
@@ -34,11 +36,6 @@
34
36
  position: absolute;
35
37
  z-index: 8600;
36
38
  }
37
- .drawer header, .drawer-header {
38
- min-height: var(--drawer-header-min-height);
39
- display: flex;
40
- width: 100%;
41
- }
42
39
  .drawer header, .drawer-header {
43
40
  min-height: var(--preset-tall-small);
44
41
  height: var(--preset-tall-small);
@@ -67,6 +64,11 @@
67
64
  .drawer header[tall=default], .drawer header.tall-default, .drawer-header[tall=default], .drawer-header.tall-default {
68
65
  min-height: var(--sld-tall-default) !important;
69
66
  }
67
+ .drawer header, .drawer-header {
68
+ min-height: var(--drawer-header-min-height);
69
+ display: flex;
70
+ width: 100%;
71
+ }
70
72
  .drawer header-bar, .drawer-header-bar {
71
73
  flex: 1;
72
74
  display: flex;
package/dist/slotui-css/drawer.min.css CHANGED
@@ -10,6 +10,11 @@
10
10
  --drawer-content-flex: 1;
11
11
  }
12
12
 
13
+ .drawer {
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: flex-start;
17
+ }
13
18
  .drawer {
14
19
  color: var(--drawer-color);
15
20
  background-color: var(--drawer-background-color);
@@ -19,9 +24,6 @@
19
24
  box-shadow: var(--drawer-box-shadow);
20
25
  border-left: 1px solid var(--drawer-border-left);
21
26
  overflow: visible;
22
- display: flex;
23
- flex-direction: column;
24
- align-items: flex-start;
25
27
  height: 100%;
26
28
  transition: all 0.1s;
27
29
  }
@@ -34,11 +36,6 @@
34
36
  position: absolute;
35
37
  z-index: 8600;
36
38
  }
37
- .drawer header, .drawer-header {
38
- min-height: var(--drawer-header-min-height);
39
- display: flex;
40
- width: 100%;
41
- }
42
39
  .drawer header, .drawer-header {
43
40
  min-height: var(--preset-tall-small);
44
41
  height: var(--preset-tall-small);
@@ -67,6 +64,11 @@
67
64
  .drawer header[tall=default], .drawer header.tall-default, .drawer-header[tall=default], .drawer-header.tall-default {
68
65
  min-height: var(--sld-tall-default) !important;
69
66
  }
67
+ .drawer header, .drawer-header {
68
+ min-height: var(--drawer-header-min-height);
69
+ display: flex;
70
+ width: 100%;
71
+ }
70
72
  .drawer header-bar, .drawer-header-bar {
71
73
  flex: 1;
72
74
  display: flex;
package/dist/slotui-css/finder.css CHANGED
@@ -7,10 +7,10 @@
7
7
  gap: var(--finder-gap);
8
8
  }
9
9
  .finder-container {
10
- --preset-width: var(--sld-width-small);
10
+ width: var(--sld-width-small);
11
11
  }
12
12
  .finder-container {
13
- width: var(--sld-width-small);
13
+ --preset-width: var(--sld-width-small);
14
14
  }
15
15
  .finder-container[width=tiny], .finder-container.width-tiny {
16
16
  --preset-width: var(--sld-width-tiny);
package/dist/slotui-css/finder.min.css CHANGED
@@ -7,10 +7,10 @@
7
7
  gap: var(--finder-gap);
8
8
  }
9
9
  .finder-container {
10
- --preset-width: var(--sld-width-small);
10
+ width: var(--sld-width-small);
11
11
  }
12
12
  .finder-container {
13
- width: var(--sld-width-small);
13
+ --preset-width: var(--sld-width-small);
14
14
  }
15
15
  .finder-container[width=tiny], .finder-container.width-tiny {
16
16
  --preset-width: var(--sld-width-tiny);
package/dist/slotui-css/marquee.css CHANGED
@@ -12,32 +12,32 @@
12
12
  .marquee :global(-container) {
13
13
  --preset-gutter: var(--sld-gutter-default);
14
14
  }
15
- .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
15
+ .marquee :global(-container) [gutter=tiny], .marquee :global(-container) .gutter-tiny {
16
16
  padding: var(--sld-gutter-tiny);
17
17
  gap: var(--sld-gutter-tiny);
18
18
  --preset-gutter: var(--sld-gutter-tiny);
19
19
  }
20
- .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
20
+ .marquee :global(-container) [gutter=mini], .marquee :global(-container) .gutter-mini {
21
21
  padding: var(--sld-gutter-mini);
22
22
  gap: var(--sld-gutter-mini);
23
23
  --preset-gutter: var(--sld-gutter-mini);
24
24
  }
25
- .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
25
+ .marquee :global(-container) [gutter=small], .marquee :global(-container) .gutter-small {
26
26
  padding: var(--sld-gutter-small);
27
27
  gap: var(--sld-gutter-small);
28
28
  --preset-gutter: var(--sld-gutter-small);
29
29
  }
30
- .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
30
+ .marquee :global(-container) [gutter=med], .marquee :global(-container) .gutter-med {
31
31
  padding: var(--sld-gutter-med);
32
32
  gap: var(--sld-gutter-med);
33
33
  --preset-gutter: var(--sld-gutter-med);
34
34
  }
35
- .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
35
+ .marquee :global(-container) [gutter=kind], .marquee :global(-container) .gutter-kind {
36
36
  padding: var(--sld-gutter-kind);
37
37
  gap: var(--sld-gutter-kind);
38
38
  --preset-gutter: var(--sld-gutter-kind);
39
39
  }
40
- .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
40
+ .marquee :global(-container) [gutter=default], .marquee :global(-container) .gutter-default {
41
41
  padding: var(--sld-gutter-default);
42
42
  gap: var(--sld-gutter-default);
43
43
  --preset-gutter: var(--sld-gutter-default);
package/dist/slotui-css/marquee.min.css CHANGED
@@ -12,32 +12,32 @@
12
12
  .marquee :global(-container) {
13
13
  --preset-gutter: var(--sld-gutter-default);
14
14
  }
15
- .marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
15
+ .marquee :global(-container) [gutter=tiny], .marquee :global(-container) .gutter-tiny {
16
16
  padding: var(--sld-gutter-tiny);
17
17
  gap: var(--sld-gutter-tiny);
18
18
  --preset-gutter: var(--sld-gutter-tiny);
19
19
  }
20
- .marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
20
+ .marquee :global(-container) [gutter=mini], .marquee :global(-container) .gutter-mini {
21
21
  padding: var(--sld-gutter-mini);
22
22
  gap: var(--sld-gutter-mini);
23
23
  --preset-gutter: var(--sld-gutter-mini);
24
24
  }
25
- .marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
25
+ .marquee :global(-container) [gutter=small], .marquee :global(-container) .gutter-small {
26
26
  padding: var(--sld-gutter-small);
27
27
  gap: var(--sld-gutter-small);
28
28
  --preset-gutter: var(--sld-gutter-small);
29
29
  }
30
- .marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
30
+ .marquee :global(-container) [gutter=med], .marquee :global(-container) .gutter-med {
31
31
  padding: var(--sld-gutter-med);
32
32
  gap: var(--sld-gutter-med);
33
33
  --preset-gutter: var(--sld-gutter-med);
34
34
  }
35
- .marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
35
+ .marquee :global(-container) [gutter=kind], .marquee :global(-container) .gutter-kind {
36
36
  padding: var(--sld-gutter-kind);
37
37
  gap: var(--sld-gutter-kind);
38
38
  --preset-gutter: var(--sld-gutter-kind);
39
39
  }
40
- .marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
40
+ .marquee :global(-container) [gutter=default], .marquee :global(-container) .gutter-default {
41
41
  padding: var(--sld-gutter-default);
42
42
  gap: var(--sld-gutter-default);
43
43
  --preset-gutter: var(--sld-gutter-default);