@spectrum-web-components/tooltip 0.11.16-overlay.8 → 0.11.16
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 +374 -0
- package/package.json +4 -4
- package/src/Tooltip.d.ts +30 -7
- package/src/Tooltip.dev.js +163 -38
- package/src/Tooltip.dev.js.map +3 -3
- package/src/Tooltip.js +5 -20
- package/src/Tooltip.js.map +3 -3
- package/src/spectrum-config.js +17 -120
- package/src/spectrum-tooltip.css.dev.js +19 -19
- package/src/spectrum-tooltip.css.dev.js.map +1 -1
- package/src/spectrum-tooltip.css.js +19 -19
- package/src/spectrum-tooltip.css.js.map +1 -1
- package/src/tooltip.css.dev.js +20 -20
- package/src/tooltip.css.dev.js.map +1 -1
- package/src/tooltip.css.js +20 -20
- package/src/tooltip.css.js.map +1 -1
- package/stories/tooltip.stories.js +15 -12
- package/stories/tooltip.stories.js.map +2 -2
- package/test/tooltip.test.js +54 -12
- package/test/tooltip.test.js.map +2 -2
package/src/Tooltip.dev.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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,
|
|
6
|
-
"names": []
|
|
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 type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\nexport class TooltipProxy extends HTMLElement {\n disconnectedCallback(): void {\n this.dispatchEvent(new Event('disconnected'));\n }\n}\n\ncustomElements.define('tooltip-proxy', TooltipProxy);\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n public static 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 @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": ["event"]
|
|
7
7
|
}
|
package/src/Tooltip.js
CHANGED
|
@@ -1,21 +1,6 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</span>
|
|
7
|
-
`;return this.selfManaged?o`
|
|
8
|
-
<sp-overlay
|
|
9
|
-
?open=${this.open}
|
|
10
|
-
offset=${this.offset}
|
|
11
|
-
type="hint"
|
|
12
|
-
.placement=${this.placement}
|
|
13
|
-
.triggerElement=${this.parentElement}
|
|
14
|
-
.triggerInteraction=${"hover"}
|
|
15
|
-
@sp-opened=${this.handleOpenOverlay}
|
|
16
|
-
@sp-closed=${this.handleCloseOverlay}
|
|
17
|
-
>
|
|
18
|
-
${e}
|
|
19
|
-
</sp-overlay>
|
|
20
|
-
`:e}}Tooltip.instanceCount=0,n([i({type:Boolean,attribute:"self-managed"})],Tooltip.prototype,"selfManaged",2),n([i({type:Number,reflect:!0})],Tooltip.prototype,"offset",2),n([i({type:Boolean,reflect:!0})],Tooltip.prototype,"open",2),n([i({reflect:!0})],Tooltip.prototype,"placement",2),n([m("#tip")],Tooltip.prototype,"tipElement",2),n([i({type:String})],Tooltip.prototype,"variant",1);
|
|
1
|
+
"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(n,o,e,i)=>{for(var t=i>1?void 0:i?v(o,e):o,s=n.length-1,l;s>=0;s--)(l=n[s])&&(t=(i?l(o,e,t):l(t))||t);return i&&t&&d(o,e,t),t};import{html as c,SpectrumElement as h}from"@spectrum-web-components/base";import{property as a,query as y}from"@spectrum-web-components/base/src/decorators.js";import{openOverlay as u}from"@spectrum-web-components/overlay/src/loader.js";import m from"./tooltip.css.js";export class TooltipProxy extends HTMLElement{disconnectedCallback(){this.dispatchEvent(new Event("disconnected"))}}customElements.define("tooltip-proxy",TooltipProxy);const p=class extends h{constructor(){super();this._tooltipId=`sp-tooltip-describedby-helper-${p.instanceCount++}`;this.selfManaged=!1;this.offset=6;this.hadTooltipId=!1;this.open=!1;this.placement="top";this._variant="";this.abortOverlay=()=>{};this.openOverlay=()=>{const e=this.parentElement,i=new Promise(t=>{this.abortOverlay=t});this.closeOverlayCallback=u(e,"hover",this,{abortPromise:i,offset:this.offset,placement:this.placement})};this.closeOverlay=async e=>{if(e&&e.type==="pointerleave"&&e.relatedTarget===this){this.addEventListener("pointerleave",t=>{t.relatedTarget!==this.parentElement&&this.closeOverlay(t)},{once:!0});return}this.abortOverlay&&this.abortOverlay(!0),this.closeOverlayCallback&&((await this.closeOverlayCallback)(),delete this.closeOverlayCallback)};this.addEventListener("sp-overlay-query",this.onOverlayQuery)}static get styles(){return[m]}get variant(){return this._variant}set variant(e){if(e!==this.variant){if(["info","positive","negative"].includes(e)){this.setAttribute("variant",e),this._variant=e;return}this.removeAttribute("variant"),this._variant=""}}onOverlayQuery(e){!e.target||e.target!==this||(e.detail.overlayContentTipElement=this.tipElement)}generateProxy(){this._proxy||(this._proxy=document.createElement("tooltip-proxy"),this._proxy.id=this._tooltipId,this._proxy.hidden=!0,this._proxy.slot="hidden-tooltip-content",this._proxy.setAttribute("role","tooltip"),this._proxy.addEventListener("disconnected",this.closeOverlay))}overlayWillOpenCallback({trigger:e}){this.setAttribute("aria-hidden","true"),this.generateProxy(),this._proxy.textContent=this.textContent;const i=e.getAttribute("aria-describedby")||"";this.hadTooltipId=i.search(this._tooltipId)>-1,this.insertAdjacentElement("beforebegin",this._proxy),!this.hadTooltipId&&(i?e.setAttribute("aria-describedby",`${i} ${this._tooltipId}`):e.setAttribute("aria-describedby",`${this._tooltipId}`))}overlayOpenCancelledCallback({trigger:e}){this.overlayCloseCallback({trigger:e})}overlayCloseCallback({trigger:e}){let t=(e.getAttribute("aria-describedby")||"").split(/\s+/);this.hadTooltipId||(t=t.filter(s=>s!==this._tooltipId)),t.length?e.setAttribute("aria-describedby",t.join(" ")):e.removeAttribute("aria-describedby"),this.removeAttribute("aria-hidden"),this.removeProxy()}removeProxy(){this._proxy.remove()}manageTooltip(){const e=this.parentElement;this.selfManaged?(this.slot&&(this.previousSlot=this.slot),this.slot="self-managed-tooltip",e.addEventListener("pointerenter",this.openOverlay),e.addEventListener("focusin",this.openOverlay),e.addEventListener("pointerleave",this.closeOverlay),e.addEventListener("focusout",this.closeOverlay)):(this.previousSlot?this.slot=this.previousSlot:this.slot==="self-managed-tooltip"&&this.removeAttribute("slot"),e.removeEventListener("pointerenter",this.openOverlay),e.removeEventListener("focusin",this.openOverlay),e.removeEventListener("pointerleave",this.closeOverlay),e.removeEventListener("focusout",this.closeOverlay))}render(){return c`
|
|
2
|
+
<slot name="icon"></slot>
|
|
3
|
+
<span id="label"><slot></slot></span>
|
|
4
|
+
<span id="tip"></span>
|
|
5
|
+
`}async update(e){e.has("open")&&this.selfManaged&&(this.open?this.openOverlay():this.closeOverlay()),this.generateProxy(),super.update(e)}updated(e){super.updated(e),e.has("selfManaged")&&this.manageTooltip()}};export let Tooltip=p;Tooltip.instanceCount=0,r([a({type:Boolean,attribute:"self-managed"})],Tooltip.prototype,"selfManaged",2),r([a({type:Number,reflect:!0})],Tooltip.prototype,"offset",2),r([a({type:Boolean,reflect:!0})],Tooltip.prototype,"open",2),r([a({reflect:!0})],Tooltip.prototype,"placement",2),r([y("#tip")],Tooltip.prototype,"tipElement",2),r([a({type:String})],Tooltip.prototype,"variant",1);
|
|
21
6
|
//# sourceMappingURL=Tooltip.js.map
|
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 {
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "query", "tooltipStyles", "variant", "
|
|
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 type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\nexport class TooltipProxy extends HTMLElement {\n disconnectedCallback(): void {\n this.dispatchEvent(new Event('disconnected'));\n }\n}\n\ncustomElements.define('tooltip-proxy', TooltipProxy);\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n public static 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 @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", "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-line-height-cjk-100);--spectrum-tooltip-font-weight:var(--spectrum-font-weight-regular);--spectrum-tooltip-spacing-inline:var(
|
|
9
9
|
--spectrum-component-edge-to-text-75
|
|
@@ -27,7 +27,7 @@ const styles = css`
|
|
|
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
|
)
|
|
@@ -43,17 +43,17 @@ const styles = css`
|
|
|
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;width:auto;word-break:break-word}:host(:lang(ja))
|
|
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
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
|
)
|
|
@@ -65,19 +65,19 @@ const styles = css`
|
|
|
65
65
|
--mod-tooltip-tip-block-size,var(--spectrum-tooltip-tip-block-size)
|
|
66
66
|
);left:50%;position:absolute;top:100%;transform:translateX(-50%);width:var(
|
|
67
67
|
--mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
|
|
68
|
-
)}:host([variant=info]) #
|
|
68
|
+
)}:host([variant=info]) #tip{background-color:var(
|
|
69
69
|
--highcontrast-tooltip-background-color-informative,var(
|
|
70
70
|
--mod-tooltip-background-color-informative,var(--spectrum-tooltip-background-color-informative)
|
|
71
71
|
)
|
|
72
|
-
)}:host([variant=positive]) #
|
|
72
|
+
)}:host([variant=positive]) #tip{background-color:var(
|
|
73
73
|
--highcontrast-tooltip-background-color-positive,var(
|
|
74
74
|
--mod-tooltip-background-color-positive,var(--spectrum-tooltip-background-color-positive)
|
|
75
75
|
)
|
|
76
|
-
)}:host([variant=negative]) #
|
|
76
|
+
)}:host([variant=negative]) #tip{background-color:var(
|
|
77
77
|
--highcontrast-tooltip-background-color-negative,var(
|
|
78
78
|
--mod-tooltip-background-color-negative,var(--spectrum-tooltip-background-color-negative)
|
|
79
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]) #
|
|
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
81
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
82
82
|
)}.spectrum-Tooltip--bottom-right #tip,.spectrum-Tooltip--top-right #tip{left:auto;right:var(
|
|
83
83
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
@@ -89,14 +89,14 @@ const styles = css`
|
|
|
89
89
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
90
90
|
)}:host([dir=rtl]) .spectrum-Tooltip--bottom-end #tip,:host([dir=rtl]) .spectrum-Tooltip--top-end #tip{left:var(
|
|
91
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]) #
|
|
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
93
|
--mod-tooltip-tip-inline-size,var(--spectrum-tooltip-tip-inline-size)
|
|
94
94
|
);top:50%;transform:translateY(-50%);width:var(
|
|
95
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]) #
|
|
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
97
|
--mod-tooltip-tip-block-size,
|
|
98
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]) #
|
|
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
100
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
101
101
|
)}.spectrum-Tooltip--end-bottom #tip,.spectrum-Tooltip--left-bottom #tip,.spectrum-Tooltip--right-bottom #tip,.spectrum-Tooltip--start-bottom #tip{bottom:var(
|
|
102
102
|
--mod-tooltip-pointer-corner-spacing,var(--spectrum-tooltip-pointer-corner-spacing)
|
|
@@ -122,16 +122,16 @@ var(--spectrum-tooltip-spacing-inline)
|
|
|
122
122
|
--mod-tooltip-spacing-block-end,var(--spectrum-tooltip-spacing-block-end)
|
|
123
123
|
);margin-block-start:var(
|
|
124
124
|
--mod-tooltip-spacing-block-start,var(--spectrum-tooltip-spacing-block-start)
|
|
125
|
-
)}
|
|
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
126
|
--mod-tooltip-tip-block-size,
|
|
127
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])
|
|
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
129
|
--mod-tooltip-tip-block-size,
|
|
130
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])
|
|
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
132
|
--mod-tooltip-tip-block-size,
|
|
133
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])
|
|
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
135
|
--mod-tooltip-tip-block-size,
|
|
136
136
|
var(--spectrum-tooltip-tip-block-size)
|
|
137
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(
|
|
@@ -140,7 +140,7 @@ var(--spectrum-tooltip-tip-block-size)
|
|
|
140
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
141
|
--mod-tooltip-tip-block-size,
|
|
142
142
|
var(--spectrum-tooltip-tip-block-size)
|
|
143
|
-
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}
|
|
143
|
+
) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)))}:host{--spectrum-tooltip-backgound-color-default-neutral:var(
|
|
144
144
|
--system-spectrum-tooltip-backgound-color-default-neutral
|
|
145
145
|
)}
|
|
146
146
|
`;
|
|
@@ -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-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){#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;"],
|
|
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-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 #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);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{--spectrum-tooltip-backgound-color-default-neutral:var(\n--system-spectrum-tooltip-backgound-color-default-neutral\n)}\n`;\nexport default styles;"],
|
|
5
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;AAgJf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|