@spectrum-web-components/illustrated-message 0.9.14 → 0.10.1-overlay.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +2 -28
  2. package/package.json +5 -5
  3. package/src/illustrated-message.css.dev.js +73 -11
  4. package/src/illustrated-message.css.dev.js.map +2 -2
  5. package/src/illustrated-message.css.js +75 -13
  6. package/src/illustrated-message.css.js.map +2 -2
  7. package/src/spectrum-config.js +0 -1
  8. package/src/spectrum-illustratedmessage.css.dev.js +73 -11
  9. package/src/spectrum-illustratedmessage.css.dev.js.map +2 -2
  10. package/src/spectrum-illustratedmessage.css.js +75 -13
  11. package/src/spectrum-illustratedmessage.css.js.map +2 -2
  12. package/stories/illustrated-message.stories.js +1 -12
  13. package/stories/illustrated-message.stories.js.map +2 -2
  14. package/test/benchmark/test-basic.js +1 -1
  15. package/test/benchmark/test-basic.js.map +1 -1
  16. package/test/illustrated-message.test.js +1 -1
  17. package/test/illustrated-message.test.js.map +1 -1
  18. package/custom-elements.json +0 -112
package/README.md CHANGED
@@ -29,33 +29,7 @@ import { IllustratedMessage } from '@spectrum-web-components/illustrated-message
29
29
  ```html
30
30
  <sp-illustrated-message
31
31
  heading="Drag and Drop Your File"
32
- description="This message has italics"
33
- >
34
- <svg
35
- xmlns="http://www.w3.org/2000/svg"
36
- viewBox="0 0 150 103"
37
- width="150"
38
- height="103"
39
- viewBox="0 0 150 103"
40
- >
41
- <path
42
- 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"
43
- ></path>
44
- </svg>
45
- </sp-illustrated-message>
46
- ```
47
-
48
- ## Variants
49
-
50
- ### CTA variant
51
-
52
- In this variant, the description text is not italisized.
53
-
54
- ```html
55
- <sp-illustrated-message
56
- heading="Drag and Drop Your File"
57
- description="This message has no italics"
58
- cta
32
+ description="Additional descriptive text"
59
33
  >
60
34
  <svg
61
35
  xmlns="http://www.w3.org/2000/svg"
@@ -73,4 +47,4 @@ In this variant, the description text is not italisized.
73
47
 
74
48
  ## Content
75
49
 
76
- The popover accepts an svg into its default slot. This svg is displayed as an illustration above the heading and description
50
+ The illustrated message accepts an `<svg>` into its default slot. This SVG is displayed as an illustration above the heading and description.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/illustrated-message",
3
- "version": "0.9.14",
3
+ "version": "0.10.1-overlay.10+7a73c9eee",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,11 +57,11 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.7.5",
61
- "@spectrum-web-components/styles": "^0.23.3"
60
+ "@spectrum-web-components/base": "^0.7.6-overlay.54+7a73c9eee",
61
+ "@spectrum-web-components/styles": "^0.24.1-overlay.10+7a73c9eee"
62
62
  },
63
63
  "devDependencies": {
64
- "@spectrum-css/illustratedmessage": "^4.0.11"
64
+ "@spectrum-css/illustratedmessage": "^5.0.2"
65
65
  },
66
66
  "types": "./src/index.d.ts",
67
67
  "customElements": "custom-elements.json",
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "fe316a3ee9fc753f0de98aece11e04227df73ab7"
72
+ "gitHead": "7a73c9eeec7dffb9c968f7f30586139b8e5ee348"
73
73
  }
package/src/illustrated-message.css.dev.js CHANGED
@@ -1,21 +1,83 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(
5
- --spectrum-illustratedmessage-illustration-margin-bottom
4
+ :host{--spectrum-illustrated-message-description-max-inline-size:var(
5
+ --spectrum-illustrated-message-maximum-width
6
+ );--spectrum-illustrated-message-heading-max-inline-size:var(
7
+ --spectrum-illustrated-message-maximum-width
8
+ );--spectrum-illustrated-message-title-to-heading:var(
9
+ --spectrum-spacing-400
10
+ );--spectrum-illustrated-message-heading-to-description:var(
11
+ --spectrum-spacing-75
12
+ );--spectrum-illustrated-message-illustration-color:var(
13
+ --spectrum-neutral-visual-color
14
+ );--spectrum-illustrated-message-illustration-accent-color:var(
15
+ --spectrum-accent-visual-color
16
+ );--spectrum-illustrated-message-title-font-family:var(
17
+ --spectrum-sans-font-family-stack
18
+ );--spectrum-illustrated-message-title-font-weight:var(
19
+ --spectrum-heading-sans-serif-font-weight
20
+ );--spectrum-illustrated-message-title-font-style:var(
21
+ --spectrum-heading-sans-serif-font-style
22
+ );--spectrum-illustrated-message-title-font-size:var(
23
+ --spectrum-illustrated-message-title-size
24
+ );--spectrum-illustrated-message-title-line-height:var(
25
+ --spectrum-heading-line-height
26
+ );--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(
27
+ --spectrum-sans-font-family-stack
28
+ );--spectrum-illustrated-message-description-font-weight:var(
29
+ --spectrum-body-sans-serif-font-weight
30
+ );--spectrum-illustrated-message-description-font-style:var(
31
+ --spectrum-body-sans-serif-font-style
32
+ );--spectrum-illustrated-message-description-font-size:var(
33
+ --spectrum-illustrated-message-body-size
34
+ );--spectrum-illustrated-message-description-line-height:var(
35
+ --spectrum-body-line-height
36
+ );--spectrum-illustrated-message-description-color:var(
37
+ --spectrum-body-color
38
+ )}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(
39
+ --spectrum-illustrated-message-cjk-title-size
40
+ )}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(
41
+ --highcontrast-illustrated-message-illustration-color,var(
42
+ --mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)
43
+ )
44
+ );margin-block-end:var(
45
+ --mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)
46
+ )}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(
47
+ --highcontrast-illustrated-message-illustration-accent-color,var(
48
+ --mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)
49
+ )
6
50
  )}#heading{color:var(
7
- --spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)
51
+ --mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)
52
+ );font-family:var(
53
+ --mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)
8
54
  );font-size:var(
9
- --spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)
55
+ --mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)
56
+ );font-style:var(
57
+ --mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)
10
58
  );font-weight:var(
11
- --spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
12
- );margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(
13
- --spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)
59
+ --mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)
60
+ );line-height:var(
61
+ --mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)
62
+ );margin-block:0;max-inline-size:var(
63
+ --mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)
64
+ )}#description{color:var(
65
+ --mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)
66
+ );font-family:var(
67
+ --mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)
68
+ );font-size:var(
69
+ --mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)
14
70
  );font-style:var(
15
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
16
- );margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(
17
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
18
- )}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}::slotted(svg[viewBox]){width:100%}
71
+ --mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)
72
+ );font-weight:var(
73
+ --mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)
74
+ );line-height:var(
75
+ --mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)
76
+ );margin-block-end:0;margin-block-start:var(
77
+ --mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)
78
+ );max-inline-size:var(
79
+ --mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)
80
+ )}::slotted(svg[viewBox]){width:100%}
19
81
  `;
