@medyll/idae-slotui-svelte 0.121.0 → 0.122.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/dist/index.d.ts +64 -64
  2. package/dist/index.js +64 -64
  3. package/dist/slotui-css/alert.css +95 -95
  4. package/dist/slotui-css/alert.min.css +95 -95
  5. package/dist/slotui-css/auto-complete.css +11 -11
  6. package/dist/slotui-css/auto-complete.min.css +11 -11
  7. package/dist/slotui-css/avatar.css +12 -12
  8. package/dist/slotui-css/avatar.min.css +12 -12
  9. package/dist/slotui-css/backdrop.css +31 -31
  10. package/dist/slotui-css/backdrop.min.css +31 -31
  11. package/dist/slotui-css/badge.css +15 -15
  12. package/dist/slotui-css/badge.min.css +15 -15
  13. package/dist/slotui-css/boot-menu.css +76 -76
  14. package/dist/slotui-css/boot-menu.min.css +76 -76
  15. package/dist/slotui-css/box.css +28 -28
  16. package/dist/slotui-css/box.min.css +28 -28
  17. package/dist/slotui-css/breadcrumb.css +2 -2
  18. package/dist/slotui-css/breadcrumb.min.css +2 -2
  19. package/dist/slotui-css/button-action.css +7 -7
  20. package/dist/slotui-css/button-action.min.css +7 -7
  21. package/dist/slotui-css/button-menu.css +30 -30
  22. package/dist/slotui-css/button-menu.min.css +30 -30
  23. package/dist/slotui-css/button.css +760 -760
  24. package/dist/slotui-css/button.min.css +760 -760
  25. package/dist/slotui-css/cartouche.css +113 -113
  26. package/dist/slotui-css/cartouche.min.css +113 -113
  27. package/dist/slotui-css/checkbox.css +126 -126
  28. package/dist/slotui-css/checkbox.min.css +126 -126
  29. package/dist/slotui-css/chipper.css +55 -55
  30. package/dist/slotui-css/chipper.min.css +55 -55
  31. package/dist/slotui-css/chrome-frame.css +33 -33
  32. package/dist/slotui-css/chrome-frame.min.css +33 -33
  33. package/dist/slotui-css/confirm.css +8 -8
  34. package/dist/slotui-css/confirm.min.css +8 -8
  35. package/dist/slotui-css/containerConfig.css +6 -6
  36. package/dist/slotui-css/containerConfig.min.css +6 -6
  37. package/dist/slotui-css/content-switcher.css +20 -20
  38. package/dist/slotui-css/content-switcher.min.css +20 -20
  39. package/dist/slotui-css/csss.css +9 -9
  40. package/dist/slotui-css/csss.min.css +9 -9
  41. package/dist/slotui-css/datalist.css +135 -135
  42. package/dist/slotui-css/datalist.min.css +135 -135
  43. package/dist/slotui-css/divider.css +15 -15
  44. package/dist/slotui-css/divider.min.css +15 -15
  45. package/dist/slotui-css/drawer.css +87 -87
  46. package/dist/slotui-css/drawer.min.css +87 -87
  47. package/dist/slotui-css/finder.css +73 -73
  48. package/dist/slotui-css/finder.min.css +73 -73
  49. package/dist/slotui-css/frame.css +48 -48
  50. package/dist/slotui-css/frame.min.css +48 -48
  51. package/dist/slotui-css/icon.css +15 -15
  52. package/dist/slotui-css/icon.min.css +15 -15
  53. package/dist/slotui-css/loader.css +45 -45
  54. package/dist/slotui-css/loader.min.css +45 -45
  55. package/dist/slotui-css/marquee.css +57 -57
  56. package/dist/slotui-css/marquee.min.css +57 -57
  57. package/dist/slotui-css/menu-list.css +216 -216
  58. package/dist/slotui-css/menu-list.min.css +216 -216
  59. package/dist/slotui-css/menu.css +95 -95
  60. package/dist/slotui-css/menu.min.css +95 -95
  61. package/dist/slotui-css/panel.css +24 -24
  62. package/dist/slotui-css/panel.min.css +24 -24
  63. package/dist/slotui-css/paper.css +20 -20
  64. package/dist/slotui-css/paper.min.css +20 -20
  65. package/dist/slotui-css/popper.css +84 -84
  66. package/dist/slotui-css/popper.min.css +84 -84
  67. package/dist/slotui-css/progress.css +19 -19
  68. package/dist/slotui-css/progress.min.css +19 -19
  69. package/dist/slotui-css/rating.css +8 -8
  70. package/dist/slotui-css/rating.min.css +8 -8
  71. package/dist/slotui-css/select.css +10 -10
  72. package/dist/slotui-css/select.min.css +10 -10
  73. package/dist/slotui-css/sheetConfig.css +6 -6
  74. package/dist/slotui-css/sheetConfig.min.css +6 -6
  75. package/dist/slotui-css/slider.css +73 -73
  76. package/dist/slotui-css/slider.min.css +73 -73
  77. package/dist/slotui-css/slotui-css.css +4574 -4574
  78. package/dist/slotui-css/slotui-min-css.css +4574 -4574
  79. package/dist/slotui-css/slotui-sheet.css +294 -294
  80. package/dist/slotui-css/slotui-sheet.min.css +294 -294
  81. package/dist/slotui-css/sorterer.css +10 -10
  82. package/dist/slotui-css/sorterer.min.css +10 -10
  83. package/dist/slotui-css/stepper.css +19 -19
  84. package/dist/slotui-css/stepper.min.css +19 -19
  85. package/dist/slotui-css/stylesheet-container.css +373 -373
  86. package/dist/slotui-css/stylesheet-container.min.css +373 -373
  87. package/dist/slotui-css/stylesheet.css +370 -370
  88. package/dist/slotui-css/stylesheet.min.css +370 -370
  89. package/dist/slotui-css/switch.css +62 -62
  90. package/dist/slotui-css/switch.min.css +62 -62
  91. package/dist/slotui-css/tabs.css +84 -84
  92. package/dist/slotui-css/tabs.min.css +84 -84
  93. package/dist/slotui-css/taskbar.css +24 -24
  94. package/dist/slotui-css/taskbar.min.css +24 -24
  95. package/dist/slotui-css/textfield.css +127 -127
  96. package/dist/slotui-css/textfield.min.css +127 -127
  97. package/dist/slotui-css/title-bar.css +27 -27
  98. package/dist/slotui-css/title-bar.min.css +27 -27
  99. package/dist/slotui-css/toggle-bar.css +40 -40
  100. package/dist/slotui-css/toggle-bar.min.css +40 -40
  101. package/dist/slotui-css/toolbar.css +27 -27
  102. package/dist/slotui-css/toolbar.min.css +27 -27
  103. package/dist/slotui-css/tree.css +49 -49
  104. package/dist/slotui-css/tree.min.css +49 -49
  105. package/dist/slotui-css/window.css +59 -59
  106. package/dist/slotui-css/window.min.css +59 -59
  107. package/package.json +4 -4
