@spectrum-web-components/tooltip 0.10.1 → 0.10.3

package/custom-elements.json

@@ -91,6 +91,15 @@
               "attribute": "offset",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hadTooltipId",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -383,7 +392,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`"
+          "default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1);top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`"
         }
       ],
       "exports": [
@@ -404,7 +413,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`"
+          "default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1);top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tooltip",
-    "version": "0.10.1",
+    "version": "0.10.3",
     "publishConfig": {
         "access": "public"
     },
@@ -45,16 +45,16 @@
     ],
     "dependencies": {
         "@spectrum-web-components/base": "^0.5.1",
-        "@spectrum-web-components/overlay": "^0.13.1",
+        "@spectrum-web-components/overlay": "^0.13.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/tooltip": "^3.1.4"
+        "@spectrum-css/tooltip": "^3.1.6"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

package/src/Tooltip.d.ts

@@ -18,6 +18,7 @@ export declare class Tooltip extends SpectrumElement {
     private _tooltipId;
     selfManaged: boolean;
     offset: number;
+    private hadTooltipId;
     open: boolean;
     /**
      * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}

package/src/Tooltip.js

@@ -32,6 +32,7 @@ export class Tooltip extends SpectrumElement {
         this._tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;
         this.selfManaged = false;
         this.offset = 6;
+        this.hadTooltipId = false;
         this.open = false;
         /**
          * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
@@ -107,14 +108,33 @@ export class Tooltip extends SpectrumElement {
         this.setAttribute('aria-hidden', 'true');
         this.generateProxy();
         this._proxy.textContent = this.textContent;
-        trigger.setAttribute('aria-describedby', this._tooltipId);
+        const ariaDescribedby = trigger.getAttribute('aria-describedby') || '';
+        this.hadTooltipId = ariaDescribedby.search(this._tooltipId) > -1;
         this.insertAdjacentElement('beforebegin', this._proxy);
+        if (this.hadTooltipId)
+            return;
+        if (ariaDescribedby) {
+            trigger.setAttribute('aria-describedby', `${ariaDescribedby} ${this._tooltipId}`);
+        }
+        else {
+            trigger.setAttribute('aria-describedby', `${this._tooltipId}`);
+        }
     }
     overlayOpenCancelledCallback({ trigger, }) {
         this.overlayCloseCallback({ trigger });
     }
     overlayCloseCallback({ trigger }) {
-        trigger.removeAttribute('aria-describedby');
+        const ariaDescribedby = trigger.getAttribute('aria-describedby') || '';
+        let descriptors = ariaDescribedby.split(/\s+/);
+        if (!this.hadTooltipId) {
+            descriptors = descriptors.filter((descriptor) => descriptor !== this._tooltipId);
+        }
+        if (descriptors.length) {
+            trigger.setAttribute('aria-describedby', descriptors.join(' '));
+        }
+        else {
+            trigger.removeAttribute('aria-describedby');
+        }
         this.removeAttribute('aria-hidden');
         this.removeProxy();
     }

package/src/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["Tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n    OverlayDisplayQueryDetail,\n    Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\nexport class TooltipProxy extends HTMLElement {\n    disconnectedCallback(): void {\n        this.dispatchEvent(new Event('disconnected'));\n    }\n}\n\ncustomElements.define('tooltip-proxy', TooltipProxy);\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n    public static get styles(): CSSResultArray {\n        return [tooltipStyles];\n    }\n\n    /**\n     * @private\n     */\n    static instanceCount = 0;\n\n    private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;\n\n    @property({ type: Boolean, attribute: 'self-managed' })\n    public selfManaged = false;\n\n    @property({ type: Number, reflect: true })\n    public offset = 6;\n\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement: Placement = 'top';\n\n    @query('#tip')\n    private tipElement!: HTMLSpanElement;\n\n    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n    private _variant = '';\n\n    @property({ type: String })\n    public get variant(): string {\n        return this._variant;\n    }\n    public set variant(variant: string) {\n        if (variant === this.variant) {\n            return;\n        }\n        if (['info', 'positive', 'negative'].includes(variant)) {\n            this.setAttribute('variant', variant);\n            this._variant = variant;\n            return;\n        }\n        this.removeAttribute('variant');\n        this._variant = '';\n    }\n\n    public constructor() {\n        super();\n        this.addEventListener('sp-overlay-query', this.onOverlayQuery);\n    }\n\n    public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n        /* c8 ignore next */\n        if (!event.target) return;\n\n        const target = event.target as Node;\n        /* c8 ignore next */\n        if (target !== this) return;\n\n        event.detail.overlayContentTipElement = this.tipElement;\n    }\n\n    private _proxy!: HTMLElement;\n\n    private generateProxy(): void {\n        if (this._proxy) {\n            return;\n        }\n        this._proxy = document.createElement('tooltip-proxy');\n        this._proxy.id = this._tooltipId;\n        this._proxy.hidden = true;\n        this._proxy.slot = 'hidden-tooltip-content';\n        this._proxy.setAttribute('role', 'tooltip');\n        this._proxy.addEventListener('disconnected', this.closeOverlay);\n    }\n\n    public overlayWillOpenCallback({\n        trigger,\n    }: {\n        trigger: HTMLElement;\n    }): void {\n        this.setAttribute('aria-hidden', 'true');\n        this.generateProxy();\n        this._proxy.textContent = this.textContent;\n        trigger.setAttribute('aria-describedby', this._tooltipId);\n        this.insertAdjacentElement('beforebegin', this._proxy);\n    }\n\n    public overlayOpenCancelledCallback({\n        trigger,\n    }: {\n        trigger: HTMLElement;\n    }): void {\n        this.overlayCloseCallback({ trigger });\n    }\n\n    public overlayCloseCallback({ trigger }: { trigger: HTMLElement }): void {\n        trigger.removeAttribute('aria-describedby');\n        this.removeAttribute('aria-hidden');\n        this.removeProxy();\n    }\n\n    private removeProxy(): void {\n        this._proxy.remove();\n    }\n\n    private closeOverlayCallback?: Promise<() => void>;\n    private abortOverlay: (cancelled: boolean) => void = () => {\n        return;\n    };\n\n    private openOverlay = (): void => {\n        const parentElement = this.parentElement as HTMLElement;\n        const abortPromise: Promise<boolean> = new Promise((res) => {\n            this.abortOverlay = res;\n        });\n        this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {\n            abortPromise,\n            offset: this.offset,\n            placement: this.placement,\n        });\n    };\n\n    private closeOverlay = async (): Promise<void> => {\n        if (this.abortOverlay) this.abortOverlay(true);\n        if (!this.closeOverlayCallback) return;\n        (await this.closeOverlayCallback)();\n        delete this.closeOverlayCallback;\n    };\n\n    private previousSlot?: string;\n\n    private manageTooltip(): void {\n        const parentElement = this.parentElement as HTMLElement;\n        if (this.selfManaged) {\n            if (this.slot) {\n                this.previousSlot = this.slot;\n            }\n            this.slot = 'self-managed-tooltip';\n            parentElement.addEventListener('pointerenter', this.openOverlay);\n            parentElement.addEventListener('focusin', this.openOverlay);\n            parentElement.addEventListener('pointerleave', this.closeOverlay);\n            parentElement.addEventListener('focusout', this.closeOverlay);\n        } else {\n            if (this.previousSlot) {\n                this.slot = this.previousSlot;\n            } else if (this.slot === 'self-managed-tooltip') {\n                this.removeAttribute('slot');\n            }\n            parentElement.removeEventListener('pointerenter', this.openOverlay);\n            parentElement.removeEventListener('focusin', this.openOverlay);\n            parentElement.removeEventListener(\n                'pointerleave',\n                this.closeOverlay\n            );\n            parentElement.removeEventListener('focusout', this.closeOverlay);\n        }\n    }\n\n    render(): TemplateResult {\n        return html`\n            <slot name=\"icon\"></slot>\n            <span id=\"label\"><slot></slot></span>\n            <span id=\"tip\"></span>\n        `;\n    }\n\n    protected async update(changed: PropertyValues<this>): Promise<void> {\n        if (changed.has('open') && this.selfManaged) {\n            if (this.open) {\n                this.openOverlay();\n            } else {\n                this.closeOverlay();\n            }\n        }\n        this.generateProxy();\n        super.update(changed);\n    }\n\n    protected updated(changed: PropertyValues<this>): void {\n        super.updated(changed);\n        if (changed.has('selfManaged')) {\n            this.manageTooltip();\n        }\n    }\n}\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["Tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n    OverlayDisplayQueryDetail,\n    Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\nexport class TooltipProxy extends HTMLElement {\n    disconnectedCallback(): void {\n        this.dispatchEvent(new Event('disconnected'));\n    }\n}\n\ncustomElements.define('tooltip-proxy', TooltipProxy);\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n    public static get styles(): CSSResultArray {\n        return [tooltipStyles];\n    }\n\n    /**\n     * @private\n     */\n    static instanceCount = 0;\n\n    private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;\n\n    @property({ type: Boolean, attribute: 'self-managed' })\n    public selfManaged = false;\n\n    @property({ type: Number, reflect: true })\n    public offset = 6;\n    private hadTooltipId = false;\n\n    @property({ type: Boolean, reflect: true })\n    public open = false;\n\n    /**\n     * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n     * @attr\n     */\n    @property({ reflect: true })\n    public placement: Placement = 'top';\n\n    @query('#tip')\n    private tipElement!: HTMLSpanElement;\n\n    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n    private _variant = '';\n\n    @property({ type: String })\n    public get variant(): string {\n        return this._variant;\n    }\n    public set variant(variant: string) {\n        if (variant === this.variant) {\n            return;\n        }\n        if (['info', 'positive', 'negative'].includes(variant)) {\n            this.setAttribute('variant', variant);\n            this._variant = variant;\n            return;\n        }\n        this.removeAttribute('variant');\n        this._variant = '';\n    }\n\n    public constructor() {\n        super();\n        this.addEventListener('sp-overlay-query', this.onOverlayQuery);\n    }\n\n    public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n        /* c8 ignore next */\n        if (!event.target) return;\n\n        const target = event.target as Node;\n        /* c8 ignore next */\n        if (target !== this) return;\n\n        event.detail.overlayContentTipElement = this.tipElement;\n    }\n\n    private _proxy!: HTMLElement;\n\n    private generateProxy(): void {\n        if (this._proxy) {\n            return;\n        }\n        this._proxy = document.createElement('tooltip-proxy');\n        this._proxy.id = this._tooltipId;\n        this._proxy.hidden = true;\n        this._proxy.slot = 'hidden-tooltip-content';\n        this._proxy.setAttribute('role', 'tooltip');\n        this._proxy.addEventListener('disconnected', this.closeOverlay);\n    }\n\n    public overlayWillOpenCallback({\n        trigger,\n    }: {\n        trigger: HTMLElement;\n    }): void {\n        this.setAttribute('aria-hidden', 'true');\n        this.generateProxy();\n        this._proxy.textContent = this.textContent;\n        const ariaDescribedby = trigger.getAttribute('aria-describedby') || '';\n        this.hadTooltipId = ariaDescribedby.search(this._tooltipId) > -1;\n\n        this.insertAdjacentElement('beforebegin', this._proxy);\n\n        if (this.hadTooltipId) return;\n\n        if (ariaDescribedby) {\n            trigger.setAttribute(\n                'aria-describedby',\n                `${ariaDescribedby} ${this._tooltipId}`\n            );\n        } else {\n            trigger.setAttribute('aria-describedby', `${this._tooltipId}`);\n        }\n    }\n\n    public overlayOpenCancelledCallback({\n        trigger,\n    }: {\n        trigger: HTMLElement;\n    }): void {\n        this.overlayCloseCallback({ trigger });\n    }\n\n    public overlayCloseCallback({ trigger }: { trigger: HTMLElement }): void {\n        const ariaDescribedby = trigger.getAttribute('aria-describedby') || '';\n        let descriptors = ariaDescribedby.split(/\\s+/);\n\n        if (!this.hadTooltipId) {\n            descriptors = descriptors.filter(\n                (descriptor) => descriptor !== this._tooltipId\n            );\n        }\n        if (descriptors.length) {\n            trigger.setAttribute('aria-describedby', descriptors.join(' '));\n        } else {\n            trigger.removeAttribute('aria-describedby');\n        }\n\n        this.removeAttribute('aria-hidden');\n        this.removeProxy();\n    }\n\n    private removeProxy(): void {\n        this._proxy.remove();\n    }\n\n    private closeOverlayCallback?: Promise<() => void>;\n    private abortOverlay: (cancelled: boolean) => void = () => {\n        return;\n    };\n\n    private openOverlay = (): void => {\n        const parentElement = this.parentElement as HTMLElement;\n        const abortPromise: Promise<boolean> = new Promise((res) => {\n            this.abortOverlay = res;\n        });\n        this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {\n            abortPromise,\n            offset: this.offset,\n            placement: this.placement,\n        });\n    };\n\n    private closeOverlay = async (): Promise<void> => {\n        if (this.abortOverlay) this.abortOverlay(true);\n        if (!this.closeOverlayCallback) return;\n        (await this.closeOverlayCallback)();\n        delete this.closeOverlayCallback;\n    };\n\n    private previousSlot?: string;\n\n    private manageTooltip(): void {\n        const parentElement = this.parentElement as HTMLElement;\n        if (this.selfManaged) {\n            if (this.slot) {\n                this.previousSlot = this.slot;\n            }\n            this.slot = 'self-managed-tooltip';\n            parentElement.addEventListener('pointerenter', this.openOverlay);\n            parentElement.addEventListener('focusin', this.openOverlay);\n            parentElement.addEventListener('pointerleave', this.closeOverlay);\n            parentElement.addEventListener('focusout', this.closeOverlay);\n        } else {\n            if (this.previousSlot) {\n                this.slot = this.previousSlot;\n            } else if (this.slot === 'self-managed-tooltip') {\n                this.removeAttribute('slot');\n            }\n            parentElement.removeEventListener('pointerenter', this.openOverlay);\n            parentElement.removeEventListener('focusin', this.openOverlay);\n            parentElement.removeEventListener(\n                'pointerleave',\n                this.closeOverlay\n            );\n            parentElement.removeEventListener('focusout', this.closeOverlay);\n        }\n    }\n\n    render(): TemplateResult {\n        return html`\n            <slot name=\"icon\"></slot>\n            <span id=\"label\"><slot></slot></span>\n            <span id=\"tip\"></span>\n        `;\n    }\n\n    protected async update(changed: PropertyValues<this>): Promise<void> {\n        if (changed.has('open') && this.selfManaged) {\n            if (this.open) {\n                this.openOverlay();\n            } else {\n                this.closeOverlay();\n            }\n        }\n        this.generateProxy();\n        super.update(changed);\n    }\n\n    protected updated(changed: PropertyValues<this>): void {\n        super.updated(changed);\n        if (changed.has('selfManaged')) {\n            this.manageTooltip();\n        }\n    }\n}\n"]}