20
82
  export default styles;
21
83
  //# sourceMappingURL=illustrated-message.css.dev.js.map
package/src/illustrated-message.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["illustrated-message.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(\n--spectrum-illustratedmessage-illustration-margin-bottom\n)}#heading{color:var(\n--spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)\n);font-size:var(\n--spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)\n);font-weight:var(\n--spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(\n--spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)\n);font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n);margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n)}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}::slotted(svg[viewBox]){width:100%}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustrated-message-description-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-heading-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-title-to-heading:var(\n--spectrum-spacing-400\n);--spectrum-illustrated-message-heading-to-description:var(\n--spectrum-spacing-75\n);--spectrum-illustrated-message-illustration-color:var(\n--spectrum-neutral-visual-color\n);--spectrum-illustrated-message-illustration-accent-color:var(\n--spectrum-accent-visual-color\n);--spectrum-illustrated-message-title-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-title-font-weight:var(\n--spectrum-heading-sans-serif-font-weight\n);--spectrum-illustrated-message-title-font-style:var(\n--spectrum-heading-sans-serif-font-style\n);--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-title-size\n);--spectrum-illustrated-message-title-line-height:var(\n--spectrum-heading-line-height\n);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-description-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-illustrated-message-description-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-illustrated-message-description-font-size:var(\n--spectrum-illustrated-message-body-size\n);--spectrum-illustrated-message-description-line-height:var(\n--spectrum-body-line-height\n);--spectrum-illustrated-message-description-color:var(\n--spectrum-body-color\n)}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-cjk-title-size\n)}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-color,var(\n--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)\n)\n);margin-block-end:var(\n--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)\n)}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-accent-color,var(\n--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)\n)\n)}#heading{color:var(\n--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)\n);font-family:var(\n--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)\n);font-size:var(\n--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)\n);font-style:var(\n--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)\n);font-weight:var(\n--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)\n);line-height:var(\n--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)\n);margin-block:0;max-inline-size:var(\n--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)\n)}#description{color:var(\n--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)\n);font-family:var(\n--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)\n);font-size:var(\n--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)\n);font-style:var(\n--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)\n);font-weight:var(\n--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)\n);line-height:var(\n--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)\n);margin-block-end:0;margin-block-start:var(\n--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)\n);max-inline-size:var(\n--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)\n)}::slotted(svg[viewBox]){width:100%}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Ef,eAAe;",
6
6
  "names": []
7
7
  }
