scb-wc-test 0.1.81 → 0.1.83

package/mvc/components/scb-tooltip/scb-tooltip.js

@@ -1,215 +1,196 @@
-import{a as h,n,i as d,x as c,E as f,t as u}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(s,e,a){try{customElements.get(s)||i(s,e,a)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(t,i,s,e)=>{for(var a=e>1?void 0:e?y(i,s):i,l=t.length-1,p;l>=0;l--)(p=t[l])&&(a=(e?p(i,s,a):p(a))||a);return e&&a&&b(i,s,a),a};let o=class extends d{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=>{const e=t.currentTarget.parentElement.shadowRoot?.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))))}}render(){const t=this.arrow?c`<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"?c`
-            <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>
+import{a as F,n as p,i as I,x as T,E as V,t as j}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,r,i){try{customElements.get(o)||e(o,r,i)}catch(d){var h=String(d||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var q=Object.defineProperty,X=Object.getOwnPropertyDescriptor,c=(t,e,o,r)=>{for(var i=r>1?void 0:r?X(e,o):e,h=t.length-1,d;h>=0;h--)(d=t[h])&&(i=(r?d(e,o,i):d(i))||i);return r&&i&&q(e,o,i),i};let Y=0,l=class extends I{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._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)}}firstUpdated(){if(this._originalPosition=this.position,this._updateDelayCss(),this._updateTriggerElement(),this.open){const t=this._getTooltipElement();t&&this._showTooltip(t)}}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)}}disconnectedCallback(){super.disconnectedCallback(),this._detachTriggerListeners(),this._hideTimeout!==null&&(window.clearTimeout(this._hideTimeout),this._hideTimeout=null)}_getTooltipElement(){return this.renderRoot.querySelector(".scb-tooltip")}_updateDelayCss(){const t=Number.isFinite(this.delay)?this.delay:1;this.style.setProperty("--delay",`${t}s`)}_findTriggerElement(){const t=this.querySelector("[scb-tooltip-button]:not([slot])");return t||(Array.from(this.children).find(o=>o.nodeType===Node.ELEMENT_NODE)??null)}_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)))}_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))}_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","")})}_hideTooltip(t){t.removeAttribute("open"),t.setAttribute("aria-hidden","true"),this._scheduleHidden(t)}_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},e)}_resetPosition(){this.position=this._originalPosition}_positionTooltip(t,e){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=this.getBoundingClientRect(),u=(this.offset??0)+8,v=8,_=v,y=window.innerHeight-v,w=v,x=window.innerWidth-v,M=s=>s>=_&&s+r.height<=y,O=s=>s>=w&&s+r.width<=x,E=(s,n,a,f)=>{let g=0;s<a&&(g+=a-s);const b=s+n;return b>f&&(g+=b-f),g},$=s=>{let n=0,a=0;switch(s){case"top":n=o.top-i.top-r.height-u,a=o.left-i.left+(o.width-r.width)/2;break;case"bottom":n=o.bottom-i.top+u,a=o.left-i.left+(o.width-r.width)/2;break;case"left":a=o.left-i.left-r.width-u,n=o.top-i.top+(o.height-r.height)/2;break;case"right":a=o.right-i.left+u,n=o.top-i.top+(o.height-r.height)/2;break}const f=n+i.top,g=a+i.left,b=E(f,r.height,_,y),R=E(g,r.width,w,x);return{pos:s,top:n,left:a,fitsV:M(f),fitsH:O(g),totalOverflow:b+R}},L=this.position==="top"||this.position==="bottom",k=this.position,P=this._getOppositePosition(k),A=[k,P,L?"left":"top",L?"right":"bottom"].map($);let m=A.find(s=>s.fitsV&&s.fitsH)??A.reduce((s,n)=>n.totalOverflow<s.totalOverflow?n:s);const C=(s,n,a)=>Math.min(Math.max(s,n),a),S=_-i.top,B=y-r.height-i.top,D=w-i.left,z=x-r.width-i.left,H=C(m.top,S,B),N=C(m.left,D,z);t.style.top=`${H}px`,t.style.left=`${N}px`,this.position!==m.pos&&(this.position=m.pos)}_getOppositePosition(t){switch(t){case"top":return"bottom";case"bottom":return"top";case"left":return"right";case"right":return"left"}}_onDefaultSlotChange(){this._updateTriggerElement()}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>
-          <slot> </slot>  
-          `:c` 
-            <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(){this.setAnchorName(),this.setDelay(),this.setPosition(),this.setVariant(),this.setOffset(),this.handleEventlistnerClick(),this.handleEventlistnerHover()}setVariant(){this.hasAttribute("variant")&&this.style.setProperty("--variant",this.variant)}setAnchorName(){const t=Array.from({length:15},()=>"abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random()*26)]).join("");this.style.setProperty("--anchorname","--"+t)}setDelay(){this.hasAttribute("delay")&&this.style.setProperty("--delay",this.delay+"s")}setPosition(){this.hasAttribute("position")&&(this.style.setProperty("--position",this.position),this.style.setProperty("--oposition",this.position))}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}}}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"))}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)}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))}addHidden(t){const s=(parseFloat(getComputedStyle(this).getPropertyValue("--delay"))||1)*1e3;this._hideTimeout=window.setTimeout(()=>{t.classList.add("hidden"),this._hideTimeout=null},s)}openTooltip(t){this.setDefaultPosition(),this.adjustTooltipPosition(t),t.classList.remove("hidden"),this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null)}closeTooltip(t){t.removeAttribute("open"),t.setAttribute("aria-hidden","true")}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))}};o.styles=[h`
-  --anchorname: randomString;
-  --position: top;
-  --variant: plain;
-  --oposition: top;
-  --delay: 1s;
-  --offset: 0px;
-
-:host {
-  position: relative;
-  display: inline-block;
-}
-
-: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; 
+          <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>
+    `}};l.styles=F`
+    :host {
+      position: relative;
+      display: inline-block;
+      --delay: 1s;
+    }
 
-    .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);
-      }
+    .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;
     }
 
-    .hidden{
+    .scb-tooltip[open] {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .hidden {
       visibility: hidden;
     }
-}
 
-::slotted([scb-tooltip-button]) {
-    anchor-name: var(--anchorname);
-    display: inline-flex;
-  } 
+    .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);
+    }
+
+    ::slotted([scb-tooltip-button]) {
+      display: inline-flex;
+    }
 
-/* Plain variant styles */
-  :host([variant="plain"]) .scb-tooltip { 
-    max-width: 184px;
-    transition: opacity var(--delay) ease-in-out;
-    opacity:0;
-    z-index: 10;
+    /* Plain variant */
 
-    .scb-tooltip-container {
+    :host([variant='plain']) .scb-tooltip {
+      max-width: 184px;
+    }
+
+    :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;
-  }
-
-  :host([position="top"]) .scb-tooltip,
-  :host([position="bottom"]) .scb-tooltip {
-    transform: translateY(var(--offset));
-  }
-
-  /* Plain tooltip arrow postions */
-  :host([position="top"][arrow]) .scb-tooltip {§
-    .scb-tooltip-arrow {
-        left: 50%;
-        bottom: -6px;
-        transform: translateX(-50%) rotate(0deg);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      min-height: 14px;
+      width: 100%;
+    }
+
+    :host([variant='plain']) .scb-tooltip-supporting-text {
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
     }
-  }
 
-  :host([position="right"][arrow]) .scb-tooltip {      
     .scb-tooltip-arrow {
+      width: 12px;
+      height: 6px;
+      position: absolute;
+    }
+
+    :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 {
-  .scb-tooltip-arrow {
-    display: none;
-  } 
-}
-
-/* tooltip open states */
-:host([variant="rich"]) .scb-tooltip[open],
-:host([variant="plain"]) .scb-tooltip[open]
-{
-  opacity:1;
-}
-
-:host([variant="plain"][open]) .scb-tooltip,
-:host([variant="rich"][open]) .scb-tooltip{
-  opacity:1;
-  visibility: visible;
-}
-  `];r([n({type:String,reflect:!0})],o.prototype,"variant",2);r([n({type:Boolean,reflect:!0})],o.prototype,"arrow",2);r([n({type:String,attribute:"supporting-text"})],o.prototype,"supportingtext",2);r([n({type:String})],o.prototype,"label",2);r([n({type:String,reflect:!0})],o.prototype,"trigger",2);r([n({type:String,reflect:!0})],o.prototype,"position",2);r([n({type:Boolean,reflect:!0})],o.prototype,"open",2);r([n({type:Number,reflect:!0})],o.prototype,"delay",2);r([n({type:Number,reflect:!0})],o.prototype,"offset",2);o=r([u("scb-tooltip")],o);
+    }
+
+    :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='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;
+    }
+
+    :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='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;
+    }
+  `;c([p({type:String,reflect:!0})],l.prototype,"variant",2);c([p({type:Boolean,reflect:!0})],l.prototype,"arrow",2);c([p({type:String,attribute:"supporting-text"})],l.prototype,"supportingtext",2);c([p({type:String})],l.prototype,"label",2);c([p({type:String,reflect:!0})],l.prototype,"trigger",2);c([p({type:String,reflect:!0})],l.prototype,"position",2);c([p({type:Boolean,reflect:!0})],l.prototype,"open",2);c([p({type:Number,reflect:!0})],l.prototype,"delay",2);c([p({type:Number,reflect:!0})],l.prototype,"offset",2);l=c([j("scb-tooltip")],l);