@ncino/web-components 13.9.0 → 13.9.2

package/dist/components/tooltip/gator/tooltip.gator.js

@@ -1,7 +1,8 @@
-import{NjcTooltip as f}from"../tooltip.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as m}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as c}from"../../../utils/decorators/custom-element-decorator.js";import h from"../../../packages/web-components/src/components/tooltip/gator/tooltip.gator.scss.js";import g from"../../../packages/web-components/src/components/tooltip/tooltip.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import d from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as _,computePosition as v}from"../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{unsafeCSS as i}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var O=Object.getOwnPropertyDescriptor,y=(t,o,r,l)=>{for(var e=l>1?void 0:l?O(o,r):o,n=t.length-1,p;n>=0;n--)(p=t[n])&&(e=p(e)||e);return e};let s=class extends f{render(){return a`
-            <div ${u(this._tooltipRef)} class="gator-tooltip ${this.nubbinPositionClass}" role="tooltip" id="${this.tooltipId}">
+import{NjcTooltip as c}from"../tooltip.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as d}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as f}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as m}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as h}from"../../../utils/decorators/custom-element-decorator.js";import a from"../../../packages/web-components/src/components/tooltip/gator/tooltip.gator.scss.js";import u from"../../../packages/web-components/src/components/tooltip/tooltip.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import g from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as y,computePosition as P}from"../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{unsafeCSS as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var _=Object.getOwnPropertyDescriptor,v=(t,i,e,r)=>{for(var s=r>1?void 0:r?_(i,e):i,n=t.length-1,l;n>=0;n--)(l=t[n])&&(s=l(s)||s);return s};let o=class extends c{constructor(){super(...arguments),this._portaledPopup=null}render(){return d`
+            <div ${m(this._tooltipRef)} class="gator-tooltip ${this.nubbinPositionClass}" role="tooltip" id="${this.tooltipId}">
                 <div class="gator-tooltip-body">
                     <slot></slot>
                 </div>
             </div>
-        `}get xPositionOffset(){return this.placement.includes("left")?-12+this.xOffset:this.placement.includes("right")?12+this.xOffset:0}get yPositionOffset(){return this.placement.includes("top")?-12+this.yOffset:this.placement.includes("bottom")?12+this.yOffset:0}get nubbinPositionClass(){switch(this.placement){case"top":return"gator-tooltip-nubbin_bottom";case"right":return"gator-tooltip-nubbin_left";case"bottom":return"gator-tooltip-nubbin_top";case"left":return"gator-tooltip-nubbin_right"}return""}assignPosition(){const t=this.referenceElement;!this._tooltipRef||!this._tooltipRef.value||!t||(this._cleanup=_(t,this._tooltipRef.value,async()=>{if(!this._tooltipRef||!this._tooltipRef.value||!t)return;const{x:o,y:r}=await v(t,this._tooltipRef.value,{placement:this.placement});Object.assign(this._tooltipRef.value.style,{left:`${o+this.xPositionOffset}px`,top:`${r+this.yPositionOffset}px`})}))}};s.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0,mode:"open"};s.styles=[i(h),i(g),i(b),i(d)];s=y([c("ngc-tooltip")],s);export{s as NgcTooltip};
+        `}get xPositionOffset(){return this.placement.includes("left")?-12+this.xOffset:this.placement.includes("right")?12+this.xOffset:0}get yPositionOffset(){return this.placement.includes("top")?-12+this.yOffset:this.placement.includes("bottom")?12+this.yOffset:0}get nubbinPositionClass(){switch(this.placement){case"top":return"gator-tooltip-nubbin_bottom";case"right":return"gator-tooltip-nubbin_left";case"bottom":return"gator-tooltip-nubbin_top";case"left":return"gator-tooltip-nubbin_right"}return""}getActivePopup(){return this._portaledPopup??this._tooltipRef.value??null}preparePopupForShow(){const t=this._tooltipRef.value;if(!t)return;if(!o.portalStylesInjected){const e=document.createElement("style");e.setAttribute("data-ngc-tooltip-portal",""),e.textContent=`${a}
+${u}`,document.head.appendChild(e),o.portalStylesInjected=!0}t.parentElement!==document.body&&document.body.appendChild(t),this._portaledPopup=t,t.style.width="max-content",t.querySelector(".gator-tooltip-body")?.replaceChildren(...Array.from(this.childNodes).map(e=>e.cloneNode(!0)))}cleanupPopupAfterHide(){this._cleanup&&(this._cleanup(),this._cleanup=void 0);const t=this._portaledPopup;t?.parentElement===document.body&&this.renderRoot.appendChild(t),this._portaledPopup=null}disconnectedCallback(){this._portaledPopup?.remove(),this._portaledPopup=null,super.disconnectedCallback()}assignPosition(){const t=this.referenceElement,i=this.getActivePopup();!t||!i||(this._cleanup?.(),this._cleanup=y(t,i,async()=>{const e=this.referenceElement,r=this.getActivePopup();if(!e||!r)return;const{x:s,y:n}=await P(e,r,{placement:this.placement,strategy:"fixed"});Object.assign(r.style,{position:"fixed",left:`${s+this.xPositionOffset}px`,top:`${n+this.yPositionOffset}px`,right:"auto",bottom:"auto"})}))}};o.portalStylesInjected=!1;o.shadowRootOptions={...f.shadowRootOptions,delegatesFocus:!0,mode:"open"};o.styles=[p(a),p(u),p(b),p(g)];o=v([h("ngc-tooltip")],o);export{o as NgcTooltip};

