@sbb-esta/lyne-elements-dev 4.7.0-dev.1773393164 → 4.7.0-dev.1773396165

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 (13) hide show
  1. package/core/styles/core.scss +10 -0
  2. package/core.css +14 -0
  3. package/custom-elements.json +31 -31
  4. package/development/loading-indicator/loading-indicator.component.d.ts.map +1 -1
  5. package/development/loading-indicator/loading-indicator.component.js +22 -27
  6. package/development/loading-indicator-circle/loading-indicator-circle.component.d.ts.map +1 -1
  7. package/development/loading-indicator-circle/loading-indicator-circle.component.js +6 -21
  8. package/loading-indicator/loading-indicator.component.js +13 -15
  9. package/loading-indicator-circle/loading-indicator-circle.component.js +14 -16
  10. package/off-brand-theme.css +14 -0
  11. package/package.json +2 -2
  12. package/safety-theme.css +14 -0
  13. package/standard-theme.css +14 -0
package/core/styles/core.scss CHANGED
@@ -131,6 +131,13 @@ $theme: 'standard' !default;
131
131
  @use '../../link/common/block-link.global' as block-link with (
132
132
  $theme: $theme
133
133
  );
134
+ @use '../../loading-indicator/loading-indicator.global' as loading-indicator with (
135
+ $theme: $theme
136
+ );
137
+ @use '../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
138
+ with (
139
+ $theme: $theme
140
+ );
134
141
  @use '../../logo/logo.global' as logo with (
135
142
  $theme: $theme
136
143
  );
@@ -224,6 +231,8 @@ $theme: 'standard' !default;
224
231
  @include icon-sidebar.base;
225
232
  @include lead-container.base;
226
233
  @include block-link.base;
234
+ @include loading-indicator.base;
235
+ @include loading-indicator-circle.base;
227
236
  @include logo.base;
228
237
  @include message.base;
229
238
  @include mini-calendar-day.base;
@@ -250,6 +259,7 @@ $theme: 'standard' !default;
250
259
  @include header-common.base-forced-colors;
251
260
  @include expansion-panel-header.base-forced-colors;
252
261
  @include form-field.base-forced-colors;
262
+ @include loading-indicator-circle.base-forced-colors;
253
263
  @include logo.base-forced-colors;
254
264
  @include visual-checkbox.base-forced-colors;
255
265
  @include radio-button-common.base-forced-colors;
package/core.css CHANGED
@@ -1533,6 +1533,16 @@
1533
1533
  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1534
1534
  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1535
1535
  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1536
+ --sbb-loading-indicator-color: var(--sbb-color-primary);
1537
+ --sbb-loading-indicator-window-element-rotation: 55.24deg;
1538
+ --sbb-loading-indicator-window-height: 1.125rem;
1539
+ --sbb-loading-indicator-window-element-width: 3.4375rem;
1540
+ --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
1541
+ --sbb-loading-indicator-circle-padding: 0.125rem;
1542
+ --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
1543
+ --sbb-loading-indicator-circle-animated-width: 0.1875em;
1544
+ --sbb-loading-indicator-circle-animated-height: 0.1875em;
1545
+ --sbb-loading-indicator-circle-animated-border-radius: 50%;
1536
1546
  --sbb-logo-panel-color: var(--sbb-color-brand);
1537
1547
  --sbb-logo-signet-color: var(--sbb-color-white);
1538
1548
  --sbb-logo-word-mark-color: var(--sbb-color-black);
@@ -1679,6 +1689,10 @@
1679
1689
  --sbb-header-action-active-border-width: 0;
1680
1690
  --sbb-expansion-panel-header-text-color: ButtonText;
1681
1691
  --sbb-form-field-border-color: ButtonBorder;
1692
+ --sbb-loading-indicator-circle-animated-width: 50%;
1693
+ --sbb-loading-indicator-circle-animated-height: 100%;
1694
+ --sbb-loading-indicator-circle-animated-border-radius: 0;
1695
+ --sbb-loading-indicator-circle-background: transparent;
1682
1696
  --sbb-logo-panel-color: ButtonText !important;
1683
1697
  --sbb-logo-signet-color: Canvas !important;
1684
1698
  --sbb-visual-checkbox-selection-color: Canvas;
package/custom-elements.json CHANGED
@@ -114692,6 +114692,37 @@
114692
114692
  }
114693
114693
  ]
114694
114694
  },
114695
+ {
114696
+ "kind": "javascript-module",
114697
+ "path": "sidebar/common/styles.js",
114698
+ "declarations": [],
114699
+ "exports": [
114700
+ {
114701
+ "kind": "js",
114702
+ "name": "sidebarContainerCommonStyle",
114703
+ "declaration": {
114704
+ "name": "default",
114705
+ "module": "./sidebar-container-common.scss?lit&inline"
114706
+ }
114707
+ },
114708
+ {
114709
+ "kind": "js",
114710
+ "name": "sidebarContentCommonStyle",
114711
+ "declaration": {
114712
+ "name": "default",
114713
+ "module": "./sidebar-content-common.scss?lit&inline"
114714
+ }
114715
+ },
114716
+ {
114717
+ "kind": "js",
114718
+ "name": "iconSidebarButtonCommonStyle",
114719
+ "declaration": {
114720
+ "name": "default",
114721
+ "module": "./icon-sidebar-button-common.scss?lit&inline"
114722
+ }
114723
+ }
114724
+ ]
114725
+ },
114695
114726
  {
114696
114727
  "kind": "javascript-module",
114697
114728
  "path": "sidebar/sidebar/sidebar.component.js",
@@ -115423,37 +115454,6 @@
115423
115454
  }
115424
115455
  ]
115425
115456
  },