package/src/illustrated-message.css.js CHANGED
@@ -1,18 +1,80 @@
1
- "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
2
- :host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(
3
- --spectrum-illustratedmessage-illustration-margin-bottom
1
+ "use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
2
+ :host{--spectrum-illustrated-message-description-max-inline-size:var(
3
+ --spectrum-illustrated-message-maximum-width
4
+ );--spectrum-illustrated-message-heading-max-inline-size:var(
5
+ --spectrum-illustrated-message-maximum-width
6
+ );--spectrum-illustrated-message-title-to-heading:var(
7
+ --spectrum-spacing-400
8
+ );--spectrum-illustrated-message-heading-to-description:var(
9
+ --spectrum-spacing-75
10
+ );--spectrum-illustrated-message-illustration-color:var(
11
+ --spectrum-neutral-visual-color
12
+ );--spectrum-illustrated-message-illustration-accent-color:var(
13
+ --spectrum-accent-visual-color
14
+ );--spectrum-illustrated-message-title-font-family:var(
15
+ --spectrum-sans-font-family-stack
16
+ );--spectrum-illustrated-message-title-font-weight:var(
17
+ --spectrum-heading-sans-serif-font-weight
18
+ );--spectrum-illustrated-message-title-font-style:var(
19
+ --spectrum-heading-sans-serif-font-style
20
+ );--spectrum-illustrated-message-title-font-size:var(
21
+ --spectrum-illustrated-message-title-size
22
+ );--spectrum-illustrated-message-title-line-height:var(
23
+ --spectrum-heading-line-height
24
+ );--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(
25
+ --spectrum-sans-font-family-stack
26
+ );--spectrum-illustrated-message-description-font-weight:var(
27
+ --spectrum-body-sans-serif-font-weight
28
+ );--spectrum-illustrated-message-description-font-style:var(
29
+ --spectrum-body-sans-serif-font-style
30
+ );--spectrum-illustrated-message-description-font-size:var(
31
+ --spectrum-illustrated-message-body-size
32
+ );--spectrum-illustrated-message-description-line-height:var(
33
+ --spectrum-body-line-height
34
+ );--spectrum-illustrated-message-description-color:var(
35
+ --spectrum-body-color
36
+ )}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(
37
+ --spectrum-illustrated-message-cjk-title-size
38
+ )}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(
39
+ --highcontrast-illustrated-message-illustration-color,var(
40
+ --mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)
41
+ )
42
+ );margin-block-end:var(
43
+ --mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)
44
+ )}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(
45
+ --highcontrast-illustrated-message-illustration-accent-color,var(
46
+ --mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)
47
+ )
4
48
  )}#heading{color:var(
5
- --spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)
49
+ --mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)
50
+ );font-family:var(
51
+ --mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)
6
52
  );font-size:var(
7
- --spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)
53
+ --mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)
54
+ );font-style:var(
55
+ --mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)
8
56
  );font-weight:var(
9
- --spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
10
- );margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(
11
- --spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)
57
+ --mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)
58
+ );line-height:var(
59
+ --mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)
60
+ );margin-block:0;max-inline-size:var(
61
+ --mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)
62
+ )}#description{color:var(
63
+ --mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)
64
+ );font-family:var(
65
+ --mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)
66
+ );font-size:var(
67
+ --mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)
12
68
  );font-style:var(
13
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
14
- );margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(
15
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
16
- )}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}::slotted(svg[viewBox]){width:100%}
17
- `;export default e;
69
+ --mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)
70
+ );font-weight:var(
71
+ --mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)
72
+ );line-height:var(
73
+ --mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)
74
+ );margin-block-end:0;margin-block-start:var(
75
+ --mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)
76
+ );max-inline-size:var(
77
+ --mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)
78
+ )}::slotted(svg[viewBox]){width:100%}
79
+ `;export default t;
18
80
  //# sourceMappingURL=illustrated-message.css.js.map
