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

Comparing version 0.4.6-alpha.1 to 0.4.6-alpha.44

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.4.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/tooltip@0.4.5...@spectrum-web-components/tooltip@0.4.6) (2020-08-19)
+
+**Note:** Version bump only for package @spectrum-web-components/tooltip
+
 ## [0.4.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/tooltip@0.4.4...@spectrum-web-components/tooltip@0.4.5) (2020-08-13)
@@ -8,0 +12,0 @@

custom-elements.json

@@ -29,2 +29,6 @@ {
           "type": "string"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -31,0 +35,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.6-alpha.1+1f7f36f5",
+    "version": "0.4.6-alpha.44+1e82c26e",
     "description": "",
@@ -48,11 +48,10 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/tooltip": "^2.0.5"
+        "@spectrum-css/tooltip": "^3.0.0-beta.2"
     },
     "dependencies": {
-        "@spectrum-web-components/overlay": "^0.5.2-alpha.1+1f7f36f5",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.2-alpha.1038+1e82c26e",
+        "@spectrum-web-components/overlay": "^0.5.2-alpha.44+1e82c26e",
         "tslib": "^2.0.0"
     },
-    "gitHead": "1f7f36f5bc1bd448f5a5eeb72a72414712e849ff"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

src/spectrum-tooltip.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-tooltip.css.js

@@ -12,9 +12,11 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
+:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100));width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
+var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(--spectrum-tooltip-icon-margin-x,
+var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
+var(--spectrum-global-dimension-size-125)));margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-tooltip.css.js.map

src/spectrum-tooltip.css.ts

@@ -12,8 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
+:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100));width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
+var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(--spectrum-tooltip-icon-margin-x,
+var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
+var(--spectrum-global-dimension-size-125)));margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;

src/tooltip.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/tooltip.css.js

@@ -12,9 +12,11 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
+:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100));width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
+var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(--spectrum-tooltip-icon-margin-x,
+var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
+var(--spectrum-global-dimension-size-125)));margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
 `;
 export default styles;
 //# sourceMappingURL=tooltip.css.js.map

src/tooltip.css.ts

@@ -12,8 +12,10 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
+:host{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none;position:relative;left:0;top:0;display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-tooltip-border-radius,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white))}:host([open]){visibility:visible;opacity:1;transition-delay:0ms;pointer-events:auto}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([placement*=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}p{margin:0}#tip{position:absolute;height:0;width:0;border:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid transparent;border-top:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)) solid var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}:host([placement*=left]) #tip,:host([placement*=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([placement*=right]){margin-left:3px}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:3px}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:3px}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:3px}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
-var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100));width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
+var(--spectrum-global-dimension-size-125)));margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(--spectrum-tooltip-icon-margin-x,
+var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
+var(--spectrum-global-dimension-size-125)));margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}::slotted([slot=icon]){width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}#label{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}#tip{border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent}:host([data-popper-placement]){margin:0}:host([data-popper-placement=left]) #tip,:host([data-popper-placement=right]) #tip{margin-top:0}:host([data-popper-placement*=bottom]) #tip,:host([data-popper-placement*=top]) #tip{margin-left:0}
 `;
 export default styles;

src/Tooltip.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray, TemplateResult, LitElement } from 'lit-element';
+import { CSSResultArray, TemplateResult, SpectrumElement } from '@spectrum-web-components/base';
 import { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
@@ -7,3 +7,3 @@ /**
  */
-export declare class Tooltip extends LitElement {
+export declare class Tooltip extends SpectrumElement {
     static get styles(): CSSResultArray;
@@ -15,2 +15,3 @@ /**
     placement: Placement;
+    private tipElement;
     private _variant;
@@ -17,0 +18,0 @@ get variant(): string;

src/Tooltip.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, LitElement, property, } from 'lit-element';
+import { html, SpectrumElement, property, query, } from '@spectrum-web-components/base';
 import tooltipStyles from './tooltip.css.js';
@@ -20,3 +20,3 @@ /**
  */
-export class Tooltip extends LitElement {
+export class Tooltip extends SpectrumElement {
     constructor() {
@@ -60,3 +60,3 @@ super(...arguments);
         /* istanbul ignore if */
-        if (!event.target || !this.shadowRoot)
+        if (!event.target)
             return;
@@ -67,6 +67,3 @@ const target = event.target;
             return;
-        const tipElement = this.shadowRoot.querySelector('#tip');
-        if (tipElement) {
-            event.detail.overlayContentTipElement = tipElement;
-        }
+        event.detail.overlayContentTipElement = this.tipElement;
     }
@@ -85,4 +82,7 @@ render() {
 __decorate([
+    query('#tip')
+], Tooltip.prototype, "tipElement", void 0);
+__decorate([
     property({ type: String })
 ], Tooltip.prototype, "variant", null);
 //# sourceMappingURL=Tooltip.js.map

src/Tooltip.ts

@@ -17,5 +17,6 @@ /*
     TemplateResult,
-    LitElement,
+    SpectrumElement,
     property,
-} from 'lit-element';
+    query,
+} from '@spectrum-web-components/base';
 import {
@@ -33,3 +34,3 @@ OverlayDisplayQueryDetail,
 
-export class Tooltip extends LitElement {
+export class Tooltip extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -46,2 +47,5 @@ return [tooltipStyles];
 
+    @query('#tip')
+    private tipElement!: HTMLSpanElement;
+
     /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
@@ -79,3 +83,3 @@ private _variant = '';
         /* istanbul ignore if */
-        if (!event.target || !this.shadowRoot) return;
+        if (!event.target) return;
 
@@ -86,6 +90,3 @@ const target = event.target as Node;
 
-        const tipElement = this.shadowRoot.querySelector('#tip') as HTMLElement;
-        if (tipElement) {
-            event.detail.overlayContentTipElement = tipElement;
-        }
+        event.detail.overlayContentTipElement = this.tipElement;
     }
@@ -92,0 +93,0 @@

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89970

increased by3.71%

Dependency count

3

decreased by-25%

Lines of code

848

increased by4.05%

Worsened metrics

Number of low license alerts

5

increased by25%

License quality

60

decreased by-25%

Dependency changes

• + Added@spectrum-web-components/base@^0.0.2-alpha.1038+1e82c26e

• + Added@spectrum-web-components/base@0.0.2-alpha.1038(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

• Updated@spectrum-web-components/overlay@^0.5.2-alpha.44+1e82c26e