@medyll/idae-slotui-svelte 0.28.0 → 0.29.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.
@@ -26,7 +26,7 @@
26
26
  componentProps = {},
27
27
  keepCartoucheContent = true,
28
28
  showTitleDivider = false,
29
- bordered = true,
29
+ bordered = false,
30
30
  children,
31
31
  cartoucheIcon,
32
32
  cartouchePrimary,
@@ -47,7 +47,9 @@
47
47
  isOpen = false;
48
48
  }
49
49
 
50
- const chevronIcon = !isOpen ? 'chevron-down' : 'chevron-up';
50
+ const chevronIcon = $derived(!isOpen ? 'chevron-down' : 'chevron-up');
51
+
52
+ let Component = $state(component);
51
53
  </script>
52
54
 
53
55
  <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -57,6 +59,7 @@
57
59
  bind:this={element}
58
60
  class="cartouche {className}"
59
61
  data-bordered={bordered ?? false}
62
+ aria-expanded={isOpen}
60
63
  {style}
61
64
  >
62
65
  <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -87,23 +90,24 @@
87
90
  event.preventDefault();
88
91
  event.stopPropagation();
89
92
  }}
90
- class="cartoucheAction"
93
+ class="cartouche-control-actions"
91
94
  >
92
95
  <Slotted child={cartoucheButtons}></Slotted>
93
96
  </div>
94
97
  {/if}
95
98
  <div class="chevron">
96
- <IconButton variant="flat" icon={chevronIcon} />
99
+ <Button variant="flat" icon={chevronIcon} />
97
100
  </div>
98
101
  </div>