package/dist/components/tooltip/tooltip.js

@@ -1 +1 @@
-import{property as l}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as u}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as m}from"../../consts/key-constants.js";import{generateRandomId as y}from"../../utils/string-utils.js";import{TestableLitElement as _}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as c}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as v}from"../../utils/accessibility-utils.js";var b=Object.defineProperty,n=(d,e,o,i)=>{for(var t=void 0,s=d.length-1,r;s>=0;s--)(r=d[s])&&(t=r(e,o,t)||t);return t&&b(e,o,t),t};class a extends _{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=u(),this._forceOpen=!1,this._mousedInsideTooltip=!1,this.tooltipId=y()}firstUpdated(){if(this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0"),!this.referenceId)return;const e=this.referenceElement,o=this._tooltipRef.value;if(e&&o){c(e,this.dataTestid,"trigger"),c(o,this.dataTestid,"tooltip");let i;e.shadowRoot?.delegatesFocus?i=v(e):i=e,i&&(this.isLabel?i.ariaLabelledByElements=[...i.ariaLabelledByElements||[],this]:i.ariaDescribedByElements=[...i.ariaDescribedByElements||[],this]),e.addEventListener("mouseenter",()=>this.showTooltip()),e.addEventListener("mouseleave",t=>this._handleMouseLeave(t,e,o)),e.addEventListener("focusin",()=>this.showTooltip()),e.addEventListener("focusout",()=>this.hideTooltip()),o.addEventListener("mouseenter",()=>this.showTooltip()),o.addEventListener("mouseleave",t=>{if(this._mousedInsideTooltip){this.hideTooltip();return}this._handleMouseLeave(t,e,o)}),document.addEventListener("keydown",t=>{t.key===m.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}}get referenceElement(){let e=this.parentElement?.querySelector(`#${this.referenceId}`);return e||(e=document.getElementById(this.referenceId)),e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),e||(e=this.getRootNode().querySelector?.(`#${this.referenceId}`)),e}_handleMouseLeave(e,o,i){const t=o.getBoundingClientRect(),s=i.getBoundingClientRect(),r=this._isMouseInside(e,t,-5),f=this._isMouseInside(e,s,25);!r&&!f&&this.hideTooltip(),f&&(this._mousedInsideTooltip=!0)}_isMouseInside(e,o,i=0){const{left:t,right:s,top:r,bottom:f}=o,h=e.clientX,p=e.clientY;return h>=t-i&&h<=s+i&&p>=r-i&&p<=f+i}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._cleanup&&this._cleanup(),super.disconnectedCallback()}showTooltip(){this.assignPosition(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="visible",this._tooltipRef.value.style.opacity="1")}hideTooltip(){this._forceOpen||this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0")}assignPosition(){}}n([l({attribute:"reference-id"})],a.prototype,"referenceId");n([l()],a.prototype,"placement");n([l({type:Number,attribute:"x-offset"})],a.prototype,"xOffset");n([l({type:Number,attribute:"y-offset"})],a.prototype,"yOffset");n([l({type:Boolean,attribute:"is-label"})],a.prototype,"isLabel");export{a as NjcTooltip};
+import{property as n}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as c}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as u}from"../../consts/key-constants.js";import{generateRandomId as f}from"../../utils/string-utils.js";import{TestableLitElement as p}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as h}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as _}from"../../utils/accessibility-utils.js";var v=Object.defineProperty,o=(l,e,t,i)=>{for(var s=void 0,r=l.length-1,a;r>=0;r--)(a=l[r])&&(s=a(e,t,s)||s);return s&&v(e,t,s),s};const m=100;class d extends p{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=c(),this._forceOpen=!1,this._initialized=!1,this._boundReferenceElement=null,this.elementListeners=new WeakMap,this.tooltipId=f()}firstUpdated(){this.hideTooltip(),this._tryInitialize(),this._observeReferenceAvailability()}updated(e){super.updated(e),(e.has("referenceId")||e.has("isLabel"))&&(this._disconnectReferenceObserver(),this._teardown()),this._initialized||(this._tryInitialize(),this._observeReferenceAvailability())}get referenceElement(){if(!this.referenceId)return null;const e=this.previousElementSibling;if(e?.id===this.referenceId)return e;const t=`[id="${CSS.escape(this.referenceId)}"]`;let i=this.parentElement?.querySelector(t);return i||(i=document.getElementById(this.referenceId)),i||(i=document.querySelector(`[data-id="${CSS.escape(this.referenceId)}"]`)?.shadowRoot?.querySelector(t)),i||(i=this.getRootNode().querySelector?.(t)),i}_observeReferenceAvailability(){if(this._initialized||!this.referenceId||this._initObserver)return;const e=this.parentElement??document.body;this._initObserver=new MutationObserver(()=>{if(this._initialized){this._disconnectReferenceObserver();return}this._tryInitialize()}),this._initObserver.observe(e,{attributes:!0,attributeFilter:["id"],childList:!0,subtree:!0})}_disconnectReferenceObserver(){this._initObserver?.disconnect(),this._initObserver=void 0}_tryInitialize(){if(this._initialized||!this.referenceId)return;const e=this.referenceElement,t=this._tooltipRef.value;!e||!t||(h(e,this.dataTestid,"trigger"),h(t,this.dataTestid,"tooltip"),this._updateAriaAssociation(e,!0),this._addInteractionEvents(e,t),this._initialized=!0,this._boundReferenceElement=e,this._disconnectReferenceObserver())}_teardown(){if(!this._initialized)return;this._clearScheduledHide();const e=this._boundReferenceElement,t=this._tooltipRef.value;e&&(this._updateAriaAssociation(e,!1),this.removeAllTrackedEventListeners(e)),t&&this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this._initialized=!1,this._boundReferenceElement=null}_getAriaTargetElement(e){return e.shadowRoot?.delegatesFocus?_(e):e}_updateAriaAssociation(e,t){const i=this._getAriaTargetElement(e);if(!i)return;if(this.isLabel){const r=i.ariaLabelledByElements??[];i.ariaLabelledByElements=t?[...r,this]:r.filter(a=>a!==this);return}const s=i.ariaDescribedByElements??[];i.ariaDescribedByElements=t?[...s,this]:s.filter(r=>r!==this)}_addInteractionEvents(e,t){const i=()=>{this._clearScheduledHide(),this.showTooltip()};this.addTrackedEventListener(e,"mouseenter",i),this.addTrackedEventListener(e,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(e,"focusin",()=>this.showTooltip()),this.addTrackedEventListener(e,"focusout",()=>this.hideTooltip()),this.addTrackedEventListener(t,"mouseenter",i),this.addTrackedEventListener(t,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(document,"keydown",s=>{s instanceof KeyboardEvent&&s.key===u.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}_scheduleHide(){this._clearScheduledHide(),this._hideTimeoutId=setTimeout(()=>this.hideTooltip(),m)}_clearScheduledHide(){this._hideTimeoutId!==void 0&&(clearTimeout(this._hideTimeoutId),this._hideTimeoutId=void 0)}addTrackedEventListener(e,t,i,s={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:t,listener:i,options:s}),e.addEventListener(t,i,s)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const t=this.elementListeners.get(e);for(const{eventType:i,listener:s,options:r}of t)e.removeEventListener(i,s,r);this.elementListeners.delete(e)}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._disconnectReferenceObserver(),this._teardown(),this._cleanup&&this._cleanup(),super.disconnectedCallback()}getActivePopup(){return this._tooltipRef.value??null}preparePopupForShow(){}cleanupPopupAfterHide(){}showTooltip(){this.preparePopupForShow(),this.assignPosition();const e=this.getActivePopup();e&&(e.style.visibility="visible",e.style.opacity="1")}hideTooltip(){if(this._forceOpen)return;this._clearScheduledHide();const e=this.getActivePopup();e&&(e.style.visibility="hidden",e.style.opacity="0"),this.cleanupPopupAfterHide()}assignPosition(){}}o([n({attribute:"reference-id"})],d.prototype,"referenceId");o([n()],d.prototype,"placement");o([n({type:Number,attribute:"x-offset"})],d.prototype,"xOffset");o([n({type:Number,attribute:"y-offset"})],d.prototype,"yOffset");o([n({type:Boolean,attribute:"is-label"})],d.prototype,"isLabel");export{d as NjcTooltip};

package/dist/packages/web-components/src/components/modal/gator/modal.gator.scss.js

@@ -1 +1 @@
-const a=".gator-modal-dialog{border:none;padding:0;background:transparent;inset:0;display:grid;place-items:center}.gator-modal-dialog::backdrop{background-color:var(--color-overlay-secondary)}.gator-modal{--ngc-card-position: static;--ngc-card-top: auto;--ngc-card-left: auto;--ngc-card-max-width: none;--ngc-card-transform: none}.gator-modal-wrapper{display:flex;flex-direction:column;max-height:90vh;overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-header{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--color-surface-secondary)}.gator-modal-header .gator-modal-close-button{--ngc-icon-button-hover-box-shadow: none}.gator-modal-content{flex-grow:1;padding:var(--spacing-10) var(--spacing-10) var(--spacing-11) var(--spacing-10);overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-content ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 0 var(--spacing-5) 0}.gator-modal-footer{flex-shrink:0;display:flex;padding:var(--spacing-10)}.gator-modal-warning{display:flex;flex-direction:row;align-items:center}.gator-modal-warning ngc-icon{--ngc-icon-color: var(--color-text-error);--ngc-icon-margin: 0 var(--spacing-5) 0 0}.gator-modal-warning ngc-input-label{--ngc-input-label-color: var(--color-text-error);--ngc-input-label-font-size: var(--font-size-body-2);--ngc-input-label-line-height: var(--line-height-body-2)}.gator-modal-action-buttons{display:flex;gap:var(--spacing-5)}.gator-modal ngc-card-header{width:100%}.gator-modal--small{--ngc-card-width: var(--ngc-modal-width, 375px);--ngc-card-border-radius: var(--border-radius-medium)}.gator-modal--small .gator-modal-header{border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.gator-modal--small .gator-modal-content{padding:var(--spacing-8) var(--spacing-8) 56px var(--spacing-8)}.gator-modal--small .gator-modal-footer{flex-direction:column-reverse;align-items:center;padding:var(--spacing-8)}.gator-modal--small .gator-modal-warning{margin-top:var(--spacing-10)}.gator-modal--small .gator-modal-action-buttons{flex-direction:column-reverse;width:100%}.gator-modal--small .gator-modal-action-buttons ngc-button{--ngc-button-width: 100% }.gator-modal--standard{--ngc-card-width: var(--ngc-modal-width, 600px)}.gator-modal--standard .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);border-radius:var(--border-radius-x-large) var(--border-radius-x-large) 0 0}.gator-modal--standard .gator-modal-footer{flex-direction:row}.gator-modal--standard .gator-modal-warning{margin-right:auto}.gator-modal--standard .gator-modal-action-buttons{margin-left:auto}.gator-modal--standard .gator-modal-action-buttons ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 var(--spacing-5) 0 0}.gator-modal--fullscreen{--ngc-card-border-radius: var(--border-radius-no-radius)}.gator-modal--fullscreen .gator-modal-wrapper{height:100vh;width:100vw;max-height:100vh}.gator-modal--fullscreen .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);padding-left:48px}.gator-modal--fullscreen .gator-modal-header ngc-card-header{justify-content:center;--ngc-text-detail-content-alignment: center}.gator-modal--fullscreen .gator-modal-content{background:var(--color-surface-secondary)}.gator-modal--fullscreen .gator-modal-footer{flex-direction:column-reverse;justify-content:center;align-items:center;border-top:1px solid var(--color-border-tertiary)}.gator-modal--fullscreen .gator-modal-warning{margin-top:var(--spacing-5)}.gator-dialog--fullscreen{max-height:100%;max-width:100%;margin:0}";export{a as default};
+const a=".gator-modal-dialog{border:none;padding:0;background:transparent;inset:0;display:grid;place-items:center;overflow:hidden}.gator-modal-dialog::backdrop{background-color:var(--color-overlay-secondary)}.gator-modal{--ngc-card-position: static;--ngc-card-top: auto;--ngc-card-left: auto;--ngc-card-max-width: none;--ngc-card-transform: none}.gator-modal-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0;overflow-y:hidden}.gator-modal-header{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--color-surface-secondary)}.gator-modal-header .gator-modal-close-button{--ngc-icon-button-hover-box-shadow: none}.gator-modal-content{flex-grow:1;min-height:0;padding:var(--spacing-10) var(--spacing-10) var(--spacing-11) var(--spacing-10);overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-content ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 0 var(--spacing-5) 0}.gator-modal-footer{flex-shrink:0;display:flex;padding:var(--spacing-10)}.gator-modal-warning{display:flex;flex-direction:row;align-items:center}.gator-modal-warning ngc-icon{--ngc-icon-color: var(--color-text-error);--ngc-icon-margin: 0 var(--spacing-5) 0 0}.gator-modal-warning ngc-input-label{--ngc-input-label-color: var(--color-text-error);--ngc-input-label-font-size: var(--font-size-body-2);--ngc-input-label-line-height: var(--line-height-body-2)}.gator-modal-action-buttons{display:flex;gap:var(--spacing-5)}.gator-modal ngc-card-header{width:100%}.gator-modal--small{--ngc-card-width: var(--ngc-modal-width, 375px);--ngc-card-border-radius: var(--border-radius-medium)}.gator-modal--small .gator-modal-header{border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.gator-modal--small .gator-modal-content{padding:var(--spacing-8) var(--spacing-8) 56px var(--spacing-8)}.gator-modal--small .gator-modal-footer{flex-direction:column-reverse;align-items:center;padding:var(--spacing-8)}.gator-modal--small .gator-modal-warning{margin-top:var(--spacing-10)}.gator-modal--small .gator-modal-action-buttons{flex-direction:column-reverse;width:100%}.gator-modal--small .gator-modal-action-buttons ngc-button{--ngc-button-width: 100% }.gator-modal--standard{--ngc-card-width: var(--ngc-modal-width, 600px)}.gator-modal--standard .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);border-radius:var(--border-radius-x-large) var(--border-radius-x-large) 0 0}.gator-modal--standard .gator-modal-footer{flex-direction:row}.gator-modal--standard .gator-modal-warning{margin-right:auto}.gator-modal--standard .gator-modal-action-buttons{margin-left:auto}.gator-modal--standard .gator-modal-action-buttons ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 var(--spacing-5) 0 0}.gator-modal--fullscreen{--ngc-card-border-radius: var(--border-radius-no-radius)}.gator-modal--fullscreen .gator-modal-wrapper{height:100vh;width:100vw;max-height:100vh}.gator-modal--fullscreen .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);padding-left:48px}.gator-modal--fullscreen .gator-modal-header ngc-card-header{justify-content:center;--ngc-text-detail-content-alignment: center}.gator-modal--fullscreen .gator-modal-content{background:var(--color-surface-secondary)}.gator-modal--fullscreen .gator-modal-footer{flex-direction:column-reverse;justify-content:center;align-items:center;border-top:1px solid var(--color-border-tertiary)}.gator-modal--fullscreen .gator-modal-warning{margin-top:var(--spacing-5)}.gator-dialog--fullscreen{max-height:100%;max-width:100%;margin:0}";export{a as default};

package/dist/packages/web-components/src/components/tooltip/tooltip.scss.js

@@ -1 +1 @@
-const t="div[role=tooltip]{position:absolute;width:max-content;top:0;left:0;z-index:9999;visibility:hidden;opacity:0;transition:opacity .2s}#floating{position:absolute;width:max-content;top:0;left:0;z-index:9999}";export{t as default};
+const t="div[role=tooltip]{position:fixed;width:max-content;top:0;left:0;z-index:9999;visibility:hidden;opacity:0;transition:opacity .2s}#floating{position:absolute;width:max-content;top:0;left:0;z-index:9999}";export{t as default};

package/dist/types/components/tooltip/gator/tooltip.gator.d.ts

@@ -1,5 +1,7 @@
 import { NjcTooltip } from '../tooltip.ts';
 export declare class NgcTooltip extends NjcTooltip {
+    private static portalStylesInjected;
+    private _portaledPopup;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -13,5 +15,9 @@ export declare class NgcTooltip extends NjcTooltip {
     get xPositionOffset(): number;
     get yPositionOffset(): number;
     get nubbinPositionClass(): "" | "gator-tooltip-nubbin_bottom" | "gator-tooltip-nubbin_left" | "gator-tooltip-nubbin_top" | "gator-tooltip-nubbin_right";
+    protected getActivePopup(): HTMLElement | null;
+    protected preparePopupForShow(): void;
+    protected cleanupPopupAfterHide(): void;
+    disconnectedCallback(): void;
     assignPosition(): void;
 }

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { Placement } from '@floating-ui/dom';
+import { PropertyValues } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 export declare class NjcTooltip extends TestableLitElement {
@@ -10,14 +11,34 @@ export declare class NjcTooltip extends TestableLitElement {
     _tooltipRef: Ref<HTMLElement>;
     _cleanup: (() => void) | undefined;
     private _forceOpen;
-    private _mousedInsideTooltip;
+    private _hideTimeoutId;
+    private _initObserver;
+    private _initialized;
+    private _boundReferenceElement;
+    private elementListeners;
     tooltipId: string;
     firstUpdated(): void;
-    get referenceElement(): HTMLElement;
-    _handleMouseLeave(e: MouseEvent, referenceElement: HTMLElement, tooltipElement: HTMLElement): void;
-    _isMouseInside(e: MouseEvent, rect: DOMRect, padding?: number): boolean;
+    updated(changedProperties: PropertyValues): void;
+    get referenceElement(): HTMLElement | null;
+    private _observeReferenceAvailability;
+    private _disconnectReferenceObserver;
+    private _tryInitialize;
+    private _teardown;
+    private _getAriaTargetElement;
+    private _updateAriaAssociation;
+    private _addInteractionEvents;
+    private _scheduleHide;
+    private _clearScheduledHide;
+    addTrackedEventListener(element: HTMLElement | Document, eventType: string, listener: EventListener, options?: AddEventListenerOptions): void;
+    removeAllTrackedEventListeners(element: HTMLElement | Document): void;
     toggleTooltip(): void;
     disconnectedCallback(): void;
+    /** Popup element used for positioning and visibility. Gator overrides when portaling. */
+    protected getActivePopup(): HTMLElement | null;
+    /** Called before positioning when the popup is shown. */
+    protected preparePopupForShow(): void;
+    /** Called after the popup is hidden. */
+    protected cleanupPopupAfterHide(): void;
     showTooltip(): void;
     hideTooltip(): void;
     /**

package/dist/types/utils/vitest-utils.d.ts

@@ -13,6 +13,8 @@ export declare function getNamedSlotTextContent(element: HTMLElement | null, nam
 export declare function getSlottedElements(element: HTMLElement | null, elementFilter?: string | null): Element[] | undefined;
 export declare function getNamedSlottedElements(element: HTMLElement | null, name: string): Element[] | undefined;
 export declare function flushPromises(time?: number): Promise<unknown>;
+/** Wait past tooltip hover-dismiss delay (100ms) for visibility assertions. */
+export declare function waitForTooltipHide(): Promise<unknown>;
 /**
  * For components whose Lit `title` is heading text (not the HTML tooltip): the host must
  * not keep a `title` attribute, while `HTMLElement#title` reflects the Lit property value.

package/dist/utils/storybook-utils.js

@@ -1 +1 @@
-import{camelToKebab as s}from"./string-utils.js";const a=new Set(["defaultSlot"]);function i(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}function f(t,e){const n=new RegExp(`<${e}\\b`,"g");return[...t.matchAll(n)].length}function l(t){const e=Object.entries(t).sort(([o],[r])=>o==="dataTestid"?-1:r==="dataTestid"?1:o.localeCompare(r)),n=[];for(const[o,r]of e){if(a.has(o)||r==null||r===!1)continue;if(o==="dataTestid"){n.push(`data-testid="${i(String(r))}"`);continue}const u=s(o);if(typeof r=="boolean"&&r){n.push(u);continue}typeof r!="boolean"&&n.push(`${u}="${i(String(r))}"`)}return n.length?` ${n.join(" ")}`:""}function c(t,e){const n=l(e),o=typeof e.defaultSlot=="string"?i(e.defaultSlot):"";return`<${t}${n}>${o}</${t}>`}function $(t,e,n){if(!e)return t;const o=f(t,e);if(o>1)return c(e,n);if(o===0)return t;const r=l(n);return r.trim()?t.replace(new RegExp(`<${e}\\b`),`<${e}${r}`):t}function b(t){const e=[];if(!t)return e;for(let n=1;n<=t;n++)e.push({label:`Option ${n}`,value:`${n}`});return e}export{c as buildMinimalComponentSnippet,$ as convertArgsForStorybookCodeExample,b as generateOptions};
+import{camelToKebab as s}from"./string-utils.js";const a=new Set(["defaultSlot"]);function i(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}function f(t,e){const n=new RegExp(`<${e}\\b`,"g");return[...t.matchAll(n)].length}function l(t){const e=Object.entries(t).sort(([o],[r])=>o==="dataTestid"?-1:r==="dataTestid"?1:o.localeCompare(r)),n=[];for(const[o,r]of e){if(a.has(o)||r==null||r===!1)continue;if(o==="dataTestid"){n.push(`data-testid="${i(String(r))}"`);continue}const u=s(o);if(typeof r=="boolean"&&r){n.push(u);continue}typeof r!="boolean"&&n.push(`${u}="${i(String(r))}"`)}return n.length?` ${n.join(" ")}`:""}function c(t,e){const n=l(e),o=typeof e.defaultSlot=="string"?i(e.defaultSlot):"";return`<${t}${n}>${o}</${t}>`}function $(t,e,n){if(!e)return t;const o=f(t,e);if(o>1)return c(e,n);if(o===0)return t;const r=l(n);return r.trim()?t.replace(new RegExp(`<${e}\\b[^>]*>`),`<${e}${r}>`):t}function b(t){const e=[];if(!t)return e;for(let n=1;n<=t;n++)e.push({label:`Option ${n}`,value:`${n}`});return e}export{c as buildMinimalComponentSnippet,$ as convertArgsForStorybookCodeExample,b as generateOptions};

package/dist/utils/vitest-utils.js

@@ -1 +1 @@
-import{g as r}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";async function u(e){document.body.innerHTML=e,await new Promise(t=>setTimeout(t,0))}function a(e){return document.body.querySelector(e)}function c(e,t){return e?.querySelector(t)}function d(e,t){return e?.querySelectorAll(t)}function i(e){return document.body.querySelectorAll(e)}function m(e,t){return e?.shadowRoot?.querySelectorAll(t)}function f(e,t){return e?.shadowRoot?.querySelector(t)}function g(e,t){return e?.shadowRoot?.querySelector(`[data-testid="${t}"]`)}function E(e,t){return e?.shadowRoot?.querySelector(t)}function S(e,t){return e?.shadowRoot?.querySelectorAll(t)}function y(e){const t=e?.shadowRoot?.querySelectorAll("slot"),n=Array.from(t).find(l=>l.name==="")?.assignedNodes({flatten:!0}).filter(l=>l.textContent?.trim()!=="");return n&&n.length>0?n[0].textContent:null}function h(e,t){const o=e?.shadowRoot?.querySelector(`slot[name="${t}"]`);return(o?.assignedNodes().length?o?.assignedNodes({flatten:!0})[0]:o?.assignedElements({flatten:!0})[0])?.textContent}function w(e,t=null){let n=e?.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0});return t&&(n=n?.filter(l=>l.tagName.toLowerCase()===t)),n}function R(e,t){return e?.shadowRoot?.querySelector(`slot[name=${t}]`)?.assignedElements({flatten:!0})}function T(e=0){return new Promise(t=>setTimeout(t,e))}function q(e,t){r(e).toBeTruthy();const o=e;r(o.getAttribute("title")).toBeNull(),r(o.title).toBe(t)}function x(e){const t=/<!--\?lit\$[^\$]*\$-->/g;return e.replace(t,"").replace(/\s+/g," ").trim()}export{u as addTestableElement,x as cleanInnerHTML,q as expectLitHeadingTitle,T as flushPromises,a as getElement,c as getElementInsideElement,i as getElements,d as getElementsInsideElement,h as getNamedSlotTextContent,R as getNamedSlottedElements,E as getShadowRootElement,g as getShadowRootElementByDataTestId,S as getShadowRootElements,f as getShadowRootHTMLElement,m as getShadowRootHTMLElements,y as getSlotTextContent,w as getSlottedElements};
+import{g as r}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";async function a(t){document.body.innerHTML=t,await new Promise(e=>setTimeout(e,0))}function i(t){return document.body.querySelector(t)}function c(t,e){return t?.querySelector(e)}function d(t,e){return t?.querySelectorAll(e)}function m(t){return document.body.querySelectorAll(t)}function f(t,e){return t?.shadowRoot?.querySelectorAll(e)}function g(t,e){return t?.shadowRoot?.querySelector(e)}function E(t,e){return t?.shadowRoot?.querySelector(`[data-testid="${e}"]`)}function S(t,e){return t?.shadowRoot?.querySelector(e)}function y(t,e){return t?.shadowRoot?.querySelectorAll(e)}function h(t){const e=t?.shadowRoot?.querySelectorAll("slot"),n=Array.from(e).find(l=>l.name==="")?.assignedNodes({flatten:!0}).filter(l=>l.textContent?.trim()!=="");return n&&n.length>0?n[0].textContent:null}function w(t,e){const o=t?.shadowRoot?.querySelector(`slot[name="${e}"]`);return(o?.assignedNodes().length?o?.assignedNodes({flatten:!0})[0]:o?.assignedElements({flatten:!0})[0])?.textContent}function R(t,e=null){let n=t?.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0});return e&&(n=n?.filter(l=>l.tagName.toLowerCase()===e)),n}function T(t,e){return t?.shadowRoot?.querySelector(`slot[name=${e}]`)?.assignedElements({flatten:!0})}function s(t=0){return new Promise(e=>setTimeout(e,t))}function q(){return s(150)}function x(t,e){r(t).toBeTruthy();const o=t;r(o.getAttribute("title")).toBeNull(),r(o.title).toBe(e)}function N(t){const e=/<!--\?lit\$[^\$]*\$-->/g;return t.replace(e,"").replace(/\s+/g," ").trim()}export{a as addTestableElement,N as cleanInnerHTML,x as expectLitHeadingTitle,s as flushPromises,i as getElement,c as getElementInsideElement,m as getElements,d as getElementsInsideElement,w as getNamedSlotTextContent,T as getNamedSlottedElements,S as getShadowRootElement,E as getShadowRootElementByDataTestId,y as getShadowRootElements,g as getShadowRootHTMLElement,f as getShadowRootHTMLElements,h as getSlotTextContent,R as getSlottedElements,q as waitForTooltipHide};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "13.9.0",
+  "version": "13.9.2",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.0",
     "yaml-eslint-parser": "^2.0.0",
-    "@ncino/styles": "13.9.0"
+    "@ncino/styles": "13.9.2"
   },
   "peerDependencies": {
-    "@ncino/styles": "13.9.0"
+    "@ncino/styles": "13.9.2"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "13.8.1",
+  "version": "13.9.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1995,7 +1995,7 @@
         },
         {
           "name": "ngc-tooltip",
-          "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
+          "description": "\n---\n\n\n### **Methods:**\n \n\n\n- **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
           "doc-url": "",
           "attributes": [
             {
@@ -7553,7 +7553,7 @@
         },
         {
           "name": "nsc-tooltip",
-          "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
+          "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition\n\n\n",
           "doc-url": "",
           "attributes": [
             {