@sbb-esta/lyne-elements 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/calendar/calendar.d.ts +5 -2
  2. package/calendar/calendar.d.ts.map +1 -1
  3. package/calendar.js +73 -66
  4. package/container/container.js +5 -5
  5. package/core/base-elements/open-close-base-element.d.ts +10 -0
  6. package/core/base-elements/open-close-base-element.d.ts.map +1 -1
  7. package/core/base-elements.js +4 -0
  8. package/core/controllers/inert-controller.d.ts +18 -0
  9. package/core/controllers/inert-controller.d.ts.map +1 -0
  10. package/core/controllers.d.ts +1 -0
  11. package/core/controllers.d.ts.map +1 -1
  12. package/core/controllers.js +67 -23
  13. package/core/overlay/overlay.d.ts +0 -13
  14. package/core/overlay/overlay.d.ts.map +1 -1
  15. package/core/overlay.js +36 -86
  16. package/custom-elements.json +369 -65
  17. package/datepicker/datepicker-toggle/datepicker-toggle.d.ts +4 -0
  18. package/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
  19. package/datepicker/datepicker-toggle.js +51 -41
  20. package/development/calendar/calendar.d.ts +5 -2
  21. package/development/calendar/calendar.d.ts.map +1 -1
  22. package/development/calendar.js +35 -19
  23. package/development/container/container.js +8 -4
  24. package/development/core/base-elements/open-close-base-element.d.ts +10 -0
  25. package/development/core/base-elements/open-close-base-element.d.ts.map +1 -1
  26. package/development/core/base-elements.js +5 -1
  27. package/development/core/controllers/inert-controller.d.ts +18 -0
  28. package/development/core/controllers/inert-controller.d.ts.map +1 -0
  29. package/development/core/controllers.d.ts +1 -0
  30. package/development/core/controllers.d.ts.map +1 -1
  31. package/development/core/controllers.js +90 -1
  32. package/development/core/overlay/overlay.d.ts +0 -13
  33. package/development/core/overlay/overlay.d.ts.map +1 -1
  34. package/development/core/overlay.js +1 -87
  35. package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts +4 -0
  36. package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
  37. package/development/datepicker/datepicker-toggle.js +17 -2
  38. package/development/dialog/dialog/dialog.d.ts.map +1 -1
  39. package/development/dialog/dialog.js +3 -4
  40. package/development/flip-card/flip-card/flip-card.d.ts.map +1 -1
  41. package/development/flip-card/flip-card-details/flip-card-details.d.ts.map +1 -1
  42. package/development/flip-card/flip-card-details.js +28 -9
  43. package/development/flip-card/flip-card-summary.js +6 -1
  44. package/development/flip-card/flip-card.js +43 -12
  45. package/development/form-field/form-field.js +4 -2
  46. package/development/lead-container.js +5 -1
  47. package/development/menu/menu/menu.d.ts +1 -0
  48. package/development/menu/menu/menu.d.ts.map +1 -1
  49. package/development/menu/menu.js +6 -9
  50. package/development/navigation/navigation/navigation.d.ts +1 -0
  51. package/development/navigation/navigation/navigation.d.ts.map +1 -1
  52. package/development/navigation/navigation.js +6 -9
  53. package/development/overlay/overlay-base-element.d.ts +2 -1
  54. package/development/overlay/overlay-base-element.d.ts.map +1 -1
  55. package/development/overlay/overlay.d.ts.map +1 -1
  56. package/development/overlay.js +5 -9
  57. package/development/popover/popover.js +2 -2
  58. package/development/toggle/toggle/toggle.d.ts +2 -1
  59. package/development/toggle/toggle/toggle.d.ts.map +1 -1
  60. package/development/toggle/toggle-option/toggle-option.d.ts.map +1 -1
  61. package/development/toggle/toggle-option.js +3 -2
  62. package/development/toggle/toggle.js +7 -7
  63. package/dialog/dialog/dialog.d.ts.map +1 -1
  64. package/dialog/dialog.js +11 -12
  65. package/flip-card/flip-card/flip-card.d.ts.map +1 -1
  66. package/flip-card/flip-card-details/flip-card-details.d.ts.map +1 -1
  67. package/flip-card/flip-card-details.js +19 -17
  68. package/flip-card/flip-card-summary.js +13 -13
  69. package/flip-card/flip-card.js +26 -24
  70. package/form-field/form-field.js +1 -1
  71. package/lead-container.js +1 -1
  72. package/menu/menu/menu.d.ts +1 -0
  73. package/menu/menu/menu.d.ts.map +1 -1
  74. package/menu/menu.js +30 -30
  75. package/navigation/navigation/navigation.d.ts +1 -0
  76. package/navigation/navigation/navigation.d.ts.map +1 -1
  77. package/navigation/navigation.js +37 -37
  78. package/overlay/overlay-base-element.d.ts +2 -1
  79. package/overlay/overlay-base-element.d.ts.map +1 -1
  80. package/overlay/overlay.d.ts.map +1 -1
  81. package/overlay.js +44 -45
  82. package/package.json +1 -1
  83. package/popover/popover.js +1 -1
  84. package/toggle/toggle/toggle.d.ts +2 -1
  85. package/toggle/toggle/toggle.d.ts.map +1 -1
  86. package/toggle/toggle-option/toggle-option.d.ts.map +1 -1
  87. package/toggle/toggle-option.js +8 -8
  88. package/toggle/toggle.js +20 -21
