@sbb-esta/lyne-elements-dev 4.7.0-dev.1773138326 → 4.7.0-dev.1773148895

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 (8) hide show
  1. package/core/styles/core.scss +5 -11
  2. package/core.css +11 -9
  3. package/development/icon-sidebar/icon-sidebar/icon-sidebar.component.js +7 -4
  4. package/icon-sidebar/icon-sidebar/icon-sidebar.component.js +11 -11
  5. package/off-brand-theme.css +11 -9
  6. package/package.json +2 -2
  7. package/safety-theme.css +11 -9
  8. package/standard-theme.css +11 -9
package/core/styles/core.scss CHANGED
@@ -107,6 +107,9 @@ $theme: 'standard' !default;
107
107
  @use '../../footer/footer.global' as footer with (
108
108
  $theme: $theme
109
109
  );
110
+ @use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
111
+ $theme: $theme
112
+ );
110
113
  @use '../../option/option/option.global' as option with (
111
114
  $theme: $theme
112
115
  );
@@ -179,6 +182,7 @@ $theme: 'standard' !default;
179
182
  @include flip-card.base;
180
183
  @include flip-card-details.base;
181
184
  @include footer.base;
185
+ @include icon-sidebar.base;
182
186
  @include option.base;
183
187
  @include option-hint.base;
184
188
  @include optgroup.base;
@@ -311,6 +315,7 @@ $theme: 'standard' !default;
311
315
  @include dialog-content.rules;
312
316
  @include dialog-title.rules;
313
317
  @include flip-card-summary.rules;
318
+ @include icon-sidebar.rules;
314
319
  @include option.rules;
315
320
  @include tab-nav-bar.rules;
316
321
 
@@ -700,17 +705,6 @@ sbb-sidebar-container:has(
700
705
  --sbb-sidebar-container-backdrop-opacity: 0.4;
701
706
  }
702
707
 
703
- // Move the current-page-border to the right side if the sidebar is right positioned
704
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
705
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
706
- }
707
-
708
- // Set the border radius at the left top side if the sidebar is right positioned
709
- sbb-icon-sidebar-content + sbb-icon-sidebar {
710
- border-start-end-radius: 0;
711
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
712
- }
713
-
714
708
  // If there is no close button, avoid reserving any space for the button in the sidebar title
715
709
  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
716
710
  position: absolute;
package/core.css CHANGED
@@ -1476,6 +1476,8 @@
1476
1476
  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1477
1477
  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1478
1478
  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1479
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1480
+ --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1479
1481
  --sbb-option-color: var(--sbb-color-3);
1480
1482
  --sbb-option-background-color: inherit;
1481
1483
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1798,6 +1800,15 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
1798
1800
  height: 100%;
1799
1801
  }
1800
1802
 
1803
+ sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
1804
+ --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
1805
+ }
1806
+
1807
+ sbb-icon-sidebar-content + sbb-icon-sidebar {
1808
+ border-start-end-radius: 0;
1809
+ border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
1810
+ }
1811
+
1801
1812
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1802
1813
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1803
1814
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2205,15 +2216,6 @@ sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-for
2205
2216
  --sbb-sidebar-container-backdrop-opacity: 0.4;
2206
2217
  }
2207
2218
 
2208
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
2209
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
2210
- }
2211
-
2212
- sbb-icon-sidebar-content + sbb-icon-sidebar {
2213
- border-start-end-radius: 0;
2214
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
2215
- }
2216
-
2217
2219
  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
2218
2220
  position: absolute;
2219
2221
  }
package/development/icon-sidebar/icon-sidebar/icon-sidebar.component.js CHANGED
@@ -15,16 +15,19 @@ const style = css`:host {
15
15
  flex-shrink: 0;
16
16
  width: var(--sbb-size-element-m);
17
17
  overflow-y: auto;
18
- background-color: var(--sbb-background-color-1);
18
+ background-color: var(--sbb-icon-sidebar-background-color);
19
19
  margin-block-start: var(--sbb-spacing-fixed-3x);
20
20
  padding-block-start: var(--sbb-spacing-fixed-1x);
21
21
  border-start-end-radius: var(--sbb-icon-sidebar-border-radius);
22
22
  border-start-start-radius: 0;
23
- --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
23
+ }
24
+
25
+ :host([color=white]) {
26
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
24
27
  }
25
28
 
26
29
  :host([color=milk]) {
27
- background-color: var(--sbb-background-color-3);
30
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-3);
28
31
  }`;