package/src/illustrated-message.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["illustrated-message.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(\n--spectrum-illustratedmessage-illustration-margin-bottom\n)}#heading{color:var(\n--spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)\n);font-size:var(\n--spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)\n);font-weight:var(\n--spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(\n--spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)\n);font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n);margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n)}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}::slotted(svg[viewBox]){width:100%}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustrated-message-description-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-heading-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-title-to-heading:var(\n--spectrum-spacing-400\n);--spectrum-illustrated-message-heading-to-description:var(\n--spectrum-spacing-75\n);--spectrum-illustrated-message-illustration-color:var(\n--spectrum-neutral-visual-color\n);--spectrum-illustrated-message-illustration-accent-color:var(\n--spectrum-accent-visual-color\n);--spectrum-illustrated-message-title-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-title-font-weight:var(\n--spectrum-heading-sans-serif-font-weight\n);--spectrum-illustrated-message-title-font-style:var(\n--spectrum-heading-sans-serif-font-style\n);--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-title-size\n);--spectrum-illustrated-message-title-line-height:var(\n--spectrum-heading-line-height\n);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-description-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-illustrated-message-description-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-illustrated-message-description-font-size:var(\n--spectrum-illustrated-message-body-size\n);--spectrum-illustrated-message-description-line-height:var(\n--spectrum-body-line-height\n);--spectrum-illustrated-message-description-color:var(\n--spectrum-body-color\n)}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-cjk-title-size\n)}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-color,var(\n--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)\n)\n);margin-block-end:var(\n--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)\n)}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-accent-color,var(\n--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)\n)\n)}#heading{color:var(\n--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)\n);font-family:var(\n--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)\n);font-size:var(\n--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)\n);font-style:var(\n--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)\n);font-weight:var(\n--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)\n);line-height:var(\n--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)\n);margin-block:0;max-inline-size:var(\n--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)\n)}#description{color:var(\n--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)\n);font-family:var(\n--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)\n);font-size:var(\n--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)\n);font-style:var(\n--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)\n);font-weight:var(\n--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)\n);line-height:var(\n--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)\n);margin-block-end:0;margin-block-start:var(\n--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)\n);max-inline-size:var(\n--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)\n)}::slotted(svg[viewBox]){width:100%}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+Ef,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -26,7 +26,6 @@ const config = {
26
26
  fileName: 'illustratedmessage',
27
27
  components: [
28
28
  converter.classToHost(),
29
- converter.classToAttribute('spectrum-IllustratedMessage--cta'),
30
29
  converter.classToId('spectrum-IllustratedMessage-heading'),
31
30
  converter.classToId('spectrum-IllustratedMessage-description'),
32
31
  converter.classToId('spectrum-IllustratedMessage-illustration'),
package/src/spectrum-illustratedmessage.css.dev.js CHANGED
@@ -1,21 +1,83 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(
5
- --spectrum-illustratedmessage-illustration-margin-bottom
4
+ :host{--spectrum-illustrated-message-description-max-inline-size:var(
5
+ --spectrum-illustrated-message-maximum-width
6
+ );--spectrum-illustrated-message-heading-max-inline-size:var(
7
+ --spectrum-illustrated-message-maximum-width
8
+ );--spectrum-illustrated-message-title-to-heading:var(
9
+ --spectrum-spacing-400
10
+ );--spectrum-illustrated-message-heading-to-description:var(
11
+ --spectrum-spacing-75
12
+ );--spectrum-illustrated-message-illustration-color:var(
13
+ --spectrum-neutral-visual-color
14
+ );--spectrum-illustrated-message-illustration-accent-color:var(
15
+ --spectrum-accent-visual-color
16
+ );--spectrum-illustrated-message-title-font-family:var(
17
+ --spectrum-sans-font-family-stack
18
+ );--spectrum-illustrated-message-title-font-weight:var(
19
+ --spectrum-heading-sans-serif-font-weight
20
+ );--spectrum-illustrated-message-title-font-style:var(
21
+ --spectrum-heading-sans-serif-font-style
22
+ );--spectrum-illustrated-message-title-font-size:var(
23
+ --spectrum-illustrated-message-title-size
24
+ );--spectrum-illustrated-message-title-line-height:var(
25
+ --spectrum-heading-line-height
26
+ );--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(
27
+ --spectrum-sans-font-family-stack
28
+ );--spectrum-illustrated-message-description-font-weight:var(
29
+ --spectrum-body-sans-serif-font-weight
30
+ );--spectrum-illustrated-message-description-font-style:var(
31
+ --spectrum-body-sans-serif-font-style
32
+ );--spectrum-illustrated-message-description-font-size:var(
33
+ --spectrum-illustrated-message-body-size
34
+ );--spectrum-illustrated-message-description-line-height:var(
35
+ --spectrum-body-line-height
36
+ );--spectrum-illustrated-message-description-color:var(
37
+ --spectrum-body-color
38
+ )}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(
39
+ --spectrum-illustrated-message-cjk-title-size
40
+ )}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(
41
+ --highcontrast-illustrated-message-illustration-color,var(
42
+ --mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)
43
+ )
44
+ );margin-block-end:var(
45
+ --mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)
46
+ )}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(
47
+ --highcontrast-illustrated-message-illustration-accent-color,var(
48
+ --mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)
49
+ )
6
50
  )}#heading{color:var(
