scb-wc-test 0.1.81 → 0.1.83

package/scb-tooltip/scb-tooltip.js

@@ -1,328 +1,457 @@
-import { css as c, LitElement as d, html as h, nothing as f } from "lit";
-import { property as a, customElement as b } from "lit/decorators.js";
+import { css as I, LitElement as N, html as T, nothing as V } from "lit";
+import { property as c, customElement as j } from "lit/decorators.js";
 import "../scb-button/scb-button.js";
 import "@material/web/icon/icon.js";
-var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (t, i, n, e) => {
-  for (var s = e > 1 ? void 0 : e ? u(i, n) : i, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (s = (e ? p(i, n, s) : p(s)) || s);
-  return e && s && y(i, n, s), s;
+var q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, p = (t, e, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? X(e, s) : e, g = t.length - 1, f; g >= 0; g--)
+    (f = t[g]) && (i = (r ? f(e, s, i) : f(i)) || i);
+  return r && i && q(e, s, i), i;
 };
-let o = class extends d {
+let Y = 0, l = class extends N {
   constructor() {
-    super(...arguments), this.variant = "plain", this.arrow = null, this.supportingtext = "", this.label = "", this.trigger = "hover", this.position = "top", this.open = !1, this.delay = 1, this.offset = 0, this._hoverActive = !1, this._clickActive = !1, this._hideTimeout = null, this.handleEventElement = (t) => {
-      var s;
-      const e = (s = t.currentTarget.parentElement.shadowRoot) == null ? void 0 : s.querySelector(".scb-tooltip");
-      e && (t.type === "mouseenter" ? (this._hoverActive = !0, this.openTooltip(e)) : t.type === "mouseleave" ? (this._hoverActive = !1, this._clickActive || (this.closeTooltip(e), this.addHidden(e))) : t.type === "click" && (this._clickActive = !this._clickActive, this._clickActive ? this.openTooltip(e) : this._hoverActive || (this.closeTooltip(e), this.addHidden(e))));
+    super(...arguments), this.variant = "plain", this.arrow = null, this.supportingtext = "", this.label = "", this.trigger = "hover", this.position = "top", this.open = !1, this.delay = 1, this.offset = 0, this._hoverActive = !1, this._clickActive = !1, this._hideTimeout = null, this._triggerEl = null, this._originalPosition = "top", this._tooltipId = `scb-tooltip-${++Y}`, this._onTriggerMouseEnter = () => {
+      this._hoverActive = !0, this.open = !0;
+    }, this._onTriggerMouseLeave = () => {
+      this._hoverActive = !1, this._clickActive || (this.open = !1);
+    }, this._onTriggerFocus = () => {
+      this._hoverActive = !0, this.open = !0;
+    }, this._onTriggerBlur = () => {
+      this._hoverActive = !1, this._clickActive || (this.open = !1);
+    }, this._onTriggerClick = () => {
+      this._clickActive = !this._clickActive, this._clickActive ? this.open = !0 : this._hoverActive || (this.open = !1);
     };
   }
-  render() {
-    const t = this.arrow ? h`<svg class="scb-tooltip-arrow" xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6" fill="none">
-          <path d="M6.5 6L0.5 0H12.5L6.5 6Z" fill="var(--md-sys-color-inverse-surface, #0F0865)" />
-          </svg>` : f;
-    return this.variant === "rich" ? h`
-            <div class="scb-tooltip hidden" role="tooltip" aria-label=${this.label || this.supportingtext}>  
-              <div class="scb-tooltip-text-container">
-                  <label class="scb-tooltip-label">${this.label}</label>
-                  <span class="scb-tooltip-supporting-text">${this.supportingtext}</span>
-                </div>
-                <div class="scb-tooltip-button-container">
-                  <slot name="scb-tooltip-button"></slot>
-                </div>
-          </div>
-          <slot> </slot>  
-          ` : h` 
-            <div class="scb-tooltip hidden">  
-              <div class="scb-tooltip-container">       
-                <span class="scb-tooltip-supporting-text">${this.supportingtext}</span> 
-              </div>
-              ${t} 
-          </div>  
-          <slot> </slot>  
-          `;
-  }
+  /*
+    firstUpdated körs när komponenten är mountad och har renderat första gången.
+    Här sätter vi upp delay-css, hittar anchor och visar tooltip om open redan är true.
+  */
   firstUpdated() {
-    this.setAnchorName(), this.setDelay(), this.setPosition(), this.setVariant(), this.setOffset(), this.handleEventlistnerClick(), this.handleEventlistnerHover();
+    if (this._originalPosition = this.position, this._updateDelayCss(), this._updateTriggerElement(), this.open) {
+      const t = this._getTooltipElement();
+      t && this._showTooltip(t);
+    }
   }
-  setVariant() {
-    this.hasAttribute("variant") && this.style.setProperty("--variant", this.variant);
+  /*
+    updated reagerar på ändrade properties.
+    - trigger: vi måste koppla om event listener på anchor
+    - delay: uppdatera CSS-variabeln
+    - open: visa eller göm tooltipen programatiskt
+  */
+  updated(t) {
+    if (t.has("trigger") && this._updateTriggerElement(), t.has("delay") && this._updateDelayCss(), t.has("open")) {
+      const e = this._getTooltipElement();
+      if (!e)
+        return;
+      this.open ? this._showTooltip(e) : this._hideTooltip(e);
+    }
   }
-  setAnchorName() {
-    const t = Array.from({ length: 15 }, () => "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 26)]).join("");
-    this.style.setProperty("--anchorname", "--" + t);
+  /*
+    När komponenten tas bort från DOM städar vi upp event listeners och eventuella timeouts.
+  */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._detachTriggerListeners(), this._hideTimeout !== null && (window.clearTimeout(this._hideTimeout), this._hideTimeout = null);
   }
-  setDelay() {
-    this.hasAttribute("delay") && this.style.setProperty("--delay", this.delay + "s");
+  /*
+    Hämtar själva tooltip-elementet inifrån shadow DOM.
+    Används av show/hide-metoderna.
+  */
+  _getTooltipElement() {
+    return this.renderRoot.querySelector(".scb-tooltip");
   }
-  setPosition() {
-    this.hasAttribute("position") && (this.style.setProperty("--position", this.position), this.style.setProperty("--oposition", this.position));
+  /*
+    Synkar property delay mot CSS-variabeln som styr transition length.
+  */
+  _updateDelayCss() {
+    const t = Number.isFinite(this.delay) ? this.delay : 1;
+    this.style.setProperty("--delay", `${t}s`);
   }
-  setDefaultPosition() {
-    if (this.hasAttribute("position")) {
-      let t = getComputedStyle(this).getPropertyValue("--oposition");
-      if (getComputedStyle(this).getPropertyValue("--position") !== t) {
-        this.style.setProperty("--position", t), this.setAttribute("position", t);
-        return;
-      }
-    }
+  /*
+    Hittar anchor element:
+    - först: ett element med attributet scb-tooltip-button som inte ligger i en named slot
+    - annars: första barn-elementet i light DOM
+  */
+  _findTriggerElement() {
+    const t = this.querySelector(
+      "[scb-tooltip-button]:not([slot])"
+    );
+    return t || (Array.from(this.children).find(
+      (s) => s.nodeType === Node.ELEMENT_NODE
+    ) ?? null);
   }
-  setOffset() {
-    let t = getComputedStyle(this).getPropertyValue("--position");
-    this.hasAttribute("offset") && this.hasAttribute("position") && (t === "top" ? this.style.setProperty("--offset", "-" + (this.offset + 8) + "px") : this.style.setProperty("--offset", this.offset + 8 + "px"));
+  /*
+    Kopplar event listener till aktuellt anchor element baserat på trigger.
+    Tar alltid bort gamla listeners innan nya läggs på.
+  */
+  _updateTriggerElement() {
+    const t = this._triggerEl;
+    t && (this._detachTriggerListeners(), t.removeAttribute("aria-describedby"));
+    const e = this._findTriggerElement();
+    this._triggerEl = e, e && (e.setAttribute("aria-describedby", this._tooltipId), (this.trigger === "click" || this.trigger === "hover-click") && e.addEventListener("click", this._onTriggerClick), (this.trigger === "hover" || this.trigger === "hover-click") && (e.addEventListener("mouseenter", this._onTriggerMouseEnter), e.addEventListener("mouseleave", this._onTriggerMouseLeave), e.addEventListener("focus", this._onTriggerFocus), e.addEventListener("blur", this._onTriggerBlur)));
   }
-  handleEventlistnerClick() {
-    const t = this.children[0];
-    t && t.hasAttribute("scb-tooltip-button") && (this.getAttribute("trigger") === "click" || this.getAttribute("trigger") === "hover-click") && t.addEventListener("click", this.handleEventElement);
+  /*
+    Tar bort alla listeners från nuvarande anchor elment.
+    Både när trigger ändras och när komponenten detachas.
+  */
+  _detachTriggerListeners() {
+    const t = this._triggerEl;
+    t && (t.removeEventListener("click", this._onTriggerClick), t.removeEventListener("mouseenter", this._onTriggerMouseEnter), t.removeEventListener("mouseleave", this._onTriggerMouseLeave), t.removeEventListener("focus", this._onTriggerFocus), t.removeEventListener("blur", this._onTriggerBlur));
   }
-  handleEventlistnerHover() {
-    const t = this.children[0];
-    t && t.hasAttribute("scb-tooltip-button") && (this.getAttribute("trigger") === "hover" || this.getAttribute("trigger") === "hover-click") && (t.addEventListener("mouseenter", this.handleEventElement), t.addEventListener("mouseleave", this.handleEventElement));
+  /*
+    Visar tooltipen:
+    - stoppar eventuell pågående hide-timeout
+    - återställer positionen till ursprungsposition
+    - gör tooltipen synlig och sätter open-attribut
+    - positionerar tooltipen mot anchor i nästa animation frame
+  */
+  _showTooltip(t) {
+    this._hideTimeout !== null && (window.clearTimeout(this._hideTimeout), this._hideTimeout = null);
+    const e = this._triggerEl;
+    this._resetPosition(), t.classList.remove("hidden"), t.setAttribute("aria-hidden", "false"), requestAnimationFrame(() => {
+      e && this._positionTooltip(t, e), t.setAttribute("open", "");
+    });
   }
-  // Ser till att hidden läggs till efter delay (när tooltip är helt stängd) för att inte bli focusable och därför tabbable
-  addHidden(t) {
-    const n = (parseFloat(getComputedStyle(this).getPropertyValue("--delay")) || 1) * 1e3;
+  /*
+    Gömmer tooltipen och schemalägger eventuell fördröjd hiding via CSS-klassen hidden.
+  */
+  _hideTooltip(t) {
+    t.removeAttribute("open"), t.setAttribute("aria-hidden", "true"), this._scheduleHidden(t);
+  }
+  /*
+    Hanterar fördröjd hide av tooltip:
+    - delay <= 0: göm direkt
+    - annars: vänta delay sekunder och lägg på klassen hidden
+  */
+  _scheduleHidden(t) {
+    const e = (Number.isFinite(this.delay) ? this.delay : 1) * 1e3;
+    if (e <= 0) {
+      t.classList.add("hidden");
+      return;
+    }
     this._hideTimeout = window.setTimeout(() => {
       t.classList.add("hidden"), this._hideTimeout = null;
-    }, n);
+    }, e);
   }
-  openTooltip(t) {
-    this.setDefaultPosition(), this.adjustTooltipPosition(t), t.classList.remove("hidden"), this._hideTimeout && (clearTimeout(this._hideTimeout), this._hideTimeout = null);
+  /*
+    Återställer positionen till ursprungspositionen innan ny layoutberäkning.
+    Används varje gång tooltipen ska visas.
+  */
+  _resetPosition() {
+    this.position = this._originalPosition;
   }
-  closeTooltip(t) {
-    t.removeAttribute("open"), t.setAttribute("aria-hidden", "true");
+  /*
+    Beräknar den faktiska positionen för tooltipen i viewporten:
+    - utgår från önskad position
+    - testar alternativ om den inte får plats
+    - Klampar in resultatet mot viewportens kanter
+    - uppdaterar host-attributet position när vi byter sida
+  */
+  _positionTooltip(t, e) {
+    const s = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = this.getBoundingClientRect(), u = (this.offset ?? 0) + 8, v = 8, y = v, _ = window.innerHeight - v, w = v, x = window.innerWidth - v, M = (o) => o >= y && o + r.height <= _, P = (o) => o >= w && o + r.width <= x, E = (o, n, a, d) => {
+      let h = 0;
+      o < a && (h += a - o);
+      const b = o + n;
+      return b > d && (h += b - d), h;
+    }, $ = (o) => {
+      let n = 0, a = 0;
+      switch (o) {
+        case "top":
+          n = s.top - i.top - r.height - u, a = s.left - i.left + (s.width - r.width) / 2;
+          break;
+        case "bottom":
+          n = s.bottom - i.top + u, a = s.left - i.left + (s.width - r.width) / 2;
+          break;
+        case "left":
+          a = s.left - i.left - r.width - u, n = s.top - i.top + (s.height - r.height) / 2;
+          break;
+        case "right":
+          a = s.right - i.left + u, n = s.top - i.top + (s.height - r.height) / 2;
+          break;
+      }
+      const d = n + i.top, h = a + i.left, b = E(
+        d,
+        r.height,
+        y,
+        _
+      ), F = E(
+        h,
+        r.width,
+        w,
+        x
+      );
+      return {
+        pos: o,
+        top: n,
+        left: a,
+        fitsV: M(d),
+        fitsH: P(h),
+        totalOverflow: b + F
+      };
+    }, L = this.position === "top" || this.position === "bottom", k = this.position, O = this._getOppositePosition(k), A = [k, O, L ? "left" : "top", L ? "right" : "bottom"].map($);
+    let m = A.find((o) => o.fitsV && o.fitsH) ?? A.reduce(
+      (o, n) => n.totalOverflow < o.totalOverflow ? n : o
+    );
+    const C = (o, n, a) => Math.min(Math.max(o, n), a), S = y - i.top, B = _ - r.height - i.top, D = w - i.left, z = x - r.width - i.left, H = C(m.top, S, B), R = C(m.left, D, z);
+    t.style.top = `${H}px`, t.style.left = `${R}px`, this.position !== m.pos && (this.position = m.pos);
+  }
+  /*
+    Hjälpfunktion som ger motsatt position för en given riktning.
+  */
+  _getOppositePosition(t) {
+    switch (t) {
+      case "top":
+        return "bottom";
+      case "bottom":
+        return "top";
+      case "left":
+        return "right";
+      case "right":
+        return "left";
+    }
   }
-  adjustTooltipPosition(t) {
-    t && (this.closeTooltip(t), setTimeout(() => {
-      const i = t.getBoundingClientRect();
-      i.right > window.innerWidth && (this.style.setProperty("--position", "left"), this.setAttribute("position", "left")), i.left < 0 && (this.style.setProperty("--position", "right"), this.setAttribute("position", "right")), i.top < 0 && (this.style.setProperty("--position", "bottom"), this.setAttribute("position", "bottom")), i.bottom > window.innerHeight && (this.style.setProperty("--position", "top"), this.setAttribute("position", "top")), this.setOffset(), t.setAttribute("open", ""), t.setAttribute("aria-hidden", "false");
-    }, 10));
+  /*
+    När innehållet i standardslotten ändras försöker vi hitta anchor element igen
+    och kopplar om event listeners om det behövs.
+  */
+  _onDefaultSlotChange() {
+    this._updateTriggerElement();
+  }
+  /*
+    Render-funktion:
+    - bygger tooltip-strukturen för plain eller richvarianten
+    - arrowTemplate styr om pilen ska renderas
+    - slotten används både som anchor (defaultslot) och för knappar inuti rich-tooltipen
+  */
+  render() {
+    const t = this.arrow ? T`<svg
+          class="scb-tooltip-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="13"
+          height="6"
+          viewBox="0 0 13 6"
+          fill="none"
+        >
+          <path
+            d="M6.5 6L0.5 0H12.5L6.5 6Z"
+            fill="var(--md-sys-color-inverse-surface, #0F0865)"
+          />
+        </svg>` : V, e = this.label || this.supportingtext;
+    return this.variant === "rich" ? T`
+        <div
+          id=${this._tooltipId}
+          class="scb-tooltip hidden"
+          role="tooltip"
+          aria-label=${e}
+          aria-hidden="true"
+        >
+          <div class="scb-tooltip-text-container">
+            <label class="scb-tooltip-label">${this.label}</label>
+            <span class="scb-tooltip-supporting-text">
+              ${this.supportingtext}
+            </span>
+          </div>
+          <div class="scb-tooltip-button-container">
+            <slot name="scb-tooltip-button"></slot>
+          </div>
+        </div>
+        <slot @slotchange=${this._onDefaultSlotChange}></slot>
+      ` : T`
+      <div
+        id=${this._tooltipId}
+        class="scb-tooltip hidden"
+        role="tooltip"
+        aria-label=${e}
+        aria-hidden="true"
+      >
+        <div class="scb-tooltip-container">
+          <span class="scb-tooltip-supporting-text">
+            ${this.supportingtext}
+          </span>
+        </div>
+        ${t}
+      </div>
+      <slot @slotchange=${this._onDefaultSlotChange}></slot>
+    `;
   }
 };
-o.styles = [
-  c`
-  --anchorname: randomString;
-  --position: top;
-  --variant: plain;
-  --oposition: top;
-  --delay: 1s;
-  --offset: 0px;
+l.styles = I`
+    :host {
+      position: relative;
+      display: inline-block;
+      --delay: 1s;
+    }
+
+    .scb-tooltip {
+      position: absolute;
+      min-width: 120px;
+      max-width: 300px;
+      opacity: 0;
+      visibility: hidden;
+      z-index: 10;
+      transition:
+        opacity var(--delay) ease-in-out,
+        visibility var(--delay) ease-in-out;
+    }
 
-:host {
-  position: relative;
-  display: inline-block;
-}
+    .scb-tooltip[open] {
+      opacity: 1;
+      visibility: visible;
+    }
 
-:host {
-  .scb-tooltip {
-    position: absolute;
-    position-anchor: var(--anchorname);
-    position-area: var(--position);
-    min-width: 120px;
-    max-width: 300px;
-    transition: opacity var(--delay) ease-in-out;
-    z-index: 10;
-    opacity:0; 
+    .hidden {
+      visibility: hidden;
+    }
 
     .scb-tooltip-supporting-text {
-        font-family: var(--brand-font, Inter);
-        font-size:  var(--md-sys-typescale-body-small-size);
-        font-style: normal;
-        line-height: var(--md-sys-typescale-body-small-line-height); 
-        letter-spacing: var(--md-sys-typescale-body-small-tracking);
-      }
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-body-small-size);
+      font-style: normal;
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking);
     }
 
-    .hidden{
-      visibility: hidden;
+    ::slotted([scb-tooltip-button]) {
+      display: inline-flex;
     }
-}
 
-::slotted([scb-tooltip-button]) {
-    anchor-name: var(--anchorname);
-    display: inline-flex;
-  } 
+    /* Plain variant */
 
-/* Plain variant styles */
-  :host([variant="plain"]) .scb-tooltip { 
-    max-width: 184px;
-    transition: opacity var(--delay) ease-in-out;
-    opacity:0;
-    z-index: 10;
+    :host([variant='plain']) .scb-tooltip {
+      max-width: 184px;
+    }
 
-    .scb-tooltip-container {
+    :host([variant='plain']) .scb-tooltip-container {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background: var(--md-sys-color-inverse-surface);
-      border-radius: var(--md-sys-shape-corner-extra-small); 
-      min-height: 14px; 
-      width: 100%;         
-
-          .scb-tooltip-supporting-text {
-              padding: var(--spacing-2) var(--spacing-3);
-              color: var(--md-sys-color-inverse-on-surface);          
-          }
-        }
-        .scb-tooltip-arrow {
-          width: 12px;
-          height: 6px;
-          position: absolute;
-          left: 50%;
-          bottom: -5px;
-          transform: translateX(-50%) rotate(0deg);
-        }
-      }
-
-  /* Rich variant styles */
-:host([variant="rich"]) {
-  align-items: flex-start;
-  gap: var(--spacing-2);
-
-        .scb-tooltip {
-          background: var(--md-sys-color-surface-container, #EBF8FF);
-          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
-          display: inline-flex;
-          padding-bottom: var(--spacing-3);
-          flex-direction: column;
-          align-items: flex-start;
-          gap: var(--spacing-3);
-          border-radius: var(--md-sys-shape-corner-medium);
-          min-width: 200px;
-          max-width: 300px;
-          opacity: 0;
-          z-index: 10;
-          transition: opacity var(--delay) ease-in-out;
-
-    .scb-tooltip-text-container {
-      display: flex;
-      min-width: 220px;
-      padding: var(--spacing-4) var(--spacing-5) var(--spacing-2) var(--spacing-5);
-      align-items: flex-start;
-      gap: var(--spacing-2);
-      flex-direction: column;               
-
-      .scb-tooltip-supporting-text {
-          color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
-      }
-
-      .scb-tooltip-label {
-        font-family: var(--brand-font, Inter);
-        font-size:  var(--md-sys-typescale-title-small-size);
-        font-style: normal;
-        font-weight:  var(--weight-semibold);
-        line-height:  var(--md-sys-typescale-title-small-Line-Height);
-        letter-spacing: var(--md-sys-typescale-title-small-Tracking);
-      }
-    }   
-  }
-  
-  .scb-tooltip-button-container {
-    display: flex;
-    padding: 0 var(--spacing-3);
-    align-items: center;
-    gap: var(--spacing-3);
-    align-self: stretch;
-  }  
-} 
-
-  /* Postion styles */
-  :host([position="left"]) .scb-tooltip {
-    right: calc(anchor( left) + var(--offset));
-    align-self: center;
-  }
-   :host([position="right"]) .scb-tooltip {
-    left: calc(anchor(right) + var(--offset));
-    align-self: center;
-  }
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      min-height: 14px;
+      width: 100%;
+    }
 
-  :host([position="top"]) .scb-tooltip,
-  :host([position="bottom"]) .scb-tooltip {
-    transform: translateY(var(--offset));
-  }
+    :host([variant='plain']) .scb-tooltip-supporting-text {
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
+    }
 
-  /* Plain tooltip arrow postions */
-  :host([position="top"][arrow]) .scb-tooltip {§
     .scb-tooltip-arrow {
-        left: 50%;
-        bottom: -6px;
-        transform: translateX(-50%) rotate(0deg);
+      width: 12px;
+      height: 6px;
+      position: absolute;
     }
-  }
 
-  :host([position="right"][arrow]) .scb-tooltip {      
-    .scb-tooltip-arrow {
+    :host([position='top']) .scb-tooltip-arrow {
+      left: 50%;
+      bottom: -6px;
+      transform: translateX(-50%) rotate(0deg);
+    }
+
+    :host([position='right']) .scb-tooltip-arrow {
       left: -9px;
       top: 50%;
       transform: translateY(-50%) rotate(90deg);
     }
-  }
 
-:host([position="bottom"][arrow]) .scb-tooltip {
-    .scb-tooltip-arrow {
+    :host([position='bottom']) .scb-tooltip-arrow {
       left: 50%;
       top: -6px;
       transform: translateX(-50%) rotate(180deg);
     }
-}
 
-:host([variant="plain"][position="left"]) .scb-tooltip {   
-  .scb-tooltip-arrow{
+    :host([position='left']) .scb-tooltip-arrow {
       left: 100%;
       top: 50%;
       transform: translateY(-50%) translateX(-3px) rotate(270deg);
-  }
-}
+    }
+
+    :host([variant='plain'][arrow='false']) .scb-tooltip-arrow {
+      display: none;
+    }
+
+    /* Rich variant */
+
+    :host([variant='rich']) {
+      align-items: flex-start;
+      gap: var(--spacing-2);
+    }
 
-:host([variant="plain"][arrow="false"]) .scb-tooltip {
-  .scb-tooltip-arrow {
-    display: none;
-  } 
-}
+    :host([variant='rich']) .scb-tooltip {
+      background: var(--md-sys-color-surface-container, #ebf8ff);
+      box-shadow:
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 1px 10px 0 rgba(0, 0, 0, 0.12),
+        0 4px 5px 0 rgba(0, 0, 0, 0.14);
+      display: inline-flex;
+      padding-bottom: var(--spacing-3);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      border-radius: var(--md-sys-shape-corner-medium);
+      min-width: 200px;
+      max-width: 300px;
+    }
 
-/* tooltip open states */
-:host([variant="rich"]) .scb-tooltip[open],
-:host([variant="plain"]) .scb-tooltip[open]
-{
-  opacity:1;
-}
+    :host([variant='rich']) .scb-tooltip-text-container {
+      display: flex;
+      min-width: 220px;
+      padding: var(--spacing-4) var(--spacing-5) var(--spacing-2) var(--spacing-5);
+      align-items: flex-start;
+      gap: var(--spacing-2);
+      flex-direction: column;
+    }
+
+    :host([variant='rich']) .scb-tooltip-label {
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-style: normal;
+      font-weight: var(--weight-semibold);
+      line-height: var(--md-sys-typescale-title-small-Line-Height);
+      letter-spacing: var(--md-sys-typescale-title-small-Tracking);
+    }
 
-:host([variant="plain"][open]) .scb-tooltip,
-:host([variant="rich"][open]) .scb-tooltip{
-  opacity:1;
-  visibility: visible;
-}
-  `
-];
-r([
-  a({ type: String, reflect: !0 })
-], o.prototype, "variant", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
-], o.prototype, "arrow", 2);
-r([
-  a({ type: String, attribute: "supporting-text" })
-], o.prototype, "supportingtext", 2);
-r([
-  a({ type: String })
-], o.prototype, "label", 2);
-r([
-  a({ type: String, reflect: !0 })
-], o.prototype, "trigger", 2);
-r([
-  a({ type: String, reflect: !0 })
-], o.prototype, "position", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-r([
-  a({ type: Number, reflect: !0 })
-], o.prototype, "delay", 2);
-r([
-  a({ type: Number, reflect: !0 })
-], o.prototype, "offset", 2);
-o = r([
-  b("scb-tooltip")
-], o);
+    :host([variant='rich']) .scb-tooltip-supporting-text {
+      color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
+    }
+
+    :host([variant='rich']) .scb-tooltip-button-container {
+      display: flex;
+      padding: 0 var(--spacing-3);
+      align-items: center;
+      gap: var(--spacing-3);
+      align-self: stretch;
+    }
+  `;
+p([
+  c({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+p([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "arrow", 2);
+p([
+  c({ type: String, attribute: "supporting-text" })
+], l.prototype, "supportingtext", 2);
+p([
+  c({ type: String })
+], l.prototype, "label", 2);
+p([
+  c({ type: String, reflect: !0 })
+], l.prototype, "trigger", 2);
+p([
+  c({ type: String, reflect: !0 })
+], l.prototype, "position", 2);
+p([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "open", 2);
+p([
+  c({ type: Number, reflect: !0 })
+], l.prototype, "delay", 2);
+p([
+  c({ type: Number, reflect: !0 })
+], l.prototype, "offset", 2);
+l = p([
+  j("scb-tooltip")
+], l);
 export {
-  o as ScbTooltip
+  l as ScbTooltip
 };