@sbb-esta/lyne-elements 0.52.0 → 0.52.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (220) hide show
  1. package/accordion.js +54 -54
  2. package/action-group.js +3 -3
  3. package/alert/alert-group.js +22 -22
  4. package/alert/alert.js +22 -22
  5. package/autocomplete.js +126 -126
  6. package/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
  7. package/breadcrumb/breadcrumb-group.js +70 -69
  8. package/breadcrumb/breadcrumb.js +17 -17
  9. package/calendar.js +423 -423
  10. package/card/card-badge.js +17 -17
  11. package/card/card.js +2 -2
  12. package/card/common.js +30 -30
  13. package/checkbox/checkbox-group.js +17 -17
  14. package/checkbox/checkbox.js +34 -34
  15. package/clock.js +83 -83
  16. package/container/sticky-bar.js +16 -16
  17. package/core/a11y.js +91 -91
  18. package/core/base-elements.js +87 -88
  19. package/core/controllers.js +40 -40
  20. package/core/datetime.js +34 -36
  21. package/core/dom.js +26 -26
  22. package/core/eventing.js +33 -33
  23. package/core/mixins.js +122 -122
  24. package/core/overlay/overlay.d.ts.map +1 -1
  25. package/core/overlay.js +55 -50
  26. package/core/testing/event-spy.d.ts +1 -1
  27. package/core/testing/wait-for-image-ready.d.ts +4 -0
  28. package/core/testing/wait-for-image-ready.d.ts.map +1 -0
  29. package/core/testing.d.ts +1 -0
  30. package/core/testing.d.ts.map +1 -1
  31. package/core/testing.js +42 -31
  32. package/custom-elements.json +70 -4
  33. package/datepicker/common.js +55 -55
  34. package/datepicker/datepicker-toggle.js +94 -94
  35. package/datepicker/datepicker.js +144 -144
  36. package/development/accordion.js +2 -3
  37. package/development/action-group.js +2 -3
  38. package/development/alert/alert-group.js +2 -3
  39. package/development/alert/alert.js +2 -3
  40. package/development/autocomplete.js +2 -3
  41. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
  42. package/development/breadcrumb/breadcrumb-group.js +5 -5
  43. package/development/breadcrumb/breadcrumb.js +2 -3
  44. package/development/button/button-link.js +2 -3
  45. package/development/button/button-static.js +2 -3
  46. package/development/button/button.js +2 -3
  47. package/development/button/common.js +2 -3
  48. package/development/button/mini-button.js +2 -3
  49. package/development/button/secondary-button-link.js +2 -3
  50. package/development/button/secondary-button-static.js +2 -3
  51. package/development/button/secondary-button.js +2 -3
  52. package/development/button/tertiary-button-link.js +2 -3
  53. package/development/button/tertiary-button-static.js +2 -3
  54. package/development/button/tertiary-button.js +2 -3
  55. package/development/button/transparent-button-link.js +2 -3
  56. package/development/button/transparent-button-static.js +2 -3
  57. package/development/button/transparent-button.js +2 -3
  58. package/development/calendar.js +2 -3
  59. package/development/card/card-badge.js +2 -3
  60. package/development/card/card-button.js +2 -3
  61. package/development/card/card-link.js +2 -3
  62. package/development/card/card.js +2 -3
  63. package/development/card/common.js +2 -3
  64. package/development/checkbox/checkbox-group.js +2 -3
  65. package/development/checkbox/checkbox.js +2 -3
  66. package/development/chip.js +2 -3
  67. package/development/clock.js +2 -3
  68. package/development/container/container.js +2 -3
  69. package/development/container/sticky-bar.js +2 -3
  70. package/development/core/base-elements.js +4 -7
  71. package/development/core/mixins.js +7 -13
  72. package/development/core/overlay/overlay.d.ts.map +1 -1
  73. package/development/core/overlay.js +9 -3
  74. package/development/core/testing/event-spy.d.ts +1 -1
  75. package/development/core/testing/wait-for-image-ready.d.ts +4 -0
  76. package/development/core/testing/wait-for-image-ready.d.ts.map +1 -0
  77. package/development/core/testing.d.ts +1 -0
  78. package/development/core/testing.d.ts.map +1 -1
  79. package/development/core/testing.js +17 -1
  80. package/development/datepicker/common.js +2 -3
  81. package/development/datepicker/datepicker-next-day.js +2 -3
  82. package/development/datepicker/datepicker-previous-day.js +2 -3
  83. package/development/datepicker/datepicker-toggle.js +2 -3
  84. package/development/datepicker/datepicker.js +2 -3
  85. package/development/dialog/dialog-actions.js +2 -3
  86. package/development/dialog/dialog-content.js +2 -3
  87. package/development/dialog/dialog-title.js +2 -3
  88. package/development/dialog/dialog.js +2 -3
  89. package/development/divider.js +2 -3
  90. package/development/expansion-panel/expansion-panel-content.js +2 -3
  91. package/development/expansion-panel/expansion-panel-header.js +2 -3
  92. package/development/expansion-panel/expansion-panel.js +2 -3
  93. package/development/file-selector.js +2 -3
  94. package/development/footer.js +2 -3
  95. package/development/form-error.js +2 -3
  96. package/development/form-field/form-field-clear.js +2 -3
  97. package/development/form-field/form-field.js +2 -3
  98. package/development/header/common.js +2 -3
  99. package/development/header/header-button.js +2 -3
  100. package/development/header/header-link.js +2 -3
  101. package/development/header/header.js +2 -3
  102. package/development/icon.js +4 -7
  103. package/development/image/image.d.ts +12 -3
  104. package/development/image/image.d.ts.map +1 -1
  105. package/development/image.js +41 -24
  106. package/development/journey-header.js +2 -3
  107. package/development/lead-container.js +2 -3
  108. package/development/link/block-link-button.js +2 -3
  109. package/development/link/block-link-static.js +2 -3
  110. package/development/link/block-link.js +2 -3
  111. package/development/link/common.js +3 -5
  112. package/development/link/link-button.js +2 -3
  113. package/development/link/link-static.js +2 -3
  114. package/development/link/link.js +2 -3
  115. package/development/link-list.js +2 -3
  116. package/development/loading-indicator.js +2 -3
  117. package/development/logo.js +2 -3
  118. package/development/map-container.js +2 -3
  119. package/development/menu/common.js +2 -3
  120. package/development/menu/menu-button.js +2 -3
  121. package/development/menu/menu-link.js +2 -3
  122. package/development/menu/menu.js +2 -3
  123. package/development/message.js +2 -3
  124. package/development/navigation/common.js +2 -3
  125. package/development/navigation/navigation-button.js +2 -3
  126. package/development/navigation/navigation-link.js +2 -3
  127. package/development/navigation/navigation-list.js +2 -3
  128. package/development/navigation/navigation-marker.js +2 -3
  129. package/development/navigation/navigation-section.js +2 -3
  130. package/development/navigation/navigation.js +2 -3
  131. package/development/notification.js +2 -3
  132. package/development/option/optgroup.js +2 -3
  133. package/development/option/option.js +2 -3
  134. package/development/overlay.js +3 -5
  135. package/development/popover/popover-trigger.js +2 -3
  136. package/development/popover/popover.js +2 -3
  137. package/development/radio-button/radio-button-group.js +2 -3
  138. package/development/radio-button/radio-button.js +2 -3
  139. package/development/screen-reader-only.js +2 -3
  140. package/development/select.js +2 -3
  141. package/development/selection-panel.js +2 -3
  142. package/development/signet.js +2 -3
  143. package/development/skiplink-list.js +2 -3
  144. package/development/slider.js +2 -3
  145. package/development/status.js +2 -3
  146. package/development/stepper/step-label.js +2 -3
  147. package/development/stepper/step.js +2 -3
  148. package/development/stepper/stepper/stepper.d.ts +1 -1
  149. package/development/stepper/stepper/stepper.d.ts.map +1 -1
  150. package/development/stepper/stepper.js +5 -6
  151. package/development/tabs/tab-group.js +2 -3
  152. package/development/tabs/tab-title.js +2 -3
  153. package/development/tag/tag-group.js +2 -3
  154. package/development/tag/tag.js +2 -3
  155. package/development/teaser-hero.js +2 -3
  156. package/development/teaser-paid.js +2 -3
  157. package/development/teaser.js +2 -3
  158. package/development/time-input.js +2 -3
  159. package/development/timetable-occupancy-icon.js +2 -3
  160. package/development/timetable-occupancy.js +2 -3
  161. package/development/title.js +3 -5
  162. package/development/toast.js +2 -3
  163. package/development/toggle/toggle-option.js +3 -5
  164. package/development/toggle/toggle.js +2 -3
  165. package/development/toggle-check.js +10 -3
  166. package/development/train/train-blocked-passage.js +2 -3
  167. package/development/train/train-formation.js +2 -3
  168. package/development/train/train-wagon.js +2 -3
  169. package/development/train/train.js +2 -3
  170. package/development/visual-checkbox.js +2 -3
  171. package/dialog/dialog-title.js +20 -20
  172. package/dialog/dialog.js +66 -66
  173. package/expansion-panel/expansion-panel-header.js +20 -20
  174. package/expansion-panel/expansion-panel.js +60 -60
  175. package/file-selector.js +91 -91
  176. package/form-field/form-field-clear.js +12 -12
  177. package/form-field/form-field.js +111 -111
  178. package/header/header.js +53 -53
  179. package/icon.js +107 -107
  180. package/image/image.d.ts +12 -3
  181. package/image/image.d.ts.map +1 -1
  182. package/image.js +118 -105
  183. package/journey-header.js +29 -29
  184. package/map-container.js +23 -23
  185. package/menu/menu.js +91 -91
  186. package/navigation/common.js +16 -16
  187. package/navigation/navigation-marker.js +34 -34
  188. package/navigation/navigation-section.js +83 -83
  189. package/navigation/navigation.js +87 -87
  190. package/notification.js +52 -52
  191. package/option/optgroup.js +45 -45
  192. package/option/option.js +108 -108
  193. package/overlay.js +5 -5
  194. package/package.json +1 -1
  195. package/popover/popover.js +110 -110
  196. package/radio-button/radio-button-group.js +93 -93
  197. package/radio-button/radio-button.js +84 -84
  198. package/select.js +178 -178
  199. package/selection-panel.js +44 -44
  200. package/slider.js +58 -58
  201. package/status.js +6 -6
  202. package/stepper/step-label.js +19 -19
  203. package/stepper/step.js +31 -31
  204. package/stepper/stepper/stepper.d.ts +1 -1
  205. package/stepper/stepper/stepper.d.ts.map +1 -1
  206. package/stepper/stepper.js +48 -48
  207. package/tabs/tab-group.js +67 -67
  208. package/tag/tag-group.js +8 -8
  209. package/tag/tag.js +27 -27
  210. package/teaser-paid.js +12 -12
  211. package/time-input.js +73 -73
  212. package/timetable-occupancy-icon.js +26 -26
  213. package/timetable-occupancy.js +9 -9
  214. package/toast.js +38 -38
  215. package/toggle/toggle-option.js +33 -33
  216. package/toggle/toggle.js +46 -46
  217. package/toggle-check.js +14 -14
  218. package/train/train-formation.js +36 -37
  219. package/train/train-wagon.js +30 -30
  220. package/train/train.js +13 -13
