@spectrum-web-components/tooltip - npm Package Compare versions

Comparing version 0.41.1 to 0.41.2

package.json

 {
     "name": "@spectrum-web-components/tooltip",
-    "version": "0.41.1",
+    "version": "0.41.2",
     "publishConfig": {
@@ -36,2 +36,6 @@ "access": "public"
         },
+        "./src/tooltip-directive.js": {
+            "development": "./src/tooltip-directive.dev.js",
+            "default": "./src/tooltip-directive.js"
+        },
         "./src/tooltip.css.js": "./src/tooltip.css.js",
@@ -61,8 +65,8 @@ "./sp-tooltip.js": {
     "dependencies": {
-        "@spectrum-web-components/base": "^0.41.1",
-        "@spectrum-web-components/overlay": "^0.41.1",
-        "@spectrum-web-components/shared": "^0.41.1"
+        "@spectrum-web-components/base": "^0.41.2",
+        "@spectrum-web-components/overlay": "^0.41.2",
+        "@spectrum-web-components/shared": "^0.41.2"
     },
     "devDependencies": {
-        "@spectrum-css/tooltip": "^5.3.1"
+        "@spectrum-css/tooltip": "^5.3.3"
     },
@@ -75,3 +79,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "1eded35d98d01973b40990486b86840ba464a2da"
+    "gitHead": "78c3f16b08c9133c9e5ca88d0c9fef5ea7d2ab87"
 }

README.md

@@ -69,3 +69,3 @@ ## Description
 <sp-action-button size="s">
-    <sp-icon-info></sp-icon-info>
+    <sp-icon-info slot="icon"></sp-icon-info>
     <sp-tooltip self-managed placement="right">
@@ -72,0 +72,0 @@ Display something here

src/spectrum-tooltip.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-#tooltip{opacity:0;pointer-events:none;transition:transform var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,opacity var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,visibility 0s linear var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-);visibility:hidden}:host([open]) #tooltip{opacity:1;pointer-events:auto;transition-delay:var(
---mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s)
-);visibility:visible}#tooltip{--spectrum-tooltip-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(
---spectrum-component-edge-to-text-75
-);--spectrum-tooltip-spacing-block-start:var(
---spectrum-component-top-to-text-75
-);--spectrum-tooltip-spacing-block-end:var(
---spectrum-component-bottom-to-text-75
-);--spectrum-tooltip-icon-spacing-inline-start:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-inline-end:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-block-start:var(
---spectrum-component-top-to-workflow-icon-75
-);--spectrum-tooltip-background-color-informative:var(
---spectrum-informative-background-color-default
-);--spectrum-tooltip-background-color-positive:var(
---spectrum-positive-background-color-default
-);--spectrum-tooltip-background-color-negative:var(
---spectrum-negative-background-color-default
-);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(
---spectrum-corner-radius-100
-);--spectrum-tooltip-background-color-default:var(
---spectrum-tooltip-backgound-color-default-neutral
-)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);border-radius:var(
---mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
-);box-sizing:border-box;color:var(
---mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
-);font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
---mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
-);line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);max-inline-size:var(
---mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
-);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
---mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
-);vertical-align:top;word-break:break-word;-webkit-font-smoothing:antialiased;align-items:center;block-size:auto;display:inline-flex;flex-direction:row;inline-size:auto;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(
---mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
-)}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}#tip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);block-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);clip-path:polygon(0 calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),50% var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-),100% calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));inline-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);left:50%;position:absolute;top:100%;transform:translateX(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tooltip #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)),0 calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),100% calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tooltip #tip{clip-path:polygon(calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(
---mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)
-);flex-shrink:0;inline-size:var(
---mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)
-);margin-block-start:var(
---mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
-);margin-inline-end:var(
---mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
-);margin-inline-start:calc(var(
---mod-tooltip-icon-spacing-inline-start,
-var(--spectrum-tooltip-icon-spacing-inline-start)
-) - var(
---mod-tooltip-spacing-inline,
-var(--spectrum-tooltip-spacing-inline)
-))}#label{line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);margin-block-end:var(
---mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
-);margin-block-start:var(
---mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
-)}#tooltip,.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host([placement*=top]) #tooltip{margin-bottom:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]) #tooltip{transform:translateY(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]) #tooltip{margin-top:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]) #tooltip{margin-left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]) #tooltip{margin-right:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(
---system-spectrum-tooltip-backgound-color-default-neutral
-)}
+    #tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:var(--mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s))}#tooltip{--spectrum-tooltip-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-tooltip-spacing-block-start:var(--spectrum-component-top-to-text-75);--spectrum-tooltip-spacing-block-end:var(--spectrum-component-bottom-to-text-75);--spectrum-tooltip-icon-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tooltip-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-tooltip-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-tooltip-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:.5px;--spectrum-tooltip-pointer-corner-spacing:var(--spectrum-corner-radius-100);--spectrum-tooltip-background-color-default:var(--spectrum-tooltip-backgound-color-default-neutral)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{box-sizing:border-box;vertical-align:top;padding-inline:var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline));border-radius:var(--mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius));min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));max-inline-size:var(--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));color:var(--mod-tooltip-content-color,var(--spectrum-tooltip-content-color));font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight));line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));word-break:break-word;-webkit-font-smoothing:antialiased;flex-direction:row;align-items:center;block-size:auto;inline-size:auto;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(zh)) #tooltip,:host(:lang(ko)) #tooltip{line-height:var(--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height))}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}#tip{block-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));inline-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));clip-path:polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),50% var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)),100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));position:absolute;top:100%;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}:host([placement*=top]) #tooltip #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--top-end #tip{top:100%}:host([placement*=bottom]) #tooltip #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--bottom-end #tip{clip-path:polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))),0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));top:auto;bottom:100%}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{transform:none}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([dir=rtl]) .spectrum-Tooltip--top-start #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip{right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));left:auto}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--top-end #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:auto;transform:none}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%}.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--end-top #tip{top:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-bottom #tip{bottom:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip{clip-path:polygon(var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width));block-size:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));flex-shrink:0;align-self:flex-start;margin-block-start:var(--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start));margin-inline-start:calc(var(--mod-tooltip-icon-spacing-inline-start,var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)));margin-inline-end:var(--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end))}#label{line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));margin-block-start:var(--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start));margin-block-end:var(--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end))}#tooltip,:host([placement*=top]) #tooltip,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,.spectrum-Tooltip--top-end{margin-bottom:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([placement*=top][open]) #tooltip,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([open]) .spectrum-Tooltip--top-end{transform:translateY(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([placement*=bottom]) #tooltip,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,.spectrum-Tooltip--bottom-end{margin-top:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=bottom][open]) #tooltip,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([open]) .spectrum-Tooltip--bottom-end{transform:translateY(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=right]) #tooltip,.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top{margin-left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=right][open]) #tooltip,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=left]) #tooltip,.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top{margin-right:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=left][open]) #tooltip,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-top,.spectrum-Tooltip--start-bottom{margin-inline-end:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--start-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-top,.spectrum-Tooltip--end-bottom{margin-inline-start:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--end-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(--system-spectrum-tooltip-backgound-color-default-neutral)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-tooltip.css.dev.js.map

