@sbb-esta/lyne-elements 3.9.0 → 3.11.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 (120) hide show
  1. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +1 -1
  2. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +1 -1
  3. package/calendar/calendar.component.d.ts +2 -1
  4. package/calendar/calendar.component.d.ts.map +1 -1
  5. package/calendar/calendar.component.js +211 -225
  6. package/carousel/carousel/carousel.component.d.ts.map +1 -1
  7. package/carousel/carousel/carousel.component.js +5 -5
  8. package/core/controllers/escapable-overlay-controller.d.ts +3 -0
  9. package/core/controllers/escapable-overlay-controller.d.ts.map +1 -1
  10. package/core/controllers/overlay-position-controller.d.ts +60 -0
  11. package/core/controllers/overlay-position-controller.d.ts.map +1 -0
  12. package/core/controllers/overlay-position-controller.js +224 -0
  13. package/core/controllers.d.ts +1 -0
  14. package/core/controllers.d.ts.map +1 -1
  15. package/core/controllers.js +12 -10
  16. package/core/styles/core.scss +27 -2
  17. package/core.css +21 -2
  18. package/custom-elements.json +2238 -769
  19. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +7 -1
  20. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +2 -1
  21. package/development/calendar/calendar.component.d.ts +2 -1
  22. package/development/calendar/calendar.component.d.ts.map +1 -1
  23. package/development/calendar/calendar.component.js +20 -36
  24. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  25. package/development/carousel/carousel/carousel.component.js +2 -2
  26. package/development/core/controllers/escapable-overlay-controller.d.ts +3 -0
  27. package/development/core/controllers/escapable-overlay-controller.d.ts.map +1 -1
  28. package/development/core/controllers/escapable-overlay-controller.js +1 -1
  29. package/development/core/controllers/overlay-position-controller.d.ts +60 -0
  30. package/development/core/controllers/overlay-position-controller.d.ts.map +1 -0
  31. package/development/core/controllers/overlay-position-controller.js +306 -0
  32. package/development/core/controllers.d.ts +1 -0
  33. package/development/core/controllers.d.ts.map +1 -1
  34. package/development/core/controllers.js +3 -1
  35. package/development/mini-calendar/mini-calendar/mini-calendar.component.d.ts +35 -0
  36. package/development/mini-calendar/mini-calendar/mini-calendar.component.d.ts.map +1 -0
  37. package/development/mini-calendar/mini-calendar/mini-calendar.component.js +201 -0
  38. package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts +23 -0
  39. package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts.map +1 -0
  40. package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.js +181 -0
  41. package/development/mini-calendar/mini-calendar-day.d.ts +5 -0
  42. package/development/mini-calendar/mini-calendar-day.d.ts.map +1 -0
  43. package/development/mini-calendar/mini-calendar-day.js +5 -0
  44. package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts +25 -0
  45. package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts.map +1 -0
  46. package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +123 -0
  47. package/development/mini-calendar/mini-calendar-month.d.ts +5 -0
  48. package/development/mini-calendar/mini-calendar-month.d.ts.map +1 -0
  49. package/development/mini-calendar/mini-calendar-month.js +5 -0
  50. package/development/mini-calendar/mini-calendar.d.ts +5 -0
  51. package/development/mini-calendar/mini-calendar.d.ts.map +1 -0
  52. package/development/mini-calendar/mini-calendar.js +5 -0
  53. package/development/mini-calendar.d.ts +7 -0
  54. package/development/mini-calendar.d.ts.map +1 -0
  55. package/development/mini-calendar.js +9 -0
  56. package/development/paginator/common/paginator-common.d.ts.map +1 -1
  57. package/development/paginator/common/paginator-common.js +14 -3
  58. package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +4 -1
  59. package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts.map +1 -1
  60. package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.js +5 -1
  61. package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +4 -1
  62. package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts.map +1 -1
  63. package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.js +5 -1
  64. package/development/tabs/tab/tab.component.d.ts +9 -0
  65. package/development/tabs/tab/tab.component.d.ts.map +1 -1
  66. package/development/tabs/tab/tab.component.js +48 -7
  67. package/development/tabs/tab-group/tab-group.component.d.ts +7 -3
  68. package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  69. package/development/tabs/tab-group/tab-group.component.js +19 -39
  70. package/development/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  71. package/development/tabs/tab-label/tab-label.component.js +4 -3
  72. package/development/tooltip/tooltip.component.d.ts +11 -4
  73. package/development/tooltip/tooltip.component.d.ts.map +1 -1
  74. package/development/tooltip/tooltip.component.js +57 -78
  75. package/index.d.ts +6 -0
  76. package/index.js +6 -0
  77. package/mini-calendar/mini-calendar/mini-calendar.component.d.ts +35 -0
  78. package/mini-calendar/mini-calendar/mini-calendar.component.d.ts.map +1 -0
  79. package/mini-calendar/mini-calendar/mini-calendar.component.js +133 -0
  80. package/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts +23 -0
  81. package/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts.map +1 -0
  82. package/mini-calendar/mini-calendar-day/mini-calendar-day.component.js +66 -0
  83. package/mini-calendar/mini-calendar-day.d.ts +5 -0
  84. package/mini-calendar/mini-calendar-day.d.ts.map +1 -0
  85. package/mini-calendar/mini-calendar-day.js +4 -0
  86. package/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts +25 -0
  87. package/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts.map +1 -0
  88. package/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +59 -0
  89. package/mini-calendar/mini-calendar-month.d.ts +5 -0
  90. package/mini-calendar/mini-calendar-month.d.ts.map +1 -0
  91. package/mini-calendar/mini-calendar-month.js +4 -0
  92. package/mini-calendar/mini-calendar.d.ts +5 -0
  93. package/mini-calendar/mini-calendar.d.ts.map +1 -0
  94. package/mini-calendar/mini-calendar.js +4 -0
  95. package/mini-calendar.d.ts +7 -0
  96. package/mini-calendar.d.ts.map +1 -0
  97. package/mini-calendar.js +8 -0
  98. package/off-brand-theme.css +21 -2
  99. package/package.json +21 -1
  100. package/paginator/common/paginator-common.d.ts.map +1 -1
  101. package/paginator/common/paginator-common.js +30 -25
  102. package/safety-theme.css +21 -2
  103. package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +4 -1
  104. package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts.map +1 -1
  105. package/sidebar/icon-sidebar-button/icon-sidebar-button.component.js +9 -6
  106. package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +4 -1
  107. package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts.map +1 -1
  108. package/sidebar/icon-sidebar-link/icon-sidebar-link.component.js +13 -10
  109. package/standard-theme.css +21 -2
  110. package/tabs/tab/tab.component.d.ts +9 -0
  111. package/tabs/tab/tab.component.d.ts.map +1 -1
  112. package/tabs/tab/tab.component.js +37 -18
  113. package/tabs/tab-group/tab-group.component.d.ts +7 -3
  114. package/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  115. package/tabs/tab-group/tab-group.component.js +51 -52
  116. package/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  117. package/tabs/tab-label/tab-label.component.js +12 -12
  118. package/tooltip/tooltip.component.d.ts +11 -4
  119. package/tooltip/tooltip.component.d.ts.map +1 -1
  120. package/tooltip/tooltip.component.js +60 -84
