@synergy-design-system/mcp 2.4.1 → 2.5.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 (23) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-accordion/component.ts +1 -1
  4. package/metadata/packages/components/components/syn-details/component.styles.ts +114 -16
  5. package/metadata/packages/components/components/syn-details/component.ts +3 -3
  6. package/metadata/packages/components/static/CHANGELOG.md +18 -0
  7. package/metadata/packages/styles/index.css +1 -1
  8. package/metadata/packages/styles/link-list.css +1 -1
  9. package/metadata/packages/styles/link.css +1 -1
  10. package/metadata/packages/styles/tables.css +1 -1
  11. package/metadata/packages/styles/typography.css +1 -1
  12. package/metadata/packages/tokens/CHANGELOG.md +2 -0
  13. package/metadata/packages/tokens/dark.css +1 -1
  14. package/metadata/packages/tokens/index.js +1 -1
  15. package/metadata/packages/tokens/light.css +1 -1
  16. package/metadata/packages/tokens/sick2018_dark.css +1 -1
  17. package/metadata/packages/tokens/sick2018_light.css +1 -1
  18. package/metadata/packages/tokens/sick2025_dark.css +1 -1
  19. package/metadata/packages/tokens/sick2025_light.css +1 -1
  20. package/metadata/static/components/syn-accordion/docs.md +45 -0
  21. package/metadata/static/components/syn-details/docs.md +46 -29
  22. package/package.json +4 -4
  23. package/metadata/packages/components/components/syn-details/component.custom.styles.ts +0 -133
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1191](https://github.com/synergy-design-system/synergy-design-system/pull/1191) [`30f3b74`](https://github.com/synergy-design-system/synergy-design-system/commit/30f3b74891cf693735a792a901c5b23b016c71b8) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
8
+
9
+ feat: ✨ Add new size `small` to `<syn-details>` and `<syn-accordion>` (#1154)
10
+
11
+ The `<syn-details>` element was the only element with a `size` property that had no `small` variant.
12
+ This was now added for consistency with other elements that have a `size` property.
13
+
14
+ This can be used via `<syn-details size="small"></syn-details>` or `<syn-accordion size="small"></syn-accordion>`.
15
+
3
16
  ## 2.4.1
4
17
 
5
18
  ### Patch Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- c8bcf282abcae6742354cf271ba13252
1
+ 25ccf6b07d0b19d12398dc3872879175
package/metadata/packages/components/components/syn-accordion/component.ts CHANGED
@@ -38,7 +38,7 @@ export default class SynAccordion extends SynergyElement {
38
38
  @property({ reflect: true, type: Boolean }) contained = false;
39
39
 
40
40
  /** The size that should be applied to all slotted `<syn-details>` elements */
41
- @property({ reflect: true }) size: 'medium' | 'large' = 'medium';
41
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
42
42
 
43
43
  private adjustDetailsSize() {
44
44
  this.detailsInDefaultSlot.forEach(detail => {
package/metadata/packages/components/components/syn-details/component.styles.ts CHANGED
@@ -2,30 +2,43 @@
2
2
  import { css } from 'lit';
3
3
 
4
4
  export default css`
5
- /* stylelint-disable */
6
5
  :host {
6
+ /* Size-dependent custom properties (default to medium values) */
7
+ --details-header-padding: var(--syn-spacing-medium-large) 0;
8
+ --details-content-padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
9
+ --details-summary-font: var(--syn-body-medium-bold);
10
+ --details-content-font-size: var(--syn-font-size-small);
11
+ --details-icon-size: var(--syn-spacing-large);
12
+ --details-slotted-icon-size: var(--syn-spacing-large);
13
+
14
+ /* Contained variant custom properties */
15
+ --details-header-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large);
16
+ --details-content-padding-contained: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
17
+
7
18
  display: block;
8
19
  }
9
20
 
10
21
  .details {
11
- border: solid 1px var(--syn-color-neutral-200);
12
- border-radius: var(--syn-border-radius-medium);
13
- background-color: var(--syn-color-neutral-0);
22
+ background-color: transparent;
23
+ border: 1px solid var(--syn-panel-border-color);
24
+ border-radius: var(--syn-border-radius-none);
25
+ border-width: 0 0 var(--syn-border-width-small);
14
26
  overflow-anchor: none;
15
27
  }
16
28
 
29
+ /** #429: Use token for opacity */
17
30
  .details--disabled {
18
- opacity: 0.5;
31
+ opacity: var(--syn-opacity-50);
19
32
  }
20
33
 
21
34
  .details__header {
22
- display: flex;
23
35
  align-items: center;
24
36
  border-radius: inherit;
25
- padding: var(--syn-spacing-medium);
26
- user-select: none;
27
- -webkit-user-select: none;
28
37
  cursor: pointer;
38
+ display: flex;
39
+ gap: var(--syn-spacing-medium);
40
+ padding: var(--details-header-padding);
41
+ user-select: none;
29
42
  }
30
43
 
31
44
  .details__header::-webkit-details-marker {
@@ -46,25 +59,41 @@ export default css`
46
59
  }
47
60
 
48
61
  .details--disabled .details__header:focus-visible {
49
- outline: none;
50
62
  box-shadow: none;
63
+ outline: none;
51
64
  }
52
65
 
53
66
  .details__summary {
54
- flex: 1 1 auto;
55
- display: flex;
56
67
  align-items: center;
68
+ color: var(--syn-typography-color-text);
69
+ display: flex;
70
+ flex: 1 1 auto;
71
+ font: var(--details-summary-font);
57
72
  }
58
73
 
59
74
  .details__summary-icon {
60
- flex: 0 0 auto;
61
- display: flex;
62
75
  align-items: center;
76
+ align-self: flex-start;
77
+ color: var(--syn-color-neutral-950);
78
+ display: flex;
79
+ flex: 0 0 auto;
80
+ font-size: var(--details-icon-size);
81
+ position: relative;
82
+
83
+ /**
84
+ * As we are using an alignment of "start" instead of "center" make sure
85
+ * the arrow starts on the same visual line as the first line of headline text
86
+ */
87
+ top: 2px;
63
88
  transition: var(--syn-transition-medium) rotate ease;
64
89
  }
65
90
 
91
+ /**
92
+ * As we are using top/down arrows for the details element,
93
+ * we have to adjust the rotation of the icon when the details is open.
94
+ */
66
95
  .details--open .details__summary-icon {
67
- rotate: 90deg;
96
+ rotate: var(--syn-details-open-rotation);
68
97
  }
69
98
 
70
99
  .details--open slot[name='expand-icon'],
@@ -78,6 +107,75 @@ export default css`
78
107
 
79
108
  .details__content {
80
109
  display: block;
81
- padding: var(--syn-spacing-medium);
110
+ font-size: var(--details-content-font-size);
111
+ line-height: var(--syn-line-height-normal);
112
+ padding: var(--details-content-padding);
113
+ }
114
+
115
+ /**
116
+ * Size variants
117
+ */
118
+ .details--size-small {
119
+ --details-header-padding: var(--syn-spacing-small) 0;
120
+ --details-content-padding: var(--syn-spacing-small) 0 var(--syn-spacing-medium-large);
121
+ --details-summary-font: var(--syn-body-small-bold);
122
+ --details-content-font-size: var(--syn-font-size-x-small);
123
+ --details-icon-size: var(--syn-spacing-medium-large);
124
+ --details-slotted-icon-size: var(--syn-spacing-medium-large);
125
+ --details-header-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large);
126
+ --details-content-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-medium-large);
127
+ }
128
+
129
+ /* stylelint-disable-next-line no-descending-specificity */
130
+ .details--size-small .details__header {
131
+ min-height: var(--syn-spacing-large);
132
+ }
133
+
134
+ .details--size-large {
135
+ --details-header-padding: var(--syn-spacing-large) 0;
136
+ --details-content-padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
137
+ --details-summary-font: var(--syn-body-large-bold);
138
+ --details-content-font-size: var(--syn-font-size-medium);
139
+ --details-icon-size: var(--syn-spacing-x-large);
140
+ --details-slotted-icon-size: var(--syn-spacing-x-large);
141
+ --details-header-padding-contained: var(--syn-spacing-large);
142
+ --details-content-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
143
+ }
144
+
145
+ .details__summary::slotted(syn-icon) {
146
+ /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
147
+ flex-shrink: 0;
148
+ font-size: var(--details-slotted-icon-size);
149
+ margin-right: var(--syn-spacing-small);
150
+ }
151
+
152
+ /**
153
+ * Add a visually visible hover effect to the summary element
154
+ */
155
+ .details:not(.details--disabled) .details__header:hover .details__summary,
156
+ .details:not(.details--disabled) .details__header:hover .details__summary-icon {
157
+ color: var(--syn-interactive-quiet-color-hover);
158
+ }
159
+
160
+ /**
161
+ * Contained style
162
+ */
163
+ .details--contained {
164
+ background-color: var(--syn-panel-background-color);
165
+ border-radius: var(--syn-border-radius-medium);
166
+ border-width: var(--syn-panel-border-width);
167
+ }
168
+
169
+ /* stylelint-disable-next-line no-descending-specificity */
170
+ .details--contained .details__header {
171
+ padding: var(--details-header-padding-contained);
172
+ }
173
+
174
+ .details--contained .details__content {
175
+ padding: var(--details-content-padding-contained);
176
+ }
177
+
178
+ .details--contained .details__header:focus-visible {
179
+ border-radius: var(--syn-border-radius-medium);
82
180
  }
83
181
  `;
package/metadata/packages/components/components/syn-details/component.ts CHANGED
@@ -11,7 +11,6 @@ import componentStyles from '../../styles/component.styles.js';
11
11
  import SynergyElement from '../../internal/synergy-element.js';
12
12
  import SynIcon from '../icon/icon.component.js';
13
13
  import styles from './details.styles.js';
14
- import customStyles from './details.custom.styles.js';
15
14
  import type { CSSResultGroup } from 'lit';
16
15
  import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
17
16
 
@@ -47,7 +46,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
47
46
  */
48
47
  @enableDefaultSettings('SynDetails')
49
48
  export default class SynDetails extends SynergyElement {
50
- static styles: CSSResultGroup = [componentStyles, styles, customStyles];
49
+ static styles: CSSResultGroup = [componentStyles, styles];
51
50
 
52
51
  static dependencies = {
53
52
  'syn-icon': SynIcon
@@ -78,7 +77,7 @@ export default class SynDetails extends SynergyElement {
78
77
  @property({ type: Boolean, reflect: true }) contained = false;
79
78
 
80
79
  /** The details's size. */
81
- @property({ reflect: true }) size: 'medium' | 'large' = 'medium';
80
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
82
81
 
83
82
  firstUpdated() {
84
83
  this.body.style.height = this.open ? 'auto' : '0';
@@ -205,6 +204,7 @@ export default class SynDetails extends SynergyElement {
205
204
  part="base"
206
205
  class=${classMap({
207
206
  details: true,
207
+ 'details--size-small': this.size === 'small',
208
208
  'details--size-medium': this.size === 'medium',
209
209
  'details--size-large': this.size === 'large',
210
210
  'details--open': this.open,
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1191](https://github.com/synergy-design-system/synergy-design-system/pull/1191) [`30f3b74`](https://github.com/synergy-design-system/synergy-design-system/commit/30f3b74891cf693735a792a901c5b23b016c71b8) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
8
+
9
+ feat: ✨ Add new size `small` to `<syn-details>` and `<syn-accordion>` (#1154)
10
+
11
+ The `<syn-details>` element was the only element with a `size` property that had no `small` variant.
12
+ This was now added for consistency with other elements that have a `size` property.
13
+
14
+ This can be used via `<syn-details size="small"></syn-details>` or `<syn-accordion size="small"></syn-accordion>`.
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies []:
19
+ - @synergy-design-system/tokens@3.3.0
20
+
3
21
  ## 3.2.1
4
22
 
5
23
  ### Patch Changes
package/metadata/packages/styles/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 2.0.0
2
+ * @synergy-design-system/styles version 2.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/metadata/packages/styles/link-list.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 2.0.0
2
+ * @synergy-design-system/styles version 2.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/metadata/packages/styles/link.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 2.0.0
2
+ * @synergy-design-system/styles version 2.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/metadata/packages/styles/tables.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 2.0.0
2
+ * @synergy-design-system/styles version 2.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/metadata/packages/styles/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 2.0.0
2
+ * @synergy-design-system/styles version 2.0.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.3.0
4
+
3
5
  ## 3.2.1
4
6
 
5
7
  ### Patch Changes
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.0
2
+ * @synergy-design-system/tokens version 3.2.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/metadata/static/components/syn-accordion/docs.md CHANGED
@@ -306,6 +306,51 @@ Use the disable attribute to prevent the details from expanding.
306
306
  Use the size attribute to change a detail’s size. The size attribute should not be mixed within an accordion
307
307
 
308
308
  ```html
309
+ <syn-accordion class="accordion-size" size="small">
310
+ <syn-details size="small">
311
+ <span slot="summary">Accordion Element</span>
312
+ <h3
313
+ style="
314
+ margin: 0 0 var(--syn-spacing-x-small);
315
+ font: var(--syn-body-small-bold);
316
+ "
317
+ >
318
+ Subheadline
319
+ </h3>
320
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
321
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
322
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
323
+ </syn-details>
324
+ <syn-details size="small">
325
+ <span slot="summary">Accordion Element</span>
326
+ <h3
327
+ style="
328
+ margin: 0 0 var(--syn-spacing-x-small);
329
+ font: var(--syn-body-small-bold);
330
+ "
331
+ >
332
+ Subheadline
333
+ </h3>
334
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
335
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
336
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
337
+ </syn-details>
338
+ <syn-details size="small">
339
+ <span slot="summary">Accordion Element</span>
340
+ <h3
341
+ style="
342
+ margin: 0 0 var(--syn-spacing-x-small);
343
+ font: var(--syn-body-small-bold);
344
+ "
345
+ >
346
+ Subheadline
347
+ </h3>
348
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
349
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
350
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
351
+ </syn-details>
352
+ </syn-accordion>
353
+
309
354
  <syn-accordion class="accordion-size" size="medium">
310
355
  <syn-details size="medium">
311
356
  <span slot="summary">Accordion Element</span>
package/metadata/static/components/syn-details/docs.md CHANGED
@@ -149,35 +149,52 @@ Use the disable attribute to prevent the details from expanding.
149
149
  Use the size attribute to change a detail’s size.
150
150
 
151
151
  ```html
152
- <syn-details size="medium" contained="">
153
- <span slot="summary">Toggle Me</span>
154
- <h3
155
- style="
156
- margin: 0 0 var(--syn-spacing-x-small);
157
- font: var(--syn-body-small-bold);
158
- "
159
- >
160
- Subheadline
161
- </h3>
162
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
163
- eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
164
- voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
165
- </syn-details>
166
- <br />
167
- <syn-details size="large" contained="">
168
- <span slot="summary">Toggle Me</span>
169
- <h3
170
- style="
171
- margin: 0 0 var(--syn-spacing-x-small);
172
- font: var(--syn-body-small-bold);
173
- "
174
- >
175
- Subheadline
176
- </h3>
177
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
178
- eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
179
- voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
180
- </syn-details>
152
+ <div
153
+ style="display: flex; gap: var(--syn-spacing-x-small); flex-direction: column"
154
+ >
155
+ <syn-details size="small" contained="">
156
+ <span slot="summary">Toggle Me</span>
157
+ <h3
158
+ style="
159
+ margin: 0 0 var(--syn-spacing-x-small);
160
+ font: var(--syn-body-x-small-bold);
161
+ "
162
+ >
163
+ Subheadline
164
+ </h3>
165
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
166
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
167
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
168
+ </syn-details>
169
+ <syn-details size="medium" contained="">
170
+ <span slot="summary">Toggle Me</span>
171
+ <h3
172
+ style="
173
+ margin: 0 0 var(--syn-spacing-x-small);
174
+ font: var(--syn-body-small-bold);
175
+ "
176
+ >
177
+ Subheadline
178
+ </h3>
179
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
180
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
181
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
182
+ </syn-details>
183
+ <syn-details size="large" contained="">
184
+ <span slot="summary">Toggle Me</span>
185
+ <h3
186
+ style="
187
+ margin: 0 0 var(--syn-spacing-x-small);
188
+ font: var(--syn-body-medium-bold);
189
+ "
190
+ >
191
+ Subheadline
192
+ </h3>
193
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
194
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
195
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
196
+ </syn-details>
197
+ </div>
181
198
  ```
182
199
 
183
200
  ---
package/package.json CHANGED
@@ -28,12 +28,12 @@
28
28
  "serve-handler": "^6.1.6",
29
29
  "ts-jest": "^29.4.6",
30
30
  "typescript": "^5.9.3",
31
- "@synergy-design-system/components": "3.2.1",
32
- "@synergy-design-system/fonts": "1.0.3",
31
+ "@synergy-design-system/components": "3.3.0",
33
32
  "@synergy-design-system/docs": "0.1.0",
34
33
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
35
34
  "@synergy-design-system/styles": "2.0.1",
36
- "@synergy-design-system/tokens": "^3.2.1"
35
+ "@synergy-design-system/tokens": "^3.3.0",
36
+ "@synergy-design-system/fonts": "1.0.3"
37
37
  },
38
38
  "exports": {
39
39
  ".": {
@@ -67,7 +67,7 @@
67
67
  "directory": "packages/mcp"
68
68
  },
69
69
  "type": "module",
70
- "version": "2.4.1",
70
+ "version": "2.5.0",
71
71
  "scripts": {
72
72
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
73
73
  "build:all": "pnpm run build && pnpm run build:storybook",
package/metadata/packages/components/components/syn-details/component.custom.styles.ts DELETED
@@ -1,133 +0,0 @@
1
- import { css } from 'lit';
2
-
3
- export default css`
4
- .details {
5
- background-color: unset;
6
- border-color: var(--syn-panel-border-color);
7
- border-radius: var(--syn-border-radius-none);
8
- border-width: 0 0 var(--syn-border-width-small);
9
- }
10
-
11
- /** #429: Use token for opacity */
12
- .details--disabled {
13
- opacity: var(--syn-opacity-50);
14
- }
15
-
16
- .details__summary-icon {
17
- align-self: flex-start;
18
- color: var(--syn-color-neutral-950);
19
- font-size: var(--syn-spacing-large);
20
-
21
- /**
22
- * As we are using an alignment of "start" instead of "center" make sure
23
- * the arrow starts on the same visual line as the first line of headline text
24
- */
25
- position: relative;
26
- top: 2px;
27
- }
28
-
29
- .details .details__summary {
30
- color: var(--syn-typography-color-text);
31
- }
32
-
33
- .details__header {
34
- gap: var(--syn-spacing-medium);
35
- }
36
-
37
- /**
38
- * As we are using top/down arrows for the details element,
39
- * we have to adjust the rotation of the icon when the details is open.
40
- */
41
- .details--open .details__summary-icon {
42
- rotate: var(--syn-details-open-rotation);
43
- }
44
-
45
- /**
46
- * Adjustments for medium variant
47
- */
48
- .details--size-medium .details__header {
49
- padding: var(--syn-spacing-medium-large) 0;
50
- }
51
-
52
- .details--size-medium .details__content {
53
- font-size: var(--syn-font-size-small);
54
- line-height: var(--syn-line-height-normal);
55
- padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
56
- }
57
-
58
- .details--size-medium .details__summary {
59
- font: var(--syn-body-medium-bold);
60
- }
61
-
62
- .details--size-medium .details__summary::slotted(syn-icon) {
63
- /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
64
- flex-shrink: 0;
65
- font-size: var(--syn-spacing-large);
66
- margin-right: var(--syn-spacing-small);
67
- }
68
-
69
- /**
70
- * Adjustment for large variant
71
- */
72
- .details--size-large .details__header {
73
- padding: var(--syn-spacing-large) 0;
74
- }
75
-
76
- .details--size-large .details__content {
77
- font-size: var(--syn-font-size-medium);
78
- line-height: var(--syn-line-height-normal);
79
- padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
80
- }
81
-
82
- .details--size-large .details__summary {
83
- font: var(--syn-body-large-bold);
84
- }
85
-
86
- .details--size-large .details__summary-icon {
87
- font-size: var(--syn-spacing-x-large);
88
- }
89
-
90
- .details--size-large .details__summary::slotted(syn-icon) {
91
- /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
92
- flex-shrink: 0;
93
- font-size: var(--syn-spacing-x-large);
94
- margin-right: var(--syn-spacing-small);
95
- }
96
-
97
- /**
98
- * Add a visually visible hover effect to the summary element
99
- */
100
- .details:not(.details--disabled) .details__header:hover .details__summary,
101
- .details:not(.details--disabled) .details__header:hover .details__summary-icon {
102
- color: var(--syn-color-primary-700);
103
- }
104
-
105
- /**
106
- * Contained style
107
- */
108
- .details--contained {
109
- background-color: var(--syn-panel-background-color);
110
- border-radius: var(--syn-border-radius-medium);
111
- border-width: var(--syn-panel-border-width);
112
- }
113
-
114
- .details--contained .details__header:focus-visible {
115
- border-radius: var(--syn-border-radius-medium);
116
- }
117
-
118
- .details--size-medium.details--contained .details__header {
119
- padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);
120
- }
121
-
122
- .details--size-medium.details--contained .details__content {
123
- padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
124
- }
125
-
126
- .details--size-large.details--contained .details__header {
127
- padding: var(--syn-spacing-large);
128
- }
129
-
130
- .details--size-large.details--contained .details__content {
131
- padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
132
- }
133
- `;