src/spectrum-tooltip.css.js

 "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
-#tooltip{opacity:0;pointer-events:none;transition:transform var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,opacity var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,visibility 0s linear var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-);visibility:hidden}:host([open]) #tooltip{opacity:1;pointer-events:auto;transition-delay:var(
---mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s)
-);visibility:visible}#tooltip{--spectrum-tooltip-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(
---spectrum-component-edge-to-text-75
-);--spectrum-tooltip-spacing-block-start:var(
---spectrum-component-top-to-text-75
-);--spectrum-tooltip-spacing-block-end:var(
---spectrum-component-bottom-to-text-75
-);--spectrum-tooltip-icon-spacing-inline-start:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-inline-end:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-block-start:var(
---spectrum-component-top-to-workflow-icon-75
-);--spectrum-tooltip-background-color-informative:var(
---spectrum-informative-background-color-default
-);--spectrum-tooltip-background-color-positive:var(
---spectrum-positive-background-color-default
-);--spectrum-tooltip-background-color-negative:var(
---spectrum-negative-background-color-default
-);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(
---spectrum-corner-radius-100
-);--spectrum-tooltip-background-color-default:var(
---spectrum-tooltip-backgound-color-default-neutral
-)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);border-radius:var(
---mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
-);box-sizing:border-box;color:var(
---mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
-);font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
---mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
-);line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);max-inline-size:var(
---mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
-);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
---mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
-);vertical-align:top;word-break:break-word;-webkit-font-smoothing:antialiased;align-items:center;block-size:auto;display:inline-flex;flex-direction:row;inline-size:auto;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(
---mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
-)}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}#tip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);block-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);clip-path:polygon(0 calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),50% var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-),100% calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));inline-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);left:50%;position:absolute;top:100%;transform:translateX(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tooltip #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)),0 calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),100% calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tooltip #tip{clip-path:polygon(calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(
---mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)
-);flex-shrink:0;inline-size:var(
---mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)
-);margin-block-start:var(
---mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
-);margin-inline-end:var(
---mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
-);margin-inline-start:calc(var(
---mod-tooltip-icon-spacing-inline-start,
-var(--spectrum-tooltip-icon-spacing-inline-start)
-) - var(
---mod-tooltip-spacing-inline,
-var(--spectrum-tooltip-spacing-inline)
-))}#label{line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);margin-block-end:var(
---mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
-);margin-block-start:var(
---mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
-)}#tooltip,.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host([placement*=top]) #tooltip{margin-bottom:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]) #tooltip{transform:translateY(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]) #tooltip{margin-top:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]) #tooltip{margin-left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]) #tooltip{margin-right:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(
---system-spectrum-tooltip-backgound-color-default-neutral
-)}
+    #tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:var(--mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s))}#tooltip{--spectrum-tooltip-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-tooltip-spacing-block-start:var(--spectrum-component-top-to-text-75);--spectrum-tooltip-spacing-block-end:var(--spectrum-component-bottom-to-text-75);--spectrum-tooltip-icon-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tooltip-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-tooltip-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-tooltip-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:.5px;--spectrum-tooltip-pointer-corner-spacing:var(--spectrum-corner-radius-100);--spectrum-tooltip-background-color-default:var(--spectrum-tooltip-backgound-color-default-neutral)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{box-sizing:border-box;vertical-align:top;padding-inline:var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline));border-radius:var(--mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius));min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));max-inline-size:var(--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));color:var(--mod-tooltip-content-color,var(--spectrum-tooltip-content-color));font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight));line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));word-break:break-word;-webkit-font-smoothing:antialiased;flex-direction:row;align-items:center;block-size:auto;inline-size:auto;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(zh)) #tooltip,:host(:lang(ko)) #tooltip{line-height:var(--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height))}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}#tip{block-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));inline-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));clip-path:polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),50% var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)),100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));position:absolute;top:100%;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}:host([placement*=top]) #tooltip #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--top-end #tip{top:100%}:host([placement*=bottom]) #tooltip #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--bottom-end #tip{clip-path:polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))),0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));top:auto;bottom:100%}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{transform:none}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([dir=rtl]) .spectrum-Tooltip--top-start #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip{right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));left:auto}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--top-end #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:auto;transform:none}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%}.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--end-top #tip{top:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-bottom #tip{bottom:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip{clip-path:polygon(var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width));block-size:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));flex-shrink:0;align-self:flex-start;margin-block-start:var(--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start));margin-inline-start:calc(var(--mod-tooltip-icon-spacing-inline-start,var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)));margin-inline-end:var(--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end))}#label{line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));margin-block-start:var(--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start));margin-block-end:var(--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end))}#tooltip,:host([placement*=top]) #tooltip,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,.spectrum-Tooltip--top-end{margin-bottom:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([placement*=top][open]) #tooltip,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([open]) .spectrum-Tooltip--top-end{transform:translateY(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([placement*=bottom]) #tooltip,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,.spectrum-Tooltip--bottom-end{margin-top:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=bottom][open]) #tooltip,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([open]) .spectrum-Tooltip--bottom-end{transform:translateY(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=right]) #tooltip,.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top{margin-left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=right][open]) #tooltip,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=left]) #tooltip,.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top{margin-right:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=left][open]) #tooltip,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-top,.spectrum-Tooltip--start-bottom{margin-inline-end:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--start-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-top,.spectrum-Tooltip--end-bottom{margin-inline-start:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--end-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(--system-spectrum-tooltip-backgound-color-default-neutral)}
 `;export default o;
 //# sourceMappingURL=spectrum-tooltip.css.js.map

src/tooltip.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-#tooltip{opacity:0;pointer-events:none;transition:transform var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,opacity var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,visibility 0s linear var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-);visibility:hidden}:host([open]) #tooltip{opacity:1;pointer-events:auto;transition-delay:var(
---mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s)
-);visibility:visible}#tooltip{--spectrum-tooltip-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(
---spectrum-component-edge-to-text-75
-);--spectrum-tooltip-spacing-block-start:var(
---spectrum-component-top-to-text-75
-);--spectrum-tooltip-spacing-block-end:var(
---spectrum-component-bottom-to-text-75
-);--spectrum-tooltip-icon-spacing-inline-start:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-inline-end:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-block-start:var(
---spectrum-component-top-to-workflow-icon-75
-);--spectrum-tooltip-background-color-informative:var(
---spectrum-informative-background-color-default
-);--spectrum-tooltip-background-color-positive:var(
---spectrum-positive-background-color-default
-);--spectrum-tooltip-background-color-negative:var(
---spectrum-negative-background-color-default
-);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(
---spectrum-corner-radius-100
-);--spectrum-tooltip-background-color-default:var(
---spectrum-tooltip-backgound-color-default-neutral
-)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);border-radius:var(
---mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
-);box-sizing:border-box;color:var(
---mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
-);font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
---mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
-);line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);max-inline-size:var(
---mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
-);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
---mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
-);vertical-align:top;word-break:break-word;-webkit-font-smoothing:antialiased;align-items:center;block-size:auto;display:inline-flex;flex-direction:row;inline-size:auto;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(
---mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
-)}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}#tip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);block-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);clip-path:polygon(0 calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),50% var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-),100% calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));inline-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);left:50%;position:absolute;top:100%;transform:translateX(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tooltip #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)),0 calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),100% calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tooltip #tip{clip-path:polygon(calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(
---mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)
-);flex-shrink:0;inline-size:var(
---mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)
-);margin-block-start:var(
---mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
-);margin-inline-end:var(
---mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
-);margin-inline-start:calc(var(
---mod-tooltip-icon-spacing-inline-start,
-var(--spectrum-tooltip-icon-spacing-inline-start)
-) - var(
---mod-tooltip-spacing-inline,
-var(--spectrum-tooltip-spacing-inline)
-))}#label{line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);margin-block-end:var(
---mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
-);margin-block-start:var(
---mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
-)}#tooltip,.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host([placement*=top]) #tooltip{margin-bottom:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]) #tooltip{transform:translateY(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]) #tooltip{margin-top:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]) #tooltip{margin-left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]) #tooltip{margin-right:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(
---system-spectrum-tooltip-backgound-color-default-neutral
-)}:host{display:contents;white-space:normal}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);height:var(--spectrum-tooltip-tip-inline-size)!important;width:var(--spectrum-tooltip-tip-inline-size)!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{top:100%}:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-)*-2);right:100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);left:100%}sp-overlay:not(:defined){display:none}
+    #tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:var(--mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s))}#tooltip{--spectrum-tooltip-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-tooltip-spacing-block-start:var(--spectrum-component-top-to-text-75);--spectrum-tooltip-spacing-block-end:var(--spectrum-component-bottom-to-text-75);--spectrum-tooltip-icon-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tooltip-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-tooltip-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-tooltip-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:.5px;--spectrum-tooltip-pointer-corner-spacing:var(--spectrum-corner-radius-100);--spectrum-tooltip-background-color-default:var(--spectrum-tooltip-backgound-color-default-neutral)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{box-sizing:border-box;vertical-align:top;padding-inline:var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline));border-radius:var(--mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius));min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));max-inline-size:var(--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));color:var(--mod-tooltip-content-color,var(--spectrum-tooltip-content-color));font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight));line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));word-break:break-word;-webkit-font-smoothing:antialiased;flex-direction:row;align-items:center;block-size:auto;inline-size:auto;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(zh)) #tooltip,:host(:lang(ko)) #tooltip{line-height:var(--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height))}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}#tip{block-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));inline-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));clip-path:polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),50% var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)),100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));position:absolute;top:100%;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}:host([placement*=top]) #tooltip #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--top-end #tip{top:100%}:host([placement*=bottom]) #tooltip #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--bottom-end #tip{clip-path:polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))),0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));top:auto;bottom:100%}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{transform:none}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([dir=rtl]) .spectrum-Tooltip--top-start #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip{right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));left:auto}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--top-end #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:auto;transform:none}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%}.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--end-top #tip{top:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-bottom #tip{bottom:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip{clip-path:polygon(var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width));block-size:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));flex-shrink:0;align-self:flex-start;margin-block-start:var(--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start));margin-inline-start:calc(var(--mod-tooltip-icon-spacing-inline-start,var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)));margin-inline-end:var(--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end))}#label{line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));margin-block-start:var(--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start));margin-block-end:var(--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end))}#tooltip,:host([placement*=top]) #tooltip,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,.spectrum-Tooltip--top-end{margin-bottom:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([placement*=top][open]) #tooltip,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([open]) .spectrum-Tooltip--top-end{transform:translateY(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([placement*=bottom]) #tooltip,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,.spectrum-Tooltip--bottom-end{margin-top:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=bottom][open]) #tooltip,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([open]) .spectrum-Tooltip--bottom-end{transform:translateY(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=right]) #tooltip,.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top{margin-left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=right][open]) #tooltip,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=left]) #tooltip,.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top{margin-right:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=left][open]) #tooltip,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-top,.spectrum-Tooltip--start-bottom{margin-inline-end:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--start-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-top,.spectrum-Tooltip--end-bottom{margin-inline-start:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--end-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(--system-spectrum-tooltip-backgound-color-default-neutral)}:host{white-space:initial;display:contents}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);width:var(--spectrum-tooltip-tip-inline-size)!important;height:var(--spectrum-tooltip-tip-inline-size)!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{top:100%}:host([placement*=bottom]) #tooltip #tip{clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto;bottom:100%}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size))*-2);right:100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);left:100%}sp-overlay:not(:defined){display:none}
 `;
 export default styles;
 //# sourceMappingURL=tooltip.css.dev.js.map

