@spectrum-web-components/contextual-help 1.7.0 → 1.8.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/README.md +41 -16
- package/custom-elements.json +16 -0
- package/package.json +36 -35
- package/sp-contextual-help.d.ts +11 -0
- package/sp-contextual-help.dev.js.map +1 -1
- package/sp-contextual-help.js.map +1 -1
- package/src/ContextualHelp.d.ts +15 -0
- package/src/ContextualHelp.dev.js +6 -2
- package/src/ContextualHelp.dev.js.map +2 -2
- package/src/ContextualHelp.js +1 -1
- package/src/ContextualHelp.js.map +2 -2
- package/src/contextual-help-overrides.css.dev.js.map +1 -1
- package/src/contextual-help-overrides.css.js.map +1 -1
- package/src/contextual-help.css.dev.js.map +1 -1
- package/src/contextual-help.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-contextual-help.css.dev.js.map +1 -1
- package/src/spectrum-contextual-help.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An `<sp-contextual-help>` shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experience and can point users to more information elsewhere.
|
|
4
|
+
|
|
5
|
+
[View the design documentation for this component.](https://spectrum.adobe.com/page/contextual-help/)
|
|
4
6
|
|
|
5
7
|
### Usage
|
|
6
8
|
|
|
@@ -8,23 +10,41 @@ A `sp-contextual-help` shows a user extra information about the state of either
|
|
|
8
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/contextual-help)
|
|
9
11
|
[](https://stackblitz.com/edit/vitejs-vite-ly7a9m4p)
|
|
10
12
|
|
|
11
|
-
```
|
|
13
|
+
```bash
|
|
12
14
|
yarn add @spectrum-web-components/contextual-help
|
|
13
15
|
```
|
|
14
16
|
|
|
15
17
|
Import the side effectful registration of `<sp-contextual-help>` via:
|
|
16
18
|
|
|
17
|
-
```
|
|
19
|
+
```js
|
|
18
20
|
import '@spectrum-web-components/contextual-help/sp-contextual-help.js';
|
|
19
21
|
```
|
|
20
22
|
|
|
21
23
|
When looking to leverage the `ContextualHelp` base class as a type and/or for extension purposes, do so via:
|
|
22
24
|
|
|
23
|
-
```
|
|
25
|
+
```js
|
|
24
26
|
import { ContextualHelp } from '@spectrum-web-components/contextual-help';
|
|
25
27
|
```
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
### Anatomy
|
|
30
|
+
|
|
31
|
+
Contextual help is a wrapper that attaches a popover to an icon-only action button.
|
|
32
|
+
|
|
33
|
+
It consists of the following parts:
|
|
34
|
+
|
|
35
|
+
- **Heading**: assign the appropriate heading level to the `heading` slot to provide a title for the popover.
|
|
36
|
+
- **Content**: text can be displayed within the popover by using the default slot.
|
|
37
|
+
- **Link**: an optional `<sp-link>` can be assigned to the `link` slot per [standalone link guidance](https://spectrum.adobe.com/page/contextual-help/#When-to-use-a-standalone-link).
|
|
38
|
+
|
|
39
|
+
### Options
|
|
40
|
+
|
|
41
|
+
#### Variants
|
|
42
|
+
|
|
43
|
+
<sp-tabs selected="info" auto label="Variant Options">
|
|
44
|
+
<sp-tab value="info">Information</sp-tab>
|
|
45
|
+
<sp-tab-panel value="info">
|
|
46
|
+
|
|
47
|
+
The default variant is for in-line information using the "info" icon. Use the info icon for informative content: specific, brief, and contextual guidance. This is best for supplemental or nice-to-know information, in-line with a label or a component (if there is no label). The content should be [instructive](https://spectrum.adobe.com/page/voice-and-tone/#Tone-spectrum) in tone.
|
|
28
48
|
|
|
29
49
|
```html
|
|
30
50
|
<sp-contextual-help>
|
|
@@ -39,9 +59,11 @@ import { ContextualHelp } from '@spectrum-web-components/contextual-help';
|
|
|
39
59
|
</sp-contextual-help>
|
|
40
60
|
```
|
|
41
61
|
|
|
42
|
-
|
|
62
|
+
</sp-tab-panel>
|
|
63
|
+
<sp-tab value="help">Help</sp-tab>
|
|
64
|
+
<sp-tab-panel value="help">
|
|
43
65
|
|
|
44
|
-
Use `variant="help"` for helpful content: more detailed, in-depth guidance about a task, UI element, tool, or keyboard shortcuts. This may include an image, video, or link and should be helpful in tone.
|
|
66
|
+
Use `variant="help"` for helpful content: more detailed, in-depth guidance about a task, UI element, tool, or keyboard shortcuts. This may include an image, video, or link and should be [helpful](https://spectrum.adobe.com/page/voice-and-tone/#Tone-spectrum) in tone.
|
|
45
67
|
|
|
46
68
|
```html
|
|
47
69
|
<sp-contextual-help variant="help">
|
|
@@ -57,9 +79,12 @@ Use `variant="help"` for helpful content: more detailed, in-depth guidance about
|
|
|
57
79
|
</sp-contextual-help>
|
|
58
80
|
```
|
|
59
81
|
|
|
60
|
-
|
|
82
|
+
</sp-tab-panel>
|
|
83
|
+
</sp-tabs>
|
|
84
|
+
|
|
85
|
+
#### Placement
|
|
61
86
|
|
|
62
|
-
By default
|
|
87
|
+
By default an `<sp-contextual-help>` will render its popover at the `bottom-start` position. This can be customized using the `placement` attribute and supports [all the placement options](http://localhost:8000/components/overlay-trigger/#placement) an `overlay-trigger` component supports.
|
|
63
88
|
|
|
64
89
|
```html
|
|
65
90
|
<sp-contextual-help placement="top-start">
|
|
@@ -74,7 +99,7 @@ By default a `sp-contextual-help` will render its popover at the `bottom-start`
|
|
|
74
99
|
</sp-contextual-help>
|
|
75
100
|
```
|
|
76
101
|
|
|
77
|
-
|
|
102
|
+
#### Custom max width
|
|
78
103
|
|
|
79
104
|
Contextual help allows for a custom maximum width to be set using the `--mod-spectrum-contextual-help-popover-maximum-width` custom property.
|
|
80
105
|
|
|
@@ -90,14 +115,14 @@ Note: Maximum width should not be less than 100px.
|
|
|
90
115
|
</sp-contextual-help>
|
|
91
116
|
```
|
|
92
117
|
|
|
93
|
-
|
|
118
|
+
### Behaviors
|
|
94
119
|
|
|
95
|
-
|
|
120
|
+
`<sp-contextual-help>` does not fire any events of its own. You can listen, however, for the `sp-open` and `sp-closed` events which are fired when the popover opens or closes.
|
|
96
121
|
|
|
97
|
-
|
|
122
|
+
### Accessibility
|
|
98
123
|
|
|
99
|
-
Given that the trigger is an icon-only
|
|
100
|
-
By default, the
|
|
124
|
+
Given that the trigger is an icon-only `<sp-action-button>`, it is important to provide an accessible name for it, so that it can be properly announced by screen readers.
|
|
125
|
+
By default, the `<sp-contextual-help>` uses an `aria-label` property with either "Information" or "Help" as values, depending on the component's `variant`.
|
|
101
126
|
You can customize this using the `label` attribute.
|
|
102
127
|
|
|
103
128
|
When providing headings using the `heading` slot, make sure to provide actual heading elements such as `h1`, `h2`, `h3` ... or use the `role="heading"` attribute.
|
package/custom-elements.json
CHANGED
|
@@ -21,6 +21,14 @@
|
|
|
21
21
|
"kind": "javascript-module",
|
|
22
22
|
"path": "src/ContextualHelp.js",
|
|
23
23
|
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "variable",
|
|
26
|
+
"name": "DEFAULT_ARIA_LABELS",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "{\n help: 'Help',\n info: 'Information',\n}"
|
|
29
|
+
},
|
|
30
|
+
"default": "{\n help: 'Help',\n info: 'Information',\n}"
|
|
31
|
+
},
|
|
24
32
|
{
|
|
25
33
|
"kind": "class",
|
|
26
34
|
"description": "Spectrum Contextual help provides additional information about\nthe state of either an adjacent component or an entire view.",
|
|
@@ -222,6 +230,14 @@
|
|
|
222
230
|
}
|
|
223
231
|
],
|
|
224
232
|
"exports": [
|
|
233
|
+
{
|
|
234
|
+
"kind": "js",
|
|
235
|
+
"name": "DEFAULT_ARIA_LABELS",
|
|
236
|
+
"declaration": {
|
|
237
|
+
"name": "DEFAULT_ARIA_LABELS",
|
|
238
|
+
"module": "src/ContextualHelp.js"
|
|
239
|
+
}
|
|
240
|
+
},
|
|
225
241
|
{
|
|
226
242
|
"kind": "js",
|
|
227
243
|
"name": "ContextualHelp",
|
package/package.json
CHANGED
|
@@ -1,48 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/contextual-help",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"publishConfig": {
|
|
5
|
-
"access": "public"
|
|
6
|
-
},
|
|
3
|
+
"version": "1.8.0",
|
|
7
4
|
"description": "Web component implementation of a Spectrum design ContextualHelp",
|
|
8
5
|
"license": "Apache-2.0",
|
|
6
|
+
"author": "Adobe",
|
|
7
|
+
"homepage": "https://adobe.github.io/spectrum-web-components/components/contextual-help",
|
|
9
8
|
"repository": {
|
|
10
9
|
"type": "git",
|
|
11
10
|
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
11
|
"directory": "packages/contextual-help"
|
|
13
12
|
},
|
|
14
|
-
"author": "Adobe",
|
|
15
|
-
"homepage": "https://adobe.github.io/spectrum-web-components/components/contextual-help",
|
|
16
13
|
"bugs": {
|
|
17
14
|
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
15
|
},
|
|
19
|
-
"main": "./src/index.js",
|
|
20
|
-
"module": "./src/index.js",
|
|
21
16
|
"type": "module",
|
|
22
17
|
"exports": {
|
|
23
18
|
".": {
|
|
24
|
-
"
|
|
25
|
-
"
|
|
19
|
+
"default": "./src/index.js",
|
|
20
|
+
"development": "./src/index.dev.js"
|
|
26
21
|
},
|
|
27
22
|
"./package.json": "./package.json",
|
|
23
|
+
"./sp-contextual-help.js": {
|
|
24
|
+
"default": "./sp-contextual-help.js",
|
|
25
|
+
"development": "./sp-contextual-help.dev.js"
|
|
26
|
+
},
|
|
28
27
|
"./src/ContextualHelp.js": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
28
|
+
"default": "./src/ContextualHelp.js",
|
|
29
|
+
"development": "./src/ContextualHelp.dev.js"
|
|
31
30
|
},
|
|
32
31
|
"./src/contextual-help-overrides.css.js": "./src/contextual-help-overrides.css.js",
|
|
33
32
|
"./src/contextual-help.css.js": "./src/contextual-help.css.js",
|
|
34
33
|
"./src/index.js": {
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
},
|
|
38
|
-
"./sp-contextual-help.js": {
|
|
39
|
-
"development": "./sp-contextual-help.dev.js",
|
|
40
|
-
"default": "./sp-contextual-help.js"
|
|
34
|
+
"default": "./src/index.js",
|
|
35
|
+
"development": "./src/index.dev.js"
|
|
41
36
|
}
|
|
42
37
|
},
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
},
|
|
38
|
+
"main": "./src/index.js",
|
|
39
|
+
"module": "./src/index.js",
|
|
46
40
|
"files": [
|
|
47
41
|
"**/*.d.ts",
|
|
48
42
|
"**/*.js",
|
|
@@ -51,6 +45,24 @@
|
|
|
51
45
|
"!stories/",
|
|
52
46
|
"!test/"
|
|
53
47
|
],
|
|
48
|
+
"scripts": {
|
|
49
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
50
|
+
},
|
|
51
|
+
"sideEffects": [
|
|
52
|
+
"./sp-*.js",
|
|
53
|
+
"./**/*.dev.js",
|
|
54
|
+
"./**/*.dev.js"
|
|
55
|
+
],
|
|
56
|
+
"types": "./src/index.d.ts",
|
|
57
|
+
"dependencies": {
|
|
58
|
+
"@spectrum-web-components/action-button": "1.8.0",
|
|
59
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
60
|
+
"@spectrum-web-components/dialog": "1.8.0",
|
|
61
|
+
"@spectrum-web-components/icons-workflow": "1.8.0",
|
|
62
|
+
"@spectrum-web-components/overlay": "1.8.0",
|
|
63
|
+
"@spectrum-web-components/popover": "1.8.0",
|
|
64
|
+
"@spectrum-web-components/reactive-controllers": "1.8.0"
|
|
65
|
+
},
|
|
54
66
|
"keywords": [
|
|
55
67
|
"design-system",
|
|
56
68
|
"spectrum",
|
|
@@ -63,19 +75,8 @@
|
|
|
63
75
|
"component",
|
|
64
76
|
"css"
|
|
65
77
|
],
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"@spectrum-web-components/base": "1.7.0",
|
|
69
|
-
"@spectrum-web-components/dialog": "1.7.0",
|
|
70
|
-
"@spectrum-web-components/icons-workflow": "1.7.0",
|
|
71
|
-
"@spectrum-web-components/overlay": "1.7.0",
|
|
72
|
-
"@spectrum-web-components/popover": "1.7.0"
|
|
78
|
+
"publishConfig": {
|
|
79
|
+
"access": "public"
|
|
73
80
|
},
|
|
74
|
-
"
|
|
75
|
-
"customElements": "custom-elements.json",
|
|
76
|
-
"sideEffects": [
|
|
77
|
-
"./sp-*.js",
|
|
78
|
-
"./**/*.dev.js",
|
|
79
|
-
"./**/*.dev.js"
|
|
80
|
-
]
|
|
81
|
+
"customElements": "custom-elements.json"
|
|
81
82
|
}
|
package/sp-contextual-help.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { ContextualHelp } from './src/ContextualHelp.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-contextual-help.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { ContextualHelp } from './src/ContextualHelp.dev.js'\n\ncustomElements.define('sp-contextual-help', ContextualHelp);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-contextual-help': ContextualHelp;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,sBAAsB;AAE/B,eAAe,OAAO,sBAAsB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-contextual-help.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { ContextualHelp } from './src/ContextualHelp.js';\n\ncustomElements.define('sp-contextual-help', ContextualHelp);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-contextual-help': ContextualHelp;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,kBAAAA,MAAsB,0BAE/B,eAAe,OAAO,qBAAsBA,CAAc",
|
|
6
6
|
"names": ["ContextualHelp"]
|
|
7
7
|
}
|
package/src/ContextualHelp.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
3
14
|
import '@spectrum-web-components/overlay/sp-overlay.js';
|
|
@@ -5,6 +16,10 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help-outline.js';
|
|
|
5
16
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-info-outline.js';
|
|
6
17
|
import type { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
|
|
7
18
|
import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
|
|
19
|
+
export declare const DEFAULT_ARIA_LABELS: {
|
|
20
|
+
readonly help: "Help";
|
|
21
|
+
readonly info: "Information";
|
|
22
|
+
};
|
|
8
23
|
/**
|
|
9
24
|
* Spectrum Contextual help provides additional information about
|
|
10
25
|
* the state of either an adjacent component or an entire view.
|
|
@@ -28,6 +28,10 @@ import {
|
|
|
28
28
|
MatchMediaController
|
|
29
29
|
} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
|
|
30
30
|
import styles from "./contextual-help.css.js";
|
|
31
|
+
export const DEFAULT_ARIA_LABELS = {
|
|
32
|
+
help: "Help",
|
|
33
|
+
info: "Information"
|
|
34
|
+
};
|
|
31
35
|
export class ContextualHelp extends SpectrumElement {
|
|
32
36
|
constructor() {
|
|
33
37
|
super(...arguments);
|
|
@@ -45,9 +49,9 @@ export class ContextualHelp extends SpectrumElement {
|
|
|
45
49
|
return this.label;
|
|
46
50
|
} else {
|
|
47
51
|
if (this.variant === "help") {
|
|
48
|
-
return
|
|
52
|
+
return DEFAULT_ARIA_LABELS.help;
|
|
49
53
|
}
|
|
50
|
-
return
|
|
54
|
+
return DEFAULT_ARIA_LABELS.info;
|
|
51
55
|
}
|
|
52
56
|
}
|
|
53
57
|
renderOverlayContent() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ContextualHelp.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B;AAAA,EACI;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,OAAO,YAAY;
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n render,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-help-outline.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info-outline.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport type { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport {\n removeSlottableRequest,\n SlottableRequestEvent,\n} from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport styles from './contextual-help.css.js';\n\nexport const DEFAULT_ARIA_LABELS = {\n help: 'Help',\n info: 'Information',\n} as const;\n\n/**\n * Spectrum Contextual help provides additional information about\n * the state of either an adjacent component or an entire view.\n * @element sp-contextual-help\n *\n * @slot heading - content to display as the heading of the popover\n * @slot Text content to display in the popover\n * @slot link - link to additional informations\n */\nexport class ContextualHelp extends SpectrumElement {\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Provides an accessible name for the action button trigger.\n * @param {String} label\n */\n @property()\n public label?: string;\n\n /**\n * The `variant` property applies specific styling on the action button trigger.\n * @param {String} variant\n */\n @property()\n public variant: 'info' | 'help' = 'info';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement = 'bottom-start';\n\n /**\n * The `offset` property accepts either a single number, to\n * define the offset of the Popover along the main axis from\n * the action button, or 2-tuple, to define the offset along the\n * main axis and the cross axis.\n */\n @property({ type: Number })\n public offset: number | [number, number] = 0;\n\n @property({ type: Boolean })\n open = false;\n\n public get buttonAriaLabel(): string {\n if (this.label) {\n return this.label;\n } else {\n if (this.variant === 'help') {\n return DEFAULT_ARIA_LABELS.help;\n }\n return DEFAULT_ARIA_LABELS.info;\n }\n }\n\n private renderOverlayContent(): TemplateResult {\n if (this.isMobile.matches) {\n import('@spectrum-web-components/dialog/sp-dialog-base.js');\n import('@spectrum-web-components/dialog/sp-dialog.js');\n\n return html`\n <sp-dialog-base underlay>\n <sp-dialog dismissable size=\"s\">\n <slot name=\"heading\" slot=\"heading\"></slot>\n <slot></slot>\n <slot name=\"link\"></slot>\n </sp-dialog>\n </sp-dialog-base>\n `;\n } else {\n import('@spectrum-web-components/popover/sp-popover.js');\n\n return html`\n <sp-popover class=\"popover\">\n <section>\n <slot name=\"heading\"></slot>\n <slot></slot>\n <slot name=\"link\"></slot>\n </section>\n </sp-popover>\n `;\n }\n }\n\n private handleSlottableRequest(event: SlottableRequestEvent): void {\n event.stopPropagation();\n\n if (event.data === removeSlottableRequest) {\n this.open = false;\n render(undefined, event.target as HTMLElement);\n return;\n }\n\n this.open = true;\n const template = this.renderOverlayContent();\n render(template, event.target as HTMLElement);\n }\n\n protected override render(): TemplateResult {\n /* c8 ignore next 3 */\n const actualPlacement = this.isMobile.matches\n ? undefined\n : this.placement;\n\n return html`\n <sp-action-button\n quiet\n size=\"s\"\n id=\"trigger\"\n aria-label=${this.buttonAriaLabel}\n .active=${this.open}\n >\n ${this.variant === 'help'\n ? html`\n <sp-icon-help-outline\n slot=\"icon\"\n ></sp-icon-help-outline>\n `\n : html`\n <sp-icon-info-outline\n slot=\"icon\"\n ></sp-icon-info-outline>\n `}\n </sp-action-button>\n <sp-overlay\n trigger=\"trigger@click\"\n placement=${ifDefined(actualPlacement)}\n type=${this.isMobile.matches ? 'modal' : 'auto'}\n receives-focus=\"true\"\n .offset=${this.offset}\n @slottable-request=${this.handleSlottableRequest}\n ?open=${this.open}\n ></sp-overlay>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B;AAAA,EACI;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,OAAO,YAAY;AAEZ,aAAM,sBAAsB;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM;AACV;AAWO,aAAM,uBAAuB,gBAAgB;AAAA,EAA7C;AAAA;AACH,SAAO,WAAW,IAAI,qBAAqB,MAAM,SAAS;AAkB1D,SAAO,UAA2B;AAOlC,SAAO,YAAwB;AAS/B,SAAO,SAAoC;AAG3C,gBAAO;AAAA;AAAA,EAnCP,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAmCA,IAAW,kBAA0B;AACjC,QAAI,KAAK,OAAO;AACZ,aAAO,KAAK;AAAA,IAChB,OAAO;AACH,UAAI,KAAK,YAAY,QAAQ;AACzB,eAAO,oBAAoB;AAAA,MAC/B;AACA,aAAO,oBAAoB;AAAA,IAC/B;AAAA,EACJ;AAAA,EAEQ,uBAAuC;AAC3C,QAAI,KAAK,SAAS,SAAS;AACvB,aAAO,mDAAmD;AAC1D,aAAO,8CAA8C;AAErD,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASX,OAAO;AACH,aAAO,gDAAgD;AAEvD,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASX;AAAA,EACJ;AAAA,EAEQ,uBAAuB,OAAoC;AAC/D,UAAM,gBAAgB;AAEtB,QAAI,MAAM,SAAS,wBAAwB;AACvC,WAAK,OAAO;AACZ,aAAO,QAAW,MAAM,MAAqB;AAC7C;AAAA,IACJ;AAEA,SAAK,OAAO;AACZ,UAAM,WAAW,KAAK,qBAAqB;AAC3C,WAAO,UAAU,MAAM,MAAqB;AAAA,EAChD;AAAA,EAEmB,SAAyB;AAExC,UAAM,kBAAkB,KAAK,SAAS,UAChC,SACA,KAAK;AAEX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKc,KAAK,eAAe;AAAA,0BACvB,KAAK,IAAI;AAAA;AAAA,kBAEjB,KAAK,YAAY,SACb;AAAA;AAAA;AAAA;AAAA,0BAKA;AAAA;AAAA;AAAA;AAAA,uBAIC;AAAA;AAAA;AAAA;AAAA,4BAIK,UAAU,eAAe,CAAC;AAAA,uBAC/B,KAAK,SAAS,UAAU,UAAU,MAAM;AAAA;AAAA,0BAErC,KAAK,MAAM;AAAA,qCACA,KAAK,sBAAsB;AAAA,wBACxC,KAAK,IAAI;AAAA;AAAA;AAAA,EAG7B;AACJ;AAvHW;AAAA,EADN,SAAS;AAAA,GAXD,eAYF;AAOA;AAAA,EADN,SAAS;AAAA,GAlBD,eAmBF;AAOA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAzBlB,eA0BF;AASA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlCjB,eAmCF;AAGP;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GArClB,eAsCT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ContextualHelp.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(n,s,e,o)=>{for(var t=o>1?void 0:o?u(s,e):s,a=n.length-1,p;a>=0;a--)(p=n[a])&&(t=(o?p(s,e,t):p(t))||t);return o&&t&&c(s,e,t),t};import{html as r,render as m,SpectrumElement as b}from"@spectrum-web-components/base";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/overlay/sp-overlay.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-help-outline.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-info-outline.js";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as h}from"@spectrum-web-components/base/src/directives.js";import{removeSlottableRequest as f}from"@spectrum-web-components/overlay/src/slottable-request-event.js";import{IS_MOBILE as d,MatchMediaController as g}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import v from"./contextual-help.css.js";export const DEFAULT_ARIA_LABELS={help:"Help",info:"Information"};export class ContextualHelp extends b{constructor(){super(...arguments);this.isMobile=new g(this,d);this.variant="info";this.placement="bottom-start";this.offset=0;this.open=!1}static get styles(){return[v]}get buttonAriaLabel(){return this.label?this.label:this.variant==="help"?DEFAULT_ARIA_LABELS.help:DEFAULT_ARIA_LABELS.info}renderOverlayContent(){return this.isMobile.matches?(import("@spectrum-web-components/dialog/sp-dialog-base.js"),import("@spectrum-web-components/dialog/sp-dialog.js"),r`
|
|
2
2
|
<sp-dialog-base underlay>
|
|
3
3
|
<sp-dialog dismissable size="s">
|
|
4
4
|
<slot name="heading" slot="heading"></slot>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ContextualHelp.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "qNAWA,OAEI,QAAAA,EACA,UAAAC,EACA,mBAAAC,MAEG,gCACP,MAAO,6DACP,MAAO,iDACP,MAAO,wEACP,MAAO,wEACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,kDAE1B,OACI,0BAAAC,MAEG,kEACP,OACI,aAAAC,EACA,wBAAAC,MACG,kEACP,OAAOC,MAAY,
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n render,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-help-outline.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info-outline.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport type { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport {\n removeSlottableRequest,\n SlottableRequestEvent,\n} from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport styles from './contextual-help.css.js';\n\nexport const DEFAULT_ARIA_LABELS = {\n help: 'Help',\n info: 'Information',\n} as const;\n\n/**\n * Spectrum Contextual help provides additional information about\n * the state of either an adjacent component or an entire view.\n * @element sp-contextual-help\n *\n * @slot heading - content to display as the heading of the popover\n * @slot Text content to display in the popover\n * @slot link - link to additional informations\n */\nexport class ContextualHelp extends SpectrumElement {\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Provides an accessible name for the action button trigger.\n * @param {String} label\n */\n @property()\n public label?: string;\n\n /**\n * The `variant` property applies specific styling on the action button trigger.\n * @param {String} variant\n */\n @property()\n public variant: 'info' | 'help' = 'info';\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n @property({ reflect: true })\n public placement?: Placement = 'bottom-start';\n\n /**\n * The `offset` property accepts either a single number, to\n * define the offset of the Popover along the main axis from\n * the action button, or 2-tuple, to define the offset along the\n * main axis and the cross axis.\n */\n @property({ type: Number })\n public offset: number | [number, number] = 0;\n\n @property({ type: Boolean })\n open = false;\n\n public get buttonAriaLabel(): string {\n if (this.label) {\n return this.label;\n } else {\n if (this.variant === 'help') {\n return DEFAULT_ARIA_LABELS.help;\n }\n return DEFAULT_ARIA_LABELS.info;\n }\n }\n\n private renderOverlayContent(): TemplateResult {\n if (this.isMobile.matches) {\n import('@spectrum-web-components/dialog/sp-dialog-base.js');\n import('@spectrum-web-components/dialog/sp-dialog.js');\n\n return html`\n <sp-dialog-base underlay>\n <sp-dialog dismissable size=\"s\">\n <slot name=\"heading\" slot=\"heading\"></slot>\n <slot></slot>\n <slot name=\"link\"></slot>\n </sp-dialog>\n </sp-dialog-base>\n `;\n } else {\n import('@spectrum-web-components/popover/sp-popover.js');\n\n return html`\n <sp-popover class=\"popover\">\n <section>\n <slot name=\"heading\"></slot>\n <slot></slot>\n <slot name=\"link\"></slot>\n </section>\n </sp-popover>\n `;\n }\n }\n\n private handleSlottableRequest(event: SlottableRequestEvent): void {\n event.stopPropagation();\n\n if (event.data === removeSlottableRequest) {\n this.open = false;\n render(undefined, event.target as HTMLElement);\n return;\n }\n\n this.open = true;\n const template = this.renderOverlayContent();\n render(template, event.target as HTMLElement);\n }\n\n protected override render(): TemplateResult {\n /* c8 ignore next 3 */\n const actualPlacement = this.isMobile.matches\n ? undefined\n : this.placement;\n\n return html`\n <sp-action-button\n quiet\n size=\"s\"\n id=\"trigger\"\n aria-label=${this.buttonAriaLabel}\n .active=${this.open}\n >\n ${this.variant === 'help'\n ? html`\n <sp-icon-help-outline\n slot=\"icon\"\n ></sp-icon-help-outline>\n `\n : html`\n <sp-icon-info-outline\n slot=\"icon\"\n ></sp-icon-info-outline>\n `}\n </sp-action-button>\n <sp-overlay\n trigger=\"trigger@click\"\n placement=${ifDefined(actualPlacement)}\n type=${this.isMobile.matches ? 'modal' : 'auto'}\n receives-focus=\"true\"\n .offset=${this.offset}\n @slottable-request=${this.handleSlottableRequest}\n ?open=${this.open}\n ></sp-overlay>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAEI,QAAAA,EACA,UAAAC,EACA,mBAAAC,MAEG,gCACP,MAAO,6DACP,MAAO,iDACP,MAAO,wEACP,MAAO,wEACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,kDAE1B,OACI,0BAAAC,MAEG,kEACP,OACI,aAAAC,EACA,wBAAAC,MACG,kEACP,OAAOC,MAAY,2BAEZ,aAAM,oBAAsB,CAC/B,KAAM,OACN,KAAM,aACV,EAWO,aAAM,uBAAuBN,CAAgB,CAA7C,kCACH,KAAO,SAAW,IAAIK,EAAqB,KAAMD,CAAS,EAkB1D,KAAO,QAA2B,OAOlC,KAAO,UAAwB,eAS/B,KAAO,OAAoC,EAG3C,UAAO,GAnCP,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAmCA,IAAW,iBAA0B,CACjC,OAAI,KAAK,MACE,KAAK,MAER,KAAK,UAAY,OACV,oBAAoB,KAExB,oBAAoB,IAEnC,CAEQ,sBAAuC,CAC3C,OAAI,KAAK,SAAS,SACd,OAAO,mDAAmD,EAC1D,OAAO,8CAA8C,EAE9CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAUP,OAAO,gDAAgD,EAEhDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUf,CAEQ,uBAAuBS,EAAoC,CAG/D,GAFAA,EAAM,gBAAgB,EAElBA,EAAM,OAASJ,EAAwB,CACvC,KAAK,KAAO,GACZJ,EAAO,OAAWQ,EAAM,MAAqB,EAC7C,MACJ,CAEA,KAAK,KAAO,GACZ,MAAMC,EAAW,KAAK,qBAAqB,EAC3CT,EAAOS,EAAUD,EAAM,MAAqB,CAChD,CAEmB,QAAyB,CAExC,MAAME,EAAkB,KAAK,SAAS,QAChC,OACA,KAAK,UAEX,OAAOX;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKc,KAAK,eAAe;AAAA,0BACvB,KAAK,IAAI;AAAA;AAAA,kBAEjB,KAAK,UAAY,OACbA;AAAA;AAAA;AAAA;AAAA,wBAKAA;AAAA;AAAA;AAAA;AAAA,uBAIC;AAAA;AAAA;AAAA;AAAA,4BAIKI,EAAUO,CAAe,CAAC;AAAA,uBAC/B,KAAK,SAAS,QAAU,QAAU,MAAM;AAAA;AAAA,0BAErC,KAAK,MAAM;AAAA,qCACA,KAAK,sBAAsB;AAAA,wBACxC,KAAK,IAAI;AAAA;AAAA,SAG7B,CACJ,CAvHWC,EAAA,CADNT,EAAS,GAXD,eAYF,qBAOAS,EAAA,CADNT,EAAS,GAlBD,eAmBF,uBAOAS,EAAA,CADNT,EAAS,CAAE,QAAS,EAAK,CAAC,GAzBlB,eA0BF,yBASAS,EAAA,CADNT,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCjB,eAmCF,sBAGPS,EAAA,CADCT,EAAS,CAAE,KAAM,OAAQ,CAAC,GArClB,eAsCT",
|
|
6
6
|
"names": ["html", "render", "SpectrumElement", "property", "ifDefined", "removeSlottableRequest", "IS_MOBILE", "MatchMediaController", "styles", "event", "template", "actualPlacement", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["contextual-help-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["contextual-help-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["contextual-help.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .popover{min-inline-size:var(--mod-spectrum-contextual-help-minimum-width,var(--spectrum-contextual-help-minimum-width));padding-block:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));padding-inline:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));font-size:var(--mod-spectrum-contextual-help-body-size,var(--spectrum-contextual-help-body-size));color:var(--highcontrast-contextual-help-body-color,var(--mod-contextual-help-body-color,var(--spectrum-body-color)));max-inline-size:var(--mod-spectrum-contextual-help-popover-maximum-width);position:relative}.popover .body,.popover ::slotted([slot=heading]){margin:0}.popover ::slotted([slot=heading]){font-size:var(--mod-spectrum-contextual-help-heading-size,var(--spectrum-contextual-help-title-size));color:var(--highcontrast-contextual-help-heading-color,var(--mod-contextual-help-heading-color,var(--spectrum-heading-color)));margin-block-end:var(--mod-spectrum-contextual-help-content-spacing,var(--spectrum-contextual-help-content-spacing))}::slotted([slot=link]){margin-block-start:var(--mod-spectrum-contextual-help-link-spacing,var(--spectrum-spacing-300))}@media (forced-colors:active){:host{--highcontrast-contextual-help-heading-color:CanvasText;--highcontrast-contextual-help-body-color:CanvasText}}:host{display:inline-block}::slotted([slot=link]){display:block}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["contextual-help.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .popover{min-inline-size:var(--mod-spectrum-contextual-help-minimum-width,var(--spectrum-contextual-help-minimum-width));padding-block:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));padding-inline:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));font-size:var(--mod-spectrum-contextual-help-body-size,var(--spectrum-contextual-help-body-size));color:var(--highcontrast-contextual-help-body-color,var(--mod-contextual-help-body-color,var(--spectrum-body-color)));max-inline-size:var(--mod-spectrum-contextual-help-popover-maximum-width);position:relative}.popover .body,.popover ::slotted([slot=heading]){margin:0}.popover ::slotted([slot=heading]){font-size:var(--mod-spectrum-contextual-help-heading-size,var(--spectrum-contextual-help-title-size));color:var(--highcontrast-contextual-help-heading-color,var(--mod-contextual-help-heading-color,var(--spectrum-heading-color)));margin-block-end:var(--mod-spectrum-contextual-help-content-spacing,var(--spectrum-contextual-help-content-spacing))}::slotted([slot=link]){margin-block-start:var(--mod-spectrum-contextual-help-link-spacing,var(--spectrum-spacing-300))}@media (forced-colors:active){:host{--highcontrast-contextual-help-heading-color:CanvasText;--highcontrast-contextual-help-body-color:CanvasText}}:host{display:inline-block}::slotted([slot=link]){display:block}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './ContextualHelp.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './ContextualHelp.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAWA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './ContextualHelp.js';\n"],
|
|
5
5
|
"mappings": "aAWA,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-contextual-help.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .popover{min-inline-size:var(--mod-spectrum-contextual-help-minimum-width,var(--spectrum-contextual-help-minimum-width));padding-block:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));padding-inline:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));font-size:var(--mod-spectrum-contextual-help-body-size,var(--spectrum-contextual-help-body-size));color:var(--highcontrast-contextual-help-body-color,var(--mod-contextual-help-body-color,var(--spectrum-body-color)));max-inline-size:var(--mod-spectrum-contextual-help-popover-maximum-width);position:relative}.popover .body,.popover ::slotted([slot=heading]){margin:0}.popover ::slotted([slot=heading]){font-size:var(--mod-spectrum-contextual-help-heading-size,var(--spectrum-contextual-help-title-size));color:var(--highcontrast-contextual-help-heading-color,var(--mod-contextual-help-heading-color,var(--spectrum-heading-color)));margin-block-end:var(--mod-spectrum-contextual-help-content-spacing,var(--spectrum-contextual-help-content-spacing))}::slotted([slot=link]){margin-block-start:var(--mod-spectrum-contextual-help-link-spacing,var(--spectrum-spacing-300))}@media (forced-colors:active){:host{--highcontrast-contextual-help-heading-color:CanvasText;--highcontrast-contextual-help-body-color:CanvasText}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-contextual-help.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .popover{min-inline-size:var(--mod-spectrum-contextual-help-minimum-width,var(--spectrum-contextual-help-minimum-width));padding-block:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));padding-inline:var(--mod-spectrum-contextual-help-padding,var(--spectrum-spacing-400));font-size:var(--mod-spectrum-contextual-help-body-size,var(--spectrum-contextual-help-body-size));color:var(--highcontrast-contextual-help-body-color,var(--mod-contextual-help-body-color,var(--spectrum-body-color)));max-inline-size:var(--mod-spectrum-contextual-help-popover-maximum-width);position:relative}.popover .body,.popover ::slotted([slot=heading]){margin:0}.popover ::slotted([slot=heading]){font-size:var(--mod-spectrum-contextual-help-heading-size,var(--spectrum-contextual-help-title-size));color:var(--highcontrast-contextual-help-heading-color,var(--mod-contextual-help-heading-color,var(--spectrum-heading-color)));margin-block-end:var(--mod-spectrum-contextual-help-content-spacing,var(--spectrum-contextual-help-content-spacing))}::slotted([slot=link]){margin-block-start:var(--mod-spectrum-contextual-help-link-spacing,var(--spectrum-spacing-300))}@media (forced-colors:active){:host{--highcontrast-contextual-help-heading-color:CanvasText;--highcontrast-contextual-help-body-color:CanvasText}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|