@spectrum-web-components/tooltip 0.35.1-rc.43 → 0.36.0
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.
- package/custom-elements.json +376 -0
- package/package.json +5 -6
- package/src/Tooltip.d.ts +37 -16
- package/src/Tooltip.dev.js +169 -180
- package/src/Tooltip.dev.js.map +3 -3
- package/src/Tooltip.js +5 -25
- package/src/Tooltip.js.map +3 -3
- package/src/spectrum-config.js +17 -120
- package/src/spectrum-tooltip.css.dev.js +79 -38
- package/src/spectrum-tooltip.css.dev.js.map +2 -2
- package/src/spectrum-tooltip.css.js +79 -38
- package/src/spectrum-tooltip.css.js.map +2 -2
- package/src/tooltip.css.dev.js +80 -42
- package/src/tooltip.css.dev.js.map +2 -2
- package/src/tooltip.css.js +80 -42
- package/src/tooltip.css.js.map +2 -2
- package/stories/tooltip.stories.js +16 -26
- package/stories/tooltip.stories.js.map +2 -2
- package/test/tooltip.test.js +56 -60
- package/test/tooltip.test.js.map +2 -2
package/src/Tooltip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tooltip.ts"],
|
|
4
|
-
"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 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 Overlay,\n OverlayOpenCloseDetail,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nimport tooltipStyles from './tooltip.css.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { focusableSelector } from '@spectrum-web-components/shared/src/focusable-selectors.js';\n\nclass TooltipOpenable extends HTMLElement {\n constructor() {\n super();\n this.addEventListener('sp-opened', this.redispatchEvent);\n this.addEventListener('sp-closed', this.redispatchEvent);\n }\n redispatchEvent(event: Event): void {\n event.stopPropagation();\n this.tooltip.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(event.type, {\n bubbles: event.bubbles,\n composed: event.composed,\n detail: (event as CustomEvent<OverlayOpenCloseDetail>).detail,\n })\n );\n }\n get tooltip(): Tooltip {\n return (this.getRootNode() as ShadowRoot).host as Tooltip;\n }\n static get observedAttributes(): string[] {\n return ['open', 'placement'];\n }\n attributeChangedCallback(\n name: 'open' | 'placement',\n _oldValue: string,\n newValue: 'string'\n ): void {\n switch (name) {\n // API generally sets `open` as a property\n /* c8 ignore next 3 */\n case 'open':\n this.open = newValue !== null;\n break;\n case 'placement':\n this.placement = newValue as Placement;\n break;\n }\n }\n set open(open: boolean) {\n this._open = open;\n const { tooltip } = this;\n /* c8 ignore next 3 */\n if (!tooltip) {\n return;\n }\n tooltip.open = open;\n }\n get open(): boolean {\n return this._open;\n }\n private _open = false;\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\"}\n * @attr\n */\n set placement(placement: Placement) {\n this._placement = placement;\n const { tooltip } = this;\n if (!tooltip) {\n return;\n }\n tooltip.placement = placement;\n }\n /* c8 ignore next 3 */\n get placement(): Placement {\n return this._placement;\n }\n private _placement: Placement = 'top';\n get tipElement(): HTMLElement {\n return this.tooltip.tipElement;\n }\n}\n\nif (!customElements.get('sp-tooltip-openable')) {\n customElements.define('sp-tooltip-openable', TooltipOpenable);\n}\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 */\nexport class Tooltip extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [tooltipStyles];\n }\n\n /**\n * Automatically bind to the parent element of the assigned `slot` or the parent element of the `sp-tooltip`.\n * Without this, you must provide your own `overlay-trigger`.\n */\n @property({ type: Boolean, attribute: 'self-managed' })\n public selfManaged = false;\n\n @property({ type: Number })\n public offset = 0;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @query('sp-overlay')\n public overlayElement?: Overlay;\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\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement;\n\n @query('#tip')\n public tipElement!: HTMLSpanElement;\n\n @property({ type: Number })\n public tipPadding?: number;\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 private handleOpenOverlay = (): void => {\n this.open = true;\n };\n\n protected handleCloseOverlay = (): void => {\n this.open = false;\n };\n\n protected handleTransitionrun(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent('transitionrun', {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n protected handleTransitionend(event: TransitionEvent): void {\n this.dispatchEvent(\n new TransitionEvent('transitionend', {\n bubbles: true,\n composed: true,\n propertyName: event.propertyName,\n })\n );\n }\n\n private get triggerElement(): HTMLElement {\n // Resolve the parent element of the assigned slot (if one exists) or of the Tooltip.\n let start: HTMLElement = this.assignedSlot || this;\n let root = start.getRootNode();\n if (window.__swc.DEBUG) {\n if (root === document) {\n window.__swc.warn(\n this,\n `Self managed <${this.localName}> elements walk up the composed tree to acquire a trigger element. No trigger element was found before the document.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/tooltip#self-managed-overlays',\n {\n level: 'high',\n }\n );\n return root as HTMLElement;\n }\n }\n let triggerElement = (start.parentElement ||\n (root as ShadowRoot).host ||\n root) as HTMLElement;\n while (!triggerElement?.matches?.(focusableSelector)) {\n start =\n triggerElement.assignedSlot || (triggerElement as HTMLElement);\n root = start.getRootNode();\n /* c8 ignore next 13 */\n if (window.__swc.DEBUG) {\n if (root === document) {\n window.__swc.warn(\n this,\n `Self managed <${this.localName}> elements walk up the composed tree to acquire a trigger element. No trigger element was found before the document.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/tooltip#self-managed-overlays',\n {\n level: 'high',\n }\n );\n return root as HTMLElement;\n }\n }\n triggerElement = (start.parentElement ||\n (root as ShadowRoot).host ||\n root) as HTMLElement;\n }\n return triggerElement;\n }\n\n override render(): TemplateResult {\n const tooltip = html`\n <sp-tooltip-openable\n id=\"tooltip\"\n placement=${ifDefined(this.placement)}\n @transitionrun=${this.handleTransitionrun}\n @transitionend=${this.handleTransitionend}\n >\n <slot name=\"icon\"></slot>\n <span id=\"label\"><slot></slot></span>\n <span id=\"tip\"></span>\n </sp-tooltip-openable>\n `;\n if (this.selfManaged) {\n return html`\n <sp-overlay\n ?open=${this.open}\n offset=${this.offset}\n .placement=${this.placement}\n type=\"hint\"\n .tipPadding=${this.tipPadding}\n .triggerInteraction=${'hover'}\n @sp-opened=${this.handleOpenOverlay}\n @sp-closed=${this.handleCloseOverlay}\n >\n ${tooltip}\n </sp-overlay>\n `;\n } else {\n return tooltip;\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n if (!this.selfManaged) {\n return;\n }\n const overlayElement = this.overlayElement;\n if (overlayElement) {\n const triggerElement = this.triggerElement;\n overlayElement.triggerElement = triggerElement;\n }\n });\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "query", "
|
|
4
|
+
"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 { defineElement } from '@spectrum-web-components/base/src/define-element.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\ndefineElement('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 override 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 /**\n * Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.\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 if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = true;\n }\n this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {\n abortPromise,\n offset: this.offset,\n placement: this.placement,\n });\n if (window.__swc.DEBUG) {\n window.__swc.ignoreWarningLevels.deprecation = false;\n }\n };\n\n private closeOverlay = async (\n event?: PointerEvent | FocusEvent | Event\n ): Promise<void> => {\n const pointerIsEnteringTooltip =\n event &&\n event.type === 'pointerleave' &&\n (event as PointerEvent).relatedTarget === this;\n if (pointerIsEnteringTooltip) {\n this.addEventListener(\n 'pointerleave',\n (event: PointerEvent) => {\n const pointerIsEnteringParnet =\n event.relatedTarget === this.parentElement;\n if (pointerIsEnteringParnet) {\n return;\n }\n this.closeOverlay(event);\n },\n { once: true }\n );\n return;\n }\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 override 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 override async update(\n changed: PropertyValues<this>\n ): 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 override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('selfManaged')) {\n this.manageTooltip();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "SpectrumElement", "property", "query", "defineElement", "openOverlay", "tooltipStyles", "_Tooltip", "parentElement", "abortPromise", "res", "event", "variant", "trigger", "ariaDescribedby", "descriptors", "descriptor", "changed", "__decorateClass"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -29,129 +29,26 @@ export default {
|
|
|
29
29
|
fileName: 'tooltip',
|
|
30
30
|
excludeByComponents: [builder.class('u-tooltip-showOnHover')],
|
|
31
31
|
components: [
|
|
32
|
-
converter.
|
|
32
|
+
converter.classToHost(),
|
|
33
33
|
converter.classToAttribute('is-open', 'open'),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
'top',
|
|
41
|
-
'substring'
|
|
42
|
-
),
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
replace: builder.combinator(' '),
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
replace: builder.id('tooltip'),
|
|
49
|
-
},
|
|
50
|
-
],
|
|
51
|
-
expandSelector: true,
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
find: [builder.class('spectrum-Tooltip--bottom')],
|
|
55
|
-
replace: [
|
|
56
|
-
{
|
|
57
|
-
replace: builder.attribute(
|
|
58
|
-
'placement',
|
|
59
|
-
'bottom',
|
|
60
|
-
'substring'
|
|
61
|
-
),
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
replace: builder.combinator(' '),
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
replace: builder.id('tooltip'),
|
|
68
|
-
},
|
|
69
|
-
],
|
|
70
|
-
expandSelector: true,
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
find: [builder.class('spectrum-Tooltip--left')],
|
|
74
|
-
replace: [
|
|
75
|
-
{
|
|
76
|
-
replace: builder.attribute(
|
|
77
|
-
'placement',
|
|
78
|
-
'left',
|
|
79
|
-
'substring'
|
|
80
|
-
),
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
replace: builder.combinator(' '),
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
replace: builder.id('tooltip'),
|
|
87
|
-
},
|
|
34
|
+
...converter.enumerateAttributes(
|
|
35
|
+
[
|
|
36
|
+
['spectrum-Tooltip--top'],
|
|
37
|
+
['spectrum-Tooltip--bottom'],
|
|
38
|
+
['spectrum-Tooltip--left'],
|
|
39
|
+
['spectrum-Tooltip--right'],
|
|
88
40
|
],
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
'right',
|
|
98
|
-
'substring'
|
|
99
|
-
),
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
replace: builder.combinator(' '),
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
replace: builder.id('tooltip'),
|
|
106
|
-
},
|
|
41
|
+
'placement',
|
|
42
|
+
'substring'
|
|
43
|
+
),
|
|
44
|
+
...converter.enumerateAttributes(
|
|
45
|
+
[
|
|
46
|
+
['spectrum-Tooltip--info'],
|
|
47
|
+
['spectrum-Tooltip--positive'],
|
|
48
|
+
['spectrum-Tooltip--negative'],
|
|
107
49
|
],
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
{
|
|
111
|
-
find: [builder.class('spectrum-Tooltip--info')],
|
|
112
|
-
replace: [
|
|
113
|
-
{
|
|
114
|
-
replace: builder.attribute('variant', 'info'),
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
replace: builder.combinator(' '),
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
replace: builder.id('tooltip'),
|
|
121
|
-
},
|
|
122
|
-
],
|
|
123
|
-
expandSelector: true,
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
find: [builder.class('spectrum-Tooltip--positive')],
|
|
127
|
-
replace: [
|
|
128
|
-
{
|
|
129
|
-
replace: builder.attribute('variant', 'positive'),
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
replace: builder.combinator(' '),
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
replace: builder.id('tooltip'),
|
|
136
|
-
},
|
|
137
|
-
],
|
|
138
|
-
expandSelector: true,
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
find: [builder.class('spectrum-Tooltip--negative')],
|
|
142
|
-
replace: [
|
|
143
|
-
{
|
|
144
|
-
replace: builder.attribute('variant', 'negative'),
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
replace: builder.combinator(' '),
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
replace: builder.id('tooltip'),
|
|
151
|
-
},
|
|
152
|
-
],
|
|
153
|
-
expandSelector: true,
|
|
154
|
-
},
|
|
50
|
+
'variant'
|
|
51
|
+
),
|
|
155
52
|
converter.classToId('spectrum-Tooltip-label'),
|
|
156
53
|
converter.classToId('spectrum-Tooltip-tip'),
|
|
157
54
|
converter.classToSlotted('spectrum-Tooltip-typeIcon', 'icon'),
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
|
|
4
|
+
:host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
|
|
5
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 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open])
|
|
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 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;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
7
|
--spectrum-animation-duration-100
|
|
8
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-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--spectrum-tooltip-spacing-inline:var(
|
|
9
9
|
--spectrum-component-edge-to-text-75
|
|
@@ -23,11 +23,11 @@ const styles = css`
|
|
|
23
23
|
--spectrum-positive-background-color-default
|
|
24
24
|
);--spectrum-tooltip-background-color-negative:var(
|
|
25
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(
|
|
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-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(
|
|
27
27
|
--spectrum-corner-radius-100
|
|
28
28
|
);--spectrum-tooltip-background-color-default:var(
|
|
29
29
|
--spectrum-tooltip-backgound-color-default-neutral
|
|
30
|
-
)}@media (forced-colors:active){
|
|
30
|
+
)}@media (forced-colors:active){:host{border:1px solid #0000}#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
31
|
--highcontrast-tooltip-background-color-default,var(
|
|
32
32
|
--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
|
|
33
33
|
)
|
|
@@ -37,23 +37,23 @@ const styles = css`
|
|
|
37
37
|
--mod-tooltip-content-color,var(--spectrum-tooltip-content-color)
|
|
38
38
|
);display:inline-flex;flex-direction:row;font-size:var(--mod-tooltip-font-size,var(--spectrum-tooltip-font-size));font-weight:var(
|
|
39
39
|
--mod-tooltip-font-weight,var(--spectrum-tooltip-font-weight)
|
|
40
|
-
);line-height:var(
|
|
40
|
+
);inline-size:auto;line-height:var(
|
|
41
41
|
--mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
|
|
42
42
|
);max-inline-size:var(
|
|
43
43
|
--mod-tooltip-max-inline-size,var(--spectrum-tooltip-max-inline-size)
|
|
44
44
|
);min-block-size:var(--mod-tooltip-height,var(--spectrum-tooltip-height));padding-inline:var(
|
|
45
45
|
--mod-tooltip-spacing-inline,var(--spectrum-tooltip-spacing-inline)
|
|
46
|
-
);position:relative;vertical-align:top;
|
|
46
|
+
);position:relative;vertical-align:top;word-break:break-word}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){line-height:var(
|
|
47
47
|
--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)
|
|
48
|
-
)}
|
|
48
|
+
)}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}:host([variant=info]){background-color:var(
|
|
49
49
|
--highcontrast-tooltip-background-color-informative,var(
|
|
50
50
|
--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
|
|
51
51
|
)
|
|
52
|
-
)}:host([variant=positive])
|
|
52
|
+
)}:host([variant=positive]){background-color:var(
|
|
53
53
|
--highcontrast-tooltip-background-color-positive,var(
|
|
54
54
|
--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
|
|
55
55
|
)
|
|
56
|
-
)}:host([variant=negative])
|
|
56
|
+
)}:host([variant=negative]){background-color:var(
|
|
57
57
|
--highcontrast-tooltip-background-color-negative,var(
|
|
58
58
|
--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
|
|
59
59
|
)
|
|
@@ -61,23 +61,40 @@ const styles = css`
|
|
|
61
61
|
--highcontrast-tooltip-background-color-default,var(
|
|
62
62
|
--mod-tooltip-background-color-default,var(--spectrum-tooltip-background-color-default)
|
|
63
63
|
)
|
|
64
|
-
);
|
|
65
|
-
--mod-tooltip-tip-
|
|
66
|
-
);
|
|
67
|
-
--mod-tooltip-tip-
|
|
68
|
-
|
|
64
|
+
);block-size:var(
|
|
65
|
+
--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
|
|
66
|
+
);clip-path:polygon(0 calc(0% - var(
|
|
67
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
68
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
69
|
+
)),50% var(
|
|
70
|
+
--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
|
|
71
|
+
),100% calc(0% - var(
|
|
72
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
73
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
74
|
+
)));inline-size:var(
|
|
75
|
+
--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)
|
|
76
|
+
);left:50%;position:absolute;top:100%;transform:translateX(-50%)}:host([variant=info]) #tip{background-color:var(
|
|
69
77
|
--highcontrast-tooltip-background-color-informative,var(
|
|
70
78
|
--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
|
|
71
79
|
)
|
|
72
|
-
)}:host([variant=positive]) #
|
|
80
|
+
)}:host([variant=positive]) #tip{background-color:var(
|
|
73
81
|
--highcontrast-tooltip-background-color-positive,var(
|
|
74
82
|
--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
|
|
75
83
|
)
|
|
76
|
-
)}:host([variant=negative]) #
|
|
84
|
+
)}:host([variant=negative]) #tip{background-color:var(
|
|
77
85
|
--highcontrast-tooltip-background-color-negative,var(
|
|
78
86
|
--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
|
|
79
87
|
)
|
|
80
|
-
)}.spectrum-Tooltip--top-end #tip,.spectrum-Tooltip--top-left #tip,.spectrum-Tooltip--top-right #tip,.spectrum-Tooltip--top-start #tip,:host([placement*=top]) #
|
|
88
|
+
)}.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% calc(100% - var(
|
|
89
|
+
--mod-tooltip-tip-height-percentage,
|
|
90
|
+
var(--spectrum-tooltip-tip-height-percentage)
|
|
91
|
+
)),0 calc(100% + var(
|
|
92
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
93
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
94
|
+
)),100% calc(100% + var(
|
|
95
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
96
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
97
|
+
)));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
98
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
82
99
|
)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
|
|
83
100
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
@@ -89,24 +106,48 @@ const styles = css`
|
|
|
89
106
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
90
107
|
)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
|
|
91
108
|
--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]) #
|
|
93
|
-
--mod-tooltip-tip-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
--
|
|
98
|
-
var(
|
|
99
|
-
|
|
109
|
+
);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{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tip{clip-path:polygon(calc(100% - var(
|
|
110
|
+
--mod-tooltip-tip-height-percentage,
|
|
111
|
+
var(--spectrum-tooltip-tip-height-percentage)
|
|
112
|
+
)) 50%,calc(100% + var(
|
|
113
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
114
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
115
|
+
)) 100%,calc(100% + var(
|
|
116
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
117
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
118
|
+
)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip{clip-path:polygon(calc(0% - var(
|
|
119
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
120
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
121
|
+
)) 0,calc(0% - var(
|
|
122
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
123
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
124
|
+
)) 100%,var(
|
|
125
|
+
--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
|
|
126
|
+
) 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
127
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
101
128
|
)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
|
|
102
129
|
--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(
|
|
104
|
-
--mod-tooltip-tip-
|
|
105
|
-
var(--spectrum-tooltip-tip-
|
|
106
|
-
)
|
|
107
|
-
--mod-tooltip-tip-
|
|
108
|
-
var(--spectrum-tooltip-tip-
|
|
109
|
-
)
|
|
130
|
+
)}:host([dir=rtl]) .spectrum-Tooltip--end #tip,:host([dir=rtl]) .spectrum-Tooltip--end-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--end-top #tip{clip-path:polygon(calc(0% - var(
|
|
131
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
132
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
133
|
+
)) 0,calc(0% - var(
|
|
134
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
135
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
136
|
+
)) 100%,var(
|
|
137
|
+
--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
|
|
138
|
+
) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(
|
|
139
|
+
--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)
|
|
140
|
+
) 50%,calc(100% + var(
|
|
141
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
142
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
143
|
+
)) 100%,calc(100% + var(
|
|
144
|
+
--mod-tooltip-tip-antialiasing-inset,
|
|
145
|
+
var(--spectrum-tooltip-tip-antialiasing-inset)
|
|
146
|
+
)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(
|
|
147
|
+
--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)
|
|
148
|
+
);flex-shrink:0;inline-size:var(
|
|
149
|
+
--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)
|
|
150
|
+
);margin-block-start:var(
|
|
110
151
|
--mod-tooltip-icon-spacing-block-start,var(--spectrum-tooltip-icon-spacing-block-start)
|
|
111
152
|
);margin-inline-end:var(
|
|
112
153
|
--mod-tooltip-icon-spacing-inline-end,var(--spectrum-tooltip-icon-spacing-inline-end)
|
|
@@ -116,22 +157,22 @@ var(--spectrum-tooltip-icon-spacing-inline-start)
|
|
|
116
157
|
) - var(
|
|
117
158
|
--mod-tooltip-spacing-inline,
|
|
118
159
|
var(--spectrum-tooltip-spacing-inline)
|
|
119
|
-
))
|
|
160
|
+
))}#label{line-height:var(
|
|
120
161
|
--mod-tooltip-line-height,var(--spectrum-tooltip-line-height)
|
|
121
162
|
);margin-block-end:var(
|
|
122
163
|
--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
|
|
123
164
|
);margin-block-start:var(
|
|
124
165
|
--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
|
|
125
|
-
)}
|
|
166
|
+
)}.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
167
|
--mod-tooltip-tip-block-size,
|
|
127
168
|
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])
|
|
169
|
+
) + 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
170
|
--mod-tooltip-tip-block-size,
|
|
130
171
|
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])
|
|
172
|
+
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--right-bottom,.spectrum-Tooltip--right-top,:host([placement*=right]){margin-left:calc(var(
|
|
132
173
|
--mod-tooltip-tip-block-size,
|
|
133
174
|
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])
|
|
175
|
+
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--left-bottom,.spectrum-Tooltip--left-top,:host([placement*=left]){margin-right:calc(var(
|
|
135
176
|
--mod-tooltip-tip-block-size,
|
|
136
177
|
var(--spectrum-tooltip-tip-block-size)
|
|
137
178
|
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}.spectrum-Tooltip--start,.spectrum-Tooltip--start-bottom,.spectrum-Tooltip--start-top{margin-inline-end:calc(var(
|
|
@@ -140,7 +181,7 @@ var(--spectrum-tooltip-tip-block-size)
|
|
|
140
181
|
) + 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
182
|
--mod-tooltip-tip-block-size,
|
|
142
183
|
var(--spectrum-tooltip-tip-block-size)
|
|
143
|
-
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}
|
|
184
|
+
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host{--spectrum-tooltip-backgound-color-default-neutral:var(
|
|
144
185
|
--system-spectrum-tooltip-backgound-color-default-neutral
|
|
145
186
|
)}
|
|
146
187
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tooltip.css.ts"],
|
|
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#tooltip{--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 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]) #tooltip{opacity:1;pointer-events:auto;transition-delay:0s;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]) #tooltip{--spectrum-overlay-animation-distance:6px;transform:translateY(var(--spectrum-overlay-animation-distance))}:host([open]) #tooltip,:host([open]) .spectrum-Tooltip--top-end,:host([open]) .spectrum-Tooltip--top-left,:host([open]) .spectrum-Tooltip--top-right,:host([open]) .spectrum-Tooltip--top-start,:host([placement*=top][open]) #tooltip{--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]) #tooltip{--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]) #tooltip{--spectrum-overlay-animation-distance:6px;transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}#tooltip{--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-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--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){#tooltip{border:1px solid #0000}#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}}#tooltip{-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)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(\n--mod-tooltip-cjk-line-height,var(--spectrum-tooltip-cjk-line-height)\n)}#tooltip{cursor:default;-webkit-user-select:none;user-select:none}#tooltip p{margin:0}:host([variant=info]) #tooltip{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]) #tooltip{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]) #tooltip{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]) #tooltip #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]) #tooltip #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]) #tooltip #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]) #tooltip #tip{top:100%}.spectrum-Tooltip--bottom-end #tip,.spectrum-Tooltip--bottom-left #tip,.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--bottom-start #tip,:host([placement*=bottom]) #tooltip #tip{bottom:100%;clip-path:polygon(50% 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]) #tooltip #tip,:host([placement*=right]) #tooltip #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]) #tooltip #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]) #tooltip #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)}#tooltip,.spectrum-Tooltip--top-end,.spectrum-Tooltip--top-left,.spectrum-Tooltip--top-right,.spectrum-Tooltip--top-start,:host([placement*=top]) #tooltip{margin-bottom:calc(var(\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]) #tooltip{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]) #tooltip{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]) #tooltip{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)))}#tooltip{--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;
|
|
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 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;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-cjk-line-height-100);--spectrum-tooltip-font-weight:var(--spectrum-regular-font-weight);--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-tip-square-size:var(--spectrum-tooltip-tip-inline-size);--spectrum-tooltip-tip-height-percentage:50%;--spectrum-tooltip-tip-antialiasing-inset:0.5px;--spectrum-tooltip-pointer-corner-spacing:var(\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 #0000}#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);inline-size:auto;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;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);block-size:var(\n--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)\n);clip-path:polygon(0 calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)),50% var(\n--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)\n),100% calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)));inline-size:var(\n--mod-tooltip-tip-square-size,var(--spectrum-tooltip-tip-square-size)\n);left:50%;position:absolute;top:100%;transform:translateX(-50%)}: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% calc(100% - var(\n--mod-tooltip-tip-height-percentage,\nvar(--spectrum-tooltip-tip-height-percentage)\n)),0 calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)),100% calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)));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{top:50%;transform:translateY(-50%)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip{top:auto;transform:none}.spectrum-Tooltip--end #tip,.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--end-top #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--right-top #tip,:host([placement*=right]) #tip{clip-path:polygon(calc(100% - var(\n--mod-tooltip-tip-height-percentage,\nvar(--spectrum-tooltip-tip-height-percentage)\n)) 50%,calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 100%,calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 0);left:auto;right:100%}.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--left-top #tip,.spectrum-Tooltip--start #tip,.spectrum-Tooltip--start-bottom #tip,.spectrum-Tooltip--start-top #tip,:host([placement*=left]) #tip{clip-path:polygon(calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 0,calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 100%,var(\n--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)\n) 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(calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 0,calc(0% - var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 100%,var(\n--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)\n) 50%);left:100%;right:auto}:host([dir=rtl]) .spectrum-Tooltip--start #tip,:host([dir=rtl]) .spectrum-Tooltip--start-bottom #tip,:host([dir=rtl]) .spectrum-Tooltip--start-top #tip{clip-path:polygon(var(\n--mod-tooltip-tip-height-percentage,var(--spectrum-tooltip-tip-height-percentage)\n) 50%,calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 100%,calc(100% + var(\n--mod-tooltip-tip-antialiasing-inset,\nvar(--spectrum-tooltip-tip-antialiasing-inset)\n)) 0);left:auto;right:100%}::slotted([slot=icon]){align-self:flex-start;block-size:var(\n--mod-tooltip-icon-height,var(--spectrum-tooltip-icon-height)\n);flex-shrink:0;inline-size:var(\n--mod-tooltip-icon-width,var(--spectrum-tooltip-icon-width)\n);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))}#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{--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;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;AAyLf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|