7
- --spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)
51
+ --mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)
52
+ );font-family:var(
53
+ --mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)
8
54
  );font-size:var(
9
- --spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)
55
+ --mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)
56
+ );font-style:var(
57
+ --mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)
10
58
  );font-weight:var(
11
- --spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
12
- );margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(
13
- --spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)
59
+ --mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)
60
+ );line-height:var(
61
+ --mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)
62
+ );margin-block:0;max-inline-size:var(
63
+ --mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)
64
+ )}#description{color:var(
65
+ --mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)
66
+ );font-family:var(
67
+ --mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)
68
+ );font-size:var(
69
+ --mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)
14
70
  );font-style:var(
15
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
16
- );margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(
17
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
18
- )}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}
71
+ --mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)
72
+ );font-weight:var(
73
+ --mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)
74
+ );line-height:var(
75
+ --mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)
76
+ );margin-block-end:0;margin-block-start:var(
77
+ --mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)
78
+ );max-inline-size:var(
79
+ --mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)
80
+ )}
19
81
  `;
20
82
  export default styles;
21
83
  //# sourceMappingURL=spectrum-illustratedmessage.css.dev.js.map
package/src/spectrum-illustratedmessage.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-illustratedmessage.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(\n--spectrum-illustratedmessage-illustration-margin-bottom\n)}#heading{color:var(\n--spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)\n);font-size:var(\n--spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)\n);font-weight:var(\n--spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(\n--spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)\n);font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n);margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n)}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustrated-message-description-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-heading-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-title-to-heading:var(\n--spectrum-spacing-400\n);--spectrum-illustrated-message-heading-to-description:var(\n--spectrum-spacing-75\n);--spectrum-illustrated-message-illustration-color:var(\n--spectrum-neutral-visual-color\n);--spectrum-illustrated-message-illustration-accent-color:var(\n--spectrum-accent-visual-color\n);--spectrum-illustrated-message-title-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-title-font-weight:var(\n--spectrum-heading-sans-serif-font-weight\n);--spectrum-illustrated-message-title-font-style:var(\n--spectrum-heading-sans-serif-font-style\n);--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-title-size\n);--spectrum-illustrated-message-title-line-height:var(\n--spectrum-heading-line-height\n);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-description-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-illustrated-message-description-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-illustrated-message-description-font-size:var(\n--spectrum-illustrated-message-body-size\n);--spectrum-illustrated-message-description-line-height:var(\n--spectrum-body-line-height\n);--spectrum-illustrated-message-description-color:var(\n--spectrum-body-color\n)}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-cjk-title-size\n)}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-color,var(\n--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)\n)\n);margin-block-end:var(\n--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)\n)}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-accent-color,var(\n--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)\n)\n)}#heading{color:var(\n--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)\n);font-family:var(\n--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)\n);font-size:var(\n--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)\n);font-style:var(\n--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)\n);font-weight:var(\n--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)\n);line-height:var(\n--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)\n);margin-block:0;max-inline-size:var(\n--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)\n)}#description{color:var(\n--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)\n);font-family:var(\n--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)\n);font-size:var(\n--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)\n);font-style:var(\n--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)\n);font-weight:var(\n--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)\n);line-height:var(\n--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)\n);margin-block-end:0;margin-block-start:var(\n--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)\n);max-inline-size:var(\n--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Ef,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-illustratedmessage.css.js CHANGED
@@ -1,18 +1,80 @@
1
- "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
2
- :host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(
3
- --spectrum-illustratedmessage-illustration-margin-bottom
1
+ "use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
2
+ :host{--spectrum-illustrated-message-description-max-inline-size:var(
3
+ --spectrum-illustrated-message-maximum-width
4
+ );--spectrum-illustrated-message-heading-max-inline-size:var(
5
+ --spectrum-illustrated-message-maximum-width
6
+ );--spectrum-illustrated-message-title-to-heading:var(
7
+ --spectrum-spacing-400
8
+ );--spectrum-illustrated-message-heading-to-description:var(
9
+ --spectrum-spacing-75
10
+ );--spectrum-illustrated-message-illustration-color:var(
11
+ --spectrum-neutral-visual-color
12
+ );--spectrum-illustrated-message-illustration-accent-color:var(
13
+ --spectrum-accent-visual-color
14
+ );--spectrum-illustrated-message-title-font-family:var(
15
+ --spectrum-sans-font-family-stack
16
+ );--spectrum-illustrated-message-title-font-weight:var(
17
+ --spectrum-heading-sans-serif-font-weight
18
+ );--spectrum-illustrated-message-title-font-style:var(
19
+ --spectrum-heading-sans-serif-font-style
20
+ );--spectrum-illustrated-message-title-font-size:var(
21
+ --spectrum-illustrated-message-title-size
22
+ );--spectrum-illustrated-message-title-line-height:var(
23
+ --spectrum-heading-line-height
24
+ );--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(
25
+ --spectrum-sans-font-family-stack
26
+ );--spectrum-illustrated-message-description-font-weight:var(
27
+ --spectrum-body-sans-serif-font-weight
28
+ );--spectrum-illustrated-message-description-font-style:var(
29
+ --spectrum-body-sans-serif-font-style
30
+ );--spectrum-illustrated-message-description-font-size:var(
31
+ --spectrum-illustrated-message-body-size
32
+ );--spectrum-illustrated-message-description-line-height:var(
33
+ --spectrum-body-line-height
34
+ );--spectrum-illustrated-message-description-color:var(
35
+ --spectrum-body-color
36
+ )}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(
37
+ --spectrum-illustrated-message-cjk-title-size
38
+ )}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(
39
+ --highcontrast-illustrated-message-illustration-color,var(
40
+ --mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)
41
+ )
42
+ );margin-block-end:var(
43
+ --mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)
44
+ )}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(
45
+ --highcontrast-illustrated-message-illustration-accent-color,var(
46
+ --mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)
47
+ )
4
48
  )}#heading{color:var(
5
- --spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)
49
+ --mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)
50
+ );font-family:var(
51
+ --mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)
6
52
  );font-size:var(
7
- --spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)
53
+ --mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)
54
+ );font-style:var(
55
+ --mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)
8
56
  );font-weight:var(
9
- --spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)
10
- );margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(
11
- --spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)
57
+ --mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)
58
+ );line-height:var(
59
+ --mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)
60
+ );margin-block:0;max-inline-size:var(
61
+ --mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)
62
+ )}#description{color:var(
63
+ --mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)
64
+ );font-family:var(
65
+ --mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)
66
+ );font-size:var(
67
+ --mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)
12
68
  );font-style:var(
13
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
14
- );margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(
15
- --spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)
16
- )}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}
17
- `;export default e;
69
+ --mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)
70
+ );font-weight:var(
71
+ --mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)
72
+ );line-height:var(
73
+ --mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)
74
+ );margin-block-end:0;margin-block-start:var(
75
+ --mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)
76
+ );max-inline-size:var(
77
+ --mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)
78
+ )}
79
+ `;export default t;
18
80
  //# sourceMappingURL=spectrum-illustratedmessage.css.js.map
package/src/spectrum-illustratedmessage.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-illustratedmessage.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustratedmessage-description-max-width:500px;--spectrum-illustratedmessage-heading-max-width:500px;--spectrum-illustratedmessage-illustration-margin-bottom:24px;--spectrum-illustratedmessage-heading-margin:0;--spectrum-illustratedmessage-description-margin:4px 0 0 0}:host{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}#illustration{margin-bottom:var(\n--spectrum-illustratedmessage-illustration-margin-bottom\n)}#heading{color:var(\n--spectrum-illustratedmessage-heading-color,var(--spectrum-global-color-gray-800)\n);font-size:var(\n--spectrum-illustratedmessage-heading-font-size,var(--spectrum-alias-heading-m-text-size)\n);font-weight:var(\n--spectrum-illustratedmessage-heading-font-weight,var(--spectrum-alias-heading-text-font-weight-regular)\n);margin:var(--spectrum-illustratedmessage-heading-margin);max-width:var(--spectrum-illustratedmessage-heading-max-width)}#description{color:var(\n--spectrum-illustratedmessage-description-color,var(--spectrum-global-color-gray-700)\n);font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n);margin:var(--spectrum-illustratedmessage-description-margin);max-width:var(--spectrum-illustratedmessage-description-max-width)}:host([cta]) #description{font-style:var(\n--spectrum-illustratedmessage-description-font-style,var(--spectrum-global-font-style-regular)\n)}#illustration{fill:currentColor;stroke:currentColor;color:var(--spectrum-global-color-gray-500)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-illustrated-message-description-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-heading-max-inline-size:var(\n--spectrum-illustrated-message-maximum-width\n);--spectrum-illustrated-message-title-to-heading:var(\n--spectrum-spacing-400\n);--spectrum-illustrated-message-heading-to-description:var(\n--spectrum-spacing-75\n);--spectrum-illustrated-message-illustration-color:var(\n--spectrum-neutral-visual-color\n);--spectrum-illustrated-message-illustration-accent-color:var(\n--spectrum-accent-visual-color\n);--spectrum-illustrated-message-title-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-title-font-weight:var(\n--spectrum-heading-sans-serif-font-weight\n);--spectrum-illustrated-message-title-font-style:var(\n--spectrum-heading-sans-serif-font-style\n);--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-title-size\n);--spectrum-illustrated-message-title-line-height:var(\n--spectrum-heading-line-height\n);--spectrum-illustrated-message-title-color:var(--spectrum-heading-color);--spectrum-illustrated-message-description-font-family:var(\n--spectrum-sans-font-family-stack\n);--spectrum-illustrated-message-description-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-illustrated-message-description-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-illustrated-message-description-font-size:var(\n--spectrum-illustrated-message-body-size\n);--spectrum-illustrated-message-description-line-height:var(\n--spectrum-body-line-height\n);--spectrum-illustrated-message-description-color:var(\n--spectrum-body-color\n)}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-illustrated-message-title-font-size:var(\n--spectrum-illustrated-message-cjk-title-size\n)}@media (forced-colors:active){:host{--highcontrast-illustrated-message-illustration-color:CanvasText;--highcontrast-illustrated-message-illustration-accent-color:Highlight}}:host{align-items:center;block-size:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}#illustration{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-color,var(\n--mod-illustrated-message-illustration-color,var(--spectrum-illustrated-message-illustration-color)\n)\n);margin-block-end:var(\n--mod-illustrated-message-title-to-heading,var(--spectrum-illustrated-message-title-to-heading)\n)}.spectrum-IllustratedMessage-accent{fill:currentColor;stroke:currentColor;color:var(\n--highcontrast-illustrated-message-illustration-accent-color,var(\n--mod-illustrated-message-illustration-accent-color,var(--spectrum-illustrated-message-illustration-accent-color)\n)\n)}#heading{color:var(\n--mod-illustrated-message-title-color,var(--spectrum-illustrated-message-title-color)\n);font-family:var(\n--mod-illustrated-message-title-font-family,var(--spectrum-illustrated-message-title-font-family)\n);font-size:var(\n--mod-illustrated-message-title-font-size,var(--spectrum-illustrated-message-title-font-size)\n);font-style:var(\n--mod-illustrated-message-title-font-style,var(--spectrum-illustrated-message-title-font-style)\n);font-weight:var(\n--mod-illustrated-message-title-font-weight,var(--spectrum-illustrated-message-title-font-weight)\n);line-height:var(\n--mod-illustrated-message-title-line-height,var(--spectrum-illustrated-message-title-line-height)\n);margin-block:0;max-inline-size:var(\n--mod-illustrated-message-heading-max-inline-size,var(--spectrum-illustrated-message-heading-max-inline-size)\n)}#description{color:var(\n--mod-illustrated-message-description-color,var(--spectrum-illustrated-message-description-color)\n);font-family:var(\n--mod-illustrated-message-description-font-family,var(--spectrum-illustrated-message-description-font-family)\n);font-size:var(\n--mod-illustrated-message-description-font-size,var(--spectrum-illustrated-message-description-font-size)\n);font-style:var(\n--mod-illustrated-message-description-font-style,var(--spectrum-illustrated-message-description-font-style)\n);font-weight:var(\n--mod-illustrated-message-description-font-weight,var(--spectrum-illustrated-message-description-font-weight)\n);line-height:var(\n--mod-illustrated-message-description-line-height,var(--spectrum-illustrated-message-description-line-height)\n);margin-block-end:0;margin-block-start:var(\n--mod-illustrated-message-heading-to-description,var(--spectrum-illustrated-message-heading-to-description)\n);max-inline-size:var(\n--mod-illustrated-message-description-max-inline-size,var(--spectrum-illustrated-message-description-max-inline-size)\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+Ef,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/illustrated-message.stories.js CHANGED
@@ -10,18 +10,7 @@ export const Default = () => {
10
10
  return html`