29
32
  let SbbIconSidebarElement = (() => {
30
33
  var _color_accessor_storage, _a;
@@ -75,4 +78,4 @@ let SbbIconSidebarElement = (() => {
75
78
  export {
76
79
  SbbIconSidebarElement
77
80
  };
78
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zaWRlYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2ljb24tc2lkZWJhci9pY29uLXNpZGViYXIvaWNvbi1zaWRlYmFyLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBMaXRFbGVtZW50LCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB9IGZyb20gJy4uL2ljb24tc2lkZWJhci1jb250YWluZXIudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9pY29uLXNpZGViYXIuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJY29uIHNpZGViYXIsIGNhbiBiZSBwbGFjZWQgaW5zaWRlIGEgYHNiYi1pY29uLXNpZGViYXItY29udGFpbmVyYCBlbGVtZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gc2xvdCBhbnkgY29udGVudCBpbnRvIHRoZSBpY29uLXNpZGViYXIuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1pY29uLXNpZGViYXInKVxuY2xhc3MgU2JiSWNvblNpZGViYXJFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudEludGVybmFsc01peGluKExpdEVsZW1lbnQpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ25hdmlnYXRpb24nO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogQmFja2dyb3VuZCBjb2xvciBvZiB0aGUgaWNvbiBzaWRlYmFyLiBFaXRoZXIgYHdoaXRlYCBvciBgbWlsa2AuICoqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBjb2xvcjogJ3doaXRlJyB8ICdtaWxrJyA9ICd3aGl0ZSc7XG5cbiAgLyoqIFJldHVybnMgdGhlIFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB3aGVyZSB0aGlzIGljb24tc2lkZWJhciBpcyBjb250YWluZWQuICovXG4gIHB1YmxpYyBnZXQgY29udGFpbmVyKCk6IFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmNsb3Nlc3QoJ3NiYi1pY29uLXNpZGViYXItY29udGFpbmVyJyk7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcblxuICAgIC8vIEFzIHdlIGNhbid0IGluY2x1ZGUgdGhlIHNjcm9sbGJhciBtaXhpbiBvbiB0aGUgaG9zdCBhbmQgdG8gbWluaW1pemVcbiAgICAvLyBwYXlsb2FkLCB3ZSBkZWNpZGVkIHRvIGFkZCB0aGUgc2Nyb2xsYmFyIGNsYXNzIGhlcmUuXG4gICAgLy8gVGhpcyBpcyBhbiBleGNlcHRpb24gYXMgd2Ugbm9ybWFsbHkgZG9uJ3QgYWx0ZXIgdGhlIGNsYXNzTGlzdCBvZiB0aGUgaG9zdC5cbiAgICB0aGlzLmNsYXNzTGlzdC5hZGQoJ3NiYi1zY3JvbGxiYXInKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYDxzbG90Pjwvc2xvdD5gO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItaWNvbi1zaWRlYmFyJzogU2JiSWNvblNpZGViYXJFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWVNLHlCQUFxQixNQUFBOzswQkFEMUIsY0FBYyxrQkFBa0IsQ0FBQzs7OztvQkFDRSx5QkFBeUIsVUFBVTs7OztBQUEzQyxFQUFBLG1CQUFRLFlBQW9DO0FBQUE7O0FBTXRFLGtEQUFBLGtCQUFBLE1BQUEscUJBQTBDLE9BQU87Ozs7SUFBakQsSUFBZ0IsUUFBSztBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBckIsSUFBZ0IsTUFBSyxPQUFBO0FBQUEseUJBQUEseUJBQUE7QUFBQSxJQUFBO0FBQUE7QUFBQSxJQUdyQixJQUFXLFlBQVM7QUFDbEIsYUFBTyxLQUFLLFFBQVEsNEJBQTRCO0FBQUEsSUFDbEQ7QUFBQSxJQUVnQixvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUtOLFdBQUssVUFBVSxJQUFJLGVBQWU7QUFBQSxJQUNwQztBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBLElBQ1Q7QUFBQSxLQWxCQTs7QUFEQyx3QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBQzVCLGlCQUFBLElBQUEsTUFBQSxtQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsV0FBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLE9BQUssS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUwsUUFBSztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSxxQkFBQSx3QkFBQTtBQU52QixpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ2tDLEdBQUEsT0FBTyxjQUNoQixHQUFBLFNBQXlCLE9BRjVDLGtCQUFBLFlBQUEsdUJBQUEsR0FBc0I7OzsifQ==
81
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zaWRlYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2ljb24tc2lkZWJhci9pY29uLXNpZGViYXIvaWNvbi1zaWRlYmFyLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBMaXRFbGVtZW50LCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB9IGZyb20gJy4uL2ljb24tc2lkZWJhci1jb250YWluZXIudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9pY29uLXNpZGViYXIuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJY29uIHNpZGViYXIsIGNhbiBiZSBwbGFjZWQgaW5zaWRlIGEgYHNiYi1pY29uLXNpZGViYXItY29udGFpbmVyYCBlbGVtZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gc2xvdCBhbnkgY29udGVudCBpbnRvIHRoZSBpY29uLXNpZGViYXIuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1pY29uLXNpZGViYXInKVxuY2xhc3MgU2JiSWNvblNpZGViYXJFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudEludGVybmFsc01peGluKExpdEVsZW1lbnQpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ25hdmlnYXRpb24nO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogQmFja2dyb3VuZCBjb2xvciBvZiB0aGUgaWNvbiBzaWRlYmFyLiBFaXRoZXIgYHdoaXRlYCBvciBgbWlsa2AuICoqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBjb2xvcjogJ3doaXRlJyB8ICdtaWxrJyA9ICd3aGl0ZSc7XG5cbiAgLyoqIFJldHVybnMgdGhlIFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB3aGVyZSB0aGlzIGljb24tc2lkZWJhciBpcyBjb250YWluZWQuICovXG4gIHB1YmxpYyBnZXQgY29udGFpbmVyKCk6IFNiYkljb25TaWRlYmFyQ29udGFpbmVyRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmNsb3Nlc3QoJ3NiYi1pY29uLXNpZGViYXItY29udGFpbmVyJyk7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcblxuICAgIC8vIEFzIHdlIGNhbid0IGluY2x1ZGUgdGhlIHNjcm9sbGJhciBtaXhpbiBvbiB0aGUgaG9zdCBhbmQgdG8gbWluaW1pemVcbiAgICAvLyBwYXlsb2FkLCB3ZSBkZWNpZGVkIHRvIGFkZCB0aGUgc2Nyb2xsYmFyIGNsYXNzIGhlcmUuXG4gICAgLy8gVGhpcyBpcyBhbiBleGNlcHRpb24gYXMgd2Ugbm9ybWFsbHkgZG9uJ3QgYWx0ZXIgdGhlIGNsYXNzTGlzdCBvZiB0aGUgaG9zdC5cbiAgICB0aGlzLmNsYXNzTGlzdC5hZGQoJ3NiYi1zY3JvbGxiYXInKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYDxzbG90Pjwvc2xvdD5gO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItaWNvbi1zaWRlYmFyJzogU2JiSWNvblNpZGViYXJFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWVNLHlCQUFxQixNQUFBOzswQkFEMUIsY0FBYyxrQkFBa0IsQ0FBQzs7OztvQkFDRSx5QkFBeUIsVUFBVTs7OztBQUEzQyxFQUFBLG1CQUFRLFlBQW9DO0FBQUE7O0FBTXRFLGtEQUFBLGtCQUFBLE1BQUEscUJBQTBDLE9BQU87Ozs7SUFBakQsSUFBZ0IsUUFBSztBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBckIsSUFBZ0IsTUFBSyxPQUFBO0FBQUEseUJBQUEseUJBQUE7QUFBQSxJQUFBO0FBQUE7QUFBQSxJQUdyQixJQUFXLFlBQVM7QUFDbEIsYUFBTyxLQUFLLFFBQVEsNEJBQTRCO0FBQUEsSUFDbEQ7QUFBQSxJQUVnQixvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUtOLFdBQUssVUFBVSxJQUFJLGVBQWU7QUFBQSxJQUNwQztBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBLElBQ1Q7QUFBQSxLQWxCQTs7QUFEQyx3QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBQzVCLGlCQUFBLElBQUEsTUFBQSxtQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsV0FBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLE9BQUssS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUwsUUFBSztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSxxQkFBQSx3QkFBQTtBQU52QixpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ2tDLEdBQUEsT0FBTyxjQUNoQixHQUFBLFNBQXlCLE9BRjVDLGtCQUFBLFlBQUEsdUJBQUEsR0FBc0I7OzsifQ==
package/icon-sidebar/icon-sidebar/icon-sidebar.component.js CHANGED
@@ -1,16 +1,16 @@
1
1
  var m = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
- var f = (t, e, r) => e.has(t) || m("Cannot " + r);
5
- var h = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), p = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), _ = (t, e, r, s) => (f(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
4
+ var h = (t, e, r) => e.has(t) || m("Cannot " + r);
5
+ var f = (t, e, r) => (h(t, e, "read from private field"), r ? r.call(t) : e.get(t)), p = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), _ = (t, e, r, s) => (h(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
6
6
  import { __esDecorate as g, __runInitializers as c } from "tslib";
7
- import { css as x, LitElement as k, html as y } from "lit";
8
- import { customElement as S, property as z } from "lit/decorators.js";
9
- import { SbbElementInternalsMixin as E } from "../../core/mixins.js";
10
- const I = x`:host{display:flex;flex-direction:column;flex-shrink:0;width:var(--sbb-size-element-m);overflow-y:auto;background-color:var(--sbb-background-color-1);margin-block-start:var(--sbb-spacing-fixed-3x);padding-block-start:var(--sbb-spacing-fixed-1x);border-start-end-radius:var(--sbb-icon-sidebar-border-radius);border-start-start-radius:0;--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x)}:host([color=milk]){background-color:var(--sbb-background-color-3)}`;
7
+ import { css as v, LitElement as x, html as y } from "lit";
8
+ import { customElement as S, property as w } from "lit/decorators.js";
9
+ import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
10
+ const E = v`:host{display:flex;flex-direction:column;flex-shrink:0;width:var(--sbb-size-element-m);overflow-y:auto;background-color:var(--sbb-icon-sidebar-background-color);margin-block-start:var(--sbb-spacing-fixed-3x);padding-block-start:var(--sbb-spacing-fixed-1x);border-start-end-radius:var(--sbb-icon-sidebar-border-radius);border-start-start-radius:0}:host([color=white]){--sbb-icon-sidebar-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-icon-sidebar-background-color: var(--sbb-background-color-3)}`;
11
11
  let M = (() => {
12
12
  var l, a;
13
- let t = [S("sbb-icon-sidebar")], e, r = [], s, n = E(k), b, d = [], u = [];
13
+ let t = [S("sbb-icon-sidebar")], e, r = [], s, n = z(x), b, d = [], u = [];
14
14
  return a = class extends n {
15
15
  constructor() {
16
16
  super(...arguments);
@@ -19,7 +19,7 @@ let M = (() => {
19
19
  }
20
20
  /** Background color of the icon sidebar. Either `white` or `milk`. **/
21
21
  get color() {
22
- return h(this, l);
22
+ return f(this, l);
23
23
  }
24
24
  set color(o) {
25
25
  _(this, l, o);
@@ -36,10 +36,10 @@ let M = (() => {
36
36
  }
37
37
  }, l = new WeakMap(), s = a, (() => {
38
38
  const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
39
- b = [z({ reflect: !0 })], g(a, null, b, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, v) => {
40
- i.color = v;
39
+ b = [w({ reflect: !0 })], g(a, null, b, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, k) => {
40
+ i.color = k;
41
41
  } }, metadata: o }, d, u), g(null, e = { value: s }, t, { kind: "class", name: s.name, metadata: o }, null, r), s = e.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
42
- })(), a.role = "navigation", a.styles = I, c(s, r), s;
42
+ })(), a.role = "navigation", a.styles = E, c(s, r), s;
43
43
  })();
44
44
  export {
45
45
  M as SbbIconSidebarElement
package/off-brand-theme.css CHANGED
@@ -1580,6 +1580,8 @@ summary {
1580
1580
  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1581
1581
  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1582
1582
  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1583
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1584
+ --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1583
1585
  --sbb-option-color: var(--sbb-color-3);
1584
1586
  --sbb-option-background-color: inherit;
1585
1587
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1902,6 +1904,15 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
1902
1904
  height: 100%;
1903
1905
  }
1904
1906
 
1907
+ sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
1908
+ --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
1909
+ }
1910
+
1911
+ sbb-icon-sidebar-content + sbb-icon-sidebar {
1912
+ border-start-end-radius: 0;
1913
+ border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
1914
+ }
1915
+
1905
1916
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1906
1917
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1907
1918
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2309,15 +2320,6 @@ sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-for
2309
2320
  --sbb-sidebar-container-backdrop-opacity: 0.4;
2310
2321
  }
2311
2322
 
2312
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
2313
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
2314
- }
2315
-
2316
- sbb-icon-sidebar-content + sbb-icon-sidebar {
2317
- border-start-end-radius: 0;
2318
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
2319
- }
2320
-
2321
2323
  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
2322
2324
  position: absolute;
2323
2325
  }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.7.0-dev.1773138326",
3
+ "version": "4.7.0-dev.1773148895",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
9
  "storybook",
10
- "https://github.com/sbb-design-systems/lyne-components/commit/f259481c4bfe1ecfdcc0ad0cf2cbc303092f6e49"
10
+ "https://github.com/sbb-design-systems/lyne-components/commit/5cc069b3653ed3c361d70733bdcf6156c1960347"
11
11
  ],
12
12
  "type": "module",
13
13
  "exports": {
package/safety-theme.css CHANGED
@@ -1580,6 +1580,8 @@ summary {
1580
1580
  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1581
1581
  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1582
1582
  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1583
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1584
+ --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1583
1585
  --sbb-option-color: var(--sbb-color-3);
1584
1586
  --sbb-option-background-color: inherit;
1585
1587
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1902,6 +1904,15 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
1902
1904
  height: 100%;
1903
1905
  }
1904
1906
 
1907
+ sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
1908
+ --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
1909
+ }
1910
+
1911
+ sbb-icon-sidebar-content + sbb-icon-sidebar {
1912
+ border-start-end-radius: 0;
1913
+ border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
1914
+ }
1915
+
1905
1916
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1906
1917
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1907
1918
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2309,15 +2320,6 @@ sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-for
2309
2320
  --sbb-sidebar-container-backdrop-opacity: 0.4;
2310
2321
  }
