@medyll/idae-slotui-svelte 0.63.0 → 0.64.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 +3 -4
  18. package/dist/index.js +3 -4
  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 +16 -17
  38. package/dist/slotui-css/menu-list.min.css +16 -17
  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 +554 -597
  44. package/dist/slotui-css/slotui-min-css.css +554 -597
  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 +16 -17
  56. package/dist/ui/menuList/MenuListItem.svelte +17 -19
  57. package/dist/ui/menuList/MenuListTitle.svelte +16 -17
  58. package/dist/ui/menuList/menu-list.scss +2 -2
  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);
package/dist/slotui-css/menu-list.css CHANGED
@@ -24,18 +24,18 @@
24
24
  .menu-list a.menu-list-title {
25
25
  font-weight: bold;
26
26
  }
27
- .menu-list .menu-list-item[variant*=square], .menu-list .menu-list-item[square=true], .menu-list .menu-list-item.square {
27
+ .menu-list .menu-list-item[variant*=square] {
28
28
  aspect-ratio: 1/1 !important;
29
29
  height: auto;
30
30
  }
31
- .menu-list .menu-list-item[variant*=rounded], .menu-list .menu-list-item[rounded=true], .menu-list .menu-list-item.rounded {
31
+ .menu-list .menu-list-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
34
  .menu-list .menu-list-item {
35
- --preset-width: var(--sld-width-small);
35
+ width: var(--sld-width-small);
36
36
  }
37
37
  .menu-list .menu-list-item {
38
- width: var(--sld-width-small);
38
+ --preset-width: var(--sld-width-small);
39
39
  }
40
40
  .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
41
41
  --preset-width: var(--sld-width-tiny);
@@ -100,32 +100,32 @@
100
100
  .menu-list .menu-list-item {
101
101
  --preset-gutter: var(--sld-gutter-default);
102
102
  }
103
- .menu-list .menu-list-item :global([gutter="tiny"]), .menu-list .menu-list-item :global(.gutter-tiny) {
103
+ .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
104
104
  padding: var(--sld-gutter-tiny);
105
105
  gap: var(--sld-gutter-tiny);
106
106
  --preset-gutter: var(--sld-gutter-tiny);
107
107
  }
108
- .menu-list .menu-list-item :global([gutter="mini"]), .menu-list .menu-list-item :global(.gutter-mini) {
108
+ .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
109
109
  padding: var(--sld-gutter-mini);
110
110
  gap: var(--sld-gutter-mini);
111
111
  --preset-gutter: var(--sld-gutter-mini);
112
112
  }
113
- .menu-list .menu-list-item :global([gutter="small"]), .menu-list .menu-list-item :global(.gutter-small) {
113
+ .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
114
114
  padding: var(--sld-gutter-small);
115
115
  gap: var(--sld-gutter-small);
116
116
  --preset-gutter: var(--sld-gutter-small);
117
117
  }
118
- .menu-list .menu-list-item :global([gutter="med"]), .menu-list .menu-list-item :global(.gutter-med) {
118
+ .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
119
119
  padding: var(--sld-gutter-med);
120
120
  gap: var(--sld-gutter-med);
121
121
  --preset-gutter: var(--sld-gutter-med);
122
122
  }
123
- .menu-list .menu-list-item :global([gutter="kind"]), .menu-list .menu-list-item :global(.gutter-kind) {
123
+ .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
124
124
  padding: var(--sld-gutter-kind);
125
125
  gap: var(--sld-gutter-kind);
126
126
  --preset-gutter: var(--sld-gutter-kind);
127
127
  }
128
- .menu-list .menu-list-item :global([gutter="default"]), .menu-list .menu-list-item :global(.gutter-default) {
128
+ .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
129
129
  padding: var(--sld-gutter-default);
130
130
  gap: var(--sld-gutter-default);
131
131
  --preset-gutter: var(--sld-gutter-default);
@@ -134,15 +134,14 @@
134
134
  border-color: var(--sld-hover-border-color);
135
135
  background-color: var(--sld-background-disabled);
136
136
  }
137
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true], .menu-list .menu-list-item[data-selected=true] {
137
+ .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
138
138
  border-color: none;
139
139
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
140
140
  box-shadow: var(--sld-selected-shadow);
141
141
  }
142
- .menu-list .menu-list-item.selected .listItemChip,
143
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .listItemChip,
144
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip, .menu-list .menu-list-item[data-selected=true] .listItemChip,
145
- .menu-list .menu-list-item[data-selected=true] .menuItemChip {
142
+ .menu-list .menu-list-item.selected .chip,
143
+ .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
144
+ .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
146
145
  position: absolute;
147
146
  min-height: 16px;
148
147
  height: 50%;
@@ -200,10 +199,10 @@
200
199
  justify-content: var(--menu-list-item-action-justify-content);
201
200
  }
202
201
 
203
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[data-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
204
203
  visibility: visible;
205
204
  }
206
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
207
206
  visibility: visible;
208
207
  }