11
11
  <sp-illustrated-message
12
12
  heading="Drag and Drop Your File"
13
- description="This message has italics"
14
- >
15
- ${illustration}
16
- </sp-illustrated-message>
17
- `;
18
- };
19
- export const CTA = () => {
20
- return html`
21
- <sp-illustrated-message
22
- heading="Drag and Drop Your File"
23
- description="This message has no italics"
24
- cta
13
+ description="Additional descriptive text"
25
14
  >
26
15
  ${illustration}
27
16
  </sp-illustrated-message>
package/stories/illustrated-message.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["illustrated-message.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { illustration } from '../../dropzone/test/test-svg.js';\n\nexport default {\n component: 'sp-illustrated-message',\n title: 'IllustratedMessage',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"This message has italics\"\n >\n ${illustration}\n </sp-illustrated-message>\n `;\n};\n\nexport const CTA = (): TemplateResult => {\n return html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"This message has no italics\"\n cta\n >\n ${illustration}\n </sp-illustrated-message>\n `;\n};\n"],
5
- "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,SAAS,oBAAoB;AAE7B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKG;AAAA;AAAA;AAGd;AAEO,aAAM,MAAM,MAAsB;AACrC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMG;AAAA;AAAA;AAGd;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { illustration } from '../../dropzone/test/test-svg.js';\n\nexport default {\n component: 'sp-illustrated-message',\n title: 'IllustratedMessage',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"Additional descriptive text\"\n >\n ${illustration}\n </sp-illustrated-message>\n `;\n};\n"],
5
+ "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,SAAS,oBAAoB;AAE7B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKG;AAAA;AAAA;AAGd;",
6
6
  "names": []