package/src/spectrum-tooltip.css.js

@@ -13,7 +13,7 @@ import { css } from '@spectrum-web-components/base';
 const styles = css `
 :host{--spectrum-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
+);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
 --spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
 )}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
 --spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
@@ -37,7 +37,10 @@ const styles = css `
 --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
 ) solid transparent;border-top-style:solid;border-top-width:var(
 --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
-);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(
+);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(
+--spectrum-tooltip-neutral-tip-width,
+var(--spectrum-global-dimension-size-100)
+)*-1);top:50%}:host([placement*=right]){margin-left:var(
 --spectrum-tooltip-neutral-target-offset
 )}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(
 --spectrum-tooltip-neutral-target-offset
@@ -45,7 +48,10 @@ const styles = css `
 --spectrum-tooltip-neutral-target-offset
 )}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(
 --spectrum-tooltip-neutral-target-offset
-)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
+)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(
+--spectrum-tooltip-neutral-tip-width,
+var(--spectrum-global-dimension-size-100)
+)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
 --spectrum-tooltip-neutral-icon-margin-x,
 var(--spectrum-global-dimension-size-85)
 ) - var(

package/src/spectrum-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-tooltip.css.js","sourceRoot":"","sources":["spectrum-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-tooltip.css.js","sourceRoot":"","sources":["spectrum-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1);top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`;\nexport default styles;"]}

package/src/tooltip.css.js

@@ -13,7 +13,7 @@ import { css } from '@spectrum-web-components/base';
 const styles = css `
 :host{--spectrum-overlay-animation-distance:var(
 --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
-);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
+);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
 --spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
 )}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
 --spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
@@ -37,7 +37,10 @@ const styles = css `
 --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
 ) solid transparent;border-top-style:solid;border-top-width:var(
 --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
-);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(
+);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(
+--spectrum-tooltip-neutral-tip-width,
+var(--spectrum-global-dimension-size-100)
+)*-1);top:50%}:host([placement*=right]){margin-left:var(
 --spectrum-tooltip-neutral-target-offset
 )}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(
 --spectrum-tooltip-neutral-target-offset
@@ -45,7 +48,10 @@ const styles = css `
 --spectrum-tooltip-neutral-target-offset
 )}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(
 --spectrum-tooltip-neutral-target-offset
-)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
+)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(
+--spectrum-tooltip-neutral-tip-width,
+var(--spectrum-global-dimension-size-100)
+)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
 --spectrum-tooltip-neutral-icon-margin-x,
 var(--spectrum-global-dimension-size-85)
 ) - var(

package/src/tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.css.js","sourceRoot":"","sources":["tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}: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-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`;\nexport default styles;"]}
+{"version":3,"file":"tooltip.css.js","sourceRoot":"","sources":["tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;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);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1);top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(\n--spectrum-tooltip-neutral-tip-width,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`;\nexport default styles;"]}