package/accordion.js CHANGED
@@ -1,88 +1,88 @@
1
- import { css as c, LitElement as p, html as b } from "lit";
2
- import { property as h, customElement as _ } from "lit/decorators.js";
3
- import { SbbConnectedAbortController as u } from "./core/controllers.js";
4
- import { SbbHydrationMixin as d } from "./core/mixins.js";
5
- import { SbbExpansionPanelElement as f } from "./expansion-panel.js";
6
- const m = c`*,:before,:after{box-sizing:border-box}:host{display:block}`;
7
- var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
8
- for (var s = i > 1 ? void 0 : i ? x(t, l) : t, r = e.length - 1, a; r >= 0; r--)
9
- (a = e[r]) && (s = (i ? a(t, l, s) : a(s)) || s);
10
- return i && s && v(t, l, s), s;
1
+ import { css as h, LitElement as b, html as p } from "lit";
2
+ import { property as c, customElement as f } from "lit/decorators.js";
3
+ import { SbbConnectedAbortController as d } from "./core/controllers.js";
4
+ import { SbbHydrationMixin as u } from "./core/mixins.js";
5
+ import { SbbExpansionPanelElement as m } from "./expansion-panel.js";
6
+ const v = h`*,:before,:after{box-sizing:border-box}:host{display:block}`;
7
+ var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, e, s, l) => {
8
+ for (var i = l > 1 ? void 0 : l ? x(e, s) : e, a = t.length - 1, n; a >= 0; a--)
9
+ (n = t[a]) && (i = (l ? n(e, s, i) : n(i)) || i);
10
+ return l && i && g(e, s, i), i;
11
11
  };
