@spectrum-web-components/tooltip 0.11.9-react.54 → 0.11.10-styles.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +5 -5
  2. package/src/spectrum-tooltip.css.dev.js +146 -80
  3. package/src/spectrum-tooltip.css.dev.js.map +2 -2
  4. package/src/spectrum-tooltip.css.js +146 -80
  5. package/src/spectrum-tooltip.css.js.map +2 -2
  6. package/src/tooltip.css.dev.js +146 -90
  7. package/src/tooltip.css.dev.js.map +2 -2
  8. package/src/tooltip.css.js +146 -90
  9. package/src/tooltip.css.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tooltip",
3
- "version": "0.11.9-react.54+c59ca07be",
3
+ "version": "0.11.10-styles.28+7ca5b0103",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,11 +57,11 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.7.3-react.54+c59ca07be",
61
- "@spectrum-web-components/overlay": "^0.18.9-react.54+c59ca07be"
60
+ "@spectrum-web-components/base": "^0.7.2",
61
+ "@spectrum-web-components/overlay": "^0.18.10-styles.28+7ca5b0103"
62
62
  },
63
63
  "devDependencies": {
64
- "@spectrum-css/tooltip": "^3.1.20"
64
+ "@spectrum-css/tooltip": "^4.0.4"
65
65
  },
66
66
  "types": "./src/index.d.ts",
67
67
  "customElements": "custom-elements.json",
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "c59ca07bef1633dd16241d4be7d87b037ce7ddbf"
72
+ "gitHead": "7ca5b0103010e0a5ede4ecf72eba3b3107e8da0d"
73
73
  }