99
102
  {#if isOpen || keepCartoucheContent}
100
- <div aria-expanded={isOpen} class="content {classes.content}" transition:slide|global>
101
- {#if component}
102
- <svelte:component this={component} {...componentProps} />
103
+ <div class="content-wrapper" aria-expanded={isOpen}>
104
+ <div aria-expanded={isOpen} class="content {classes.content}" transition:slide>
105
+ {#if Component}
106
+ <Component {...componentProps} />
103
107
  {/if}
104
-
105
108
  <Slotted child={children} />
106
109
  </div>
110
+ </div>
107
111
  {/if}
108
112
  </div>
109
113
 
@@ -120,10 +124,11 @@
120
124
  border-radius: var(--cartouche-radius);
121
125
  background-clip: padding-box;
122
126
  overflow: hidden;
127
+ box-shadow: var(--sld-elevation-1);
123
128
  }
124
129
 
125
- .cartouche[data-bordered=true] {
126
- border: 1px solid var(--cartouche-border);
130
+ .cartouche[aria-expanded=true] {
131
+ box-shadow: var(--sld-elevation-2);
127
132
  }
128
133
 
129
134
  .cartouche.stacked {
@@ -141,11 +146,13 @@
141
146
  }
142
147
 
143
148
  .cartouche .control {
149
+ transition: all 0.25s ease;
144
150
  display: flex;
145
151
  align-items: center;
146
152
  gap: var(--cartouche-control-gap);
147
153
  background-color: var(--cartouche-background-color);
148
154
  padding: auto 0.25rem;
155
+ cursor: pointer;
149
156
  }
150
157
 
151
158
  .cartouche .control {
@@ -197,24 +204,40 @@
197
204
  padding: 0 0.5rem;
198
205
  }
199
206
 
200
- .cartouche .control .chevron {
201
- cursor: pointer;
207
+ .cartouche .control .cartouche-control-actions {
208
+ cursor: default;
202
209
  }
203
210
 
204
- .cartouche .control .divider {
205
- border-bottom: 1px solid var(--cartouche-divider-border);
211
+ .cartouche .control .chevron {
212
+ cursor: pointer;
213
+ padding: 0.5rem;
214
+ align-items: center;
215
+ align-content: center;
206
216
  }
207
217
 
208
218
  .cartouche .content {
219
+ transition: all 0.25s ease;
209
220
  overflow: hidden;
210
221
  background-color: var(--cartouche-background-color);
211
222
  content-visibility: auto;
223
+ padding: 1px;
224
+ padding-top: 0;
225
+ border-radius: 4px;
212
226
  }
213
227
 
214
- .cartouche .content[aria-expanded=false] {
228
+ .cartouche .content-wrapper {
229
+ padding: 1px;
230
+ padding-top: 0;
231
+ border-top-left-radius: 0;
232
+ border-top-right-radius: 0;
233
+ border-top: none !important;
234
+ background-color: var(--cartouche-background-color);
235
+ }
236
+
237
+ .cartouche .content-wrapper[aria-expanded=false] {
215
238
  display: none;
216
239
  }
217
240
 
218
- .cartouche .content[aria-expanded=true] {
219
- border-top: 1px solid var(--cartouche-border);
241
+ .cartouche .content[aria-expanded=false] {
242
+ display: none;
220
243
  }</style>
@@ -13,9 +13,14 @@
13
13
  border-radius: var(--cartouche-radius);
14
14
  background-clip: padding-box;
15
15
  overflow: hidden;
16
+ box-shadow: var(--sld-elevation-1);
17
+
18
+ &[aria-expanded="true"] {
19
+ box-shadow: var(--sld-elevation-2);
20
+ }
16
21
 
17
22
  &[data-bordered="true"] {
18
- border: 1px solid var(--cartouche-border);
23
+ //border: 1px solid var(--cartouche-border);
19
24
  }
20
25
 
21
26
  &.stacked {
@@ -31,12 +36,16 @@
31
36
  }
32
37
 
33
38
  .control {
39
+ @include ui-tall-presets;
40
+ @include ui-transition;
34
41
  display: flex;
35
42
  align-items: center;
36
43
  gap: var(--cartouche-control-gap);
37
44
  background-color: var(--cartouche-background-color);
38
- @include ui-tall-presets;
45
+
39
46
  padding: auto 0.25rem;
47
+ cursor: pointer;
48
+
40
49
  &:hover {
41
50
  background-color: var(--cartouche-background-color-hover);
42
51
  }
@@ -52,24 +61,54 @@
52
61
  padding: 0 0.5rem;
53
62
  }
54
63
 
64
+ .cartouche-control-actions {
65
+ cursor: default;
66
+ }
67
+
55
68
  .chevron {
56
69
  cursor: pointer;
70
+ padding: 0.5rem;
71
+ align-items: center;
72
+ align-content: center;
57
73
  }
58
74
 
59
75
  .divider {
60
- border-bottom: 1px solid var(--cartouche-divider-border);
76
+ // border-bottom: 1px solid var(--cartouche-divider-border);
61
77
  }
62
78
  }
63
79
 
64
80
  .content {
81
+ @include ui-transition;
82
+ &-wrapper {
83
+ padding: 1px;
84
+ padding-top: 0;
85
+ //border: 1px solid var(--cartouche-border, red);
86
+ border-top-left-radius: 0;
87
+ border-top-right-radius: 0;
88
+ border-top: none !important;
89
+ background-color: var(--cartouche-background-color);
90
+ &[aria-expanded="false"] {
91
+ display: none;
92
+ }
93
+ &[aria-expanded="true"] {
94
+ //border-top: 1px solid var(--cartouche-border);
95
+ }
96
+ }
97
+
65
98
  overflow: hidden;
66
99
  background-color: var(--cartouche-background-color);
67
100
  content-visibility: auto;
101
+ padding: 1px;
102
+ padding-top: 0;
103
+ border-radius: 4px;
104
+ //border: 1px solid var(--cartouche-border, red);
105
+ //border-top: none !important;
106
+
68
107
  &[aria-expanded="false"] {
69
108
  display: none;
70
109
  }
71
110
  &[aria-expanded="true"] {
72
- border-top: 1px solid var(--cartouche-border);
111
+ //border-top: 1px solid var(--cartouche-border);
73
112
  }
74
113
  }
75
114
  }
@@ -71,7 +71,7 @@
71
71
  }
72
72
 
73
73
  .checkbox {
74
- transition: all 0.2s ease;
74
+ transition: all 0.25s ease;
75
75
  appearance: none;
76
76
  outline: none;
77
77
  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
package/dist/index.d.ts CHANGED
@@ -185,6 +185,9 @@ export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.sve
185
185
  export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
186
186
  export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
187
187
  export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
188
+ export * from './styles/slotuisheet/utils.js';
189
+ export * from './styles/slotuisheet/types.js';
190
+ export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
188
191
  export * from './navigation/tabs/types.js';
189
192
  export { default as Tabs } from './navigation/tabs/Tabs.svelte';
190
193
  export * from './navigation/drawer/types.js';
@@ -208,9 +211,6 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
208
211
  export { default as DataListHead } from './data/dataList/DataListHead.svelte';
209
212
  export { default as DataListCell } from './data/dataList/DataListCell.svelte';
210
213
  export { default as DataList } from './data/dataList/DataList.svelte';
211
- export * from './styles/slotuisheet/utils.js';
212
- export * from './styles/slotuisheet/types.js';
213
- export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
214
214
  export * from './controls/textfield/types.js';
215
215
  export { default as TextField } from './controls/textfield/TextField.svelte';
216
216
  export * from './controls/switch/types.js';
package/dist/index.js CHANGED
@@ -186,6 +186,9 @@ export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.sve
186
186
  export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
187
187
  export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
188
188
  export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
189
+ export * from './styles/slotuisheet/utils.js';
190
+ export * from './styles/slotuisheet/types.js';
191
+ export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
189
192
  export * from './navigation/tabs/types.js';
190
193
  export { default as Tabs } from './navigation/tabs/Tabs.svelte';
191
194
  export * from './navigation/drawer/types.js';
@@ -209,9 +212,6 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
209
212
  export { default as DataListHead } from './data/dataList/DataListHead.svelte';
210
213
  export { default as DataListCell } from './data/dataList/DataListCell.svelte';
211
214
  export { default as DataList } from './data/dataList/DataList.svelte';
212
- export * from './styles/slotuisheet/utils.js';
213
- export * from './styles/slotuisheet/types.js';
214
- export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
215
215
  export * from './controls/textfield/types.js';
216
216
  export { default as TextField } from './controls/textfield/TextField.svelte';
217
217
  export * from './controls/switch/types.js';
@@ -11,9 +11,10 @@
11
11
  border-radius: var(--cartouche-radius);
12
12
  background-clip: padding-box;
13
13
  overflow: hidden;
14
+ box-shadow: var(--sld-elevation-1);
14
15
  }
15
- .cartouche[data-bordered=true] {
16
- border: 1px solid var(--cartouche-border);
16
+ .cartouche[aria-expanded=true] {
17
+ box-shadow: var(--sld-elevation-2);
17
18
  }
18
19
  .cartouche.stacked {
19
20
  border-radius: 0;
@@ -27,11 +28,13 @@
27
28
  border-bottom-right-radius: var(--cartouche-radius);
28
29
  }
29
30
  .cartouche .control {
31
+ transition: all 0.25s ease;
30
32
  display: flex;
31
33
  align-items: center;
32
34
  gap: var(--cartouche-control-gap);
33
35
  background-color: var(--cartouche-background-color);
34
36
  padding: auto 0.25rem;
37
+ cursor: pointer;
35
38
  }
36
39
  .cartouche .control {
37
40
  --preset-tall: var(--sld-tall-small);
@@ -71,20 +74,35 @@
71
74
  cursor: pointer;
72
75
  padding: 0 0.5rem;
73
76
  }
77
+ .cartouche .control .cartouche-control-actions {
78
+ cursor: default;
79
+ }
74
80
  .cartouche .control .chevron {
75
81
  cursor: pointer;
76
- }
77
- .cartouche .control .divider {
78
- border-bottom: 1px solid var(--cartouche-divider-border);
82
+ padding: 0.5rem;
83
+ align-items: center;
84
+ align-content: center;
79
85
  }
80
86
  .cartouche .content {
87
+ transition: all 0.25s ease;
81
88
  overflow: hidden;
82
89
  background-color: var(--cartouche-background-color);
83
90
  content-visibility: auto;
91
+ padding: 1px;
92
+ padding-top: 0;
93
+ border-radius: 4px;
94
+ }
95
+ .cartouche .content-wrapper {
96
+ padding: 1px;
97
+ padding-top: 0;
98
+ border-top-left-radius: 0;
99
+ border-top-right-radius: 0;
100
+ border-top: none !important;
101
+ background-color: var(--cartouche-background-color);
84
102
  }
85
- .cartouche .content[aria-expanded=false] {
103
+ .cartouche .content-wrapper[aria-expanded=false] {
86
104
  display: none;
87
105
  }
88
- .cartouche .content[aria-expanded=true] {
89
- border-top: 1px solid var(--cartouche-border);
106
+ .cartouche .content[aria-expanded=false] {
107
+ display: none;
90
108
  }
@@ -11,9 +11,10 @@
11
11
  border-radius: var(--cartouche-radius);
12
12
  background-clip: padding-box;
13
13
  overflow: hidden;
14
+ box-shadow: var(--sld-elevation-1);
14
15
  }
15
- .cartouche[data-bordered=true] {
16
- border: 1px solid var(--cartouche-border);
16
+ .cartouche[aria-expanded=true] {
17
+ box-shadow: var(--sld-elevation-2);
17
18
  }
18
19
  .cartouche.stacked {
19
20
  border-radius: 0;
@@ -27,11 +28,13 @@
27
28
  border-bottom-right-radius: var(--cartouche-radius);
28
29
  }
29
30
  .cartouche .control {
31
+ transition: all 0.25s ease;
30
32
  display: flex;
31
33
  align-items: center;
32
34
  gap: var(--cartouche-control-gap);
33
35
  background-color: var(--cartouche-background-color);
34
36
  padding: auto 0.25rem;
37
+ cursor: pointer;
35
38
  }
36
39
  .cartouche .control {
37
40
  --preset-tall: var(--sld-tall-small);
@@ -71,20 +74,35 @@
71
74
  cursor: pointer;
72
75
  padding: 0 0.5rem;
73
76
  }
77
+ .cartouche .control .cartouche-control-actions {
78
+ cursor: default;
79
+ }
74
80
  .cartouche .control .chevron {
75
81
  cursor: pointer;
76
- }
77
- .cartouche .control .divider {
78
- border-bottom: 1px solid var(--cartouche-divider-border);
82
+ padding: 0.5rem;
83
+ align-items: center;
84
+ align-content: center;
79
85
  }
80
86
  .cartouche .content {
87
+ transition: all 0.25s ease;
81
88
  overflow: hidden;
82
89
  background-color: var(--cartouche-background-color);
83
90
  content-visibility: auto;
91
+ padding: 1px;
92
+ padding-top: 0;
93
+ border-radius: 4px;
94
+ }
95
+ .cartouche .content-wrapper {
96
+ padding: 1px;
97
+ padding-top: 0;
98
+ border-top-left-radius: 0;
99
+ border-top-right-radius: 0;
100
+ border-top: none !important;
101
+ background-color: var(--cartouche-background-color);
84
102
  }
85
- .cartouche .content[aria-expanded=false] {
103
+ .cartouche .content-wrapper[aria-expanded=false] {
86
104
  display: none;
87
105
  }
88
- .cartouche .content[aria-expanded=true] {
89
- border-top: 1px solid var(--cartouche-border);
106
+ .cartouche .content[aria-expanded=false] {
107
+ display: none;
90
108
  }
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  .checkbox {
16
- transition: all 0.2s ease;
16
+ transition: all 0.25s ease;
17
17
  appearance: none;
18
18
  outline: none;
19
19
  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  .checkbox {
16
- transition: all 0.2s ease;
16
+ transition: all 0.25s ease;
17
17
  appearance: none;
18
18
  outline: none;
19
19
  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
@@ -554,33 +554,6 @@ dialog.window .ctrlZone {
554
554
  width: var(--toolbar-vertical-divider-width);
555
555
  }
556
556
 
557
- /** taskbar.scss ----------------*/
558
- :root {
559
- --taskbar-grid-gap: var(--sld-gap-tiny);
560
- --taskbar-background-color: rgba(255, 255, 255, 0.5);
561
- --taskbar-backdrop-filter: blur(20px);
562
- --taskbar-min-height: 48px;
563
- --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
564
- --taskbar-box-shadow: var(--sld-elevation-3);
565
- }
566
-
567
- .taskbar {
568
- display: flex;
569
- align-items: center;
570
- grid-gap: var(--taskbar-grid-gap);
571
- background-size: auto;
572
- background-color: var(--taskbar-background-color);
573
- --moz-backdrop-filter: var(--taskbar-backdrop-filter);
574
- backdrop-filter: var(--taskbar-backdrop-filter);
575
- min-height: var(--taskbar-min-height);
576
- border-bottom: 1px solid var(--taskbar-border-bottom);
577
- box-shadow: var(--taskbar-box-shadow);
578
- box-sizing: border-box;
579
- }
580
- .taskbar-main {
581
- flex: 1;
582
- }
583
-
584
557
  /** toggle-bar.scss ----------------*/
585
558
  :root {
586
559
  --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
@@ -624,6 +597,33 @@ dialog.window .ctrlZone {
624
597
  overflow: hidden;
625
598
  }
626
599
 
600
+ /** taskbar.scss ----------------*/
601
+ :root {
602
+ --taskbar-grid-gap: var(--sld-gap-tiny);
603
+ --taskbar-background-color: rgba(255, 255, 255, 0.5);
604
+ --taskbar-backdrop-filter: blur(20px);
605
+ --taskbar-min-height: 48px;
606
+ --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
607
+ --taskbar-box-shadow: var(--sld-elevation-3);
608
+ }
609
+
610
+ .taskbar {
611
+ display: flex;
612
+ align-items: center;
613
+ grid-gap: var(--taskbar-grid-gap);
614
+ background-size: auto;
615
+ background-color: var(--taskbar-background-color);
616
+ --moz-backdrop-filter: var(--taskbar-backdrop-filter);
617
+ backdrop-filter: var(--taskbar-backdrop-filter);
618
+ min-height: var(--taskbar-min-height);
619
+ border-bottom: 1px solid var(--taskbar-border-bottom);
620
+ box-shadow: var(--taskbar-box-shadow);
621
+ box-sizing: border-box;
622
+ }
623
+ .taskbar-main {
624
+ flex: 1;
625
+ }
626
+
627
627
  /** boot-menu.scss ----------------*/
628
628
  :root {
629
629
  --boot-menu-background-color: rgba(90, 67, 52, 0.9);
@@ -3272,7 +3272,7 @@ label {
3272
3272
  }
3273
3273
 
3274
3274
  .checkbox {
3275
- transition: all 0.2s ease;
3275
+ transition: all 0.25s ease;
3276
3276
  appearance: none;
3277
3277
  outline: none;
3278
3278
  border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
@@ -4792,9 +4792,10 @@ hr.vertical {
4792
4792
  border-radius: var(--cartouche-radius);
4793
4793
  background-clip: padding-box;
4794
4794
  overflow: hidden;
4795
+ box-shadow: var(--sld-elevation-1);
4795
4796
  }
4796
- .cartouche[data-bordered=true] {
4797
- border: 1px solid var(--cartouche-border);
4797
+ .cartouche[aria-expanded=true] {
4798
+ box-shadow: var(--sld-elevation-2);
4798
4799
  }
4799
4800
  .cartouche.stacked {
4800
4801
  border-radius: 0;
@@ -4808,11 +4809,13 @@ hr.vertical {
4808
4809
  border-bottom-right-radius: var(--cartouche-radius);
4809
4810
  }
4810
4811
  .cartouche .control {
4812
+ transition: all 0.25s ease;
4811
4813
  display: flex;
4812
4814
  align-items: center;
4813
4815
  gap: var(--cartouche-control-gap);
4814
4816
  background-color: var(--cartouche-background-color);
4815
4817
  padding: auto 0.25rem;
4818
+ cursor: pointer;
4816
4819
  }
4817
4820
  .cartouche .control {
4818
4821
  --preset-tall: var(--sld-tall-small);
@@ -4852,22 +4855,37 @@ hr.vertical {
4852
4855
  cursor: pointer;
4853
4856
  padding: 0 0.5rem;
4854
4857
  }
4858
+ .cartouche .control .cartouche-control-actions {
4859
+ cursor: default;
4860
+ }
4855
4861
  .cartouche .control .chevron {
4856
4862
  cursor: pointer;
4857
- }
4858
- .cartouche .control .divider {
4859
- border-bottom: 1px solid var(--cartouche-divider-border);
4863
+ padding: 0.5rem;
4864
+ align-items: center;
4865
+ align-content: center;
4860
4866
  }
4861
4867
  .cartouche .content {
4868
+ transition: all 0.25s ease;
4862
4869
  overflow: hidden;
4863
4870
  background-color: var(--cartouche-background-color);
4864
4871
  content-visibility: auto;
4872
+ padding: 1px;
4873
+ padding-top: 0;
4874
+ border-radius: 4px;
4865
4875
  }
4866
- .cartouche .content[aria-expanded=false] {
4876
+ .cartouche .content-wrapper {
4877
+ padding: 1px;
4878
+ padding-top: 0;
4879
+ border-top-left-radius: 0;
4880
+ border-top-right-radius: 0;
4881
+ border-top: none !important;
4882
+ background-color: var(--cartouche-background-color);
4883
+ }
4884
+ .cartouche .content-wrapper[aria-expanded=false] {
4867
4885
  display: none;
4868
4886
  }
4869
- .cartouche .content[aria-expanded=true] {
4870
- border-top: 1px solid var(--cartouche-border);
4887
+ .cartouche .content[aria-expanded=false] {
4888
+ display: none;
4871
4889
  }
4872
4890
 
4873
4891
  /** breadcrumb.scss ----------------*/
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  @mixin ui-transition {
42
- transition: all 0.2s ease;
42
+ transition: all 0.25s ease;
43
43
  }
44
44
  @mixin ui-tall-presets {
45
45
  & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medyll/idae-slotui-svelte",
3
- "version": "0.28.0",
3
+ "version": "0.29.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.28.0",
91
- "@medyll/idae-engine": "^1.26.0",
90
+ "@medyll/idae-be": "^0.29.0",
91
+ "@medyll/idae-engine": "^1.27.0",
92
92
  "d3": "^7.9.0",
93
93
  "lerna": "^8.1.8",
94
94
  "npm-check-updates": "^17.0.2",