12
- let n = class extends d(p) {
12
+ let r = class extends u(b) {
13
13
  constructor() {
14
- super(...arguments), this._titleLevel = null, this._multi = !1, this.size = "l", this._abort = new u(this);
14
+ super(...arguments), this.c = null, this.b = !1, this.size = "l", this.f = new d(this);
15
15
  }
16
- set titleLevel(e) {
17
- this._titleLevel = e, this._setTitleLevelOnChildren();
16
+ set titleLevel(t) {
17
+ this.c = t, this.d();
18
18
  }
19
19
  get titleLevel() {
20
- return this._titleLevel;
20
+ return this.c;
21
21
  }
22
- set multi(e) {
23
- const t = this._multi;
24
- this._multi = e, this._resetExpansionPanels(this._multi, t);
22
+ set multi(t) {
23
+ const e = this.b;
24
+ this.b = t, this.e(this.b, e);
25
25
  }
26
26
  get multi() {
27
- return this._multi;
27
+ return this.b;
28
28
  }
29
- _closePanels(e) {
30
- var t;
31
- ((t = e.target) == null ? void 0 : t.localName) !== "sbb-expansion-panel" || this.multi || this._expansionPanels.filter((l) => l !== e.target).forEach((l) => l.expanded = !1);
29
+ g(t) {
30
+ var e;
31
+ ((e = t.target) == null ? void 0 : e.localName) !== "sbb-expansion-panel" || this.multi || this.a.filter((s) => s !== t.target).forEach((s) => s.expanded = !1);
32
32
  }
33
- _resetExpansionPanels(e, t) {
34
- const l = this._expansionPanels;
35
- l.length > 1 && t && !e && (l[0].expanded = !0, l.filter((i, s) => s > 0).forEach((i) => i.expanded = !1));
33
+ e(t, e) {
34
+ const s = this.a;
35
+ s.length > 1 && e && !t && (s[0].expanded = !0, s.filter((l, i) => i > 0).forEach((l) => l.expanded = !1));
36
36
  }
37
- _setTitleLevelOnChildren() {
38
- this._expansionPanels.forEach(
39
- (e) => e.titleLevel = this.titleLevel
37
+ d() {
38
+ this.a.forEach(
39
+ (t) => t.titleLevel = this.titleLevel
40
40
  );
41
41
  }
42
- get _expansionPanels() {
43
- var e;
44
- return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-expansion-panel")) ?? []);
42
+ get a() {
43
+ var t;
44
+ return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-expansion-panel")) ?? []);
45
45
  }
46
46
  connectedCallback() {
47
47
  super.connectedCallback();
48
- const e = this._abort.signal;
48
+ const t = this.f.signal;
49
49
  this.addEventListener(
50
- f.events.willOpen,
51
- (t) => this._closePanels(t),
52
- { signal: e }
50
+ m.events.willOpen,
51
+ (e) => this.g(e),
52
+ { signal: t }
53
53
  );
54
54
  }
55
- willUpdate(e) {
56
- super.willUpdate(e), e.has("size") && this._expansionPanels.forEach((t) => t.size = this.size);
55
+ willUpdate(t) {
56
+ super.willUpdate(t), t.has("size") && this.a.forEach((e) => e.size = this.size);
57
57
  }
58
- _handleSlotchange() {
59
- this._expansionPanels.forEach(
60
- (e, t, l) => {
61
- e.titleLevel = this.titleLevel, e.size = this.size, e.toggleAttribute("data-accordion-first", t === 0), e.toggleAttribute("data-accordion-last", t === l.length - 1);
58
+ h() {
59
+ this.a.forEach(
60
+ (t, e, s) => {
61
+ t.titleLevel = this.titleLevel, t.size = this.size, t.toggleAttribute("data-accordion-first", e === 0), t.toggleAttribute("data-accordion-last", e === s.length - 1);
62
62
  }
63
63
  );
64
64
  }
65
65
  render() {
66
- return b`
66
+ return p`
67
67
  <div class="sbb-accordion">
68
- <slot @slotchange=${this._handleSlotchange}></slot>
68
+ <slot @slotchange=${this.h}></slot>
69
69
  </div>
70
70
  `;
71
71
  }
72
72
  };
73
- n.styles = m;
73
+ r.styles = v;
74
74
  o([
75
- h({ attribute: "title-level" })
76
- ], n.prototype, "titleLevel", 1);
75
+ c({ attribute: "title-level" })
76
+ ], r.prototype, "titleLevel", 1);
77
77
  o([
78
- h({ type: Boolean })
79
- ], n.prototype, "multi", 1);
78
+ c({ type: Boolean })
79
+ ], r.prototype, "multi", 1);
80
80
  o([
81
- h({ reflect: !0 })
82
- ], n.prototype, "size", 2);
83
- n = o([
84
- _("sbb-accordion")
85
- ], n);
81
+ c({ reflect: !0 })
82
+ ], r.prototype, "size", 2);
83
+ r = o([
84
+ f("sbb-accordion")
85
+ ], r);
86
86
  export {
87
- n as SbbAccordionElement
87
+ r as SbbAccordionElement
88
88
  };
package/action-group.js CHANGED
@@ -10,16 +10,16 @@ let i = class extends p {
10
10
  constructor() {
11
11
  super(...arguments), this.alignGroup = "start", this.horizontalFrom = "medium", this.orientation = "horizontal", this.buttonSize = "l", this.linkSize = "m";
12
12
  }
13
- _syncButtons() {
13
+ a() {
14
14
  var t;
15
15
  (t = this.querySelectorAll) == null || t.call(this, "[data-sbb-button]").forEach(
16
16
  (o) => o.size = this.buttonSize
17
17
  );
18
18
  }
19
19
  willUpdate(t) {
20
- super.willUpdate(t), t.has("buttonSize") && this._syncButtons(), t.has("linkSize") && this._syncLinks();
20
+ super.willUpdate(t), t.has("buttonSize") && this.a(), t.has("linkSize") && this.b();
21
21
  }
22
- _syncLinks() {
22
+ b() {
23
23
  var t;
24
24
  (t = this.querySelectorAll) == null || t.call(this, "sbb-block-link, sbb-block-link-button, sbb-block-link-static").forEach((o) => {
25
25
  o.size = this.linkSize;
@@ -1,54 +1,54 @@
1
- import { css as h, LitElement as m, nothing as u } from "lit";
1
+ import { css as u, LitElement as h, nothing as m } from "lit";
2
2
  import { property as b, state as f, customElement as v } from "lit/decorators.js";
3
3
  import { html as c, unsafeStatic as p } from "lit/static-html.js";
4
4
  import { SbbConnectedAbortController as g } from "../core/controllers.js";
5
5
  import { EventEmitter as d } from "../core/eventing.js";
6
- import { SbbHydrationMixin as _ } from "../core/mixins.js";
7
- import { SbbAlertElement as y } from "./alert.js";
8
- const A = h`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
9
- var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
10
- for (var o = r > 1 ? void 0 : r ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
6
+ import { SbbHydrationMixin as y } from "../core/mixins.js";
7
+ import { SbbAlertElement as x } from "./alert.js";
8
+ const E = u`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
9
+ var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
10
+ for (var o = r > 1 ? void 0 : r ? _(t, i) : t, a = e.length - 1, n; a >= 0; a--)
11
11
  (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
12
- return r && o && x(t, i, o), o;
12
+ return r && o && A(t, i, o), o;
13
13
  };
14
- let s = class extends _(m) {
14
+ let s = class extends y(h) {
15
15
  constructor() {
16
- super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new d(
16
+ super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this.b = new d(
17
17
  this,
18
18
  s.events.didDismissAlert
19
- ), this._empty = new d(this, s.events.empty), this._abort = new g(this);
19
+ ), this.c = new d(this, s.events.empty), this.d = new g(this);
20
20
  }
21
- _removeAlert(e) {
21
+ e(e) {
22
22
  var r;
23
23
  const t = e.target, i = document.activeElement === t;
24
- (r = t.parentNode) == null || r.removeChild(t), this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
24
+ (r = t.parentNode) == null || r.removeChild(t), this.b.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
25
25
  once: !0
26
26
  }));
27
27
  }
28
28
  connectedCallback() {
29
29
  super.connectedCallback();
30
- const e = this._abort.signal;
31
- this.addEventListener(y.events.dismissalRequested, (t) => this._removeAlert(t), {
30
+ const e = this.d.signal;
31
+ this.addEventListener(x.events.dismissalRequested, (t) => this.e(t), {
32
32
  signal: e
33
33
  });
34
34
  }
35
- _slotChanged(e) {
36
- const t = this._hasAlerts;
37
- this._hasAlerts = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this._hasAlerts && t && this._empty.emit(), this.toggleAttribute("data-empty", !this._hasAlerts);
35
+ f(e) {
36
+ const t = this.a;
37
+ this.a = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this.a && t && this.c.emit(), this.toggleAttribute("data-empty", !this.a);
38
38
  }
39
39
  render() {
40
40
  const e = `h${this.accessibilityTitleLevel}`;
41
41
  return c`
42
42
  <div class="sbb-alert-group">
43
- ${this._hasAlerts ? c`<${p(e)} class="sbb-alert-group__title">
43
+ ${this.a ? c`<${p(e)} class="sbb-alert-group__title">
44
44
  <slot name="accessibility-title">${this.accessibilityTitle}</slot>
45
- </${p(e)}>` : u}
46
- <slot @slotchange=${(t) => this._slotChanged(t)}></slot>
45
+ </${p(e)}>` : m}
46
+ <slot @slotchange=${(t) => this.f(t)}></slot>
47
47
  </div>
48
48
  `;
49
49
  }
50
50
  };
51
- s.styles = A;
51
+ s.styles = E;
52
52
  s.events = {
53
53
  didDismissAlert: "didDismissAlert",
54
54
  empty: "empty"
@@ -64,7 +64,7 @@ l([
64
64
  ], s.prototype, "accessibilityTitleLevel", 2);
65
65
  l([
66
66
  f()
67
- ], s.prototype, "_hasAlerts", 2);
67
+ ], s.prototype, "a", 2);
68
68
  s = l([
69
69
  v("sbb-alert-group")
70
70
  ], s);
package/alert/alert.js CHANGED
@@ -2,49 +2,49 @@ import { css as m, LitElement as v, html as d, nothing as r } from "lit";
2
2
  import { property as i, customElement as h } from "lit/decorators.js";
3
3
  import { SbbLanguageController as u } from "../core/controllers.js";
4
4
  import { EventEmitter as c } from "../core/eventing.js";
5
- import { i18nFindOutMore as g, i18nCloseAlert as _ } from "../core/i18n.js";
6
- import { SbbIconNameMixin as f } from "../icon.js";
5
+ import { i18nFindOutMore as g, i18nCloseAlert as f } from "../core/i18n.js";
6
+ import { SbbIconNameMixin as y } from "../icon.js";
7
7
  import "../button/transparent-button.js";
8
8
  import "../divider.js";
9
9
  import "../link.js";
10
10
  import "../title.js";
11
- const y = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
12
- var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, n, l, o) => {
13
- for (var a = o > 1 ? void 0 : o ? x(n, l) : n, b = s.length - 1, p; b >= 0; b--)
14
- (p = s[b]) && (a = (o ? p(n, l, a) : p(a)) || a);
15
- return o && a && w(n, l, a), a;
11
+ const _ = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
12
+ var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (s, n, b, o) => {
13
+ for (var a = o > 1 ? void 0 : o ? w(n, b) : n, l = s.length - 1, p; l >= 0; l--)
14
+ (p = s[l]) && (a = (o ? p(n, b, a) : p(a)) || a);
15
+ return o && a && x(n, b, a), a;
16
16
  };
17
- let t = class extends f(v) {
17
+ let t = class extends y(v) {
18
18
  constructor() {
19
- super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this._willOpen = new c(this, t.events.willOpen), this._didOpen = new c(this, t.events.didOpen), this._dismissalRequested = new c(
19
+ super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this.c = new c(this, t.events.willOpen), this.d = new c(this, t.events.didOpen), this.e = new c(
20
20
  this,
21
21
  t.events.dismissalRequested
22
- ), this._language = new u(this);
22
+ ), this.b = new u(this);
23
23
  }
24
24
  /** The state of the alert. */
25
- get _state() {
25
+ get a() {
26
26
  return this.getAttribute("data-state") ?? "closed";
27
27
  }
28
- set _state(s) {
28
+ set a(s) {
29
29
  this.setAttribute("data-state", s);
30
30
  }
31
31
  async firstUpdated(s) {
32
- super.firstUpdated(s), this._open();
32
+ super.firstUpdated(s), this.f();
33
33
  }
34
34
  /** Requests dismissal of the alert. */
35
35
  requestDismissal() {
36
- this._dismissalRequested.emit();
36
+ this.e.emit();
37
37
  }
38
38
  /** Open the alert. */
39
- _open() {
40
- this._state = "opening", this._willOpen.emit();
39
+ f() {
40
+ this.a = "opening", this.c.emit();
41
41
  }
42
- _onAnimationEnd(s) {
43
- this._state === "opening" && s.animationName === "open-opacity" && (this._state = "opened", this._didOpen.emit());
42
+ g(s) {
43
+ this.a === "opening" && s.animationName === "open-opacity" && (this.a = "opened", this.d.emit());
44
44
  }
45
45
  render() {
46
46
  return d`
47
- <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
47
+ <div class="sbb-alert__transition-wrapper" @animationend=${this.g}>
48
48
  <!-- sub wrapper needed to properly support fade in animation -->
49
49
  <div class="sbb-alert__transition-sub-wrapper">
50
50
  <div class="sbb-alert">
@@ -68,7 +68,7 @@ let t = class extends f(v) {
68
68
  rel=${this.rel ?? r}
69
69
  negative
70
70
  >
71
- ${this.linkContent ? this.linkContent : g[this._language.current]}
71
+ ${this.linkContent ? this.linkContent : g[this.b.current]}
72
72
  </sbb-link>` : r}
73
73
  </span>
74
74
  ${this.readonly ? r : d`<span class="sbb-alert__close-button-wrapper">
@@ -82,7 +82,7 @@ let t = class extends f(v) {
82
82
  size=${this.size === "l" ? "m" : this.size}
83
83
  icon-name="cross-small"
84
84
  @click=${() => this.requestDismissal()}
85
- aria-label=${_[this._language.current]}
85
+ aria-label=${f[this.b.current]}
86
86
  class="sbb-alert__close-button"
87
87
  ></sbb-transparent-button>
88
88
  </span>`}
@@ -92,7 +92,7 @@ let t = class extends f(v) {
92
92
  `;
93
93
  }
94
94
  };
95
- t.styles = y;
95
+ t.styles = _;
96
96
  t.events = {
97
97
  willOpen: "willOpen",
98
98
  didOpen: "didOpen",