7
7
  }
package/test/benchmark/test-basic.js CHANGED
@@ -5,7 +5,7 @@ import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
5
5
  measureFixtureCreation(html`
6
6
  <sp-illustrated-message
7
7
  heading="Drag and Drop Your File"
8
- description="This message has italics"
8
+ description="Additional descriptive text"
9
9
  >
10
10
  <svg
11
11
  xmlns="http://www.w3.org/2000/svg"
package/test/benchmark/test-basic.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["test-basic.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"This message has italics\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 150 103\"\n width=\"150\"\n height=\"103\"\n viewBox=\"0 0 150 103\"\n >\n <path\n 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\"\n ></path>\n </svg>\n </sp-illustrated-message>\n`);\n"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"Additional descriptive text\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 150 103\"\n width=\"150\"\n height=\"103\"\n viewBox=\"0 0 150 103\"\n >\n <path\n 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\"\n ></path>\n </svg>\n </sp-illustrated-message>\n`);\n"],
5
5
  "mappings": ";AAYA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAiBtB;",
6
6
  "names": []
7
7
  }
package/test/illustrated-message.test.js CHANGED
@@ -7,7 +7,7 @@ describe("Illustrated Message", () => {
7
7
  html`
8
8
  <sp-illustrated-message
9
9
  heading="Drag and Drop Your File"
10
- description="This message has italics"
10
+ description="Additional descriptive text"
11
11
  >
12
12
  <svg
13
13
  xmlns="http://www.w3.org/2000/svg"
package/test/illustrated-message.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["illustrated-message.test.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { IllustratedMessage } from '../';\nimport { expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Illustrated Message', () => {\n it('loads', async () => {\n const el = await fixture<IllustratedMessage>(\n html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"This message has italics\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 150 103\"\n width=\"150\"\n height=\"103\"\n viewBox=\"0 0 150 103\"\n >\n <path\n 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\"\n ></path>\n </svg>\n </sp-illustrated-message>\n `\n );\n expect(el).to.not.equal(undefined);\n if (!el.shadowRoot) throw new Error('No shadowRoot');\n const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n expect(slot).to.not.equal(undefined);\n return true;\n });\n});\n"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport { IllustratedMessage } from '../';\nimport { expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Illustrated Message', () => {\n it('loads', async () => {\n const el = await fixture<IllustratedMessage>(\n html`\n <sp-illustrated-message\n heading=\"Drag and Drop Your File\"\n description=\"Additional descriptive text\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 150 103\"\n width=\"150\"\n height=\"103\"\n viewBox=\"0 0 150 103\"\n >\n <path\n 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\"\n ></path>\n </svg>\n </sp-illustrated-message>\n `\n );\n expect(el).to.not.equal(undefined);\n if (!el.shadowRoot) throw new Error('No shadowRoot');\n const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n expect(slot).to.not.equal(undefined);\n return true;\n });\n});\n"],
5
5
  "mappings": ";AAWA,OAAO;AAEP,SAAS,QAAQ,SAAS,YAAY;AAEtC,SAAS,uBAAuB,MAAM;AAClC,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBJ;AACA,WAAO,EAAE,EAAE,GAAG,IAAI,MAAM,MAAS;AACjC,QAAI,CAAC,GAAG;AAAY,YAAM,IAAI,MAAM,eAAe;AACnD,UAAM,OAAO,GAAG,WAAW,cAAc,MAAM;AAC/C,WAAO,IAAI,EAAE,GAAG,IAAI,MAAM,MAAS;AACnC,WAAO;AAAA,EACX,CAAC;AACL,CAAC;",