@@ -1,41 +1,40 @@
1
- var E = (s) => {
2
- throw TypeError(s);
1
+ var x = (i) => {
2
+ throw TypeError(i);
3
3
  };
4
- var O = (s, i, a) => i.has(s) || E("Cannot " + a);
5
- var w = (s, i, a) => (O(s, i, "read from private field"), a ? a.call(s) : i.get(s)), P = (s, i, a) => i.has(s) ? E("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), u = (s, i, a, r) => (O(s, i, "write to private field"), r ? r.call(s, a) : i.set(s, a), a);
6
- import { __esDecorate as b, __runInitializers as h } from "tslib";
7
- import { css as k, isServer as A, html as S } from "lit";
8
- import { customElement as z, property as c } from "lit/decorators.js";
9
- import { ref as N } from "lit/directives/ref.js";
10
- import { SbbOpenCloseBaseElement as I } from "../core/base-elements.js";
4
+ var O = (i, s, a) => s.has(i) || x("Cannot " + a);
5
+ var w = (i, s, a) => (O(i, s, "read from private field"), a ? a.call(i) : s.get(i)), k = (i, s, a) => s.has(i) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), u = (i, s, a, r) => (O(i, s, "write to private field"), r ? r.call(i, a) : s.set(i, a), a);
6
+ import { __esDecorate as b, __runInitializers as c } from "tslib";
7
+ import { css as L, isServer as E, html as S } from "lit";
8
+ import { customElement as z, property as h } from "lit/decorators.js";
9
+ import { SbbOpenCloseBaseElement as N } from "../core/base-elements.js";
11
10
  import { readConfig as g } from "../core/config.js";
12
- import { SbbEscapableOverlayController as M } from "../core/controllers.js";
13
- import { idReference as H } from "../core/decorators.js";
14
- import { queueDomContentLoaded as F, addToListAttribute as U, removeFromListAttribute as Z, isZeroAnimationDuration as $, isAndroid as q, isIOS as R } from "../core/dom.js";
15
- import { SbbDisabledMixin as B } from "../core/mixins.js";
16
- import { sbbOverlayOutsidePointerEventListener as L, getElementPosition as W } from "../core/overlay.js";
17
- const j = k`*,:before,:after{box-sizing:border-box}:host{--sbb-tooltip-position: absolute;--sbb-tooltip-position-x: 0;--sbb-tooltip-position-y: 0;--sbb-tooltip-pointer-events: all;--sbb-tooltip-max-width: min( 25rem, calc(100% - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);display:none;position:fixed;inset:0;z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index))}:host([data-state]:not([data-state=closed])){display:block;--sbb-tooltip-animation-name: open}:host([data-state][data-state=closing]){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host([data-position=below]){--sbb-tooltip-hover-patch-inset: calc(-1 * var(--sbb-spacing-fixed-4x)) 0}:host([data-position=above]){--sbb-tooltip-hover-patch-inset: 0 calc(-1 * var(--sbb-spacing-fixed-4x))}.sbb-tooltip{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-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);position:var(--sbb-tooltip-position);pointer-events:var(--sbb-tooltip-pointer-events);top:var(--sbb-tooltip-position-y);bottom:unset;left:var(--sbb-tooltip-position-x);right:unset;border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);max-width:var(--sbb-tooltip-max-width);width:max-content;color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);outline:none;animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing)}.sbb-tooltip:before{content:"";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent;inset-block:var(--sbb-tooltip-hover-patch-inset)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, G = 500, V = 8, Y = 16, J = q || R, m = /* @__PURE__ */ new WeakMap();
18
- let K = 0, pt = (() => {
19
- var n, l;
20
- let s = [z("sbb-tooltip")], i, a = [], r, v = B(I), p = [], _, y = [], f = [], T, C, x;
11
+ import { SbbEscapableOverlayController as I, SbbOverlayPositionController as M } from "../core/controllers.js";
12
+ import { idReference as U } from "../core/decorators.js";
13
+ import { queueDomContentLoaded as H, addToListAttribute as q, removeFromListAttribute as Z, isZeroAnimationDuration as j, isAndroid as B, isIOS as $ } from "../core/dom.js";
14
+ import { SbbDisabledMixin as F } from "../core/mixins.js";
15
+ import { sbbOverlayOutsidePointerEventListener as P } from "../core/overlay.js";
16
+ const R = L`*,:before,:after{box-sizing:border-box}:host{--sbb-tooltip-pointer-events: all;--sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area: block-start;--sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);border:none;inset:initial;padding:0;margin:0}:host([data-state]:not([data-state=closed])){display:block;--sbb-tooltip-animation-name: open}:host([data-state][data-state=closing]){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=" start"],[data-position$=" end"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-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);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, G = 500, W = B || $, m = /* @__PURE__ */ new WeakMap();
17
+ let Y = 0, rt = (() => {
18
+ var d, l;
19
+ let i = [z("sbb-tooltip")], s, a = [], r, v = F(N), p = [], y, _ = [], f = [], T, C, D;
21
20
  return l = class extends v {
22
21
  constructor() {
23
22
  super();
24
- P(this, n);
25
- u(this, n, (h(this, p), h(this, y, null))), this._openDelay = (h(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new M(this), this.addEventListener("mouseleave", (t) => {
23
+ k(this, d);
24
+ u(this, d, (c(this, p), c(this, _, null))), this._openDelay = (c(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new I(this), this._overlayController = new M(this), this.addEventListener("mouseleave", (t) => {
26
25
  (this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
27
- }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 });
26
+ }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (t) => this._onTooltipAnimationEnd(t), { passive: !0 });
28
27
  }
29
28
  /**
30
- * The element that will trigger the popover overlay.
29
+ * The element that will trigger the tooltip overlay.
31
30
  *
32
31
  * For attribute usage, provide an id reference.
33
32
  */
34
33
  get trigger() {
35
- return w(this, n);
34
+ return w(this, d);
36
35
  }
37
36
  set trigger(t) {
38
- u(this, n, t);
37
+ u(this, d, t);
39
38
  }
40
39
  /**
41
40
  * Open the tooltip after a given delay in milliseconds.
@@ -74,20 +73,20 @@ let K = 0, pt = (() => {
74
73
  return this._longPressCloseDelay ?? g().tooltip?.longPressCloseDelay ?? 1500;
75
74
  }
76
75
  static _initializeTooltipOutlet() {
77
- this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet);
78
- const t = /* @__PURE__ */ new Map([
79
- ["sbb-tooltip-open-delay", "open-delay"],
80
- ["sbb-tooltip-close-delay", "close-delay"]
81
- ]);
82
- new MutationObserver((e) => {
83
- for (const o of e)
84
- if (o.type === "attributes")
85
- this._handleTooltipTrigger(o.target);
86
- else if (o.type === "childList")
87
- for (const d of [...o.addedNodes, ...o.removedNodes].filter((D) => D.nodeType === D.ELEMENT_NODE))
88
- this._handleTooltipTrigger(d), this._findAndHandleTooltipTriggers(d);
76
+ this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((t) => {
77
+ for (const e of t)
78
+ if (e.type === "attributes")
79
+ this._handleTooltipTrigger(e.target);
80
+ else if (e.type === "childList")
81
+ for (const o of [...e.addedNodes, ...e.removedNodes].filter((n) => n.nodeType === n.ELEMENT_NODE))
82
+ this._handleTooltipTrigger(o), this._findAndHandleTooltipTriggers(o);
89
83
  }).observe(document.documentElement, {
90
- attributeFilter: ["sbb-tooltip", ...t.keys()],
84
+ attributeFilter: [
85
+ "sbb-tooltip",
86
+ "sbb-tooltip-open-delay",
87
+ "sbb-tooltip-close-delay",
88
+ "sbb-tooltip-position"
89
+ ],
91
90
  childList: !0,
92
91
  subtree: !0
93
92
  }), this._findAndHandleTooltipTriggers(document.body);
@@ -98,22 +97,26 @@ let K = 0, pt = (() => {
98
97
  static _handleTooltipTrigger(t) {
99
98
  const e = t.getAttribute("sbb-tooltip");
100
99
  let o = m.get(t);
101
- e && t.isConnected ? (o || (o = document.createElement("sbb-tooltip"), m.set(t, o), this._tooltipOutlet.appendChild(o), o.trigger = t), o.textContent = e, o.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, o.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null) : o && (m.delete(t), o._destroy());
100
+ if (e && t.isConnected) {
101
+ o || (o = document.createElement("sbb-tooltip"), m.set(t, o), this._tooltipOutlet.appendChild(o), o.trigger = t), o.textContent = e, o.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, o.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null;
102
+ const n = t.hasAttribute("sbb-tooltip-position") ? t.getAttribute("sbb-tooltip-position").split(",").map((A) => A.trim()) : t.tooltipPositions;
103
+ n && n.length > 0 ? (o.style.setProperty("--sbb-overlay-position-area", n[0]), o.style.setProperty("--sbb-overlay-position-try-fallbacks", n.slice(1).join(", "))) : (o.style.removeProperty("--sbb-overlay-position-area"), o.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
104
+ } else o && (m.delete(t), o._destroy());
102
105
  }
103
106
  connectedCallback() {
104
- super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++K}`, this.state = "closed", L.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
107
+ super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++Y}`, this.state = "closed", P.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
105
108
  }
106
109
  disconnectedCallback() {
107
- super.disconnectedCallback(), L.disconnect(this), this._detach();
110
+ super.disconnectedCallback(), P.disconnect(this), this._detach();
108
111
  }
109
112
  requestUpdate(t, e, o) {
110
- super.requestUpdate(t, e, o), !A && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
113
+ super.requestUpdate(t, e, o), !E && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
111
114
  }
112
115
  firstUpdated(t) {
113
116
  super.firstUpdated(t), this._attach(this.trigger);
114
117
  }
115
118
  open() {
116
- this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.overlay || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._setTooltipPosition(), this._isZeroAnimationDuration() && this._handleOpening());
119
+ this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
117
120
  }
118
121
  close() {
119
122
  this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
@@ -122,19 +125,19 @@ let K = 0, pt = (() => {
122
125
  this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
123
126
  }
124
127
  _handleOpening() {
125
- this.state = "opened", this._attachWindowEvents(), this._escapableOverlayController.connect(), this.dispatchOpenEvent();
128
+ this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
126
129
  }
127
130
  _delayedClose() {
128
131
  this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
129
132
  }
130
133
  _handleClosing() {
131
- this.state = "closed", this.hidePopover?.(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
134
+ this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
132
135
  }
133
136
  _onTooltipAnimationEnd(t) {
134
137
  t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
135
138
  }
136
139
  _attach(t) {
137
- this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (U(this._triggerElement, "aria-describedby", this.id), this._addTriggerEventHandlers());
140
+ this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (q(this._triggerElement, "aria-describedby", this.id), this._addTriggerEventHandlers());
138
141
  }
139
142
  _detach() {
140
143
  this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (Z(this._triggerElement, "aria-describedby", this.id), this._triggerElement = null);
@@ -142,17 +145,6 @@ let K = 0, pt = (() => {
142
145
  _destroy() {
143
146
  this._detach(), this.remove();
144
147
  }
145
- _setTooltipPosition() {
146
- if (!this.overlay || !this._triggerElement)
147
- return;
148
- const t = W(this.overlay, this._triggerElement, this, {
149
- verticalOffset: V,
150
- horizontalOffset: Y,
151
- centered: !0,
152
- responsiveHeight: !0
153
- });
154
- this.setAttribute("data-position", t.alignment.vertical), this.style.setProperty("--sbb-tooltip-position-x", `${t.left}px`), this.style.setProperty("--sbb-tooltip-position-y", `${t.top}px`);
155
- }
156
148
  _addTriggerEventHandlers() {
157
149
  const t = this._triggerElement;
158
150
  if (!t)
@@ -162,9 +154,9 @@ let K = 0, pt = (() => {
162
154
  signal: this._triggerAbortController.signal,
163
155
  passive: !0
164
156
  };
165
- J || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (o) => {
166
- const d = o.relatedTarget;
167
- (!d || d !== this) && this._delayedClose();
157
+ W || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (o) => {
158
+ const n = o.relatedTarget;
159
+ (!n || n !== this) && this._delayedClose();
168
160
  }, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
169
161
  clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), G);
170
162
  }, e), t.addEventListener("touchend", () => {
@@ -173,48 +165,32 @@ let K = 0, pt = (() => {
173
165
  clearTimeout(this._longPressOpenTimeout);
174
166
  }, e);
175
167
  }
176
- _attachWindowEvents() {
177
- this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setTooltipPosition(), {
178
- passive: !0,
179
- signal: this._openStateController.signal,
180
- // Without capture, other scroll contexts would not bubble to this event listener.
181
- // Capture allows us to react to all scroll contexts in this DOM.
182
- capture: !0
183
- }), window.addEventListener("resize", () => this._setTooltipPosition(), {
184
- passive: !0,
185
- signal: this._openStateController.signal
186
- });
187
- }
188
168
  _isZeroAnimationDuration() {
189
- return $(this, "--sbb-tooltip-animation-duration");
169
+ return j(this, "--sbb-tooltip-animation-duration");
190
170
  }
191
171
  _resetOpenCloseTimeout() {
192
172
  clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
193
173
  }
194
174
  render() {
195
175
  return S`
196
- <div
197
- @animationend=${this._onTooltipAnimationEnd}
198
- class="sbb-tooltip"
199
- ${N((t) => this.overlay = t)}
200
- >
176
+ <div class="sbb-tooltip">
201
177
  <slot></slot>
202
178
  </div>
203
179
  `;
204
180
  }
205
- }, n = new WeakMap(), r = l, (() => {
181
+ }, d = new WeakMap(), r = l, (() => {
206
182
  const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
207
- _ = [H(), c()], T = [c({ attribute: "open-delay", type: Number })], C = [c({ attribute: "close-delay", type: Number })], x = [c({ attribute: "long-press-close-delay", type: Number })], b(l, null, _, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
183
+ y = [U(), h()], T = [h({ attribute: "open-delay", type: Number })], C = [h({ attribute: "close-delay", type: Number })], D = [h({ attribute: "long-press-close-delay", type: Number })], b(l, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
208
184
  e.trigger = o;
209
- } }, metadata: t }, y, f), b(l, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, o) => {
185
+ } }, metadata: t }, _, f), b(l, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, o) => {
210
186
  e.openDelay = o;
211
187
  } }, metadata: t }, null, p), b(l, null, C, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, o) => {
212
188
  e.closeDelay = o;
213
- } }, metadata: t }, null, p), b(l, null, x, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, o) => {
189
+ } }, metadata: t }, null, p), b(l, null, D, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, o) => {
214
190
  e.longPressCloseDelay = o;
215
- } }, metadata: t }, null, p), b(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, a), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
216
- })(), l.role = "tooltip", l.styles = j, A || F(() => r._initializeTooltipOutlet()), h(r, a), r;
191
+ } }, metadata: t }, null, p), b(null, s = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, a), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
192
+ })(), l.role = "tooltip", l.styles = R, E || H(() => r._initializeTooltipOutlet()), c(r, a), r;
217
193
  })();
218
194
  export {
219
- pt as SbbTooltipElement
195
+ rt as SbbTooltipElement
220
196
  };