@@ -1,22 +1,22 @@
1
- import { css as n, LitElement as o, html as b } from "lit";
1
+ import { css as o, LitElement as b, html as d } from "lit";
2
2
  import { property as p, customElement as g } from "lit/decorators.js";
3
3
  import { hostAttributes as f } from "../core/decorators.js";
4
- const c = n`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){--sbb-image-border-radius: 0;--sbb-image-aspect-ratio: auto;width:100%;height:100%}`;
5
- var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, d = (i, e, a, t) => {
6
- for (var r = t > 1 ? void 0 : t ? h(e, a) : e, m = i.length - 1, l; m >= 0; m--)
7
- (l = i[m]) && (r = (t ? l(e, a, r) : l(r)) || r);
8
- return t && r && u(e, a, r), r;
4
+ const c = o`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){--sbb-image-border-radius: 0;--sbb-image-aspect-ratio: auto;width:100%;height:100%}`;
5
+ var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (t, a, r, i) => {
6
+ for (var e = i > 1 ? void 0 : i ? h(a, r) : a, m = t.length - 1, l; m >= 0; m--)
7
+ (l = t[m]) && (e = (i ? l(a, r, e) : l(e)) || e);
8
+ return i && e && u(a, r, e), e;
9
9
  };
10
- let s = class extends o {
10
+ let s = class extends b {
11
11
  constructor() {
12
12
  super(...arguments), this.imageAlignment = "after";
13
13
  }
14
- willUpdate(i) {
15
- var e, a;
16
- super.willUpdate(i), i.has("imageAlignment") && ((a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-flip-card")) == null || a.setAttribute("data-image-alignment", this.imageAlignment));
14
+ willUpdate(t) {
15
+ var a, r;
16
+ super.willUpdate(t), t.has("imageAlignment") && ((r = (a = this.closest) == null ? void 0 : a.call(this, "sbb-flip-card")) == null || r.setAttribute("data-image-alignment", this.imageAlignment));
17
17
  }
18
18
  render() {
19
- return b`
19
+ return d`
20
20
  <div class="sbb-flip-card-summary">
21
21
  <slot></slot>
22
22
  <div class="sbb-flip-card-summary--image-wrapper">
@@ -27,10 +27,10 @@ let s = class extends o {
27
27
  }
28
28
  };
29
29
  s.styles = c;
30
- d([
30
+ n([
31
31
  p({ attribute: "image-alignment", reflect: !0 })
32
32
  ], s.prototype, "imageAlignment", 2);
33
- s = d([
33
+ s = n([
34
34
  g("sbb-flip-card-summary"),
35
35
  f({
36
36
  slot: "summary"
@@ -8,15 +8,15 @@ import { i18nFlipCard as x, i18nReverseCard as w } from "../core/i18n.js";
8
8
  import { SbbHydrationMixin as C } from "../core/mixins.js";
9
9
  import "../button/secondary-button-static.js";
10
10
  import "../screen-reader-only.js";
11
- const S = l`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-flip-card-details-transition-delay: 0s;position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}@media (any-hover: hover){:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80)}}:host([data-flipped]){--sbb-flip-card-background-color: var(--sbb-color-midnight);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: 0s;--sbb-flip-card-details-min-height: fit-content}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-flipped]) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media (min-width: 37.5rem) and (max-width: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:pointer}@media (forced-colors: active){.sbb-flip-card:after{content:"";border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}}@media (forced-colors: active) and (any-hover: hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card-button{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:pointer}.sbb-flip-card-button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
12
- var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, n = (i, t, e, s) => {
13
- for (var r = s > 1 ? void 0 : s ? L(t, e) : t, o = i.length - 1, b; o >= 0; o--)
14
- (b = i[o]) && (r = (s ? b(t, e, r) : b(r)) || r);
15
- return s && r && k(t, e, r), r;
11
+ const z = l`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-toggle-icon-transform: rotate(0);--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}@media (any-hover: hover){:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);--sbb-flip-card-translate-title-y-hover: -.0625rem}}:host([data-flipped]){--sbb-flip-card-toggle-icon-transform: rotate(45deg);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-flip-card-summary-transition-delay: 0s}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-flipped]) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media (min-width: 37.5rem) and (max-width: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:pointer}@media (forced-colors: active){.sbb-flip-card:after{content:"";border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}}@media (forced-colors: active) and (any-hover: hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card:before{content:"";opacity:0;pointer-events:none;position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s);background-color:var(--sbb-color-midnight);width:var(--sbb-size-element-xs);height:var(--sbb-size-element-xs);border-radius:16rem;transition:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease-out}:host([data-flipped]) .sbb-flip-card:before{opacity:1;inset-inline-start:0;inset-block-end:0;width:100%;height:100%;border-radius:var(--sbb-flip-card-border-radius);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x))}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:pointer}.sbb-flip-card-button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
12
+ var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, b = (i, t, a, s) => {
13
+ for (var r = s > 1 ? void 0 : s ? S(t, a) : t, o = i.length - 1, n; o >= 0; o--)
14
+ (n = i[o]) && (r = (s ? n(t, a, r) : n(r)) || r);
15
+ return s && r && k(t, a, r), r;
16
16
  };
17
- let a = class extends C(d) {
17
+ let e = class extends C(d) {
18
18
  constructor() {
19
- super(...arguments), this.flip = new _(this, a.events.flip), this._flipped = !1, this._abort = new v(this), this._language = new y(this);
19
+ super(...arguments), this.flip = new _(this, e.events.flip), this._flipped = !1, this._abort = new v(this), this._language = new y(this);
20
20
  }
21
21
  /** Returns the slotted sbb-flip-card-summary. */
22
22
  get summary() {
@@ -36,15 +36,15 @@ let a = class extends C(d) {
36
36
  super.connectedCallback(), this.addEventListener(
37
37
  "click",
38
38
  (i) => {
39
- var t, e;
40
- (i.target === this || !((e = (t = i.target) == null ? void 0 : t.matches) != null && e.call(t, g))) && this.toggle();
39
+ var t, a;
40
+ (i.target === this || !((a = (t = i.target) == null ? void 0 : t.matches) != null && a.call(t, g))) && this.toggle();
41
41
  },
42
42
  { signal: this._abort.signal }
43
43
  );
44
44
  }
45
45
  /** Toggles the state of the sbb-flip-card. */
46
46
  toggle() {
47
- this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.flip.emit();
47
+ this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.details.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.flip.emit();
48
48
  }
49
49
  async _accessibilityLabel() {
50
50
  var i, t;
@@ -62,28 +62,30 @@ let a = class extends C(d) {
62
62
  </button>
63
63
  <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
64
64
  <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
65
- <sbb-secondary-button-static
66
- class="sbb-flip-card--toggle-button"
67
- icon-name=${this._flipped ? "cross-small" : "plus-small"}
68
- size="s"
69
- ></sbb-secondary-button-static>
65
+ <sbb-secondary-button-static class="sbb-flip-card--toggle-button" size="s">
66
+ <sbb-icon
67
+ class="sbb-flip-card--toggle-button-icon"
68
+ slot="icon"
69
+ name="plus-small"
70
+ ></sbb-icon>
71
+ </sbb-secondary-button-static>
70
72
  </div>
71
73
  `;
72
74
  }
73
75
  };
74
- a.styles = S;
75
- a.events = {
76
+ e.styles = z;
77
+ e.events = {
76
78
  flip: "flip"
77
79
  };
78
- n([
80
+ b([
79
81
  m({ attribute: "accessibility-label" })
80
- ], a.prototype, "accessibilityLabel", 2);
81
- n([
82
+ ], e.prototype, "accessibilityLabel", 2);
83
+ b([
82
84
  f()
83
- ], a.prototype, "_flipped", 2);
84
- a = n([
85
+ ], e.prototype, "_flipped", 2);
86
+ e = b([
85
87
  u("sbb-flip-card")
86
- ], a);
88
+ ], e);
87
89
  export {
88
- a as SbbFlipCardElement
90
+ e as SbbFlipCardElement
89
91
  };
@@ -8,7 +8,7 @@ import { i18nOptional as A } from "../core/i18n.js";
8
8
  import { SbbNegativeMixin as E, SbbHydrationMixin as z } from "../core/mixins.js";
9
9
  import { AgnosticMutationObserver as I } from "../core/observers.js";
10
10
  import "../icon.js";
11
- const L = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open],[data-disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);z-index:1;--sbb-text-font-size: var(--sbb-font-size-text-xs);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)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is([data-input-type=input],[data-input-type=select])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-form-field-input-text-size)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__input ::slotted(textarea){position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}:host([size=l]) .sbb-form-field__input ::slotted(textarea){padding-block-end:.34375rem}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
11
+ const L = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open],[data-disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);z-index:1;--sbb-text-font-size: var(--sbb-font-size-text-xs);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)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-form-field-input-text-size)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__input ::slotted(textarea){position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}:host([size=l]) .sbb-form-field__input ::slotted(textarea){padding-block-end:.34375rem}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
12
12
  var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
13
13
  for (var s = l > 1 ? void 0 : l ? S(t, r) : t, a = e.length - 1, n; a >= 0; a--)
14
14
  (n = e[a]) && (s = (l ? n(t, r, s) : n(s)) || s);
package/lead-container.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css as t, LitElement as d, html as l } from "lit";
2
2
  import { customElement as c } from "lit/decorators.js";
3
- const m = t`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-lead-container-background-color: var(--sbb-color-white);--sbb-lead-container-image-ratio: 2 / 1;--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);--sbb-lead-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);--sbb-lead-container-image-border-radius: 0}@media (min-width: 80rem){:host{--sbb-lead-container-image-ratio: 21 / 9}}@media (min-width: 90rem){:host{--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius)}}.sbb-lead-container{padding-block-end:var(--sbb-spacing-responsive-l)}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);--sbb-image-border-radius: var(--sbb-lead-container-image-border-radius)}::slotted(:is(img[slot=image],picture[slot=image])){display:block;width:100%;object-fit:cover;aspect-ratio:var(--sbb-lead-container-image-ratio);border-radius:var(--sbb-lead-container-image-border-radius)}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s)}@media (min-width: 90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){.sbb-lead-container-content-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}@media (min-width: 64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{z-index:1;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media (min-width: 52.5rem){.sbb-lead-container-content{grid-column:2/-2}}@media (min-width: 64rem){.sbb-lead-container-content{margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media (min-width: 80rem){.sbb-lead-container-content{grid-column:3/-3}}@media (min-width: 90rem){.sbb-lead-container-content{grid-column:4/-4}}`;
3
+ const m = t`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-lead-container-background-color: var(--sbb-color-white);--sbb-lead-container-image-ratio: 2 / 1;--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);--sbb-lead-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);--sbb-lead-container-image-border-radius: 0}@media (min-width: 80rem){:host{--sbb-lead-container-image-ratio: 21 / 9}}@media (min-width: 90rem){:host{--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius)}}.sbb-lead-container{padding-block-end:var(--sbb-spacing-responsive-l)}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);--sbb-image-border-radius: var(--sbb-lead-container-image-border-radius)}::slotted(:is(img[slot=image],picture[slot=image])){display:block;width:100%;object-fit:cover;aspect-ratio:var(--sbb-lead-container-image-ratio);border-radius:var(--sbb-lead-container-image-border-radius)}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(sbb-notification.sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-xxxs)}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s)}@media (min-width: 90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){.sbb-lead-container-content-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}@media (min-width: 64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{z-index:1;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media (min-width: 52.5rem){.sbb-lead-container-content{grid-column:2/-2}}@media (min-width: 64rem){.sbb-lead-container-content{margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media (min-width: 80rem){.sbb-lead-container-content{grid-column:3/-3}}@media (min-width: 90rem){.sbb-lead-container-content{grid-column:4/-4}}`;
4
4
  var g = Object.defineProperty, p = Object.getOwnPropertyDescriptor, v = (o, a, i, r) => {
5
5
  for (var e = r > 1 ? void 0 : r ? p(a, i) : a, n = o.length - 1, b; n >= 0; n--)
6
6
  (b = o[n]) && (e = (r ? b(a, i, e) : b(e)) || e);
@@ -38,6 +38,7 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
38
38
  private _abort;
39
39
  private _focusHandler;
40
40
  private _scrollHandler;
41
+ private _inertController;
41
42
  /**
42
43
  * Opens the menu on trigger click.
43
44
  */
@@ -1 +1 @@
1
- {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAYtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAEhD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAsBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
1
+ {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAUtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IAExD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAsBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAQ5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
package/menu/menu.js CHANGED
@@ -1,19 +1,19 @@
1
- import { css as v, html as l } from "lit";
2
- import { property as g, customElement as p } from "lit/decorators.js";
3
- import { ref as _ } from "lit/directives/ref.js";
4
- import { SbbFocusHandler as f, isArrowKeyPressed as w, interactivityChecker as E, getNextElementIndex as x, setModalityOnNextFocus as c, IS_FOCUSABLE_QUERY as y } from "../core/a11y.js";
5
- import { SbbOpenCloseBaseElement as k } from "../core/base-elements.js";
6
- import { SbbConnectedAbortController as C } from "../core/controllers.js";
7
- import { SbbScrollHandler as L, isBreakpoint as d, findReferencedElement as O } from "../core/dom.js";
8
- import { SbbNamedSlotListMixin as N } from "../core/mixins.js";
9
- import { isEventOnElement as h, applyInertMechanism as m, removeInertMechanism as u, removeAriaOverlayTriggerAttributes as S, setAriaOverlayTriggerAttributes as B, getElementPosition as A } from "../core/overlay.js";
10
- const T = v`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform: translateY(100%);--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100vh;--sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-menu-min-height: 3.03125rem;--sbb-menu-border-radius: var(--sbb-border-radius-4x);--sbb-menu-visibility: hidden;--sbb-menu-backdrop-color: transparent}@supports (height: 100dvh){:host{--sbb-menu-container-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: var(--sbb-color-black-alpha-20)}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not([data-state=closed])){--sbb-menu-inset: 0}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}::slotted(sbb-divider){--sbb-divider-color: var(--sbb-color-iron);margin-block:var(--sbb-spacing-fixed-2x)}.sbb-menu__container{position:fixed;pointer-events:none;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index))}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility);pointer-events:all;position:fixed;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility}.sbb-menu{display:none;opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;position:absolute;inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:unset;color:var(--sbb-color-white);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-color-black);padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:open;animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host([data-state][data-state=closing]) .sbb-menu{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not([data-state=closed])) .sbb-menu{top:var(--sbb-menu-position-y);left:var(--sbb-menu-position-x);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-menu__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-menu__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-menu__content::-webkit-scrollbar-button,.sbb-menu__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-menu__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.sbb-menu__content:after{content:"";display:block;height:var(--sbb-spacing-fixed-8x)}@media (min-width: 52.5rem){.sbb-menu__content{max-height:fit-content}:host(:not([data-state=closed])) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}.sbb-menu-list{list-style:none;margin:0;padding:0;font-size:inherit}@keyframes open{0%{opacity:0;transform:var(--sbb-menu-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-menu-transform)}}`;
11
- var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, b = (e, t, n, s) => {
1
+ import { css as u, html as l } from "lit";
2
+ import { property as m, customElement as g } from "lit/decorators.js";
3
+ import { ref as v } from "lit/directives/ref.js";
4
+ import { SbbFocusHandler as _, isArrowKeyPressed as p, interactivityChecker as f, getNextElementIndex as w, setModalityOnNextFocus as c, IS_FOCUSABLE_QUERY as E } from "../core/a11y.js";
5
+ import { SbbOpenCloseBaseElement as x } from "../core/base-elements.js";
6
+ import { SbbConnectedAbortController as y, SbbInertController as k } from "../core/controllers.js";
7
+ import { SbbScrollHandler as C, isBreakpoint as d, findReferencedElement as L } from "../core/dom.js";
8
+ import { SbbNamedSlotListMixin as O } from "../core/mixins.js";
9
+ import { isEventOnElement as h, removeAriaOverlayTriggerAttributes as S, setAriaOverlayTriggerAttributes as N, getElementPosition as B } from "../core/overlay.js";
10
+ const A = u`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform: translateY(100%);--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100vh;--sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-menu-min-height: 3.03125rem;--sbb-menu-border-radius: var(--sbb-border-radius-4x);--sbb-menu-visibility: hidden;--sbb-menu-backdrop-color: transparent}@supports (height: 100dvh){:host{--sbb-menu-container-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: var(--sbb-color-black-alpha-20)}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not([data-state=closed])){--sbb-menu-inset: 0}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}::slotted(sbb-divider){--sbb-divider-color: var(--sbb-color-iron);margin-block:var(--sbb-spacing-fixed-2x)}.sbb-menu__container{position:fixed;pointer-events:none;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index))}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility);pointer-events:all;position:fixed;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility}.sbb-menu{display:none;opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;position:absolute;inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:unset;color:var(--sbb-color-white);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-color-black);padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:open;animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host([data-state][data-state=closing]) .sbb-menu{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not([data-state=closed])) .sbb-menu{top:var(--sbb-menu-position-y);left:var(--sbb-menu-position-x);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-menu__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-menu__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-menu__content::-webkit-scrollbar-button,.sbb-menu__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-menu__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.sbb-menu__content:after{content:"";display:block;height:var(--sbb-spacing-fixed-8x)}@media (min-width: 52.5rem){.sbb-menu__content{max-height:fit-content}:host(:not([data-state=closed])) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}.sbb-menu-list{list-style:none;margin:0;padding:0;font-size:inherit}@keyframes open{0%{opacity:0;transform:var(--sbb-menu-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-menu-transform)}}`;
11
+ var T = Object.defineProperty, P = Object.getOwnPropertyDescriptor, b = (e, t, n, s) => {
12
12
  for (var i = s > 1 ? void 0 : s ? P(t, n) : t, o = e.length - 1, a; o >= 0; o--)
13
13
  (a = e[o]) && (i = (s ? a(t, n, i) : a(i)) || i);
14
- return s && i && M(t, n, i), i;
14
+ return s && i && T(t, n, i), i;
15
15
  };
16
- const I = 8, K = [
16
+ const I = 8, M = [
17
17
  "A",
18
18
  "BUTTON",
19
19
  "SBB-BUTTON",
@@ -23,9 +23,9 @@ const I = 8, K = [
23
23
  "SBB-LINK-BUTTON",
24
24
  "SBB-BLOCK-LINK-BUTTON"
25
25
  ];
26
- let H = 0, r = class extends N(k) {
26
+ let K = 0, r = class extends O(x) {
27
27
  constructor() {
28
- super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this._trigger = null, this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new C(this), this._focusHandler = new f(), this._scrollHandler = new L(), this._pointerDownListener = (e) => {
28
+ super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this._trigger = null, this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new y(this), this._focusHandler = new _(), this._scrollHandler = new C(), this._inertController = new k(this), this._pointerDownListener = (e) => {
29
29
  this._isPointerDownEventOnMenu = h(this._menu, e);
30
30
  }, this._closeOnBackdropClick = (e) => {
31
31
  !this._isPointerDownEventOnMenu && !h(this._menu, e) && this.close();
@@ -60,7 +60,7 @@ let H = 0, r = class extends N(k) {
60
60
  ((t == null ? void 0 : t.localName) === "sbb-menu-button" || (t == null ? void 0 : t.localName) === "sbb-menu-link") && this.close();
61
61
  }
62
62
  _handleKeyDown(e) {
63
- if (!w(e))
63
+ if (!p(e))
64
64
  return;
65
65
  e.preventDefault();
66
66
  const t = Array.from(
@@ -68,8 +68,8 @@ let H = 0, r = class extends N(k) {
68
68
  "sbb-menu-button, sbb-menu-link"
69
69
  )
70
70
  ).filter(
71
- (i) => !i.disabled && E.isVisible(i)
72
- ), n = t.findIndex((i) => i === e.target), s = x(e, n, t.length);
71
+ (i) => !i.disabled && f.isVisible(i)
72
+ ), n = t.findIndex((i) => i === e.target), s = w(e, n, t.length);
73
73
  t[s].focus();
74
74
  }
75
75
  // Closes the menu on "Esc" key pressed and traps focus within the menu.
@@ -91,11 +91,11 @@ let H = 0, r = class extends N(k) {
91
91
  this.addEventListener("click", (n) => this._onClick(n), { signal: e }), this.addEventListener("keydown", (n) => this._handleKeyDown(n), { signal: e }), (t = this.shadowRoot) == null || t.addEventListener("slotchange", (n) => this._checkListCase(n), {
92
92
  signal: e,
93
93
  capture: !0
94
- }), this._configure(this.trigger), this.state === "opened" && m(this);
94
+ }), this._configure(this.trigger);
95
95
  }
96
96
  disconnectedCallback() {
97
97
  var e, t;
98
- super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u(), this._scrollHandler.enableScroll();
98
+ super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
99
99
  }
100
100
  _checkListCase(e) {
101
101
  var t;
@@ -106,7 +106,7 @@ let H = 0, r = class extends N(k) {
106
106
  // Check if the trigger is valid and attach click event listeners.
107
107
  _configure(e) {
108
108
  var t;
109
- S(this._triggerElement), e && (this._triggerElement = O(e), this._triggerElement && (this.id = this.id || `sbb-menu-${H++}`, B(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
109
+ S(this._triggerElement), e && (this._triggerElement = L(e), this._triggerElement && (this.id = this.id || `sbb-menu-${K++}`, N(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
110
110
  signal: this._menuController.signal
111
111
  })));
112
112
  }
@@ -128,7 +128,7 @@ let H = 0, r = class extends N(k) {
128
128
  // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
129
129
  _closeOnInteractiveElementClick(e) {
130
130
  const t = e.target;
131
- K.includes(t.nodeName) && !t.hasAttribute("disabled") && this.close();
131
+ M.includes(t.nodeName) && !t.hasAttribute("disabled") && this.close();
132
132
  }
133
133
  // Set menu position (x, y) to '0' once the menu is closed and the transition ended to prevent the
134
134
  // viewport from overflowing. And set the focus to the first focusable element once the menu is open.
@@ -136,21 +136,21 @@ let H = 0, r = class extends N(k) {
136
136
  // To avoid entering a corrupt state, exit when state is not expected.
137
137
  _onMenuAnimationEnd(e) {
138
138
  var t, n, s, i;
139
- e.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : e.animationName === "close" && this.state === "closing" && (this.state = "closed", (n = (t = this._menu) == null ? void 0 : t.firstElementChild) == null || n.scrollTo(0, 0), u(), c(this._triggerElement), (s = this._triggerElement) == null || s.focus({
139
+ e.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._inertController.activate(), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : e.animationName === "close" && this.state === "closing" && (this.state = "closed", (n = (t = this._menu) == null ? void 0 : t.firstElementChild) == null || n.scrollTo(0, 0), this._inertController.deactivate(), c(this._triggerElement), (s = this._triggerElement) == null || s.focus({
140
140
  // When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
141
141
  preventScroll: this._triggerElement.localName === "sbb-header-button" || this._triggerElement.localName === "sbb-header-link"
142
142
  }), this.didClose.emit(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll());
143
143
  }
144
144
  // Set focus on the first focusable element.
145
145
  _setMenuFocus() {
146
- const e = this.querySelector(y);
146
+ const e = this.querySelector(E);
147
147
  c(e), e.focus();
148
148
  }
149
149
  // Set menu position and max height if the breakpoint is medium-ultra.
150
150
  _setMenuPosition() {
151
151
  if (!d("medium") || !this._menu || !this._triggerElement || this.state === "closing")
152
152
  return;
153
- const e = A(
153
+ const e = B(
154
154
  this.shadowRoot.querySelector(".sbb-menu__content"),
155
155
  this._triggerElement,
156
156
  this.shadowRoot.querySelector(".sbb-menu__container"),
@@ -166,7 +166,7 @@ let H = 0, r = class extends N(k) {
166
166
  <div
167
167
  @animationend=${(e) => this._onMenuAnimationEnd(e)}
168
168
  class="sbb-menu"
169
- ${_((e) => this._menu = e)}
169
+ ${v((e) => this._menu = e)}
170
170
  >
171
171
  <div
172
172
  @click=${(e) => this._closeOnInteractiveElementClick(e)}
@@ -179,15 +179,15 @@ let H = 0, r = class extends N(k) {
179
179
  `;
180
180
  }
181
181
  };
182
- r.styles = T;
182
+ r.styles = A;
183
183
  b([
184
- g()
184
+ m()
185
185
  ], r.prototype, "trigger", 1);
186
186
  b([
187
- g({ attribute: "list-accessibility-label" })
187
+ m({ attribute: "list-accessibility-label" })
188
188
  ], r.prototype, "listAccessibilityLabel", 2);
189
189
  r = b([
190
- p("sbb-menu")
190
+ g("sbb-menu")
191
191
  ], r);
192
192
  export {
193
193
  r as SbbMenuElement
@@ -38,6 +38,7 @@ export declare class SbbNavigationElement extends SbbNavigationElement_base {
38
38
  private _windowEventsController;
39
39
  private _abort;
40
40
  private _language;
41
+ private _inertController;
41
42
  private _focusHandler;
42
43
  private _scrollHandler;
43
44
  private _isPointerDownEventOnNavigation;
@@ -1 +1 @@
1
- {"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAmBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAWzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}
1
+ {"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAqBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;cAUzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}