package/dist/slotui-css/checkbox.css CHANGED
@@ -1,127 +1,127 @@
1
- :root {
2
- --sld-checkbox-background: var(--sld-color-background-alpha-high);
3
- --sld-checkbox-background-hover: var(--sld-color-primary);
4
- --sld-checkbox-background-checked: var(--sld-color-primary);
5
- --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
6
- --sld-checkbox-border-width: 2px;
7
- --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
8
- --sld-checkbox-border-bottom-width: 2px;
9
- --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
10
- --sld-checkbox-radius: var(--sld-radius-small);
11
- --sld-checkbox-padding: 0 0.5rem;
12
- --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
- }
14
-
15
- .checkbox:hover {
16
- border-color: var(--sld-hover-border-color);
17
- background-color: var(--sld-background-disabled);
18
- }
19
- .checkbox {
20
- min-height: var(--preset-tall-small);
21
- height: var(--preset-tall-small);
22
- }
23
- .checkbox {
24
- --preset-tall: var(--sld-tall-small);
25
- }
26
- .checkbox[tall=tiny], .checkbox.tall-tiny {
27
- min-height: var(--sld-tall-tiny) !important;
28
- }
29
- .checkbox[tall=mini], .checkbox.tall-mini {
30
- min-height: var(--sld-tall-mini) !important;
31
- }
32
- .checkbox[tall=small], .checkbox.tall-small {
33
- min-height: var(--sld-tall-small) !important;
34
- }
35
- .checkbox[tall=med], .checkbox.tall-med {
36
- min-height: var(--sld-tall-med) !important;
37
- }
38
- .checkbox[tall=kind], .checkbox.tall-kind {
39
- min-height: var(--sld-tall-kind) !important;
40
- }
41
- .checkbox[tall=auto], .checkbox.tall-auto {
42
- min-height: var(--sld-tall-auto) !important;
43
- }
44
- .checkbox[tall=default], .checkbox.tall-default {
45
- min-height: var(--sld-tall-default) !important;
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
- }
63
- .checkbox:focus-visible {
64
- box-shadow: var(--sld-checkbox-shadow);
65
- }
66
- .checkbox:hover {
67
- background-color: var(--sld-color-primary-darken-mid);
68
- }
69
- .checkbox:active + .svg {
70
- color: var(--sld-color-secondary);
71
- }
72
- .checkbox:disabled {
73
- border-color: #ccc;
74
- background-color: #ededed;
75
- pointer-events: none;
76
- }
77
- .checkbox:checked, .checkbox:indeterminate {
78
- background-color: var(--sld-checkbox-background-indeterminate);
79
- }
80
- .checkbox:checked:hover, .checkbox:indeterminate:hover {
81
- background-color: var(--sld-checkbox-background-hover);
82
- }
83
- .checkbox:checked:active, .checkbox:checked:focus, .checkbox:indeterminate:active, .checkbox:indeterminate:focus {
84
- background-color: var(--sld-checkbox-background-checked);
85
- }
86
- .checkbox:checked:disabled, .checkbox:checked[disabled], .checkbox:indeterminate:disabled, .checkbox:indeterminate[disabled] {
87
- border-color: #ccc;
88
- background-color: #ededed;
89
- pointer-events: none;
90
- }
91
- .checkbox:checked:disabled + .svg, .checkbox:checked[disabled] + .svg, .checkbox:indeterminate:disabled + .svg, .checkbox:indeterminate[disabled] + .svg {
92
- color: #ededed;
93
- }
94
-
95
- .checkbox-root {
96
- display: flex;
97
- align-items: center;
98
- -webkit-user-select: none;
99
- user-select: none;
100
- min-block-size: 32px;
101
- gap: 0.5rem;
102
- }
103
- .checkbox-root.disabled > span {
104
- color: #ededed;
105
- }
106
- .checkbox-root .checkbox-container {
107
- display: inline-flex;
108
- justify-content: center;
109
- position: relative;
110
- }
111
- .checkbox-root .checkbox-container .svg {
112
- position: absolute;
113
- color: white;
114
- height: 100%;
115
- width: 100%;
116
- padding: 3px;
117
- }
118
- .checkbox-root .checkbox-container .svg path {
119
- transform-origin: center;
120
- }
121
- .checkbox-root .checkbox-container .svg path-check {
122
- transform: scale(1.1);
123
- fill: white;
124
- }
125
- .checkbox-root .checkbox-container .svg path-indeterminate {
126
- transform: scale(1.1);
1
+ :root {
2
+ --sld-checkbox-background: var(--sld-color-background-alpha-high);
3
+ --sld-checkbox-background-hover: var(--sld-color-primary);
4
+ --sld-checkbox-background-checked: var(--sld-color-primary);
5
+ --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
6
+ --sld-checkbox-border-width: 2px;
7
+ --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
8
+ --sld-checkbox-border-bottom-width: 2px;
9
+ --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
10
+ --sld-checkbox-radius: var(--sld-radius-small);
11
+ --sld-checkbox-padding: 0 0.5rem;
12
+ --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
+ }
14
+
15
+ .checkbox:hover {
16
+ border-color: var(--sld-hover-border-color);
17
+ background-color: var(--sld-background-disabled);
18
+ }
19
+ .checkbox {
20
+ min-height: var(--preset-tall-small);
21
+ height: var(--preset-tall-small);
22
+ }
23
+ .checkbox {
24
+ --preset-tall: var(--sld-tall-small);
25
+ }
26
+ .checkbox[tall=tiny], .checkbox.tall-tiny {
27
+ min-height: var(--sld-tall-tiny) !important;
28
+ }
29
+ .checkbox[tall=mini], .checkbox.tall-mini {
30
+ min-height: var(--sld-tall-mini) !important;
31
+ }
32
+ .checkbox[tall=small], .checkbox.tall-small {
33
+ min-height: var(--sld-tall-small) !important;
34
+ }
35
+ .checkbox[tall=med], .checkbox.tall-med {
36
+ min-height: var(--sld-tall-med) !important;
37
+ }
38
+ .checkbox[tall=kind], .checkbox.tall-kind {
39
+ min-height: var(--sld-tall-kind) !important;
40
+ }
41
+ .checkbox[tall=auto], .checkbox.tall-auto {
42
+ min-height: var(--sld-tall-auto) !important;
43
+ }
44
+ .checkbox[tall=default], .checkbox.tall-default {
45
+ min-height: var(--sld-tall-default) !important;
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
+ }
63
+ .checkbox:focus-visible {
64
+ box-shadow: var(--sld-checkbox-shadow);
65
+ }
66
+ .checkbox:hover {
67
+ background-color: var(--sld-color-primary-darken-mid);
68
+ }
69
+ .checkbox:active + .svg {
70
+ color: var(--sld-color-secondary);
71
+ }
72
+ .checkbox:disabled {
73
+ border-color: #ccc;
74
+ background-color: #ededed;
75
+ pointer-events: none;
76
+ }
77
+ .checkbox:checked, .checkbox:indeterminate {
78
+ background-color: var(--sld-checkbox-background-indeterminate);
79
+ }
80
+ .checkbox:checked:hover, .checkbox:indeterminate:hover {
81
+ background-color: var(--sld-checkbox-background-hover);
82
+ }
83
+ .checkbox:checked:active, .checkbox:checked:focus, .checkbox:indeterminate:active, .checkbox:indeterminate:focus {
84
+ background-color: var(--sld-checkbox-background-checked);
85
+ }
86
+ .checkbox:checked:disabled, .checkbox:checked[disabled], .checkbox:indeterminate:disabled, .checkbox:indeterminate[disabled] {
87
+ border-color: #ccc;
88
+ background-color: #ededed;
89
+ pointer-events: none;
90
+ }
91
+ .checkbox:checked:disabled + .svg, .checkbox:checked[disabled] + .svg, .checkbox:indeterminate:disabled + .svg, .checkbox:indeterminate[disabled] + .svg {
92
+ color: #ededed;
93
+ }
94
+
95
+ .checkbox-root {
96
+ display: flex;
97
+ align-items: center;
98
+ -webkit-user-select: none;
99
+ user-select: none;
100
+ min-block-size: 32px;
101
+ gap: 0.5rem;
102
+ }
103
+ .checkbox-root.disabled > span {
104
+ color: #ededed;
105
+ }
106
+ .checkbox-root .checkbox-container {
107
+ display: inline-flex;
108
+ justify-content: center;
109
+ position: relative;
110
+ }
111
+ .checkbox-root .checkbox-container .svg {
112
+ position: absolute;
113
+ color: white;
114
+ height: 100%;
115
+ width: 100%;
116
+ padding: 3px;
117
+ }
118
+ .checkbox-root .checkbox-container .svg path {
119
+ transform-origin: center;
120
+ }
121
+ .checkbox-root .checkbox-container .svg path-check {
122
+ transform: scale(1.1);
123
+ fill: white;
124
+ }
125
+ .checkbox-root .checkbox-container .svg path-indeterminate {
126
+ transform: scale(1.1);
127
127
  }
package/dist/slotui-css/checkbox.min.css CHANGED
@@ -1,127 +1,127 @@
1
- :root {
2
- --sld-checkbox-background: var(--sld-color-background-alpha-high);
3
- --sld-checkbox-background-hover: var(--sld-color-primary);
4
- --sld-checkbox-background-checked: var(--sld-color-primary);
5
- --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
6
- --sld-checkbox-border-width: 2px;
7
- --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
8
- --sld-checkbox-border-bottom-width: 2px;
9
- --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
10
- --sld-checkbox-radius: var(--sld-radius-small);
11
- --sld-checkbox-padding: 0 0.5rem;
12
- --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
- }
14
-
15
- .checkbox:hover {
16
- border-color: var(--sld-hover-border-color);
17
- background-color: var(--sld-background-disabled);
18
- }
19
- .checkbox {
20
- min-height: var(--preset-tall-small);
21
- height: var(--preset-tall-small);
22
- }
23
- .checkbox {
24
- --preset-tall: var(--sld-tall-small);
25
- }
26
- .checkbox[tall=tiny], .checkbox.tall-tiny {
27
- min-height: var(--sld-tall-tiny) !important;
28
- }
29
- .checkbox[tall=mini], .checkbox.tall-mini {
30
- min-height: var(--sld-tall-mini) !important;
31
- }
32
- .checkbox[tall=small], .checkbox.tall-small {
33
- min-height: var(--sld-tall-small) !important;
34
- }
35
- .checkbox[tall=med], .checkbox.tall-med {
36
- min-height: var(--sld-tall-med) !important;
37
- }
38
- .checkbox[tall=kind], .checkbox.tall-kind {
39
- min-height: var(--sld-tall-kind) !important;
40
- }
41
- .checkbox[tall=auto], .checkbox.tall-auto {
42
- min-height: var(--sld-tall-auto) !important;
43
- }
44
- .checkbox[tall=default], .checkbox.tall-default {
45
- min-height: var(--sld-tall-default) !important;
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
- }
63
- .checkbox:focus-visible {
64
- box-shadow: var(--sld-checkbox-shadow);
65
- }
66
- .checkbox:hover {
67
- background-color: var(--sld-color-primary-darken-mid);
68
- }
69
- .checkbox:active + .svg {
70
- color: var(--sld-color-secondary);
71
- }
72
- .checkbox:disabled {
73
- border-color: #ccc;
74
- background-color: #ededed;
75
- pointer-events: none;
76
- }
77
- .checkbox:checked, .checkbox:indeterminate {
78
- background-color: var(--sld-checkbox-background-indeterminate);
79
- }
80
- .checkbox:checked:hover, .checkbox:indeterminate:hover {
81
- background-color: var(--sld-checkbox-background-hover);
82
- }
83
- .checkbox:checked:active, .checkbox:checked:focus, .checkbox:indeterminate:active, .checkbox:indeterminate:focus {
84
- background-color: var(--sld-checkbox-background-checked);
85
- }
86
- .checkbox:checked:disabled, .checkbox:checked[disabled], .checkbox:indeterminate:disabled, .checkbox:indeterminate[disabled] {
87
- border-color: #ccc;
88
- background-color: #ededed;
89
- pointer-events: none;
90
- }
91
- .checkbox:checked:disabled + .svg, .checkbox:checked[disabled] + .svg, .checkbox:indeterminate:disabled + .svg, .checkbox:indeterminate[disabled] + .svg {
92
- color: #ededed;
93
- }
94
-
95
- .checkbox-root {
96
- display: flex;
97
- align-items: center;
98
- -webkit-user-select: none;
99
- user-select: none;
100
- min-block-size: 32px;
101
- gap: 0.5rem;
102
- }
103
- .checkbox-root.disabled > span {
104
- color: #ededed;
105
- }
106
- .checkbox-root .checkbox-container {
107
- display: inline-flex;
108
- justify-content: center;
109
- position: relative;
110
- }
111
- .checkbox-root .checkbox-container .svg {
112
- position: absolute;
113
- color: white;
114
- height: 100%;
115
- width: 100%;
116
- padding: 3px;
117
- }
118
- .checkbox-root .checkbox-container .svg path {
119
- transform-origin: center;
120
- }
121
- .checkbox-root .checkbox-container .svg path-check {
122
- transform: scale(1.1);
123
- fill: white;
124
- }
125
- .checkbox-root .checkbox-container .svg path-indeterminate {
126
- transform: scale(1.1);
1
+ :root {
2
+ --sld-checkbox-background: var(--sld-color-background-alpha-high);
3
+ --sld-checkbox-background-hover: var(--sld-color-primary);
4
+ --sld-checkbox-background-checked: var(--sld-color-primary);
5
+ --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
6
+ --sld-checkbox-border-width: 2px;
7
+ --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
8
+ --sld-checkbox-border-bottom-width: 2px;
9
+ --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
10
+ --sld-checkbox-radius: var(--sld-radius-small);
11
+ --sld-checkbox-padding: 0 0.5rem;
12
+ --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
13
+ }
14
+
15
+ .checkbox:hover {
16
+ border-color: var(--sld-hover-border-color);
17
+ background-color: var(--sld-background-disabled);
18
+ }
19
+ .checkbox {
20
+ min-height: var(--preset-tall-small);
21
+ height: var(--preset-tall-small);
22
+ }
23
+ .checkbox {
24
+ --preset-tall: var(--sld-tall-small);
25
+ }
26
+ .checkbox[tall=tiny], .checkbox.tall-tiny {
27
+ min-height: var(--sld-tall-tiny) !important;
28
+ }
29
+ .checkbox[tall=mini], .checkbox.tall-mini {
30
+ min-height: var(--sld-tall-mini) !important;
31
+ }
32
+ .checkbox[tall=small], .checkbox.tall-small {
33
+ min-height: var(--sld-tall-small) !important;
34
+ }
35
+ .checkbox[tall=med], .checkbox.tall-med {
36
+ min-height: var(--sld-tall-med) !important;
37
+ }
38
+ .checkbox[tall=kind], .checkbox.tall-kind {
39
+ min-height: var(--sld-tall-kind) !important;
40
+ }
41
+ .checkbox[tall=auto], .checkbox.tall-auto {
42
+ min-height: var(--sld-tall-auto) !important;
43
+ }
44
+ .checkbox[tall=default], .checkbox.tall-default {
45
+ min-height: var(--sld-tall-default) !important;
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
+ }
63
+ .checkbox:focus-visible {
64
+ box-shadow: var(--sld-checkbox-shadow);
65
+ }
66
+ .checkbox:hover {
67
+ background-color: var(--sld-color-primary-darken-mid);
68
+ }
69
+ .checkbox:active + .svg {
70
+ color: var(--sld-color-secondary);
71
+ }
72
+ .checkbox:disabled {
73
+ border-color: #ccc;
74
+ background-color: #ededed;
75
+ pointer-events: none;
76
+ }
77
+ .checkbox:checked, .checkbox:indeterminate {
78
+ background-color: var(--sld-checkbox-background-indeterminate);
79
+ }
80
+ .checkbox:checked:hover, .checkbox:indeterminate:hover {
81
+ background-color: var(--sld-checkbox-background-hover);
82
+ }
83
+ .checkbox:checked:active, .checkbox:checked:focus, .checkbox:indeterminate:active, .checkbox:indeterminate:focus {
84
+ background-color: var(--sld-checkbox-background-checked);
85
+ }
86
+ .checkbox:checked:disabled, .checkbox:checked[disabled], .checkbox:indeterminate:disabled, .checkbox:indeterminate[disabled] {
87
+ border-color: #ccc;
88
+ background-color: #ededed;
89
+ pointer-events: none;
90
+ }
91
+ .checkbox:checked:disabled + .svg, .checkbox:checked[disabled] + .svg, .checkbox:indeterminate:disabled + .svg, .checkbox:indeterminate[disabled] + .svg {
92
+ color: #ededed;
93
+ }
94
+
95
+ .checkbox-root {
96
+ display: flex;
97
+ align-items: center;
98
+ -webkit-user-select: none;
99
+ user-select: none;
100
+ min-block-size: 32px;
101
+ gap: 0.5rem;
102
+ }
103
+ .checkbox-root.disabled > span {
104
+ color: #ededed;
105
+ }
106
+ .checkbox-root .checkbox-container {
107
+ display: inline-flex;
108
+ justify-content: center;
109
+ position: relative;
110
+ }
111
+ .checkbox-root .checkbox-container .svg {
112
+ position: absolute;
113
+ color: white;
114
+ height: 100%;
115
+ width: 100%;
116
+ padding: 3px;
117
+ }
118
+ .checkbox-root .checkbox-container .svg path {
119
+ transform-origin: center;
120
+ }
121
+ .checkbox-root .checkbox-container .svg path-check {
122
+ transform: scale(1.1);
123
+ fill: white;
124
+ }
125
+ .checkbox-root .checkbox-container .svg path-indeterminate {
126
+ transform: scale(1.1);
127
127
  }
package/dist/slotui-css/chipper.css CHANGED
@@ -1,56 +1,56 @@
1
- :root {
2
- --chipper-gap: var(--sld-gap-tiny);
3
- --chipper-radius: var(--sld-radius-large);
4
- --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
5
- }
6
-
7
- .chipper {
8
- position: relative;
9
- gap: var(--chipper-gap);
10
- }
11
- .chipper .chipper-content {
12
- padding: 0.5rem;
13
- }
14
- .chipper .chipper-chip {
15
- display: block;
16
- position: absolute;
17
- z-index: 2;
18
- border-radius: var(--chipper-radius);
19
- transition: all 0.25s;
20
- max-height: 100%;
21
- background-color: var(--chipper-chip-color);
22
- }
23
- .chipper .chipper-chip[data-position=left] {
24
- top: 2px;
25
- left: 2px;
26
- height: 100%;
27
- width: 3px;
28
- }
29
- .chipper .chipper-chip[data-position=right] {
30
- top: 2px;
31
- right: 2px;
32
- height: 130px;
33
- width: 3px;
34
- }
35
- .chipper .chipper-chip[data-position=top] {
36
- height: 4px;
37
- top: 2px;
38
- left: 50%;
39
- transform: translate(-50%, 0);
40
- width: 50%;
41
- }
42
- .chipper .chipper-chip[data-position=bottom] {
43
- height: 4px;
44
- bottom: 2px;
45
- left: 50%;
46
- transform: translate(-50%, 0);
47
- width: 50%;
48
- }
49
- .chipper .chipper-chip .defaultChip,
50
- .chipper .chipper-chip [slot=chipperChip] {
51
- display: block;
52
- height: 100%;
53
- width: 100%;
54
- min-height: 3px;
55
- background-color: var(--chipper-chip-color);
1
+ :root {
2
+ --chipper-gap: var(--sld-gap-tiny);
3
+ --chipper-radius: var(--sld-radius-large);
4
+ --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
5
+ }
6
+
7
+ .chipper {
8
+ position: relative;
9
+ gap: var(--chipper-gap);
10
+ }
11
+ .chipper .chipper-content {
12
+ padding: 0.5rem;
13
+ }
14
+ .chipper .chipper-chip {
15
+ display: block;
16
+ position: absolute;
17
+ z-index: 2;
18
+ border-radius: var(--chipper-radius);
19
+ transition: all 0.25s;
20
+ max-height: 100%;
21
+ background-color: var(--chipper-chip-color);
22
+ }
23
+ .chipper .chipper-chip[data-position=left] {
24
+ top: 2px;
25
+ left: 2px;
26
+ height: 100%;
27
+ width: 3px;
28
+ }
29
+ .chipper .chipper-chip[data-position=right] {
30
+ top: 2px;
31
+ right: 2px;
32
+ height: 130px;
33
+ width: 3px;
34
+ }
35
+ .chipper .chipper-chip[data-position=top] {
36
+ height: 4px;
37
+ top: 2px;
38
+ left: 50%;
39
+ transform: translate(-50%, 0);
40
+ width: 50%;
41
+ }
42
+ .chipper .chipper-chip[data-position=bottom] {
43
+ height: 4px;
44
+ bottom: 2px;
45
+ left: 50%;
46
+ transform: translate(-50%, 0);
47
+ width: 50%;
48
+ }
49
+ .chipper .chipper-chip .defaultChip,
50
+ .chipper .chipper-chip [slot=chipperChip] {
51
+ display: block;
52
+ height: 100%;
53
+ width: 100%;
54
+ min-height: 3px;
55
+ background-color: var(--chipper-chip-color);
56
56
  }