115426
- {
115427
- "kind": "javascript-module",
115428
- "path": "sidebar/common/styles.js",
115429
- "declarations": [],
115430
- "exports": [
115431
- {
115432
- "kind": "js",
115433
- "name": "sidebarContainerCommonStyle",
115434
- "declaration": {
115435
- "name": "default",
115436
- "module": "./sidebar-container-common.scss?lit&inline"
115437
- }
115438
- },
115439
- {
115440
- "kind": "js",
115441
- "name": "sidebarContentCommonStyle",
115442
- "declaration": {
115443
- "name": "default",
115444
- "module": "./sidebar-content-common.scss?lit&inline"
115445
- }
115446
- },
115447
- {
115448
- "kind": "js",
115449
- "name": "iconSidebarButtonCommonStyle",
115450
- "declaration": {
115451
- "name": "default",
115452
- "module": "./icon-sidebar-button-common.scss?lit&inline"
115453
- }
115454
- }
115455
- ]
115456
- },
115457
115457
  {
115458
115458
  "kind": "javascript-module",
115459
115459
  "path": "sidebar/sidebar-close-button/sidebar-close-button.component.js",
package/development/loading-indicator/loading-indicator.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/loading-indicator/loading-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;GAEG;AACH,qBAAa,0BAA2B,SAAQ,UAAU;IACxD,gBAAgC,WAAW,EAAE,MAAM,CAA2B;IAC9E,gBAAgC,IAAI,iBAAiB;IACrD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAO;IAE3F,qBAAqB;IACrB,SAA6C,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAa;IAE9E,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
1
+ {"version":3,"file":"loading-indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/loading-indicator/loading-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;GAEG;AACH,qBAAa,0BAA2B,SAAQ,UAAU;IACxD,gBAAgC,WAAW,EAAE,MAAM,CAA2B;IAC9E,gBAAgC,IAAI,iBAAiB;IACrD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAO;IAE3F,qBAAqB;IACrB,SAA6C,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAa;IAE9E,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
package/development/loading-indicator/loading-indicator.component.js CHANGED
@@ -12,12 +12,10 @@ import { SbbElement } from "../core/base-elements.js";
12
12
  import { boxSizingStyles } from "../core/styles.js";
13
13
  const style = css`@charset "UTF-8";
14
14
  :host {
15
- --sbb-loading-indicator-color: var(--sbb-color-primary);
16
15
  --sbb-loading-indicator-duration: var(
17
16
  --sbb-disable-animation-duration,
18
17
  var(--sbb-animation-duration-6x)
19
18
  );
20
- --sbb-loading-indicator-window-element-rotation: 55.24deg;
21
19
  --_sbb-loading-indicator-window-first-span-width: calc(
22
20
  var(--sbb-loading-indicator-window-height) * 0.58
23
21
  );
@@ -27,10 +25,16 @@ const style = css`@charset "UTF-8";
27
25
  --_sbb-loading-indicator-window-element-animation-speed: calc(
28
26
  var(--_sbb-loading-indicator-window-unit) * 6.5
29
27
  );
30
- --sbb-loading-indicator-window-height: 1.125rem;
31
- --sbb-loading-indicator-window-element-width: 3.4375rem;
32
- display: inline-block;
33
28
  line-height: 0;
29
+ display: inline-flex;
30
+ height: var(--sbb-loading-indicator-window-height);
31
+ align-items: center;
32
+ }
33
+ :host::before {
34
+ content: "​";
35
+ user-select: none;
36
+ width: 0;
37
+ height: 0;
34
38
  }
35
39
 
36
40
  :host([color=smoke]) {
@@ -41,6 +45,11 @@ const style = css`@charset "UTF-8";
41
45
  --sbb-loading-indicator-color: var(--sbb-color-white);
42
46
  }
43
47
 
48
+ :host([size=s]) {
49
+ --sbb-loading-indicator-window-height: 1.125rem;
50
+ --sbb-loading-indicator-window-element-width: 3.4375rem;
51
+ }
52
+
44
53
  :host([size=l]) {
45
54
  --sbb-loading-indicator-window-height: 2rem;
46
55
  --sbb-loading-indicator-window-element-width: 6.25rem;
@@ -65,18 +74,6 @@ span {
65
74
  display: inline-block;
66
75
  }
67
76
 
68
- .sbb-loading-indicator {
69
- display: flex;
70
- height: var(--sbb-loading-indicator-window-height);
71
- align-items: center;
72
- }
73
- .sbb-loading-indicator::before {
74
- content: "​";
75
- user-select: none;
76
- width: 0;
77
- height: 0;
78
- }
79
-
80
77
  .sbb-loading-indicator__animated-element {
81
78
  position: relative;
82
79
  justify-content: center;
@@ -214,16 +211,14 @@ let SbbLoadingIndicatorElement = (() => {
214
211
  }
215
212
  render() {
216
213
  return html`
217
- <span class="sbb-loading-indicator">
218
- <span class="sbb-loading-indicator__animated-element">
214
+ <span class="sbb-loading-indicator__animated-element">
215
+ <span>
219
216
  <span>
220
- <span>
221
- <span></span>
222
- <span></span>
223
- <span></span>
224
- <span></span>
225
- <span></span>
226
- </span>
217
+ <span></span>
218
+ <span></span>
219
+ <span></span>
220
+ <span></span>
221
+ <span></span>
227
222
  </span>
228
223
  </span>
229
224
  </span>
@@ -245,4 +240,4 @@ let SbbLoadingIndicatorElement = (() => {
245
240
  export {
246
241
  SbbLoadingIndicatorElement
247
242
  };
248
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1pbmRpY2F0b3IuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvbG9hZGluZy1pbmRpY2F0b3IvbG9hZGluZy1pbmRpY2F0b3IuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9sb2FkaW5nLWluZGljYXRvci5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGEgbG9hZGluZyBpbmRpY2F0b3IuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJMb2FkaW5nSW5kaWNhdG9yRWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLWxvYWRpbmctaW5kaWNhdG9yJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ3Byb2dyZXNzYmFyJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBzIG9yIG0uICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIGFjY2Vzc29yIHNpemU6ICdzJyB8ICdsJyB8ICd4bCcgfCAneHhsJyB8ICd4eHhsJyA9ICdzJztcblxuICAvKiogQ29sb3IgdmFyaWFudC4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYWNjZXNzb3IgY29sb3I6ICdkZWZhdWx0JyB8ICdzbW9rZScgfCAnd2hpdGUnID0gJ2RlZmF1bHQnO1xuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIHRoaXMuaW50ZXJuYWxzLmFyaWFCdXN5ID0gJ3RydWUnO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi1sb2FkaW5nLWluZGljYXRvclwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1sb2FkaW5nLWluZGljYXRvcl9fYW5pbWF0ZWQtZWxlbWVudFwiPlxuICAgICAgICAgIDxzcGFuPlxuICAgICAgICAgICAgPHNwYW4+XG4gICAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgICAgPHNwYW4+PC9zcGFuPlxuICAgICAgICAgICAgICA8c3Bhbj48L3NwYW4+XG4gICAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgICAgPHNwYW4+PC9zcGFuPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1sb2FkaW5nLWluZGljYXRvcic6IFNiYkxvYWRpbmdJbmRpY2F0b3JFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBWWEsOEJBQTBCLE1BQUE7O29CQUFTOzs7Ozs7O0FBQW5DLFNBQUEsbUJBQW1DLFlBQVU7QUFBQTs7QUFNM0IsaURBQUEsa0JBQUEsTUFBQSxvQkFBMEQsR0FBRztBQUc3RCxtREFBQSxrQkFBQSxNQUFBLHVCQUFBLEdBQUEsa0JBQUEsTUFBQSxxQkFBdUQsU0FBUzs7OztJQUhoRSxJQUFnQixPQUFJO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUFwQixJQUFnQixLQUFJLE9BQUE7QUFBQSx5QkFBQSx3QkFBQTtBQUFBLElBQUE7QUFBQTtBQUFBLElBR3BCLElBQWdCLFFBQUs7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQXJCLElBQWdCLE1BQUssT0FBQTtBQUFBLHlCQUFBLHlCQUFBO0FBQUEsSUFBQTtBQUFBLElBRWxDLG9CQUFpQjtBQUMvQixZQUFNLGtCQUFBO0FBQ04sV0FBSyxVQUFVLFdBQVc7QUFBQSxJQUM1QjtBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQWVUO0FBQUEsS0ExQjZCLHdDQUdBOztBQUg1Qix1QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBRzNCLHdCQUFBLENBQUEsU0FBUyxFQUFFLFNBQVMsS0FBQSxDQUFNLENBQUM7QUFIQyxpQkFBQSxJQUFBLE1BQUEsa0JBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxRQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLFVBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixNQUFJLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxVQUFKLE9BQUk7QUFBQSxJQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsb0JBQUEsdUJBQUE7QUFHcEIsaUJBQUEsSUFBQSxNQUFBLG1CQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsU0FBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxXQUFBLEtBQUEsS0FBQSxDQUFBLFFBQUEsSUFBZ0IsT0FBSyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBTCxRQUFLO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLHFCQUFBLHdCQUFBOztRQVJsQixHQUFBLGNBQXNCLHlCQUN0QixHQUFBLE9BQU8sZUFDaEIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBSDVEOzsifQ==
243
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1pbmRpY2F0b3IuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvbG9hZGluZy1pbmRpY2F0b3IvbG9hZGluZy1pbmRpY2F0b3IuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9sb2FkaW5nLWluZGljYXRvci5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGEgbG9hZGluZyBpbmRpY2F0b3IuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJMb2FkaW5nSW5kaWNhdG9yRWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLWxvYWRpbmctaW5kaWNhdG9yJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ3Byb2dyZXNzYmFyJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBzIG9yIG0uICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIGFjY2Vzc29yIHNpemU6ICdzJyB8ICdsJyB8ICd4bCcgfCAneHhsJyB8ICd4eHhsJyA9ICdzJztcblxuICAvKiogQ29sb3IgdmFyaWFudC4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYWNjZXNzb3IgY29sb3I6ICdkZWZhdWx0JyB8ICdzbW9rZScgfCAnd2hpdGUnID0gJ2RlZmF1bHQnO1xuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIHRoaXMuaW50ZXJuYWxzLmFyaWFCdXN5ID0gJ3RydWUnO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi1sb2FkaW5nLWluZGljYXRvcl9fYW5pbWF0ZWQtZWxlbWVudFwiPlxuICAgICAgICA8c3Bhbj5cbiAgICAgICAgICA8c3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuPjwvc3Bhbj5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItbG9hZGluZy1pbmRpY2F0b3InOiBTYmJMb2FkaW5nSW5kaWNhdG9yRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQVlhLDhCQUEwQixNQUFBOztvQkFBUzs7Ozs7OztBQUFuQyxTQUFBLG1CQUFtQyxZQUFVO0FBQUE7O0FBTTNCLGlEQUFBLGtCQUFBLE1BQUEsb0JBQTBELEdBQUc7QUFHN0QsbURBQUEsa0JBQUEsTUFBQSx1QkFBQSxHQUFBLGtCQUFBLE1BQUEscUJBQXVELFNBQVM7Ozs7SUFIaEUsSUFBZ0IsT0FBSTtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBcEIsSUFBZ0IsS0FBSSxPQUFBO0FBQUEseUJBQUEsd0JBQUE7QUFBQSxJQUFBO0FBQUE7QUFBQSxJQUdwQixJQUFnQixRQUFLO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUFyQixJQUFnQixNQUFLLE9BQUE7QUFBQSx5QkFBQSx5QkFBQTtBQUFBLElBQUE7QUFBQSxJQUVsQyxvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUNOLFdBQUssVUFBVSxXQUFXO0FBQUEsSUFDNUI7QUFBQSxJQUVtQixTQUFNO0FBQ3ZCLGFBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQWFUO0FBQUEsS0F4QjZCLHdDQUdBOztBQUg1Qix1QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBRzNCLHdCQUFBLENBQUEsU0FBUyxFQUFFLFNBQVMsS0FBQSxDQUFNLENBQUM7QUFIQyxpQkFBQSxJQUFBLE1BQUEsa0JBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxRQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLFVBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixNQUFJLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxVQUFKLE9BQUk7QUFBQSxJQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsb0JBQUEsdUJBQUE7QUFHcEIsaUJBQUEsSUFBQSxNQUFBLG1CQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsU0FBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxXQUFBLEtBQUEsS0FBQSxDQUFBLFFBQUEsSUFBZ0IsT0FBSyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBTCxRQUFLO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLHFCQUFBLHdCQUFBOztRQVJsQixHQUFBLGNBQXNCLHlCQUN0QixHQUFBLE9BQU8sZUFDaEIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBSDVEOzsifQ==
package/development/loading-indicator-circle/loading-indicator-circle.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-indicator-circle.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/loading-indicator-circle/loading-indicator-circle.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;GAEG;AACH,qBAAa,gCAAiC,SAAQ,UAAU;IAC9D,gBAAgC,WAAW,EAAE,MAAM,CAAkC;IACrF,gBAAgC,IAAI,iBAAiB;IACrD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,qBAAqB;IACrB,SAA6C,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAa;IAE9E,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
1
+ {"version":3,"file":"loading-indicator-circle.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/loading-indicator-circle/loading-indicator-circle.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;GAEG;AACH,qBAAa,gCAAiC,SAAQ,UAAU;IAC9D,gBAAgC,WAAW,EAAE,MAAM,CAAkC;IACrF,gBAAgC,IAAI,iBAAiB;IACrD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,qBAAqB;IACrB,SAA6C,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAa;IAE9E,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
package/development/loading-indicator-circle/loading-indicator-circle.component.js CHANGED
@@ -11,28 +11,18 @@ import { property } from "lit/decorators.js";
11
11
  import { SbbElement } from "../core/base-elements.js";
12
12
  import { boxSizingStyles } from "../core/styles.js";
13
13
  const style = css`:host {
14
- display: inline-block;
15
- line-height: 0;
16
- --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
17
- --sbb-loading-indicator-circle-padding: 0.125rem;
18
14
  --sbb-loading-indicator-circle-duration: var(--sbb-disable-animation-duration, 1.5s);
19
- --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
20
15
  --sbb-loading-indicator-circle-background: conic-gradient(
21
16
  from 90deg,
22
17
  transparent,
23
18
  var(--sbb-loading-indicator-circle-color)
24
19
  );
25
- --sbb-loading-indicator-circle-animated-width: 0.1875em;
26
- --sbb-loading-indicator-circle-animated-height: 0.1875em;
27
- --sbb-loading-indicator-circle-animated-border-radius: 50%;
20
+ display: inline-block;
21
+ line-height: 0;
28
22
  }
29
23
  @media (forced-colors: active) {
30
24
  :host {
31
25
  --sbb-loading-indicator-circle-color: CanvasText !important;
32
- --sbb-loading-indicator-circle-animated-width: 50%;
33
- --sbb-loading-indicator-circle-animated-height: 100%;
34
- --sbb-loading-indicator-circle-animated-border-radius: 0;
35
- --sbb-loading-indicator-circle-background: transparent;
36
26
  }
37
27
  }
38
28
 
@@ -42,9 +32,6 @@ const style = css`:host {
42
32
 
43
33
  :host([color=white]) {
44
34
  --sbb-loading-indicator-circle-color: var(--sbb-color-white);
45
- }
46
-
47
- :host([color=white]) {
48
35
  --sbb-loading-indicator-circle-background-color: var(--sbb-color-iron);
49
36
  }
50
37
 
@@ -114,11 +101,9 @@ let SbbLoadingIndicatorCircleElement = (() => {
114
101
  this.internals.ariaBusy = "true";
115
102
  }
116
103
  render() {
117
- return html`
118
- <span class="sbb-loading-indicator">
119
- <span class="sbb-loading-indicator__animated-element"></span>
120
- </span>
121
- `;
104
+ return html` <span class="sbb-loading-indicator">
105
+ <span class="sbb-loading-indicator__animated-element"></span>
106
+ </span>`;
122
107
  }
123
108
  }, _color_accessor_storage = new WeakMap(), (() => {
124
109
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -132,4 +117,4 @@ let SbbLoadingIndicatorCircleElement = (() => {
132
117
  export {
133
118
  SbbLoadingIndicatorCircleElement
134
119
  };
135
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1pbmRpY2F0b3ItY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2xvYWRpbmctaW5kaWNhdG9yLWNpcmNsZS9sb2FkaW5nLWluZGljYXRvci1jaXJjbGUuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9sb2FkaW5nLWluZGljYXRvci1jaXJjbGUuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhIGNpcmNsZSBsb2FkaW5nIGluZGljYXRvci5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYkxvYWRpbmdJbmRpY2F0b3JDaXJjbGVFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbG9hZGluZy1pbmRpY2F0b3ItY2lyY2xlJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ3Byb2dyZXNzYmFyJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBDb2xvciB2YXJpYW50LiAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBjb2xvcjogJ2RlZmF1bHQnIHwgJ3Ntb2tlJyB8ICd3aGl0ZScgPSAnZGVmYXVsdCc7XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5pbnRlcm5hbHMuYXJpYUJ1c3kgPSAndHJ1ZSc7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWxvYWRpbmctaW5kaWNhdG9yXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWxvYWRpbmctaW5kaWNhdG9yX19hbmltYXRlZC1lbGVtZW50XCI+PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1sb2FkaW5nLWluZGljYXRvci1jaXJjbGUnOiBTYmJMb2FkaW5nSW5kaWNhdG9yQ2lyY2xlRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBWWEsb0NBQWdDLE1BQUE7O29CQUFTOzs7O0FBQXpDLFNBQUEsbUJBQXlDLFlBQVU7QUFBQTs7QUFNakMsa0RBQUEsa0JBQUEsTUFBQSxxQkFBdUQsU0FBUzs7OztJQUFoRSxJQUFnQixRQUFLO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUFyQixJQUFnQixNQUFLLE9BQUE7QUFBQSx5QkFBQSx5QkFBQTtBQUFBLElBQUE7QUFBQSxJQUVsQyxvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUNOLFdBQUssVUFBVSxXQUFXO0FBQUEsSUFDNUI7QUFBQSxJQUVtQixTQUFNO0FBQ3ZCLGFBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBS1Q7QUFBQSxLQWI2Qjs7QUFBNUIsd0JBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUFDLGlCQUFBLElBQUEsTUFBQSxtQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsV0FBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLE9BQUssS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUwsUUFBSztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSxxQkFBQSx3QkFBQTs7UUFMbEIsR0FBQSxjQUFzQixnQ0FDdEIsR0FBQSxPQUFPLGVBQ2hCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQUg1RDs7In0=
120
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1pbmRpY2F0b3ItY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2xvYWRpbmctaW5kaWNhdG9yLWNpcmNsZS9sb2FkaW5nLWluZGljYXRvci1jaXJjbGUuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9sb2FkaW5nLWluZGljYXRvci1jaXJjbGUuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhIGNpcmNsZSBsb2FkaW5nIGluZGljYXRvci5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYkxvYWRpbmdJbmRpY2F0b3JDaXJjbGVFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbG9hZGluZy1pbmRpY2F0b3ItY2lyY2xlJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ3Byb2dyZXNzYmFyJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBDb2xvciB2YXJpYW50LiAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBjb2xvcjogJ2RlZmF1bHQnIHwgJ3Ntb2tlJyB8ICd3aGl0ZScgPSAnZGVmYXVsdCc7XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5pbnRlcm5hbHMuYXJpYUJ1c3kgPSAndHJ1ZSc7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGAgPHNwYW4gY2xhc3M9XCJzYmItbG9hZGluZy1pbmRpY2F0b3JcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWxvYWRpbmctaW5kaWNhdG9yX19hbmltYXRlZC1lbGVtZW50XCI+PC9zcGFuPlxuICAgIDwvc3Bhbj5gO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItbG9hZGluZy1pbmRpY2F0b3ItY2lyY2xlJzogU2JiTG9hZGluZ0luZGljYXRvckNpcmNsZUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBWWEsb0NBQWdDLE1BQUE7O29CQUFTOzs7O0FBQXpDLFNBQUEsbUJBQXlDLFlBQVU7QUFBQTs7QUFNakMsa0RBQUEsa0JBQUEsTUFBQSxxQkFBdUQsU0FBUzs7OztJQUFoRSxJQUFnQixRQUFLO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUFyQixJQUFnQixNQUFLLE9BQUE7QUFBQSx5QkFBQSx5QkFBQTtBQUFBLElBQUE7QUFBQSxJQUVsQyxvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUNOLFdBQUssVUFBVSxXQUFXO0FBQUEsSUFDNUI7QUFBQSxJQUVtQixTQUFNO0FBQ3ZCLGFBQU87QUFBQTtBQUFBO0FBQUEsSUFHVDtBQUFBLEtBWDZCOztBQUE1Qix3QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBQUMsaUJBQUEsSUFBQSxNQUFBLG1CQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsU0FBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxXQUFBLEtBQUEsS0FBQSxDQUFBLFFBQUEsSUFBZ0IsT0FBSyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBTCxRQUFLO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLHFCQUFBLHdCQUFBOztRQUxsQixHQUFBLGNBQXNCLGdDQUN0QixHQUFBLE9BQU8sZUFDaEIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBSDVEOzsifQ==
package/loading-indicator/loading-indicator.component.js CHANGED
@@ -8,15 +8,15 @@ import { css as v, html as z } from "lit";
8
8
  import { property as y } from "lit/decorators.js";
9
9
  import { SbbElement as k } from "../core/base-elements.js";
10
10
  import { boxSizingStyles as x } from "../core/styles.js";
11
- const S = v`@charset "UTF-8";:host{--sbb-loading-indicator-color: var(--sbb-color-primary);--sbb-loading-indicator-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-loading-indicator-window-element-rotation: 55.24deg;--_sbb-loading-indicator-window-first-span-width: calc( var(--sbb-loading-indicator-window-height) * .58 );--_sbb-loading-indicator-window-unit: calc( var(--_sbb-loading-indicator-window-first-span-width) / 5.5 );--_sbb-loading-indicator-window-element-animation-speed: calc( var(--_sbb-loading-indicator-window-unit) * 6.5 );--sbb-loading-indicator-window-height: 1.125rem;--sbb-loading-indicator-window-element-width: 3.4375rem;display:inline-block;line-height:0}:host([color=smoke]){--sbb-loading-indicator-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-color: var(--sbb-color-white)}:host([size=l]){--sbb-loading-indicator-window-height: 2rem;--sbb-loading-indicator-window-element-width: 6.25rem}:host([size=xl]){--sbb-loading-indicator-window-height: 3.1875rem;--sbb-loading-indicator-window-element-width: 8.75rem}:host([size=xxl]){--sbb-loading-indicator-window-height: 6.125rem;--sbb-loading-indicator-window-element-width: 15.625rem}:host([size=xxxl]){--sbb-loading-indicator-window-height: 9.1875rem;--sbb-loading-indicator-window-element-width: 22.5rem}span{display:inline-block}.sbb-loading-indicator{display:flex;height:var(--sbb-loading-indicator-window-height);align-items:center}.sbb-loading-indicator:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-loading-indicator__animated-element{position:relative;justify-content:center;display:flex;margin:0 auto;transform-origin:center;translate:25%;backface-visibility:hidden;width:var(--sbb-loading-indicator-window-element-width);perspective:var(--sbb-loading-indicator-window-height)}.sbb-loading-indicator__animated-element>span{position:relative;align-self:center;transform-origin:left;rotate:y var(--sbb-loading-indicator-window-element-rotation);backface-visibility:hidden}.sbb-loading-indicator__animated-element>span>span{position:relative;display:flex;animation:loading-container var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span{background:var(--sbb-loading-indicator-color);backface-visibility:hidden;outline:var(--sbb-border-width-1x) solid transparent;width:var(--_sbb-loading-indicator-window-first-span-width);height:var(--sbb-loading-indicator-window-height);margin-inline-end:var(--_sbb-loading-indicator-window-unit)}.sbb-loading-indicator__animated-element>span>span>span:nth-child(1){animation:loading-rectangle1 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(2){animation:loading-rectangle2 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(3){animation:loading-rectangle3 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(4){animation:loading-rectangle4 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(5){animation:loading-rectangle5 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:last-child{margin-inline-end:0}@keyframes loading-container{0%{translate:var(--_sbb-loading-indicator-window-element-animation-speed)}to{translate:0}}@keyframes loading-rectangle1{0%{opacity:.5}to{opacity:0}}@keyframes loading-rectangle2{0%{opacity:1}to{opacity:.5}}@keyframes loading-rectangle3{0%{opacity:.5}to{opacity:1}}@keyframes loading-rectangle4{0%{opacity:.25}to{opacity:.5}}@keyframes loading-rectangle5{0%{opacity:0}to{opacity:.25}}`;
11
+ const S = v`@charset "UTF-8";:host{--sbb-loading-indicator-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--_sbb-loading-indicator-window-first-span-width: calc( var(--sbb-loading-indicator-window-height) * .58 );--_sbb-loading-indicator-window-unit: calc( var(--_sbb-loading-indicator-window-first-span-width) / 5.5 );--_sbb-loading-indicator-window-element-animation-speed: calc( var(--_sbb-loading-indicator-window-unit) * 6.5 );line-height:0;display:inline-flex;height:var(--sbb-loading-indicator-window-height);align-items:center}:host:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host([color=smoke]){--sbb-loading-indicator-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-color: var(--sbb-color-white)}:host([size=s]){--sbb-loading-indicator-window-height: 1.125rem;--sbb-loading-indicator-window-element-width: 3.4375rem}:host([size=l]){--sbb-loading-indicator-window-height: 2rem;--sbb-loading-indicator-window-element-width: 6.25rem}:host([size=xl]){--sbb-loading-indicator-window-height: 3.1875rem;--sbb-loading-indicator-window-element-width: 8.75rem}:host([size=xxl]){--sbb-loading-indicator-window-height: 6.125rem;--sbb-loading-indicator-window-element-width: 15.625rem}:host([size=xxxl]){--sbb-loading-indicator-window-height: 9.1875rem;--sbb-loading-indicator-window-element-width: 22.5rem}span{display:inline-block}.sbb-loading-indicator__animated-element{position:relative;justify-content:center;display:flex;margin:0 auto;transform-origin:center;translate:25%;backface-visibility:hidden;width:var(--sbb-loading-indicator-window-element-width);perspective:var(--sbb-loading-indicator-window-height)}.sbb-loading-indicator__animated-element>span{position:relative;align-self:center;transform-origin:left;rotate:y var(--sbb-loading-indicator-window-element-rotation);backface-visibility:hidden}.sbb-loading-indicator__animated-element>span>span{position:relative;display:flex;animation:loading-container var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span{background:var(--sbb-loading-indicator-color);backface-visibility:hidden;outline:var(--sbb-border-width-1x) solid transparent;width:var(--_sbb-loading-indicator-window-first-span-width);height:var(--sbb-loading-indicator-window-height);margin-inline-end:var(--_sbb-loading-indicator-window-unit)}.sbb-loading-indicator__animated-element>span>span>span:nth-child(1){animation:loading-rectangle1 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(2){animation:loading-rectangle2 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(3){animation:loading-rectangle3 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(4){animation:loading-rectangle4 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:nth-child(5){animation:loading-rectangle5 var(--sbb-loading-indicator-duration) linear infinite}.sbb-loading-indicator__animated-element>span>span>span:last-child{margin-inline-end:0}@keyframes loading-container{0%{translate:var(--_sbb-loading-indicator-window-element-animation-speed)}to{translate:0}}@keyframes loading-rectangle1{0%{opacity:.5}to{opacity:0}}@keyframes loading-rectangle2{0%{opacity:1}to{opacity:.5}}@keyframes loading-rectangle3{0%{opacity:.5}to{opacity:1}}@keyframes loading-rectangle4{0%{opacity:.25}to{opacity:.5}}@keyframes loading-rectangle5{0%{opacity:0}to{opacity:.25}}`;
12
12
  let P = (() => {
13
13
  var r, l, t;
14
- let i = k, a, n = [], s = [], p, h = [], w = [];
14
+ let i = k, a, n = [], s = [], h, p = [], w = [];
15
15
  return t = class extends i {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  g(this, r, d(this, n, "s"));
19
- g(this, l, (d(this, s), d(this, h, "default")));
19
+ g(this, l, (d(this, s), d(this, p, "default")));
20
20
  d(this, w);
21
21
  }
22
22
  /** Size variant, either s or m. */
@@ -38,16 +38,14 @@ let P = (() => {
38
38
  }
39
39
  render() {
40
40
  return z`
41
- <span class="sbb-loading-indicator">
42
- <span class="sbb-loading-indicator__animated-element">
41
+ <span class="sbb-loading-indicator__animated-element">
42
+ <span>
43
43
  <span>
44
- <span>
45
- <span></span>
46
- <span></span>
47
- <span></span>
48
- <span></span>
49
- <span></span>
50
- </span>
44
+ <span></span>
45
+ <span></span>
46
+ <span></span>
47
+ <span></span>
48
+ <span></span>
51
49
  </span>
52
50
  </span>
53
51
  </span>
@@ -55,11 +53,11 @@ let P = (() => {
55
53
  }
56
54
  }, r = new WeakMap(), l = new WeakMap(), (() => {
57
55
  const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
58
- a = [y({ reflect: !0 })], p = [y({ reflect: !0 })], u(t, null, a, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, c) => {
56
+ a = [y({ reflect: !0 })], h = [y({ reflect: !0 })], u(t, null, a, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, c) => {
59
57
  e.size = c;
60
- } }, metadata: o }, n, s), u(t, null, p, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, c) => {
58
+ } }, metadata: o }, n, s), u(t, null, h, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, c) => {
61
59
  e.color = c;
62
- } }, metadata: o }, h, w), o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
60
+ } }, metadata: o }, p, w), o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
63
61
  })(), t.elementName = "sbb-loading-indicator", t.role = "progressbar", t.styles = [x, S], t;
64
62
  })();
65
63
  export {
package/loading-indicator-circle/loading-indicator-circle.component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var l = (i) => {
2
2
  throw TypeError(i);
3
3
  };
4
- var d = (i, a, r) => a.has(i) || l("Cannot " + r);
5
- var s = (i, a, r) => (d(i, a, "read from private field"), r ? r.call(i) : a.get(i)), b = (i, a, r) => a.has(i) ? l("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), g = (i, a, r, t) => (d(i, a, "write to private field"), t ? t.call(i, r) : a.set(i, r), r);
6
- import { __esDecorate as u, __runInitializers as m } from "tslib";
4
+ var s = (i, a, r) => a.has(i) || l("Cannot " + r);
5
+ var d = (i, a, r) => (s(i, a, "read from private field"), r ? r.call(i) : a.get(i)), b = (i, a, r) => a.has(i) ? l("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), g = (i, a, r, t) => (s(i, a, "write to private field"), t ? t.call(i, r) : a.set(i, r), r);
6
+ import { __esDecorate as h, __runInitializers as m } from "tslib";
7
7
  import { css as p, html as v } from "lit";
8
8
  import { property as f } from "lit/decorators.js";
9
9
  import { SbbElement as k } from "../core/base-elements.js";
10
10
  import { boxSizingStyles as y } from "../core/styles.js";
11
- const _ = p`:host{display:inline-block;line-height:0;--sbb-loading-indicator-circle-color: var(--sbb-color-primary);--sbb-loading-indicator-circle-padding: .125rem;--sbb-loading-indicator-circle-duration: var(--sbb-disable-animation-duration, 1.5s);--sbb-loading-indicator-circle-background-color: var(--sbb-color-white);--sbb-loading-indicator-circle-background: conic-gradient( from 90deg, transparent, var(--sbb-loading-indicator-circle-color) );--sbb-loading-indicator-circle-animated-width: .1875em;--sbb-loading-indicator-circle-animated-height: .1875em;--sbb-loading-indicator-circle-animated-border-radius: 50%}@media(forced-colors:active){:host{--sbb-loading-indicator-circle-color: CanvasText !important;--sbb-loading-indicator-circle-animated-width: 50%;--sbb-loading-indicator-circle-animated-height: 100%;--sbb-loading-indicator-circle-animated-border-radius: 0;--sbb-loading-indicator-circle-background: transparent}}:host([color=smoke]){--sbb-loading-indicator-circle-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-circle-color: var(--sbb-color-white)}:host([color=white]){--sbb-loading-indicator-circle-background-color: var(--sbb-color-iron)}.sbb-loading-indicator{display:inline-flex;padding:var(--sbb-loading-indicator-circle-padding);vertical-align:middle;line-height:1}.sbb-loading-indicator__animated-element{width:1.25em;height:1.25em;display:inline-block;color:transparent;position:relative;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--sbb-loading-indicator-circle-background);-webkit-mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-circle-background-color));mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-circle-background-color));animation:rotation var(--sbb-loading-indicator-circle-duration) infinite linear}.sbb-loading-indicator__animated-element:after{content:"";width:var(--sbb-loading-indicator-circle-animated-width);height:var(--sbb-loading-indicator-circle-animated-height);background:var(--sbb-loading-indicator-circle-color);border-radius:var(--sbb-loading-indicator-circle-animated-border-radius);position:absolute;top:50%;right:0;translate:0 -50%;overflow:hidden;margin:auto}@keyframes rotation{0%{rotate:0deg}to{rotate:359deg}}`;
11
+ const _ = p`:host{--sbb-loading-indicator-circle-duration: var(--sbb-disable-animation-duration, 1.5s);--sbb-loading-indicator-circle-background: conic-gradient( from 90deg, transparent, var(--sbb-loading-indicator-circle-color) );display:inline-block;line-height:0}@media(forced-colors:active){:host{--sbb-loading-indicator-circle-color: CanvasText !important}}:host([color=smoke]){--sbb-loading-indicator-circle-color: var(--sbb-color-smoke)}:host([color=white]){--sbb-loading-indicator-circle-color: var(--sbb-color-white);--sbb-loading-indicator-circle-background-color: var(--sbb-color-iron)}.sbb-loading-indicator{display:inline-flex;padding:var(--sbb-loading-indicator-circle-padding);vertical-align:middle;line-height:1}.sbb-loading-indicator__animated-element{width:1.25em;height:1.25em;display:inline-block;color:transparent;position:relative;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--sbb-loading-indicator-circle-background);-webkit-mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-circle-background-color));mask:radial-gradient(circle .4375em,rgba(0,0,0,0) 98%,var(--sbb-loading-indicator-circle-background-color));animation:rotation var(--sbb-loading-indicator-circle-duration) infinite linear}.sbb-loading-indicator__animated-element:after{content:"";width:var(--sbb-loading-indicator-circle-animated-width);height:var(--sbb-loading-indicator-circle-animated-height);background:var(--sbb-loading-indicator-circle-color);border-radius:var(--sbb-loading-indicator-circle-animated-border-radius);position:absolute;top:50%;right:0;translate:0 -50%;overflow:hidden;margin:auto}@keyframes rotation{0%{rotate:0deg}to{rotate:359deg}}`;
12
12
  let D = (() => {
13
13
  var e, o;
14
14
  let i = k, a, r = [], t = [];
@@ -20,26 +20,24 @@ let D = (() => {
20
20
  }
21
21
  /** Color variant. */
22
22
  get color() {
23
- return s(this, e);
23
+ return d(this, e);
24
24
  }
25
- set color(c) {
26
- g(this, e, c);
25
+ set color(n) {
26
+ g(this, e, n);
27
27
  }
28
28
  connectedCallback() {
29
29
  super.connectedCallback(), this.internals.ariaBusy = "true";
30
30
  }
31
31
  render() {
32
- return v`
33
- <span class="sbb-loading-indicator">
34
- <span class="sbb-loading-indicator__animated-element"></span>
35
- </span>
36
- `;
32
+ return v` <span class="sbb-loading-indicator">
33
+ <span class="sbb-loading-indicator__animated-element"></span>
34
+ </span>`;
37
35
  }
38
36
  }, e = new WeakMap(), (() => {
39
- const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
40
- a = [f({ reflect: !0 })], u(o, null, a, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (n) => "color" in n, get: (n) => n.color, set: (n, h) => {
41
- n.color = h;
42
- } }, metadata: c }, r, t), c && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
37
+ const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
38
+ a = [f({ reflect: !0 })], h(o, null, a, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (c) => "color" in c, get: (c) => c.color, set: (c, u) => {
39
+ c.color = u;
40
+ } }, metadata: n }, r, t), n && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
43
41
  })(), o.elementName = "sbb-loading-indicator-circle", o.role = "progressbar", o.styles = [y, _], o;
44
42
  })();
45
43
  export {
package/off-brand-theme.css CHANGED
@@ -1637,6 +1637,16 @@ summary {
1637
1637
  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1638
1638
  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1639
1639
  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1640
+ --sbb-loading-indicator-color: var(--sbb-color-primary);
1641
+ --sbb-loading-indicator-window-element-rotation: 55.24deg;
1642
+ --sbb-loading-indicator-window-height: 1.125rem;
1643
+ --sbb-loading-indicator-window-element-width: 3.4375rem;
1644
+ --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
1645
+ --sbb-loading-indicator-circle-padding: 0.125rem;
1646
+ --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
1647
+ --sbb-loading-indicator-circle-animated-width: 0.1875em;
1648
+ --sbb-loading-indicator-circle-animated-height: 0.1875em;
1649
+ --sbb-loading-indicator-circle-animated-border-radius: 50%;
1640
1650
  --sbb-logo-panel-color: var(--sbb-color-brand);
1641
1651
  --sbb-logo-signet-color: var(--sbb-color-white);
1642
1652
  --sbb-logo-word-mark-color: var(--sbb-color-black);
@@ -1783,6 +1793,10 @@ summary {
1783
1793
  --sbb-header-action-active-border-width: 0;
1784
1794
  --sbb-expansion-panel-header-text-color: ButtonText;
1785
1795
  --sbb-form-field-border-color: ButtonBorder;
1796
+ --sbb-loading-indicator-circle-animated-width: 50%;
1797
+ --sbb-loading-indicator-circle-animated-height: 100%;
1798
+ --sbb-loading-indicator-circle-animated-border-radius: 0;
1799
+ --sbb-loading-indicator-circle-background: transparent;
1786
1800
  --sbb-logo-panel-color: ButtonText !important;
1787
1801
  --sbb-logo-signet-color: Canvas !important;
1788
1802
  --sbb-visual-checkbox-selection-color: Canvas;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.7.0-dev.1773393164",
3
+ "version": "4.7.0-dev.1773396165",
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/6fdee50a0219d445a2942e6e6591c8ded991b286"
10
+ "https://github.com/sbb-design-systems/lyne-components/commit/a8df81a0cd578eeaa62e976b373520766496d43d"
11
11
  ],
12
12
  "type": "module",
13
13
  "exports": {
package/safety-theme.css CHANGED
@@ -1637,6 +1637,16 @@ summary {
1637
1637
  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1638
1638
  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1639
1639
  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1640
+ --sbb-loading-indicator-color: var(--sbb-color-primary);
1641
+ --sbb-loading-indicator-window-element-rotation: 55.24deg;
1642
+ --sbb-loading-indicator-window-height: 1.125rem;
1643
+ --sbb-loading-indicator-window-element-width: 3.4375rem;
1644
+ --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
1645
+ --sbb-loading-indicator-circle-padding: 0.125rem;
1646
+ --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
1647
+ --sbb-loading-indicator-circle-animated-width: 0.1875em;
1648
+ --sbb-loading-indicator-circle-animated-height: 0.1875em;
1649
+ --sbb-loading-indicator-circle-animated-border-radius: 50%;
1640
1650
  --sbb-logo-panel-color: var(--sbb-color-brand);
1641
1651
  --sbb-logo-signet-color: var(--sbb-color-white);
1642
1652
  --sbb-logo-word-mark-color: var(--sbb-color-black);
@@ -1783,6 +1793,10 @@ summary {
1783
1793
  --sbb-header-action-active-border-width: 0;
1784
1794
  --sbb-expansion-panel-header-text-color: ButtonText;
1785
1795
  --sbb-form-field-border-color: ButtonBorder;
1796
+ --sbb-loading-indicator-circle-animated-width: 50%;
1797
+ --sbb-loading-indicator-circle-animated-height: 100%;
1798
+ --sbb-loading-indicator-circle-animated-border-radius: 0;
1799
+ --sbb-loading-indicator-circle-background: transparent;
1786
1800
  --sbb-logo-panel-color: ButtonText !important;
1787
1801
  --sbb-logo-signet-color: Canvas !important;
1788
1802
  --sbb-visual-checkbox-selection-color: Canvas;
package/standard-theme.css CHANGED
@@ -1637,6 +1637,16 @@ summary {
1637
1637
  --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1638
1638
  --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1639
1639
  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1640
+ --sbb-loading-indicator-color: var(--sbb-color-primary);
1641
+ --sbb-loading-indicator-window-element-rotation: 55.24deg;
1642
+ --sbb-loading-indicator-window-height: 1.125rem;
1643
+ --sbb-loading-indicator-window-element-width: 3.4375rem;
1644
+ --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
1645
+ --sbb-loading-indicator-circle-padding: 0.125rem;
1646
+ --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
1647
+ --sbb-loading-indicator-circle-animated-width: 0.1875em;
1648
+ --sbb-loading-indicator-circle-animated-height: 0.1875em;
1649
+ --sbb-loading-indicator-circle-animated-border-radius: 50%;
1640
1650
  --sbb-logo-panel-color: var(--sbb-color-brand);
1641
1651
  --sbb-logo-signet-color: var(--sbb-color-white);
1642
1652
  --sbb-logo-word-mark-color: var(--sbb-color-black);
@@ -1783,6 +1793,10 @@ summary {
1783
1793
  --sbb-header-action-active-border-width: 0;
1784
1794
  --sbb-expansion-panel-header-text-color: ButtonText;
1785
1795
  --sbb-form-field-border-color: ButtonBorder;
1796
+ --sbb-loading-indicator-circle-animated-width: 50%;
1797
+ --sbb-loading-indicator-circle-animated-height: 100%;
1798
+ --sbb-loading-indicator-circle-animated-border-radius: 0;
1799
+ --sbb-loading-indicator-circle-background: transparent;
1786
1800
  --sbb-logo-panel-color: ButtonText !important;
1787
1801
  --sbb-logo-signet-color: Canvas !important;
1788
1802
  --sbb-visual-checkbox-selection-color: Canvas;