6
6
  "names": []
7
7
  }
package/custom-elements.json DELETED
@@ -1,112 +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
- "default": "'sp-illustrated-message'"
52
- },
53
- {
54
- "kind": "field",
55
- "name": "heading",
56
- "type": {
57
- "text": "string"
58
- },
59
- "privacy": "public",
60
- "default": "''",
61
- "attribute": "heading"
62
- },
63
- {
64
- "kind": "field",
65
- "name": "description",
66
- "type": {
67
- "text": "string"
68
- },
69
- "privacy": "public",
70
- "default": "''",
71
- "attribute": "description"
72
- }
73
- ],
74
- "attributes": [
75
- {
76
- "name": "heading",
77
- "type": {
78
- "text": "string"
79
- },
80
- "default": "''",
81
- "fieldName": "heading"
82
- },
83
- {
84
- "name": "description",
85
- "type": {
86
- "text": "string"
87
- },
88
- "default": "''",
89
- "fieldName": "description"
90
- }
91
- ],
92
- "superclass": {
93
- "name": "SpectrumElement",
94
- "package": "@spectrum-web-components/base"
95
- },
96
- "tagName": "sp-illustrated-message",
97
- "customElement": true
98
- }
99
- ],
100
- "exports": [
101
- {
102
- "kind": "js",
103
- "name": "IllustratedMessage",
104
- "declaration": {
105
- "name": "IllustratedMessage",
106
- "module": "src/IllustratedMessage.js"
107
- }
108
- }
109
- ]
110
- }
111
- ]
112
- }