2311
2322
 
2312
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
2313
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
2314
- }
2315
-
2316
- sbb-icon-sidebar-content + sbb-icon-sidebar {
2317
- border-start-end-radius: 0;
2318
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
2319
- }
2320
-
2321
2323
  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
2322
2324
  position: absolute;
2323
2325
  }
package/standard-theme.css CHANGED
@@ -1580,6 +1580,8 @@ summary {
1580
1580
  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1581
1581
  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1582
1582
  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1583
+ --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1584
+ --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1583
1585
  --sbb-option-color: var(--sbb-color-3);
1584
1586
  --sbb-option-background-color: inherit;
1585
1587
  --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1902,6 +1904,15 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
1902
1904
  height: 100%;
1903
1905
  }
1904
1906
 
1907
+ sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
1908
+ --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
1909
+ }
1910
+
1911
+ sbb-icon-sidebar-content + sbb-icon-sidebar {
1912
+ border-start-end-radius: 0;
1913
+ border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
1914
+ }
1915
+
1905
1916
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1906
1917
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1907
1918
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2309,15 +2320,6 @@ sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-for
2309
2320
  --sbb-sidebar-container-backdrop-opacity: 0.4;
2310
2321
  }
2311
2322
 
2312
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
2313
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
2314
- }
2315
-
2316
- sbb-icon-sidebar-content + sbb-icon-sidebar {
2317
- border-start-end-radius: 0;
2318
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
2319
- }
2320
-
2321
2323
  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
2322
2324
  position: absolute;
2323
2325
  }