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

Comparing version 0.2.2 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/tooltip@0.2.2...@spectrum-web-components/tooltip@0.3.0) (2020-01-30)
+
+### Features
+
+-   rework overlays to use popper ([e17d1bb](https://github.com/adobe/spectrum-web-components/commit/e17d1bb))
+
 ## [0.2.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/tooltip@0.2.1...@spectrum-web-components/tooltip@0.2.2) (2020-01-06)
@@ -8,0 +14,0 @@

custom-elements.json

 {
-  "version": 2,
+  "version": "experimental",
   "tags": [
     {
       "name": "sp-tooltip",
-      "jsDoc": "/**\n * @slot icon - The icon that appears on the left of the label\n * @slot - The label\n */",
       "attributes": [
         {
-          "name": "tip",
-          "type": "\"top\" | \"bottom\" | \"left\" | \"right\""
+          "name": "placement",
+          "type": "Placement",
+          "default": "\"top\""
+        },
+        {
+          "name": "variant",
+          "type": "string"
         }
@@ -15,8 +19,10 @@ ],
         {
-          "name": "tip",
-          "attribute": "tip",
-          "type": "\"top\" | \"bottom\" | \"left\" | \"right\""
+          "name": "placement",
+          "attribute": "placement",
+          "type": "Placement",
+          "default": "\"top\""
         },
         {
           "name": "variant",
+          "attribute": "variant",
           "type": "string"
@@ -27,8 +33,8 @@ }
         {
+          "name": "icon",
+          "description": "The icon that appears on the left of the label"
+        },
+        {
           "name": "",
           "description": "The label"
-        },
-        {
-          "name": "icon",
-          "description": "The icon that appears on the left of the label"
         }
@@ -35,0 +41,0 @@ ]

lib/spectrum-tooltip.css.js

@@ -14,3 +14,3 @@ /*
 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([tip=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([tip=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=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([tip=left]) #tip,:host([tip=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([tip=right]){margin-left:3px}:host([tip=right]) #tip{right:100%;transform:rotate(90deg)}:host([tip=left]){margin-right:3px}:host([tip=left]) #tip{left:100%;transform:rotate(-90deg)}:host([tip=top]){margin-bottom:3px}:host([tip=top]) #tip{top:100%}:host([tip=bottom]){margin-top:3px}:host([tip=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([tip=bottom]) #tip,:host([tip=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)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
@@ -17,0 +17,0 @@ 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))}

lib/tooltip.css.js

@@ -14,7 +14,7 @@ /*
 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([tip=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([tip=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=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([tip=left]) #tip,:host([tip=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([tip=right]){margin-left:3px}:host([tip=right]) #tip{right:100%;transform:rotate(90deg)}:host([tip=left]){margin-right:3px}:host([tip=left]) #tip{left:100%;transform:rotate(-90deg)}:host([tip=top]){margin-bottom:3px}:host([tip=top]) #tip{top:100%}:host([tip=bottom]){margin-top:3px}:host([tip=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([tip=bottom]) #tip,:host([tip=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)))}::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}
+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}
 `;
 export default styles;
 //# sourceMappingURL=tooltip.css.js.map

lib/tooltip.d.ts

 import { CSSResultArray, TemplateResult, LitElement } from 'lit-element';
+import { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
 /**
@@ -8,6 +9,9 @@ * @slot icon - The icon that appears on the left of the label
     static readonly styles: CSSResultArray;
-    tip: 'top' | 'bottom' | 'left' | 'right';
+    placement: Placement;
     private _variant;
     variant: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onOverlyQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
     render(): TemplateResult;
 }

lib/tooltip.js

@@ -22,3 +22,3 @@ /*
         super(...arguments);
-        this.tip = 'top';
+        this.placement = 'top';
         /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
@@ -45,2 +45,23 @@ this._variant = '';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('sp-overlay-query', this.onOverlyQuery);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('sp-overlay-query', this.onOverlyQuery);
+    }
+    onOverlyQuery(event) {
+        /* istanbul ignore if */
+        if (!event.target || !this.shadowRoot)
+            return;
+        const target = event.target;
+        /* istanbul ignore if */
+        if (!target.isSameNode(this))
+            return;
+        const tipElement = this.shadowRoot.querySelector('#tip');
+        if (tipElement) {
+            event.detail.overlayContentTipElement = tipElement;
+        }
+    }
     render() {
@@ -56,3 +77,3 @@ return html `
     property({ reflect: true })
-], Tooltip.prototype, "tip", void 0);
+], Tooltip.prototype, "placement", void 0);
 __decorate([
@@ -59,0 +80,0 @@ property({ type: String })

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.2",
+    "version": "0.3.0",
     "description": "",
@@ -42,5 +42,6 @@ "main": "lib/index.js",
     "dependencies": {
+        "@spectrum-web-components/overlay": "^0.2.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "8ccfbecc2e7534567967bbebb5d201e0b16b08bb"
+    "gitHead": "1b17c4c27d73273f2479f0d8af40d187f2f194fa"
 }

README.md

@@ -1,2 +0,2 @@
-## Overview
+## Description
 
@@ -20,12 +20,12 @@ `sp-tooltip` allow users to get contextual help or information about specific components when hovering or focusing on them.
 ```html
-<sp-tooltip open tip="top">Label</sp-tooltip>
+<sp-tooltip open placement="top">Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open tip="bottom">Label</sp-tooltip>
+<sp-tooltip open placement="bottom">Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open tip="left">Label</sp-tooltip>
+<sp-tooltip open placement="left">Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open tip="right">Label</sp-tooltip>
+<sp-tooltip open placement="right">Label</sp-tooltip>
 ```
@@ -41,11 +41,11 @@
 ```html
-<sp-tooltip open tip="top" variant="info">Label</sp-tooltip>
-<sp-tooltip open tip="top" variant="info">
+<sp-tooltip open placement="top" variant="info">Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="info">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="info">
+<sp-tooltip open placement="top" variant="info">
     <sp-icon size="s" name="ui:InfoSmall" slot="icon"></sp-icon>
     Label
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="info">
+<sp-tooltip open placement="top" variant="info">
     <sp-icon size="s" name="ui:InfoSmall" slot="icon"></sp-icon>
@@ -61,11 +61,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ```html
-<sp-tooltip open tip="top" variant="positive">Label</sp-tooltip>
-<sp-tooltip open tip="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive">Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="positive">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive">
     <sp-icon size="s" name="ui:CheckmarkSmall" slot="icon"></sp-icon>
     Label
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive">
     <sp-icon size="s" name="ui:CheckmarkSmall" slot="icon"></sp-icon>
@@ -81,11 +81,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ```html
-<sp-tooltip open tip="top" variant="negative">Label</sp-tooltip>
-<sp-tooltip open tip="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative">Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="negative">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative">
     <sp-icon size="s" name="ui:AlertSmall" slot="icon"></sp-icon>
     Label
 </sp-tooltip>
-<sp-tooltip open tip="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative">
     <sp-icon size="s" name="ui:AlertSmall" slot="icon"></sp-icon>
@@ -92,0 +92,0 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit

src/spectrum-config.js

@@ -29,3 +29,3 @@ /*
                     type: 'enum',
-                    name: 'tip',
+                    name: 'placement',
                     values: [
@@ -37,2 +37,3 @@ '.spectrum-Tooltip--top',
                     ],
+                    wildcard: true,
                 },
@@ -39,0 +40,0 @@ {

src/spectrum-tooltip.css.ts

@@ -14,3 +14,3 @@ /*
 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([tip=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([tip=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=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([tip=left]) #tip,:host([tip=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([tip=right]){margin-left:3px}:host([tip=right]) #tip{right:100%;transform:rotate(90deg)}:host([tip=left]){margin-right:3px}:host([tip=left]) #tip{left:100%;transform:rotate(-90deg)}:host([tip=top]){margin-bottom:3px}:host([tip=top]) #tip{top:100%}:host([tip=bottom]){margin-top:3px}:host([tip=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([tip=bottom]) #tip,:host([tip=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)))}::slotted([slot=icon]){margin-left:calc(var(--spectrum-tooltip-icon-margin-x,
 var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,
@@ -17,0 +17,0 @@ 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))}

src/tooltip.css.ts

@@ -14,6 +14,6 @@ /*
 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([tip=bottom][open]){transform:translateY(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=top][open]){transform:translateY(calc(-1*var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75))))}:host([tip=right][open]){transform:translateX(var(--spectrum-dropdown-flyout-menu-offset-y,var(--spectrum-global-dimension-size-75)))}:host([tip=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([tip=left]) #tip,:host([tip=right]) #tip{top:50%;margin-top:calc(-1*var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)))}:host([tip=right]){margin-left:3px}:host([tip=right]) #tip{right:100%;transform:rotate(90deg)}:host([tip=left]){margin-right:3px}:host([tip=left]) #tip{left:100%;transform:rotate(-90deg)}:host([tip=top]){margin-bottom:3px}:host([tip=top]) #tip{top:100%}:host([tip=bottom]){margin-top:3px}:host([tip=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([tip=bottom]) #tip,:host([tip=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)))}::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}
+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}
 `;
 export default styles;

src/tooltip.ts

@@ -20,2 +20,6 @@ /*
 } from 'lit-element';
+import {
+    OverlayDisplayQueryDetail,
+    Placement,
+} from '@spectrum-web-components/overlay';
 
@@ -35,3 +39,3 @@ import tooltipStyles from './tooltip.css.js';
     @property({ reflect: true })
-    public tip: 'top' | 'bottom' | 'left' | 'right' = 'top';
+    public placement: Placement = 'top';
 
@@ -58,2 +62,26 @@ /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
 
+    public connectedCallback(): void {
+        super.connectedCallback();
+        this.addEventListener('sp-overlay-query', this.onOverlyQuery);
+    }
+
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.removeEventListener('sp-overlay-query', this.onOverlyQuery);
+    }
+
+    public onOverlyQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {
+        /* istanbul ignore if */
+        if (!event.target || !this.shadowRoot) return;
+
+        const target = event.target as Node;
+        /* istanbul ignore if */
+        if (!target.isSameNode(this)) return;
+
+        const tipElement = this.shadowRoot.querySelector('#tip') as HTMLElement;
+        if (tipElement) {
+            event.detail.overlayContentTipElement = tipElement;
+        }
+    }
+
     render(): TemplateResult {
@@ -60,0 +88,0 @@ return html`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a 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

Improved metrics

Total package byte prevSize

77737

increased by7.83%

Number of low license alerts

3

decreased by-25%

Lines of code

781

increased by10.62%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@spectrum-web-components/overlay@^0.2.0

• + Added@popperjs/core@2.11.8(transitive)

• + Added@spectrum-web-components/overlay@0.2.1(transitive)

• + Added@spectrum-web-components/styles@0.4.3(transitive)

• + Added@spectrum-web-components/theme@0.2.0(transitive)