package/src/spectrum-tooltip.css.dev.js CHANGED
@@ -1,87 +1,153 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-overlay-animation-distance:var(
5
- --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
6
- );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(
7
- --spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
8
- )}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
9
- --spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
10
- );box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(
11
- --spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)
12
- );font-weight:var(
13
- --spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)
14
- );left:0;line-height:var(
15
- --spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
16
- );max-width:var(
17
- --spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)
18
- );min-height:var(
19
- --spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)
20
- );padding:0 var(
21
- --spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)
22
- );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-color:transparent;border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(
23
- --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
24
- );height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(
25
- --spectrum-tooltip-neutral-tip-width,
26
- var(--spectrum-global-dimension-size-100)
27
- )*-1);top:50%}:host([placement*=right]){margin-left:var(
28
- --spectrum-tooltip-neutral-target-offset
29
- )}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(
30
- --spectrum-tooltip-neutral-target-offset
31
- )}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(
32
- --spectrum-tooltip-neutral-target-offset
33
- )}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(
34
- --spectrum-tooltip-neutral-target-offset
35
- )}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(
36
- --spectrum-tooltip-neutral-tip-width,
37
- var(--spectrum-global-dimension-size-100)
38
- )*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
39
- --spectrum-tooltip-neutral-icon-margin-x,
40
- var(--spectrum-global-dimension-size-85)
4
+ :host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
5
+ --spectrum-animation-duration-100
6
+ );opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0ms linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(var(--spectrum-overlay-animation-distance))}:host([open]),:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(var(--spectrum-overlay-animation-distance))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top,:host([placement*=left][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-animation-duration:var(
7
+ --spectrum-animation-duration-100
8
+ );--spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-line-height-cjk-100);--spectrum-tooltip-font-weight:var(--spectrum-font-weight-regular);--spectrum-tooltip-spacing-inline:var(
9
+ --spectrum-component-edge-to-text-75
10
+ );--spectrum-tooltip-spacing-block-start:var(
11
+ --spectrum-component-top-to-text-75
12
+ );--spectrum-tooltip-spacing-block-end:var(
13
+ --spectrum-component-bottom-to-text-75
14
+ );--spectrum-tooltip-icon-spacing-inline-start:var(
15
+ --spectrum-text-to-visual-75
16
+ );--spectrum-tooltip-icon-spacing-inline-end:var(
17
+ --spectrum-text-to-visual-75
18
+ );--spectrum-tooltip-icon-spacing-block-start:var(
19
+ --spectrum-component-top-to-workflow-icon-75
20
+ );--spectrum-tooltip-background-color-informative:var(
21
+ --spectrum-informative-background-color-default
22
+ );--spectrum-tooltip-background-color-positive:var(
23
+ --spectrum-positive-background-color-default
24
+ );--spectrum-tooltip-background-color-negative:var(
25
+ --spectrum-negative-background-color-default
26
+ );--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-pointer-corner-spacing:var(
27
+ --spectrum-corner-radius-100
28
+ );--spectrum-tooltip-background-color-default:var(
29
+ --spectrum-tooltip-backgound-color-default-neutral
30
+ )}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText;forced-color-adjust:none}}:host{-webkit-font-smoothing:antialiased;align-items:center;background-color:var(
31
+ --highcontrast-tooltip-background-color-default,var(
32
+ --mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
33
+ )
34
+ );block-size:auto;border-radius:var(
35
+ --mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
36
+ );box-sizing:border-box;color:var(
37
+ --mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
38
+ );display:inline-flex;flex-direction:row;font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
39
+ --mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
40
+ );line-height:var(
41
+ --mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
42
+ );max-inline-size:var(
43
+ --mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
44
+ );min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
45
+ --mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
46
+ );position:relative;vertical-align:top;width:auto;word-break:break-word}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){line-height:var(
47
+ --mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
48
+ )}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}:host([variant=info]){background-color:var(
49
+ --highcontrast-tooltip-background-color-informative,var(
50
+ --mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
51
+ )
52
+ )}:host([variant=positive]){background-color:var(
53
+ --highcontrast-tooltip-background-color-positive,var(
54
+ --mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
55
+ )
56
+ )}:host([variant=negative]){background-color:var(
57
+ --highcontrast-tooltip-background-color-negative,var(
58
+ --mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
59
+ )
60
+ )}#tip{background-color:var(
61
+ --highcontrast-tooltip-background-color-default,var(
62
+ --mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
63
+ )
64
+ );clip-path:polygon(0 -5%,50% 100%,100% -5%);height:var(
65
+ --mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)
66
+ );left:50%;position:absolute;top:100%;transform:translateX(-50%);width:var(
67
+ --mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
68
+ )}:host([variant=info]) #tip{background-color:var(
69
+ --highcontrast-tooltip-background-color-informative,var(
70
+ --mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
71
+ )
72
+ )}:host([variant=positive]) #tip{background-color:var(
73
+ --highcontrast-tooltip-background-color-positive,var(
74
+ --mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
75
+ )
76
+ )}:host([variant=negative]) #tip{background-color:var(
77
+ --highcontrast-tooltip-background-color-negative,var(
78
+ --mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
79
+ )
80
+ )}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tip{bottom:100%;clip-path:polygon(50% 0,0 105%,100% 105%);top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
81
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
82
+ )}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
83
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
84
+ )}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
85
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
86
+ );right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
87
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
88
+ )}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
89
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
90
+ )}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
91
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
92
+ );right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{height:var(
93
+ --mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
94
+ );top:50%;transform:translateY(-50%);width:var(
95
+ --mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)
96
+ )}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(
97
+ --mod-tooltip-tip-block-size,
98
+ var(--spectrum-tooltip-tip-block-size)
99
+ )*-1);right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
100
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
101
+ )}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
102
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
103
+ )}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%;right:calc(var(
104
+ --mod-tooltip-tip-block-size,
105
+ var(--spectrum-tooltip-tip-block-size)
106
+ )*-1)}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(
107
+ --mod-tooltip-tip-block-size,
108
+ var(--spectrum-tooltip-tip-block-size)
109
+ )*-1);right:100%}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));margin-block-start:var(
110
+ --mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
111
+ );margin-inline-end:var(
112
+ --mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
113
+ );margin-inline-start:calc(var(
114
+ --mod-tooltip-icon-spacing-inline-start,
115
+ var(--spectrum-tooltip-icon-spacing-inline-start)
41
116
  ) - var(
42
- --spectrum-tooltip-neutral-padding-x,
43
- var(--spectrum-global-dimension-size-85)
44
- ))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(
45
- --spectrum-tooltip-neutral-icon-margin-x,
46
- var(--spectrum-global-dimension-size-85)
47
- ) - var(
48
- --spectrum-tooltip-neutral-padding-x,
49
- var(--spectrum-global-dimension-size-85)
50
- ))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(
51
- --spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
52
- )}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(
53
- --spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
54
- )}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(
55
- --spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
56
- );margin-bottom:var(
57
- --spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
58
- );margin-top:var(
59
- --spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
60
- );width:var(
61
- --spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
62
- )}#label{line-height:var(
63
- --spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
64
- );margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(
65
- --spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)
66
- )}:host{background-color:var(
67
- --spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
68
- );color:var(
69
- --spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)
70
- )}#tip{border-top-color:var(
71
- --spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
72
- )}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(
73
- --spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)
74
- )}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(
75
- --spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)
76
- )}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(
77
- --spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)
78
- )}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(
79
- --spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)
80
- )}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(
81
- --spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
82
- )}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(
83
- --spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
84
- )}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--spectrum-tooltip-neutral-background-color:CanvasText;--spectrum-tooltip-negative-background-color:CanvasText;--spectrum-tooltip-info-background-color:CanvasText;--spectrum-tooltip-positive-background-color:CanvasText;forced-color-adjust:none}}
117
+ --mod-tooltip-spacing-inline,
118
+ var(--spectrum-tooltip-spacing-inline)
119
+ ));width:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width))}#label{line-height:var(
120
+ --mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
121
+ );margin-block-end:var(
122
+ --mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
123
+ );margin-block-start:var(
124
+ --mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
125
+ )}.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host,:host([placement*=top]){margin-bottom:calc(var(
126
+ --mod-tooltip-tip-block-size,
127
+ var(--spectrum-tooltip-tip-block-size)
128
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]){margin-top:calc(var(
129
+ --mod-tooltip-tip-block-size,
130
+ var(--spectrum-tooltip-tip-block-size)
131
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]){margin-left:calc(var(
132
+ --mod-tooltip-tip-block-size,
133
+ var(--spectrum-tooltip-tip-block-size)
134
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]){margin-right:calc(var(
135
+ --mod-tooltip-tip-block-size,
136
+ var(--spectrum-tooltip-tip-block-size)
137
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
138
+ --mod-tooltip-tip-block-size,
139
+ var(--spectrum-tooltip-tip-block-size)
140
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
141
+ --mod-tooltip-tip-block-size,
142
+ var(--spectrum-tooltip-tip-block-size)
143
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-top{left:100%;right:auto}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-top{left:auto;right:100%}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top{transform:translate(var(
144
+ --mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
145
+ ),-50%)}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top{transform:translate(calc(var(
146
+ --mod-tooltip-animation-distance,
147
+ var(--spectrum-tooltip-animation-distance)
148
+ )*-1),-50%)}:host{--spectrum-tooltip-backgound-color-default-neutral:var(
149
+ --system-spectrum-tooltip-backgound-color-default-neutral
150
+ )}
85
151
  `;
86
152
  export default styles;
87
153
  //# sourceMappingURL=spectrum-tooltip.css.dev.js.map
package/src/spectrum-tooltip.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-tooltip.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 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-color:transparent;border-left-color:transparent;border-right-color:transparent;border-style:solid;border-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)}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--spectrum-tooltip-neutral-background-color:CanvasText;--spectrum-tooltip-negative-background-color:CanvasText;--spectrum-tooltip-info-background-color:CanvasText;--spectrum-tooltip-positive-background-color:CanvasText;forced-color-adjust:none}}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmFf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 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:6px;--spectrum-overlay-animation-duration:var(\n--spectrum-animation-duration-100\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0ms linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(var(--spectrum-overlay-animation-distance))}:host([open]),:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(var(--spectrum-overlay-animation-distance))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top,:host([placement*=left][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-line-height-cjk-100);--spectrum-tooltip-font-weight:var(--spectrum-font-weight-regular);--spectrum-tooltip-spacing-inline:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-tooltip-spacing-block-start:var(\n--spectrum-component-top-to-text-75\n);--spectrum-tooltip-spacing-block-end:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-tooltip-icon-spacing-inline-start:var(\n--spectrum-text-to-visual-75\n);--spectrum-tooltip-icon-spacing-inline-end:var(\n--spectrum-text-to-visual-75\n);--spectrum-tooltip-icon-spacing-block-start:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-tooltip-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-tooltip-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-tooltip-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-pointer-corner-spacing:var(\n--spectrum-corner-radius-100\n);--spectrum-tooltip-background-color-default:var(\n--spectrum-tooltip-backgound-color-default-neutral\n)}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText;forced-color-adjust:none}}:host{-webkit-font-smoothing:antialiased;align-items:center;background-color:var(\n--highcontrast-tooltip-background-color-default,var(\n--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)\n)\n);block-size:auto;border-radius:var(\n--mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)\n);box-sizing:border-box;color:var(\n--mod-tooltip-content-color,var(--spectrum-tooltip-content-color)\n);display:inline-flex;flex-direction:row;font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(\n--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)\n);line-height:var(\n--mod-tooltip-line-height,var(--spectrum-tooltip-line-height)\n);max-inline-size:var(\n--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)\n);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(\n--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)\n);position:relative;vertical-align:top;width:auto;word-break:break-word}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){line-height:var(\n--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)\n)}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}:host([variant=info]){background-color:var(\n--highcontrast-tooltip-background-color-informative,var(\n--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)\n)\n)}:host([variant=positive]){background-color:var(\n--highcontrast-tooltip-background-color-positive,var(\n--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)\n)\n)}:host([variant=negative]){background-color:var(\n--highcontrast-tooltip-background-color-negative,var(\n--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)\n)\n)}#tip{background-color:var(\n--highcontrast-tooltip-background-color-default,var(\n--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)\n)\n);clip-path:polygon(0 -5%,50% 100%,100% -5%);height:var(\n--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)\n);left:50%;position:absolute;top:100%;transform:translateX(-50%);width:var(\n--mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)\n)}:host([variant=info]) #tip{background-color:var(\n--highcontrast-tooltip-background-color-informative,var(\n--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)\n)\n)}:host([variant=positive]) #tip{background-color:var(\n--highcontrast-tooltip-background-color-positive,var(\n--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)\n)\n)}:host([variant=negative]) #tip{background-color:var(\n--highcontrast-tooltip-background-color-negative,var(\n--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)\n)\n)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tip{bottom:100%;clip-path:polygon(50% 0,0 105%,100% 105%);top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n);right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n);right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{height:var(\n--mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)\n);top:50%;transform:translateY(-50%);width:var(\n--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)\n)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n)*-1);right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(\n--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)\n)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%;right:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n)*-1)}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n)*-1);right:100%}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));margin-block-start:var(\n--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)\n);margin-inline-end:var(\n--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)\n);margin-inline-start:calc(var(\n--mod-tooltip-icon-spacing-inline-start,\nvar(--spectrum-tooltip-icon-spacing-inline-start)\n) - var(\n--mod-tooltip-spacing-inline,\nvar(--spectrum-tooltip-spacing-inline)\n));width:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width))}#label{line-height:var(\n--mod-tooltip-line-height,var(--spectrum-tooltip-line-height)\n);margin-block-end:var(\n--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)\n);margin-block-start:var(\n--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)\n)}.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host,:host([placement*=top]){margin-bottom:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]){margin-top:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]){margin-left:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]){margin-right:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(\n--mod-tooltip-tip-block-size,\nvar(--spectrum-tooltip-tip-block-size)\n) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-top{left:100%;right:auto}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-top{left:auto;right:100%}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top{transform:translate(var(\n--mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)\n),-50%)}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top{transform:translate(calc(var(\n--mod-tooltip-animation-distance,\nvar(--spectrum-tooltip-animation-distance)\n)*-1),-50%)}:host{--spectrum-tooltip-backgound-color-default-neutral:var(\n--system-spectrum-tooltip-backgound-color-default-neutral\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqJf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-tooltip.css.js CHANGED
@@ -1,84 +1,150 @@
1
1
  "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
2
- :host{--spectrum-overlay-animation-distance:var(
3
- --spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
4
- );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(
5
- --spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
6
- )}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
7
- --spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
8
- );box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(
9
- --spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)
10
- );font-weight:var(
11
- --spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)
12
- );left:0;line-height:var(
13
- --spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
14
- );max-width:var(
15
- --spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)
16
- );min-height:var(
17
- --spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)
18
- );padding:0 var(
19
- --spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)
20
- );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-color:transparent;border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(
21
- --spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
22
- );height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(
23
- --spectrum-tooltip-neutral-tip-width,
24
- var(--spectrum-global-dimension-size-100)
25
- )*-1);top:50%}:host([placement*=right]){margin-left:var(
26
- --spectrum-tooltip-neutral-target-offset
27
- )}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(
28
- --spectrum-tooltip-neutral-target-offset
29
- )}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(
30
- --spectrum-tooltip-neutral-target-offset
31
- )}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(
32
- --spectrum-tooltip-neutral-target-offset
33
- )}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(
34
- --spectrum-tooltip-neutral-tip-width,
35
- var(--spectrum-global-dimension-size-100)
36
- )*-1)}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
37
- --spectrum-tooltip-neutral-icon-margin-x,
38
- var(--spectrum-global-dimension-size-85)
2
+ :host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
3
+ --spectrum-animation-duration-100
4
+ );opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0ms linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([open]) .spectrum-Tooltip--bottom-end,:host([open]) .spectrum-Tooltip--bottom-left,:host([open]) .spectrum-Tooltip--bottom-right,:host([open]) .spectrum-Tooltip--bottom-start,:host([placement*=bottom][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(var(--spectrum-overlay-animation-distance))}:host([open]),:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([dir=rtl][open]) .spectrum-Tooltip--start,:host([dir=rtl][open]) .spectrum-Tooltip--start-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--start-top,:host([open]) .spectrum-Tooltip--end,:host([open]) .spectrum-Tooltip--end-bottom,:host([open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--right-bottom,:host([open]) .spectrum-Tooltip--right-top,:host([placement*=right][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(var(--spectrum-overlay-animation-distance))}:host([dir=rtl][open]) .spectrum-Tooltip--end,:host([dir=rtl][open]) .spectrum-Tooltip--end-bottom,:host([dir=rtl][open]) .spectrum-Tooltip--end-top,:host([open]) .spectrum-Tooltip--left-bottom,:host([open]) .spectrum-Tooltip--left-top,:host([open]) .spectrum-Tooltip--start,:host([open]) .spectrum-Tooltip--start-bottom,:host([open]) .spectrum-Tooltip--start-top,:host([placement*=left][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-tooltip-animation-duration:var(
5
+ --spectrum-animation-duration-100
6
+ );--spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);--spectrum-tooltip-margin:0px;--spectrum-tooltip-height:var(--spectrum-component-height-75);--spectrum-tooltip-max-inline-size:var(--spectrum-tooltip-maximum-width);--spectrum-tooltip-border-radius:var(--spectrum-corner-radius-100);--spectrum-tooltip-icon-width:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-icon-height:var(--spectrum-workflow-icon-size-50);--spectrum-tooltip-font-size:var(--spectrum-font-size-75);--spectrum-tooltip-line-height:var(--spectrum-line-height-100);--spectrum-tooltip-cjk-line-height:var(--spectrum-line-height-cjk-100);--spectrum-tooltip-font-weight:var(--spectrum-font-weight-regular);--spectrum-tooltip-spacing-inline:var(
7
+ --spectrum-component-edge-to-text-75
8
+ );--spectrum-tooltip-spacing-block-start:var(
9
+ --spectrum-component-top-to-text-75
10
+ );--spectrum-tooltip-spacing-block-end:var(
11
+ --spectrum-component-bottom-to-text-75
12
+ );--spectrum-tooltip-icon-spacing-inline-start:var(
13
+ --spectrum-text-to-visual-75
14
+ );--spectrum-tooltip-icon-spacing-inline-end:var(
15
+ --spectrum-text-to-visual-75
16
+ );--spectrum-tooltip-icon-spacing-block-start:var(
17
+ --spectrum-component-top-to-workflow-icon-75
18
+ );--spectrum-tooltip-background-color-informative:var(
19
+ --spectrum-informative-background-color-default
20
+ );--spectrum-tooltip-background-color-positive:var(
21
+ --spectrum-positive-background-color-default
22
+ );--spectrum-tooltip-background-color-negative:var(
23
+ --spectrum-negative-background-color-default
24
+ );--spectrum-tooltip-content-color:var(--spectrum-white);--spectrum-tooltip-tip-inline-size:var(--spectrum-tooltip-tip-width);--spectrum-tooltip-tip-block-size:var(--spectrum-tooltip-tip-height);--spectrum-tooltip-pointer-corner-spacing:var(
25
+ --spectrum-corner-radius-100
26
+ );--spectrum-tooltip-background-color-default:var(
27
+ --spectrum-tooltip-backgound-color-default-neutral
28
+ )}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--highcontrast-tooltip-background-color-default:CanvasText;--highcontrast-tooltip-background-color-informative:CanvasText;--highcontrast-tooltip-background-color-positive:CanvasText;--highcontrast-tooltip-background-color-negative:CanvasText;forced-color-adjust:none}}:host{-webkit-font-smoothing:antialiased;align-items:center;background-color:var(
29
+ --highcontrast-tooltip-background-color-default,var(
30
+ --mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
31
+ )
32
+ );block-size:auto;border-radius:var(
33
+ --mod-tooltip-border-radius,var(--spectrum-tooltip-border-radius)
34
+ );box-sizing:border-box;color:var(
35
+ --mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
36
+ );display:inline-flex;flex-direction:row;font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
37
+ --mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
38
+ );line-height:var(
39
+ --mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
40
+ );max-inline-size:var(
41
+ --mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
42
+ );min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
43
+ --mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
44
+ );position:relative;vertical-align:top;width:auto;word-break:break-word}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){line-height:var(
45
+ --mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
46
+ )}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}:host([variant=info]){background-color:var(
47
+ --highcontrast-tooltip-background-color-informative,var(
48
+ --mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
49
+ )
50
+ )}:host([variant=positive]){background-color:var(
51
+ --highcontrast-tooltip-background-color-positive,var(
52
+ --mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
53
+ )
54
+ )}:host([variant=negative]){background-color:var(
55
+ --highcontrast-tooltip-background-color-negative,var(
56
+ --mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
57
+ )
58
+ )}#tip{background-color:var(
59
+ --highcontrast-tooltip-background-color-default,var(
60
+ --mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
61
+ )
62
+ );clip-path:polygon(0 -5%,50% 100%,100% -5%);height:var(
63
+ --mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)
64
+ );left:50%;position:absolute;top:100%;transform:translateX(-50%);width:var(
65
+ --mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
66
+ )}:host([variant=info]) #tip{background-color:var(
67
+ --highcontrast-tooltip-background-color-informative,var(
68
+ --mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
69
+ )
70
+ )}:host([variant=positive]) #tip{background-color:var(
71
+ --highcontrast-tooltip-background-color-positive,var(
72
+ --mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
73
+ )
74
+ )}:host([variant=negative]) #tip{background-color:var(
75
+ --highcontrast-tooltip-background-color-negative,var(
76
+ --mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
77
+ )
78
+ )}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tip{bottom:100%;clip-path:polygon(50% 0,0 105%,100% 105%);top:auto}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip{transform:none}.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--top-left #tip{left:var(
79
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
80
+ )}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
81
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
82
+ )}.spectrum-Tooltip--bottom-start #tip,.spectrum-Tooltip--top-start #tip{left:var(
83
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
84
+ );right:auto}:host([dir=rtl]) .spectrum-Tooltip--bottom-start #tip,:host([dir=rtl]) .spectrum-Tooltip--top-start #tip{left:auto;right:var(
85
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
86
+ )}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--top-end #tip{left:auto;right:var(
87
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
88
+ )}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
89
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
90
+ );right:auto}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{height:var(
91
+ --mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
92
+ );top:50%;transform:translateY(-50%);width:var(
93
+ --mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)
94
+ )}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(
95
+ --mod-tooltip-tip-block-size,
96
+ var(--spectrum-tooltip-tip-block-size)
97
+ )*-1);right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%}.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-top #tip{top:var(
98
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
99
+ )}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
100
+ --mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
101
+ )}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(-5% 0,-5% 100%,100% 50%);left:100%;right:calc(var(
102
+ --mod-tooltip-tip-block-size,
103
+ var(--spectrum-tooltip-tip-block-size)
104
+ )*-1)}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(0 50%,105% 100%,105% 0);left:calc(var(
105
+ --mod-tooltip-tip-block-size,
106
+ var(--spectrum-tooltip-tip-block-size)
107
+ )*-1);right:100%}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height));margin-block-start:var(
108
+ --mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
109
+ );margin-inline-end:var(
110
+ --mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
111
+ );margin-inline-start:calc(var(
112
+ --mod-tooltip-icon-spacing-inline-start,
113
+ var(--spectrum-tooltip-icon-spacing-inline-start)
39
114
  ) - var(
40
- --spectrum-tooltip-neutral-padding-x,
41
- var(--spectrum-global-dimension-size-85)
42
- ))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(
43
- --spectrum-tooltip-neutral-icon-margin-x,
44
- var(--spectrum-global-dimension-size-85)
45
- ) - var(
46
- --spectrum-tooltip-neutral-padding-x,
47
- var(--spectrum-global-dimension-size-85)
48
- ))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(
49
- --spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
50
- )}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(
51
- --spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
52
- )}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(
53
- --spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
54
- );margin-bottom:var(
55
- --spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
56
- );margin-top:var(
57
- --spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
58
- );width:var(
59
- --spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
60
- )}#label{line-height:var(
61
- --spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
62
- );margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(
63
- --spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)
64
- )}:host{background-color:var(
65
- --spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
66
- );color:var(
67
- --spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)
68
- )}#tip{border-top-color:var(
69
- --spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
70
- )}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(
71
- --spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)
72
- )}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(
73
- --spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)
74
- )}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(
75
- --spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)
76
- )}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(
77
- --spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)
78
- )}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(
79
- --spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
80
- )}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(
81
- --spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
82
- )}@media (forced-colors:active){:host{border:1px solid transparent}#tip{--spectrum-tooltip-neutral-background-color:CanvasText;--spectrum-tooltip-negative-background-color:CanvasText;--spectrum-tooltip-info-background-color:CanvasText;--spectrum-tooltip-positive-background-color:CanvasText;forced-color-adjust:none}}
115
+ --mod-tooltip-spacing-inline,
116
+ var(--spectrum-tooltip-spacing-inline)
117
+ ));width:var(--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width))}#label{line-height:var(
118
+ --mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
119
+ );margin-block-end:var(
120
+ --mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
121
+ );margin-block-start:var(
122
+ --mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
123
+ )}.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host,:host([placement*=top]){margin-bottom:calc(var(
124
+ --mod-tooltip-tip-block-size,
125
+ var(--spectrum-tooltip-tip-block-size)
126
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--bottom-end,.spectrum-Tooltip--bottom-left,.spectrum-Tooltip--bottom-right,.spectrum-Tooltip--bottom-start,:host([placement*=bottom]){margin-top:calc(var(
127
+ --mod-tooltip-tip-block-size,
128
+ var(--spectrum-tooltip-tip-block-size)
129
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]){margin-left:calc(var(
130
+ --mod-tooltip-tip-block-size,
131
+ var(--spectrum-tooltip-tip-block-size)
132
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]){margin-right:calc(var(
133
+ --mod-tooltip-tip-block-size,
134
+ var(--spectrum-tooltip-tip-block-size)
135
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
136
+ --mod-tooltip-tip-block-size,
137
+ var(--spectrum-tooltip-tip-block-size)
138
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--end,.spectrum-Tooltip--end-bottom,.spectrum-Tooltip--end-top{margin-inline-start:calc(var(
139
+ --mod-tooltip-tip-block-size,
140
+ var(--spectrum-tooltip-tip-block-size)
141
+ ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--start-top{left:100%;right:auto}:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover .spectrum-Tooltip--end-top{left:auto;right:100%}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top{transform:translate(var(
142
+ --mod-tooltip-animation-distance,var(--spectrum-tooltip-animation-distance)
143
+ ),-50%)}:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,:host([dir=rtl]) .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top{transform:translate(calc(var(
144
+ --mod-tooltip-animation-distance,
145
+ var(--spectrum-tooltip-animation-distance)
146
+ )*-1),-50%)}:host{--spectrum-tooltip-backgound-color-default-neutral:var(
147
+ --system-spectrum-tooltip-backgound-color-default-neutral
148
+ )}
83
149
  `;export default o;
84
150
  //# sourceMappingURL=spectrum-tooltip.css.js.map