src/tooltip.css.js

 "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
-#tooltip{opacity:0;pointer-events:none;transition:transform var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,opacity var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-) ease-in-out,visibility 0s linear var(
---mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)
-);visibility:hidden}:host([open]) #tooltip{opacity:1;pointer-events:auto;transition-delay:var(
---mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s)
-);visibility:visible}#tooltip{--spectrum-tooltip-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(
---spectrum-component-edge-to-text-75
-);--spectrum-tooltip-spacing-block-start:var(
---spectrum-component-top-to-text-75
-);--spectrum-tooltip-spacing-block-end:var(
---spectrum-component-bottom-to-text-75
-);--spectrum-tooltip-icon-spacing-inline-start:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-inline-end:var(
---spectrum-text-to-visual-75
-);--spectrum-tooltip-icon-spacing-block-start:var(
---spectrum-component-top-to-workflow-icon-75
-);--spectrum-tooltip-background-color-informative:var(
---spectrum-informative-background-color-default
-);--spectrum-tooltip-background-color-positive:var(
---spectrum-positive-background-color-default
-);--spectrum-tooltip-background-color-negative:var(
---spectrum-negative-background-color-default
-);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(
---spectrum-corner-radius-100
-);--spectrum-tooltip-background-color-default:var(
---spectrum-tooltip-backgound-color-default-neutral
-)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);border-radius:var(
---mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
-);box-sizing:border-box;color:var(
---mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
-);font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
---mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
-);line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);max-inline-size:var(
---mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
-);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
---mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
-);vertical-align:top;word-break:break-word;-webkit-font-smoothing:antialiased;align-items:center;block-size:auto;display:inline-flex;flex-direction:row;inline-size:auto;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(
---mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
-)}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}#tip{background-color:var(
---highcontrast-tooltip-background-color-default,var(
---mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
-)
-);block-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);clip-path:polygon(0 calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),50% var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-),100% calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));inline-size:var(
---mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
-);left:50%;position:absolute;top:100%;transform:translateX(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-informative,var(
---mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
-)
-)}:host([variant=positive]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-positive,var(
---mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
-)
-)}:host([variant=negative]) #tooltip #tip{background-color:var(
---highcontrast-tooltip-background-color-negative,var(
---mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
-)
-)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tooltip #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)),0 calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)),100% calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)));top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-);right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tooltip #tip{clip-path:polygon(calc(100% - var(
---mod-tooltip-tip-height-percentage,
-var(--spectrum-tooltip-tip-height-percentage)
-)) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tooltip #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
---mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
-)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0,calc(0% - var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(
---mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
-) 50%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 100%,calc(100% + var(
---mod-tooltip-tip-antialiasing-inset,
-var(--spectrum-tooltip-tip-antialiasing-inset)
-)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(
---mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)
-);flex-shrink:0;inline-size:var(
---mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)
-);margin-block-start:var(
---mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
-);margin-inline-end:var(
---mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
-);margin-inline-start:calc(var(
---mod-tooltip-icon-spacing-inline-start,
-var(--spectrum-tooltip-icon-spacing-inline-start)
-) - var(
---mod-tooltip-spacing-inline,
-var(--spectrum-tooltip-spacing-inline)
-))}#label{line-height:var(
---mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
-);margin-block-end:var(
---mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
-);margin-block-start:var(
---mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
-)}#tooltip,.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host([placement*=top]) #tooltip{margin-bottom:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]) #tooltip{transform:translateY(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]) #tooltip{margin-top:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]) #tooltip{margin-left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]) #tooltip{margin-right:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top{transform:translateX(var(
---mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
-))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top{transform:translateX(calc(var(
---mod-tooltip-animation-distance,
-var(--spectrum-tooltip-animation-distance)
-)*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(
---system-spectrum-tooltip-backgound-color-default-neutral
-)}:host{display:contents;white-space:normal}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);height:var(--spectrum-tooltip-tip-inline-size)!important;width:var(--spectrum-tooltip-tip-inline-size)!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{top:100%}:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);left:calc(var(
---mod-tooltip-tip-block-size,
-var(--spectrum-tooltip-tip-block-size)
-)*-2);right:100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);left:100%}sp-overlay:not(:defined){display:none}
+    #tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,opacity var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))ease-in-out,visibility 0s linear var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s))}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:var(--mod-overlay-animation-duration-opened,var(--spectrum-animation-duration-0,0s))}#tooltip{--spectrum-tooltip-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(--spectrum-component-edge-to-text-75);--spectrum-tooltip-spacing-block-start:var(--spectrum-component-top-to-text-75);--spectrum-tooltip-spacing-block-end:var(--spectrum-component-bottom-to-text-75);--spectrum-tooltip-icon-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tooltip-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tooltip-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-tooltip-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-tooltip-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:.5px;--spectrum-tooltip-pointer-corner-spacing:var(--spectrum-corner-radius-100);--spectrum-tooltip-background-color-default:var(--spectrum-tooltip-backgound-color-default-neutral)}@media (forced-colors:active){#tooltip{border:1px solid #0000}#tip{forced-color-adjust:none;--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText}}#tooltip{box-sizing:border-box;vertical-align:top;padding-inline:var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline));border-radius:var(--mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius));min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));max-inline-size:var(--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));color:var(--mod-tooltip-content-color,var(--spectrum-tooltip-content-color));font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight));line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));word-break:break-word;-webkit-font-smoothing:antialiased;flex-direction:row;align-items:center;block-size:auto;inline-size:auto;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(zh)) #tooltip,:host(:lang(ko)) #tooltip{line-height:var(--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height))}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}#tip{block-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));inline-size:var(--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size));background-color:var(--highcontrast-tooltip-background-color-default,var(--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)));clip-path:polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),50% var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)),100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));position:absolute;top:100%;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative,var(--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive,var(--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative,var(--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)))}:host([placement*=top]) #tooltip #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--top-end #tip{top:100%}:host([placement*=bottom]) #tooltip #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--bottom-end #tip{clip-path:polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))),0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))),100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset))));top:auto;bottom:100%}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{transform:none}.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--bottom-left #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--bottom-right #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--top-start #tip,.spectrum-Tooltip--bottom-start #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([dir=rtl]) .spectrum-Tooltip--top-start #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip{right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));left:auto}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--bottom-end #tip{left:auto;right:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--top-end #tip,:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip{left:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing));right:auto}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{top:auto;transform:none}:host([placement*=right]) #tooltip #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(100% - var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}:host([placement*=left]) #tooltip #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--start-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%}.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start-top #tip,.spectrum-Tooltip--end-top #tip{top:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--end-bottom #tip{bottom:var(--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing))}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip{clip-path:polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0,calc(0% - var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip{clip-path:polygon(var(--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage))50%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))100%,calc(100% + var(--mod-tooltip-tip-antialiasing-inset,var(--spectrum-tooltip-tip-antialiasing-inset)))0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width));block-size:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));flex-shrink:0;align-self:flex-start;margin-block-start:var(--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start));margin-inline-start:calc(var(--mod-tooltip-icon-spacing-inline-start,var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)));margin-inline-end:var(--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end))}#label{line-height:var(--mod-tooltip-line-height,var(--spectrum-tooltip-line-height));margin-block-start:var(--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start));margin-block-end:var(--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end))}#tooltip,:host([placement*=top]) #tooltip,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,.spectrum-Tooltip--top-end{margin-bottom:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) #tooltip,:host([placement*=top][open]) #tooltip,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([open]) .spectrum-Tooltip--top-end{transform:translateY(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([placement*=bottom]) #tooltip,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,.spectrum-Tooltip--bottom-end{margin-top:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=bottom][open]) #tooltip,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([open]) .spectrum-Tooltip--bottom-end{transform:translateY(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=right]) #tooltip,.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top{margin-left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=right][open]) #tooltip,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([placement*=left]) #tooltip,.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top{margin-right:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([placement*=left][open]) #tooltip,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-top,.spectrum-Tooltip--start-bottom{margin-inline-end:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--start-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-top,.spectrum-Tooltip--end-bottom{margin-inline-start:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin,var(--spectrum-tooltip-margin)))}:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--end-bottom{transform:translateX(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom{transform:translateX(calc(var(--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance))*-1))}#tooltip{--spectrum-tooltip-backgound-color-default-neutral:var(--system-spectrum-tooltip-backgound-color-default-neutral)}:host{white-space:initial;display:contents}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);width:var(--spectrum-tooltip-tip-inline-size)!important;height:var(--spectrum-tooltip-tip-inline-size)!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{top:100%}:host([placement*=bottom]) #tooltip #tip{clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto;bottom:100%}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{top:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);left:calc(var(--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size))*-2);right:100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);left:100%}sp-overlay:not(:defined){display:none}
 `;export default o;
 //# sourceMappingURL=tooltip.css.js.map

test/benchmark/test-basic.js

 "use strict";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
 import { html } from "lit";
@@ -8,5 +9,6 @@ import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
     <sp-action-button>
-        <sp-tooltip open self-managed>Tip me!</sp-tooltip>
+        I'm a button...
+        <sp-tooltip self-managed>Tip me!</sp-tooltip>
     </sp-action-button>
 `);
 //# sourceMappingURL=test-basic.js.map

No alert changes

Improved metrics

Total package byte prevSize

301689

increased by6.64%

Number of package files

51

increased by34.21%

Worsened metrics

Lines of code

2118

decreased by-15.45%

Dependency changes

• Updated@spectrum-web-components/base@^0.41.2

• Updated@spectrum-web-components/overlay@^0.41.2

• Updated@spectrum-web-components/shared@^0.41.2