@spectrum-web-components/illustrated-message 1.7.0 → 1.9.0-nightly.20251013134115
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 +131 -10
- package/package.json +4 -4
- package/sp-illustrated-message.d.ts +11 -0
- package/sp-illustrated-message.dev.js.map +1 -1
- package/sp-illustrated-message.js.map +1 -1
- package/src/IllustratedMessage.d.ts +11 -0
- package/src/IllustratedMessage.dev.js.map +1 -1
- package/src/IllustratedMessage.js.map +1 -1
- package/src/illustrated-message.css.dev.js.map +1 -1
- package/src/illustrated-message.css.js.map +1 -1
- package/src/illustratedmessage-overrides.css.dev.js.map +1 -1
- package/src/illustratedmessage-overrides.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-illustratedmessage.css.dev.js.map +1 -1
- package/src/spectrum-illustratedmessage.css.js.map +1 -1
- package/custom-elements.json +0 -113
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
An `<sp-illustrated-message>` displays an illustration
|
|
3
|
+
An `<sp-illustrated-message>` displays an outline illustration and a message, usually in an empty state or on an error page. It is also used inside a [DropZone](/components/dropzone).
|
|
4
4
|
|
|
5
5
|
### Usage
|
|
6
6
|
|
|
@@ -8,28 +8,141 @@ An `<sp-illustrated-message>` displays an illustration icon and a message, usual
|
|
|
8
8
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/illustrated-message)
|
|
9
9
|
[](https://stackblitz.com/edit/vitejs-vite-qrvmdaws)
|
|
10
10
|
|
|
11
|
-
```
|
|
11
|
+
```zsh
|
|
12
12
|
yarn add @spectrum-web-components/illustrated-message
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
Import the side effectful registration of `<sp-illustrated-message>` via:
|
|
16
16
|
|
|
17
|
-
```
|
|
17
|
+
```js
|
|
18
18
|
import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
When looking to leverage the `IllustratedMessage` base class as a type and/or for extension purposes, do so via:
|
|
22
22
|
|
|
23
|
-
```
|
|
23
|
+
```js
|
|
24
24
|
import { IllustratedMessage } from '@spectrum-web-components/illustrated-message';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
### Anatomy
|
|
28
|
+
|
|
29
|
+
An illustrated message consists of the following parts:
|
|
30
|
+
|
|
31
|
+
- An **outline illustration** that supports the messaging. The illustrated message accepts an `<svg>` into its default slot. This SVG is displayed as an illustration above the heading and description.
|
|
32
|
+
- A required **heading** that appears in bold below the illustration, using a few words to convey what a user needs to do or know about.
|
|
33
|
+
- An optional **body area** that elaborates on the heading and offers more information about how to complete the interaction, including buttons or links to show the user what to do next.
|
|
34
|
+
|
|
35
|
+
### Examples
|
|
36
|
+
|
|
37
|
+
<sp-tabs selected="call-to-action-with-link" auto label="Illustrated message examples">
|
|
38
|
+
<sp-tab value="call-to-action-with-link">Call to action with link</sp-tab>
|
|
39
|
+
<sp-tab-panel value="call-to-action-with-link">
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
43
|
+
<svg
|
|
44
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
viewBox="0 0 200 100"
|
|
46
|
+
width="200"
|
|
47
|
+
height="100"
|
|
48
|
+
>
|
|
49
|
+
<defs>
|
|
50
|
+
<style>
|
|
51
|
+
.cls-1,
|
|
52
|
+
.cls-2 {
|
|
53
|
+
fill: none;
|
|
54
|
+
stroke-linecap: round;
|
|
55
|
+
stroke-linejoin: round;
|
|
56
|
+
}
|
|
57
|
+
.cls-1 {
|
|
58
|
+
stroke-width: 3px;
|
|
59
|
+
}
|
|
60
|
+
.cls-2 {
|
|
61
|
+
stroke-width: 2px;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
64
|
+
</defs>
|
|
65
|
+
<path
|
|
66
|
+
class="cls-1"
|
|
67
|
+
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
|
|
68
|
+
></path>
|
|
69
|
+
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"></line>
|
|
70
|
+
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"></path>
|
|
71
|
+
<path
|
|
72
|
+
class="cls-1"
|
|
73
|
+
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
|
|
74
|
+
></path>
|
|
75
|
+
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"></line>
|
|
76
|
+
<path
|
|
77
|
+
class="cls-2"
|
|
78
|
+
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
|
|
79
|
+
></path>
|
|
80
|
+
<path
|
|
81
|
+
class="cls-2"
|
|
82
|
+
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
|
|
83
|
+
></path>
|
|
84
|
+
<path
|
|
85
|
+
class="cls-2"
|
|
86
|
+
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
|
|
87
|
+
></path>
|
|
88
|
+
<path
|
|
89
|
+
class="cls-1"
|
|
90
|
+
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
|
|
91
|
+
></path>
|
|
92
|
+
<rect
|
|
93
|
+
class="cls-1"
|
|
94
|
+
x="1.5"
|
|
95
|
+
y="34.5"
|
|
96
|
+
width="58"
|
|
97
|
+
height="39"
|
|
98
|
+
rx="2"
|
|
99
|
+
ry="2"
|
|
100
|
+
></rect>
|
|
101
|
+
</svg>
|
|
102
|
+
<p slot="description">
|
|
103
|
+
<sp-link href="#">Select a file</sp-link>
|
|
104
|
+
from your computer.
|
|
105
|
+
</p>
|
|
106
|
+
</sp-illustrated-message>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
</sp-tab-panel>
|
|
110
|
+
<sp-tab value="call-to-action-with-buttons">Call to action with buttons</sp-tab>
|
|
111
|
+
<sp-tab-panel value="call-to-action-with-buttons">
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<sp-illustrated-message heading="Error 404: Page not found">
|
|
115
|
+
<div slot="description">
|
|
116
|
+
<p>
|
|
117
|
+
This page isn't available. Try checking the URL or visit a different
|
|
118
|
+
page.
|
|
119
|
+
</p>
|
|
120
|
+
<sp-button-group style="--mod-buttongroup-justify-content: center;">
|
|
121
|
+
<sp-button treatment="outline" variant="primary">Back</sp-button>
|
|
122
|
+
<sp-button treatment="fill" variant="primary">Refresh</sp-button>
|
|
123
|
+
</sp-button-group>
|
|
124
|
+
</div>
|
|
125
|
+
<svg
|
|
126
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
127
|
+
viewBox="0 0 150 103"
|
|
128
|
+
width="150"
|
|
129
|
+
height="103"
|
|
130
|
+
>
|
|
131
|
+
<path
|
|
132
|
+
d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
|
|
133
|
+
></path>
|
|
134
|
+
</svg>
|
|
135
|
+
</sp-illustrated-message>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
</sp-tab-panel>
|
|
139
|
+
<sp-tab value="informative">Informative</sp-tab>
|
|
140
|
+
<sp-tab-panel value="informative">
|
|
28
141
|
|
|
29
142
|
```html
|
|
30
143
|
<sp-illustrated-message
|
|
31
|
-
heading="
|
|
32
|
-
description="
|
|
144
|
+
heading="Error 404: Page not found"
|
|
145
|
+
description="This page isn't available. Try checking the URL or visit a different page."
|
|
33
146
|
>
|
|
34
147
|
<svg
|
|
35
148
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -45,6 +158,14 @@ import { IllustratedMessage } from '@spectrum-web-components/illustrated-message
|
|
|
45
158
|
</sp-illustrated-message>
|
|
46
159
|
```
|
|
47
160
|
|
|
48
|
-
|
|
161
|
+
</sp-tab-panel>
|
|
162
|
+
</sp-tabs>
|
|
163
|
+
|
|
164
|
+
### Accessibility
|
|
165
|
+
|
|
166
|
+
The `<sp-illustrated-message>` component provides a semantic structure for displaying illustrated content with proper heading hierarchy. However, there are several considerations to keep in mind for accessibility:
|
|
49
167
|
|
|
50
|
-
|
|
168
|
+
- **Always include a clear, standalone heading.** All illustrated messages must include a heading or title. This heading communicates the result of why the UI is appearing in the way that it is. If included, the description elaborates on the heading and offers more information.
|
|
169
|
+
- **Ensure that text and image work together.** The illustration within an illustrated message adds value to the language that it’s paired with, and vice versa. An illustration’s meaning should be readily clear, contextual, and relevant to the overall message described in the text.
|
|
170
|
+
- **Provide actionable solutions.** Offer an actionable solution when possible by using [links](/components/link) or [buttons](/components/button).
|
|
171
|
+
- **Make error codes meaningful and contextual.** If an illustrated message is for an error state, use the heading to summarize the error. Only include an error code or other technical information if it’s useful and relevant for the user. Put the error code either at the beginning of the heading using a colon, or at the end of the message using parentheses; don’t hide it in the middle of the heading or bury it in the description.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/illustrated-message",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0-nightly.20251013134115",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
-
"directory": "packages/illustrated-message"
|
|
12
|
+
"directory": "first-gen/packages/illustrated-message"
|
|
13
13
|
},
|
|
14
14
|
"author": "Adobe",
|
|
15
15
|
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/illustrated-message",
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
"css"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/base": "1.
|
|
68
|
-
"@spectrum-web-components/styles": "1.
|
|
67
|
+
"@spectrum-web-components/base": "1.9.0-nightly.20251013134115",
|
|
68
|
+
"@spectrum-web-components/styles": "1.9.0-nightly.20251013134115"
|
|
69
69
|
},
|
|
70
70
|
"types": "./src/index.d.ts",
|
|
71
71
|
"customElements": "custom-elements.json",
|
|
@@ -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 { IllustratedMessage } from './src/IllustratedMessage.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-illustrated-message.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 { IllustratedMessage } from './src/IllustratedMessage.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-illustrated-message', IllustratedMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-illustrated-message': IllustratedMessage;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,cAAc,0BAA0B,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-illustrated-message.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 { IllustratedMessage } from './src/IllustratedMessage.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-illustrated-message', IllustratedMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-illustrated-message': IllustratedMessage;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,sBAAAA,MAA0B,8BACnC,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,yBAA0BD,CAAkB",
|
|
6
6
|
"names": ["IllustratedMessage", "defineElement"]
|
|
7
7
|
}
|
|
@@ -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
|
/**
|
|
3
14
|
* @element sp-illustrated-message
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["IllustratedMessage.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 */\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport messageStyles from './illustrated-message.css.js';\nimport headingStyles from '@spectrum-web-components/styles/heading.js';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\n\n/**\n * @element sp-illustrated-message\n *\n * @slot - The SVG that represents the illustration\n * @slot heading - Headline for the message\n * @slot description - Description text for the illustration\n */\nexport class IllustratedMessage extends SpectrumElement {\n public static readonly is = 'sp-illustrated-message';\n\n public static override get styles(): CSSResultArray {\n return [headingStyles, bodyStyles, messageStyles];\n }\n\n @property()\n public heading = '';\n\n @property()\n public description = '';\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"illustration\"><slot></slot></div>\n <h2\n id=\"heading\"\n class=\"spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light\"\n >\n <slot name=\"heading\">${this.heading}</slot>\n </h2>\n <div id=\"description\" class=\"spectrum-Body spectrum-Body--sizeS\">\n <slot name=\"description\">${this.description}</slot>\n </div>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAC1B,OAAO,gBAAgB;AAShB,aAAM,2BAA2B,gBAAgB;AAAA,EAAjD;AAAA;AAQH,SAAO,UAAU;AAGjB,SAAO,cAAc;AAAA;AAAA,EARrB,WAA2B,SAAyB;AAChD,WAAO,CAAC,eAAe,YAAY,aAAa;AAAA,EACpD;AAAA,EAQmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAMwB,KAAK,OAAO;AAAA;AAAA;AAAA,2CAGR,KAAK,WAAW;AAAA;AAAA;AAAA,EAGvD;AACJ;AA3Ba,mBACc,KAAK;AAOrB;AAAA,EADN,SAAS;AAAA,GAPD,mBAQF;AAGA;AAAA,EADN,SAAS;AAAA,GAVD,mBAWF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["IllustratedMessage.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 */\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport messageStyles from './illustrated-message.css.js';\nimport headingStyles from '@spectrum-web-components/styles/heading.js';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\n\n/**\n * @element sp-illustrated-message\n *\n * @slot - The SVG that represents the illustration\n * @slot heading - Headline for the message\n * @slot description - Description text for the illustration\n */\nexport class IllustratedMessage extends SpectrumElement {\n public static readonly is = 'sp-illustrated-message';\n\n public static override get styles(): CSSResultArray {\n return [headingStyles, bodyStyles, messageStyles];\n }\n\n @property()\n public heading = '';\n\n @property()\n public description = '';\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"illustration\"><slot></slot></div>\n <h2\n id=\"heading\"\n class=\"spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light\"\n >\n <slot name=\"heading\">${this.heading}</slot>\n </h2>\n <div id=\"description\" class=\"spectrum-Body spectrum-Body--sizeS\">\n <slot name=\"description\">${this.description}</slot>\n </div>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAmB,+BAC1B,OAAOC,MAAmB,6CAC1B,OAAOC,MAAgB,0CAShB,aAAM,2BAA2BJ,CAAgB,CAAjD,kCAQH,KAAO,QAAU,GAGjB,KAAO,YAAc,GARrB,WAA2B,QAAyB,CAChD,MAAO,CAACG,EAAeC,EAAYF,CAAa,CACpD,CAQmB,QAAyB,CACxC,OAAOH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAMwB,KAAK,OAAO;AAAA;AAAA;AAAA,2CAGR,KAAK,WAAW;AAAA;AAAA,SAGvD,CACJ,CA3Ba,mBACc,GAAK,yBAOrBM,EAAA,CADNJ,EAAS,GAPD,mBAQF,uBAGAI,EAAA,CADNJ,EAAS,GAVD,mBAWF",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "messageStyles", "headingStyles", "bodyStyles", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["illustrated-message.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 @media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{--spectrum-illustrated-message-description-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-heading-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-title-to-heading:var(--spectrum-spacing-400);--spectrum-illustrated-message-heading-to-description:var(--spectrum-spacing-75);--spectrum-illustrated-message-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-illustrated-message-illustration-accent-color:var(--spectrum-accent-visual-color);--spectrum-illustrated-message-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-illustrated-message-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-title-size);--spectrum-illustrated-message-title-line-height:var(--spectrum-heading-line-height);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-description-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-illustrated-message-description-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-illustrated-message-description-font-size:var(--spectrum-illustrated-message-body-size);--spectrum-illustrated-message-description-line-height:var(--spectrum-body-line-height);--spectrum-illustrated-message-description-color:var(--spectrum-body-color);block-size:100%;display:flex;display:var(--mod-illustrated-message-display,flex);text-align:center;pointer-events:auto;pointer-events:var(--mod-illustrated-message-pointer-events,auto);max-inline-size:var(--mod-illustrated-message-content-maximum-width);flex-direction:column;justify-content:center;align-items:center}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-cjk-title-size)}#illustration{color:var(--highcontrast-illustrated-message-illustration-color,var(--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)));fill:currentColor;stroke:currentColor;margin-block-end:var(--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading))}.spectrum-IllustratedMessage-accent{color:var(--highcontrast-illustrated-message-illustration-accent-color,var(--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)));fill:currentColor;stroke:currentColor}#heading{font-family:var(--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family));font-weight:var(--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight));font-style:var(--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style));font-size:var(--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size));line-height:var(--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height));color:var(--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color));max-inline-size:var(--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size));margin-block-start:0;margin-block-end:var(--mod-illustrated-message-heading-to-body,0)}#description{position:var(--mod-illustrated-message-description-position);z-index:var(--mod-illustrated-message-description-z-index);pointer-events:auto;pointer-events:var(--mod-illustrated-message-description-pointer-events,auto);font-family:var(--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family));font-weight:var(--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight));font-style:var(--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style));font-size:var(--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size));line-height:var(--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height));color:var(--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color));max-inline-size:var(--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size));margin-block-start:var(--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description));margin-block-end:0}::slotted(svg[viewBox]){width:100%}\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": ["illustrated-message.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 @media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{--spectrum-illustrated-message-description-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-heading-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-title-to-heading:var(--spectrum-spacing-400);--spectrum-illustrated-message-heading-to-description:var(--spectrum-spacing-75);--spectrum-illustrated-message-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-illustrated-message-illustration-accent-color:var(--spectrum-accent-visual-color);--spectrum-illustrated-message-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-illustrated-message-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-title-size);--spectrum-illustrated-message-title-line-height:var(--spectrum-heading-line-height);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-description-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-illustrated-message-description-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-illustrated-message-description-font-size:var(--spectrum-illustrated-message-body-size);--spectrum-illustrated-message-description-line-height:var(--spectrum-body-line-height);--spectrum-illustrated-message-description-color:var(--spectrum-body-color);block-size:100%;display:flex;display:var(--mod-illustrated-message-display,flex);text-align:center;pointer-events:auto;pointer-events:var(--mod-illustrated-message-pointer-events,auto);max-inline-size:var(--mod-illustrated-message-content-maximum-width);flex-direction:column;justify-content:center;align-items:center}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-cjk-title-size)}#illustration{color:var(--highcontrast-illustrated-message-illustration-color,var(--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)));fill:currentColor;stroke:currentColor;margin-block-end:var(--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading))}.spectrum-IllustratedMessage-accent{color:var(--highcontrast-illustrated-message-illustration-accent-color,var(--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)));fill:currentColor;stroke:currentColor}#heading{font-family:var(--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family));font-weight:var(--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight));font-style:var(--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style));font-size:var(--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size));line-height:var(--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height));color:var(--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color));max-inline-size:var(--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size));margin-block-start:0;margin-block-end:var(--mod-illustrated-message-heading-to-body,0)}#description{position:var(--mod-illustrated-message-description-position);z-index:var(--mod-illustrated-message-description-z-index);pointer-events:auto;pointer-events:var(--mod-illustrated-message-description-pointer-events,auto);font-family:var(--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family));font-weight:var(--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight));font-style:var(--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style));font-size:var(--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size));line-height:var(--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height));color:var(--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color));max-inline-size:var(--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size));margin-block-start:var(--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description));margin-block-end:0}::slotted(svg[viewBox]){width:100%}\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": ["illustratedmessage-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": ["illustratedmessage-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
|
}
|
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 './IllustratedMessage.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 './IllustratedMessage.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 './IllustratedMessage.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-illustratedmessage.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 @media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{--spectrum-illustrated-message-description-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-heading-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-title-to-heading:var(--spectrum-spacing-400);--spectrum-illustrated-message-heading-to-description:var(--spectrum-spacing-75);--spectrum-illustrated-message-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-illustrated-message-illustration-accent-color:var(--spectrum-accent-visual-color);--spectrum-illustrated-message-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-illustrated-message-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-title-size);--spectrum-illustrated-message-title-line-height:var(--spectrum-heading-line-height);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-description-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-illustrated-message-description-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-illustrated-message-description-font-size:var(--spectrum-illustrated-message-body-size);--spectrum-illustrated-message-description-line-height:var(--spectrum-body-line-height);--spectrum-illustrated-message-description-color:var(--spectrum-body-color);block-size:100%;display:flex;display:var(--mod-illustrated-message-display,flex);text-align:center;pointer-events:auto;pointer-events:var(--mod-illustrated-message-pointer-events,auto);max-inline-size:var(--mod-illustrated-message-content-maximum-width);flex-direction:column;justify-content:center;align-items:center}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-cjk-title-size)}#illustration{color:var(--highcontrast-illustrated-message-illustration-color,var(--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)));fill:currentColor;stroke:currentColor;margin-block-end:var(--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading))}.spectrum-IllustratedMessage-accent{color:var(--highcontrast-illustrated-message-illustration-accent-color,var(--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)));fill:currentColor;stroke:currentColor}#heading{font-family:var(--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family));font-weight:var(--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight));font-style:var(--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style));font-size:var(--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size));line-height:var(--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height));color:var(--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color));max-inline-size:var(--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size));margin-block-start:0;margin-block-end:var(--mod-illustrated-message-heading-to-body,0)}#description{position:var(--mod-illustrated-message-description-position);z-index:var(--mod-illustrated-message-description-z-index);pointer-events:auto;pointer-events:var(--mod-illustrated-message-description-pointer-events,auto);font-family:var(--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family));font-weight:var(--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight));font-style:var(--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style));font-size:var(--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size));line-height:var(--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height));color:var(--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color));max-inline-size:var(--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size));margin-block-start:var(--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description));margin-block-end:0}\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-illustratedmessage.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 @media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{--spectrum-illustrated-message-description-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-heading-max-inline-size:var(--spectrum-illustrated-message-maximum-width);--spectrum-illustrated-message-title-to-heading:var(--spectrum-spacing-400);--spectrum-illustrated-message-heading-to-description:var(--spectrum-spacing-75);--spectrum-illustrated-message-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-illustrated-message-illustration-accent-color:var(--spectrum-accent-visual-color);--spectrum-illustrated-message-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-illustrated-message-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-title-size);--spectrum-illustrated-message-title-line-height:var(--spectrum-heading-line-height);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(--spectrum-sans-font-family-stack);--spectrum-illustrated-message-description-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-illustrated-message-description-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-illustrated-message-description-font-size:var(--spectrum-illustrated-message-body-size);--spectrum-illustrated-message-description-line-height:var(--spectrum-body-line-height);--spectrum-illustrated-message-description-color:var(--spectrum-body-color);block-size:100%;display:flex;display:var(--mod-illustrated-message-display,flex);text-align:center;pointer-events:auto;pointer-events:var(--mod-illustrated-message-pointer-events,auto);max-inline-size:var(--mod-illustrated-message-content-maximum-width);flex-direction:column;justify-content:center;align-items:center}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(--spectrum-illustrated-message-cjk-title-size)}#illustration{color:var(--highcontrast-illustrated-message-illustration-color,var(--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)));fill:currentColor;stroke:currentColor;margin-block-end:var(--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading))}.spectrum-IllustratedMessage-accent{color:var(--highcontrast-illustrated-message-illustration-accent-color,var(--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)));fill:currentColor;stroke:currentColor}#heading{font-family:var(--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family));font-weight:var(--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight));font-style:var(--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style));font-size:var(--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size));line-height:var(--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height));color:var(--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color));max-inline-size:var(--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size));margin-block-start:0;margin-block-end:var(--mod-illustrated-message-heading-to-body,0)}#description{position:var(--mod-illustrated-message-description-position);z-index:var(--mod-illustrated-message-description-z-index);pointer-events:auto;pointer-events:var(--mod-illustrated-message-description-pointer-events,auto);font-family:var(--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family));font-weight:var(--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight));font-style:var(--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style));font-size:var(--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size));line-height:var(--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height));color:var(--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color));max-inline-size:var(--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size));margin-block-start:var(--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description));margin-block-end:0}\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/custom-elements.json
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": "1.0.0",
|
|
3
|
-
"readme": "",
|
|
4
|
-
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-illustrated-message.js",
|
|
8
|
-
"declarations": [],
|
|
9
|
-
"exports": [
|
|
10
|
-
{
|
|
11
|
-
"kind": "custom-element-definition",
|
|
12
|
-
"name": "sp-illustrated-message",
|
|
13
|
-
"declaration": {
|
|
14
|
-
"name": "IllustratedMessage",
|
|
15
|
-
"module": "/src/IllustratedMessage.js"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
]
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
"kind": "javascript-module",
|
|
22
|
-
"path": "src/IllustratedMessage.js",
|
|
23
|
-
"declarations": [
|
|
24
|
-
{
|
|
25
|
-
"kind": "class",
|
|
26
|
-
"description": "",
|
|
27
|
-
"name": "IllustratedMessage",
|
|
28
|
-
"slots": [
|
|
29
|
-
{
|
|
30
|
-
"description": "The SVG that represents the illustration",
|
|
31
|
-
"name": ""
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"description": "Headline for the message",
|
|
35
|
-
"name": "heading"
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
"description": "Description text for the illustration",
|
|
39
|
-
"name": "description"
|
|
40
|
-
}
|
|
41
|
-
],
|
|
42
|
-
"members": [
|
|
43
|
-
{
|
|
44
|
-
"kind": "field",
|
|
45
|
-
"name": "is",
|
|
46
|
-
"type": {
|
|
47
|
-
"text": "string"
|
|
48
|
-
},
|
|
49
|
-
"privacy": "public",
|
|
50
|
-
"static": true,
|
|
51
|
-
"readonly": true,
|
|
52
|
-
"default": "'sp-illustrated-message'"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"kind": "field",
|
|
56
|
-
"name": "heading",
|
|
57
|
-
"type": {
|
|
58
|
-
"text": "string"
|
|
59
|
-
},
|
|
60
|
-
"privacy": "public",
|
|
61
|
-
"default": "''",
|
|
62
|
-
"attribute": "heading"
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"kind": "field",
|
|
66
|
-
"name": "description",
|
|
67
|
-
"type": {
|
|
68
|
-
"text": "string"
|
|
69
|
-
},
|
|
70
|
-
"privacy": "public",
|
|
71
|
-
"default": "''",
|
|
72
|
-
"attribute": "description"
|
|
73
|
-
}
|
|
74
|
-
],
|
|
75
|
-
"attributes": [
|
|
76
|
-
{
|
|
77
|
-
"name": "heading",
|
|
78
|
-
"type": {
|
|
79
|
-
"text": "string"
|
|
80
|
-
},
|
|
81
|
-
"default": "''",
|
|
82
|
-
"fieldName": "heading"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"name": "description",
|
|
86
|
-
"type": {
|
|
87
|
-
"text": "string"
|
|
88
|
-
},
|
|
89
|
-
"default": "''",
|
|
90
|
-
"fieldName": "description"
|
|
91
|
-
}
|
|
92
|
-
],
|
|
93
|
-
"superclass": {
|
|
94
|
-
"name": "SpectrumElement",
|
|
95
|
-
"package": "@spectrum-web-components/base"
|
|
96
|
-
},
|
|
97
|
-
"tagName": "sp-illustrated-message",
|
|
98
|
-
"customElement": true
|
|
99
|
-
}
|
|
100
|
-
],
|
|
101
|
-
"exports": [
|
|
102
|
-
{
|
|
103
|
-
"kind": "js",
|
|
104
|
-
"name": "IllustratedMessage",
|
|
105
|
-
"declaration": {
|
|
106
|
-
"name": "IllustratedMessage",
|
|
107
|
-
"module": "src/IllustratedMessage.js"
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
]
|
|
111
|
-
}
|
|
112
|
-
]
|
|
113
|
-
}
|