209
208
  :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
package/dist/slotui-css/menu-list.min.css CHANGED
@@ -24,18 +24,18 @@
24
24
  .menu-list a.menu-list-title {
25
25
  font-weight: bold;
26
26
  }
27
- .menu-list .menu-list-item[variant*=square], .menu-list .menu-list-item[square=true], .menu-list .menu-list-item.square {
27
+ .menu-list .menu-list-item[variant*=square] {
28
28
  aspect-ratio: 1/1 !important;
29
29
  height: auto;
30
30
  }
31
- .menu-list .menu-list-item[variant*=rounded], .menu-list .menu-list-item[rounded=true], .menu-list .menu-list-item.rounded {
31
+ .menu-list .menu-list-item[variant*=rounded] {
32
32
  border-radius: 50%;
33
33
  }
34
34
  .menu-list .menu-list-item {
35
- --preset-width: var(--sld-width-small);
35
+ width: var(--sld-width-small);
36
36
  }
37
37
  .menu-list .menu-list-item {
38
- width: var(--sld-width-small);
38
+ --preset-width: var(--sld-width-small);
39
39
  }
40
40
  .menu-list .menu-list-item[width=tiny], .menu-list .menu-list-item.width-tiny {
41
41
  --preset-width: var(--sld-width-tiny);
@@ -100,32 +100,32 @@
100
100
  .menu-list .menu-list-item {
101
101
  --preset-gutter: var(--sld-gutter-default);
102
102
  }
103
- .menu-list .menu-list-item :global([gutter="tiny"]), .menu-list .menu-list-item :global(.gutter-tiny) {
103
+ .menu-list .menu-list-item [gutter=tiny], .menu-list .menu-list-item .gutter-tiny {
104
104
  padding: var(--sld-gutter-tiny);
105
105
  gap: var(--sld-gutter-tiny);
106
106
  --preset-gutter: var(--sld-gutter-tiny);
107
107
  }
108
- .menu-list .menu-list-item :global([gutter="mini"]), .menu-list .menu-list-item :global(.gutter-mini) {
108
+ .menu-list .menu-list-item [gutter=mini], .menu-list .menu-list-item .gutter-mini {
109
109
  padding: var(--sld-gutter-mini);
110
110
  gap: var(--sld-gutter-mini);
111
111
  --preset-gutter: var(--sld-gutter-mini);
112
112
  }
113
- .menu-list .menu-list-item :global([gutter="small"]), .menu-list .menu-list-item :global(.gutter-small) {
113
+ .menu-list .menu-list-item [gutter=small], .menu-list .menu-list-item .gutter-small {
114
114
  padding: var(--sld-gutter-small);
115
115
  gap: var(--sld-gutter-small);
116
116
  --preset-gutter: var(--sld-gutter-small);
117
117
  }
118
- .menu-list .menu-list-item :global([gutter="med"]), .menu-list .menu-list-item :global(.gutter-med) {
118
+ .menu-list .menu-list-item [gutter=med], .menu-list .menu-list-item .gutter-med {
119
119
  padding: var(--sld-gutter-med);
120
120
  gap: var(--sld-gutter-med);
121
121
  --preset-gutter: var(--sld-gutter-med);
122
122
  }
123
- .menu-list .menu-list-item :global([gutter="kind"]), .menu-list .menu-list-item :global(.gutter-kind) {
123
+ .menu-list .menu-list-item [gutter=kind], .menu-list .menu-list-item .gutter-kind {
124
124
  padding: var(--sld-gutter-kind);
125
125
  gap: var(--sld-gutter-kind);
126
126
  --preset-gutter: var(--sld-gutter-kind);
127
127
  }
128
- .menu-list .menu-list-item :global([gutter="default"]), .menu-list .menu-list-item :global(.gutter-default) {
128
+ .menu-list .menu-list-item [gutter=default], .menu-list .menu-list-item .gutter-default {
129
129
  padding: var(--sld-gutter-default);
130
130
  gap: var(--sld-gutter-default);
131
131
  --preset-gutter: var(--sld-gutter-default);
@@ -134,15 +134,14 @@
134
134
  border-color: var(--sld-hover-border-color);
135
135
  background-color: var(--sld-background-disabled);
136
136
  }
137
- .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true], .menu-list .menu-list-item[data-selected=true] {
137
+ .menu-list .menu-list-item.selected, .menu-list .menu-list-item[aria-selected=true] {
138
138
  border-color: none;
139
139
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
140
140
  box-shadow: var(--sld-selected-shadow);
141
141
  }
142
- .menu-list .menu-list-item.selected .listItemChip,
143
- .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .listItemChip,
144
- .menu-list .menu-list-item[aria-selected=true] .menuItemChip, .menu-list .menu-list-item[data-selected=true] .listItemChip,
145
- .menu-list .menu-list-item[data-selected=true] .menuItemChip {
142
+ .menu-list .menu-list-item.selected .chip,
143
+ .menu-list .menu-list-item.selected .menuItemChip, .menu-list .menu-list-item[aria-selected=true] .chip,
144
+ .menu-list .menu-list-item[aria-selected=true] .menuItemChip {
146
145
  position: absolute;
147
146
  min-height: 16px;
148
147
  height: 50%;
@@ -200,10 +199,10 @@
200
199
  justify-content: var(--menu-list-item-action-justify-content);
201
200
  }
202
201
 
203
- :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[data-selected="true"] .menu-list-item-action) {
202
+ :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item[aria-selected="true"] .menu-list-item-action) {
204
203
  visibility: visible;
205
204
  }
206
- :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[data-selected="true"] .menu-list-item-action) {
205
+ :global(ul.menuList.showLastOnSelected) :global(a.menu-list-item[aria-selected="true"] .menu-list-item-action) {
207
206
  visibility: visible;
208
207
  }
209
208
  :global(ul.menuList.showLastOnSelected) :global(li.menu-list-item .menu-list-item-action) {
package/dist/slotui-css/menu.css CHANGED
@@ -26,15 +26,14 @@ li.menuItem:hover {
26
26
  border-color: var(--sld-hover-border-color);
27
27
  background-color: var(--sld-background-disabled);
28
28
  }
29
- li.menuItem.selected, li.menuItem[aria-selected=true], li.menuItem[data-selected=true] {
29
+ li.menuItem.selected, li.menuItem[aria-selected=true] {
30
30
  border-color: none;
31
31
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
32
32
  box-shadow: var(--sld-selected-shadow);
33
33
  }
34
- li.menuItem.selected .listItemChip,
35
- li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .listItemChip,
36
- li.menuItem[aria-selected=true] .menuItemChip, li.menuItem[data-selected=true] .listItemChip,
37
- li.menuItem[data-selected=true] .menuItemChip {
34
+ li.menuItem.selected .chip,
35
+ li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .chip,
36
+ li.menuItem[aria-selected=true] .menuItemChip {
38
37
  position: absolute;
39
38
  min-height: 16px;
40
39
  height: 50%;
package/dist/slotui-css/menu.min.css CHANGED
@@ -26,15 +26,14 @@ li.menuItem:hover {
26
26
  border-color: var(--sld-hover-border-color);
27
27
  background-color: var(--sld-background-disabled);
28
28
  }
29
- li.menuItem.selected, li.menuItem[aria-selected=true], li.menuItem[data-selected=true] {
29
+ li.menuItem.selected, li.menuItem[aria-selected=true] {
30
30
  border-color: none;
31
31
  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
32
32
  box-shadow: var(--sld-selected-shadow);
33
33
  }
34
- li.menuItem.selected .listItemChip,
35
- li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .listItemChip,
36
- li.menuItem[aria-selected=true] .menuItemChip, li.menuItem[data-selected=true] .listItemChip,
37
- li.menuItem[data-selected=true] .menuItemChip {
34
+ li.menuItem.selected .chip,
35
+ li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .chip,
36
+ li.menuItem[aria-selected=true] .menuItemChip {
38
37
  position: absolute;
39
38
  min-height: 16px;
40
39
  height: 50%;