@spectrum-web-components/badge 0.4.6 → 0.4.7

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 (14) hide show
  1. package/README.md +2 -1
  2. package/custom-elements.json +6 -6
  3. package/package.json +2 -2
  4. package/src/badge.css.dev.js +11 -25
  5. package/src/badge.css.dev.js.map +2 -2
  6. package/src/badge.css.js +11 -25
  7. package/src/badge.css.js.map +2 -2
  8. package/src/spectrum-badge.css.dev.js +11 -25
  9. package/src/spectrum-badge.css.dev.js.map +2 -2
  10. package/src/spectrum-badge.css.js +11 -25
  11. package/src/spectrum-badge.css.js.map +2 -2
  12. package/src/spectrum-config.js +102 -73
  13. package/stories/badge.stories.js +2 -1
  14. package/stories/badge.stories.js.map +2 -2
package/README.md CHANGED
@@ -138,7 +138,8 @@ Non-semantic badge colors are no longer supported directly by Spectrum and Spect
138
138
  </sp-badge>
139
139
  <sp-badge
140
140
  variant="yellow"
141
- style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default); --mod-badge-label-icon-color-white: var(--spectrum-global-color-static-black);"
141
+ static="black"
142
+ style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default)"
142
143
  >
143
144
  Yellow
144
145
  </sp-badge>
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-badge.ts",
7
+ "path": "sp-badge.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "src/Badge.ts",
22
+ "path": "src/Badge.js",
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "variable",
@@ -143,7 +143,7 @@
143
143
  "name": "BADGE_VARIANTS",
144
144
  "declaration": {
145
145
  "name": "BADGE_VARIANTS",
146
- "module": "src/Badge.ts"
146
+ "module": "src/Badge.js"
147
147
  }
148
148
  },
149
149
  {
@@ -151,7 +151,7 @@
151
151
  "name": "FIXED_VALUES_DEPRECATED",
152
152
  "declaration": {
153
153
  "name": "FIXED_VALUES_DEPRECATED",
154
- "module": "src/Badge.ts"
154
+ "module": "src/Badge.js"
155
155
  }
156
156
  },
157
157
  {
@@ -159,7 +159,7 @@
159
159
  "name": "FIXED_VALUES",
160
160
  "declaration": {
161
161
  "name": "FIXED_VALUES",
162
- "module": "src/Badge.ts"
162
+ "module": "src/Badge.js"
163
163
  }
164
164
  },
165
165
  {
@@ -167,7 +167,7 @@
167
167
  "name": "Badge",
168
168
  "declaration": {
169
169
  "name": "Badge",
170
- "module": "src/Badge.ts"
170
+ "module": "src/Badge.js"
171
171
  }
172
172
  }
173
173
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/badge",
3
- "version": "0.4.6",
3
+ "version": "0.4.7",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
72
+ "gitHead": "1e25ee121f3bc838dbb99bac62f3c95857570f7a"
73
73
  }
package/src/badge.css.dev.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-badge-corner-radius:var(
5
- --spectrum-corner-radius-100
6
- );--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
4
+ :host{--spectrum-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
7
5
  --spectrum-neutral-subdued-background-color-default
8
6
  );--spectrum-badge-background-color-accent:var(
9
7
  --spectrum-accent-background-color-default
@@ -25,9 +23,7 @@ const styles = css`
25
23
  --spectrum-component-top-to-workflow-icon-100
26
24
  );--spectrum-badge-icon-only-spacing-horizontal:var(
27
25
  --spectrum-component-edge-to-visual-only-100
28
- )}:host([size=s]){--spectrum-badge-height:var(
29
- --spectrum-component-height-75
30
- );--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
26
+ )}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
31
27
  --spectrum-component-top-to-text-75
32
28
  );--spectrum-badge-label-spacing-vertical-bottom:var(
33
29
  --spectrum-component-bottom-to-text-75
@@ -39,9 +35,7 @@ const styles = css`
39
35
  --spectrum-component-top-to-workflow-icon-75
40
36
  );--spectrum-badge-icon-only-spacing-horizontal:var(
41
37
  --spectrum-component-edge-to-visual-only-75
42
- )}:host([size=m]){--spectrum-badge-height:var(
43
- --spectrum-component-height-100
44
- );--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
38
+ )}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
45
39
  --spectrum-component-top-to-text-100
46
40
  );--spectrum-badge-label-spacing-vertical-bottom:var(
47
41
  --spectrum-component-bottom-to-text-100
@@ -53,9 +47,7 @@ const styles = css`
53
47
  --spectrum-component-top-to-workflow-icon-100
54
48
  );--spectrum-badge-icon-only-spacing-horizontal:var(
55
49
  --spectrum-component-edge-to-visual-only-100
56
- )}:host([size=l]){--spectrum-badge-height:var(
57
- --spectrum-component-height-100
58
- );--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
50
+ )}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
59
51
  --spectrum-component-top-to-text-200
60
52
  );--spectrum-badge-label-spacing-vertical-bottom:var(
61
53
  --spectrum-component-bottom-to-text-200
@@ -67,9 +59,7 @@ const styles = css`
67
59
  --spectrum-component-top-to-workflow-icon-200
68
60
  );--spectrum-badge-icon-only-spacing-horizontal:var(
69
61
  --spectrum-component-edge-to-visual-only-200
70
- )}:host([size=xl]){--spectrum-badge-height:var(
71
- --spectrum-component-height-100
72
- );--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
62
+ )}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
73
63
  --spectrum-component-top-to-text-300
74
64
  );--spectrum-badge-label-spacing-vertical-bottom:var(
75
65
  --spectrum-component-bottom-to-text-300
@@ -83,13 +73,11 @@ const styles = css`
83
73
  --spectrum-component-edge-to-visual-only-300
84
74
  )}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(
85
75
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
86
- );border:1px solid transparent;border-radius:var(
76
+ );border:1px solid #0000;border-radius:var(
87
77
  --mod-badge-corner-radius,var(--spectrum-badge-corner-radius)
88
78
  );color:var(
89
79
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
90
- );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(
91
- --mod-badge-height,var(--spectrum-badge-height)
92
- );position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(
80
+ );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(
93
81
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
94
82
  )}:host([variant=neutral]){background:var(
95
83
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
@@ -103,9 +91,7 @@ const styles = css`
103
91
  --mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)
104
92
  )}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(
105
93
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
106
- );font-size:var(
107
- --mod-badge-font-size,var(--spectrum-badge-font-size)
108
- );line-height:var(
94
+ );font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(
109
95
  --mod-badge-line-height,var(--spectrum-badge-line-height)
110
96
  );padding-block-end:var(
111
97
  --mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)
@@ -115,11 +101,11 @@ const styles = css`
115
101
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
116
102
  );padding-inline-start:var(
117
103
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
118
- )}.spectrum-Badge--black-text .label{color:var(
104
+ )}:host([static=black]) .label{color:var(
119
105
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
120
106
  )}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(
121
107
  --mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)
122
- )}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
108
+ )}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
123
109
  --mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)
124
110
  );color:var(
125
111
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
@@ -139,7 +125,7 @@ const styles = css`
139
125
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
140
126
  );padding-inline-start:var(
141
127
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
142
- )}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(
128
+ )}:host([static=black]) ::slotted([slot=icon]){color:var(
143
129
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
144
130
  )}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
145
131
  --spectrum-alias-workflow-icon-size-s
package/src/badge.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["badge.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-badge-corner-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(\n--spectrum-component-height-75\n);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid transparent;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(\n--mod-badge-height,var(--spectrum-badge-height)\n);position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(\n--mod-badge-font-size,var(--spectrum-badge-font-size)\n);line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}.spectrum-Badge--black-text .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}::slotted([slot=icon]){flex-shrink:0}.label slot{display:block;max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Kf,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-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid #0000;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}:host([static=black]) .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}:host([static=black]) ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}::slotted([slot=icon]){flex-shrink:0}.label slot{display:block;max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiKf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/badge.css.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
2
- :host{--spectrum-badge-corner-radius:var(
3
- --spectrum-corner-radius-100
4
- );--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
2
+ :host{--spectrum-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
5
3
  --spectrum-neutral-subdued-background-color-default
6
4
  );--spectrum-badge-background-color-accent:var(
7
5
  --spectrum-accent-background-color-default
@@ -23,9 +21,7 @@
23
21
  --spectrum-component-top-to-workflow-icon-100
24
22
  );--spectrum-badge-icon-only-spacing-horizontal:var(
25
23
  --spectrum-component-edge-to-visual-only-100
26
- )}:host([size=s]){--spectrum-badge-height:var(
27
- --spectrum-component-height-75
28
- );--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
24
+ )}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
29
25
  --spectrum-component-top-to-text-75
30
26
  );--spectrum-badge-label-spacing-vertical-bottom:var(
31
27
  --spectrum-component-bottom-to-text-75
@@ -37,9 +33,7 @@
37
33
  --spectrum-component-top-to-workflow-icon-75
38
34
  );--spectrum-badge-icon-only-spacing-horizontal:var(
39
35
  --spectrum-component-edge-to-visual-only-75
40
- )}:host([size=m]){--spectrum-badge-height:var(
41
- --spectrum-component-height-100
42
- );--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
36
+ )}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
43
37
  --spectrum-component-top-to-text-100
44
38
  );--spectrum-badge-label-spacing-vertical-bottom:var(
45
39
  --spectrum-component-bottom-to-text-100
@@ -51,9 +45,7 @@
51
45
  --spectrum-component-top-to-workflow-icon-100
52
46
  );--spectrum-badge-icon-only-spacing-horizontal:var(
53
47
  --spectrum-component-edge-to-visual-only-100
54
- )}:host([size=l]){--spectrum-badge-height:var(
55
- --spectrum-component-height-100
56
- );--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
48
+ )}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
57
49
  --spectrum-component-top-to-text-200
58
50
  );--spectrum-badge-label-spacing-vertical-bottom:var(
59
51
  --spectrum-component-bottom-to-text-200
@@ -65,9 +57,7 @@
65
57
  --spectrum-component-top-to-workflow-icon-200
66
58
  );--spectrum-badge-icon-only-spacing-horizontal:var(
67
59
  --spectrum-component-edge-to-visual-only-200
68
- )}:host([size=xl]){--spectrum-badge-height:var(
69
- --spectrum-component-height-100
70
- );--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
60
+ )}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
71
61
  --spectrum-component-top-to-text-300
72
62
  );--spectrum-badge-label-spacing-vertical-bottom:var(
73
63
  --spectrum-component-bottom-to-text-300
@@ -81,13 +71,11 @@
81
71
  --spectrum-component-edge-to-visual-only-300
82
72
  )}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(
83
73
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
84
- );border:1px solid transparent;border-radius:var(
74
+ );border:1px solid #0000;border-radius:var(
85
75
  --mod-badge-corner-radius,var(--spectrum-badge-corner-radius)
86
76
  );color:var(
87
77
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
88
- );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(
89
- --mod-badge-height,var(--spectrum-badge-height)
90
- );position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(
78
+ );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(
91
79
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
92
80
  )}:host([variant=neutral]){background:var(
93
81
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
@@ -101,9 +89,7 @@
101
89
  --mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)
102
90
  )}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(
103
91
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
104
- );font-size:var(
105
- --mod-badge-font-size,var(--spectrum-badge-font-size)
106
- );line-height:var(
92
+ );font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(
107
93
  --mod-badge-line-height,var(--spectrum-badge-line-height)
108
94
  );padding-block-end:var(
109
95
  --mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)
@@ -113,11 +99,11 @@
113
99
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
114
100
  );padding-inline-start:var(
115
101
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
116
- )}.spectrum-Badge--black-text .label{color:var(
102
+ )}:host([static=black]) .label{color:var(
117
103
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
118
104
  )}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(
119
105
  --mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)
120
- )}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
106
+ )}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
121
107
  --mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)
122
108
  );color:var(
123
109
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
@@ -137,7 +123,7 @@
137
123
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
138
124
  );padding-inline-start:var(
139
125
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
140
- )}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(
126
+ )}:host([static=black]) ::slotted([slot=icon]){color:var(
141
127
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
142
128
  )}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
143
129
  --spectrum-alias-workflow-icon-size-s
package/src/badge.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["badge.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-badge-corner-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(\n--spectrum-component-height-75\n);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid transparent;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(\n--mod-badge-height,var(--spectrum-badge-height)\n);position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(\n--mod-badge-font-size,var(--spectrum-badge-font-size)\n);line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}.spectrum-Badge--black-text .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}::slotted([slot=icon]){flex-shrink:0}.label slot{display:block;max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);overflow:hidden}[icon-only]+.label{display:none}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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+Kf,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-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid #0000;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}:host([static=black]) .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}:host([static=black]) ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host{align-items:center}:host([fixed=left]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=right]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=top]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=bottom]){border-end-end-radius:0;border-end-start-radius:0}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}::slotted([slot=icon]){flex-shrink:0}.label slot{display:block;max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);overflow:hidden}[icon-only]+.label{display:none}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiKf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-badge.css.dev.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-badge-corner-radius:var(
5
- --spectrum-corner-radius-100
6
- );--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
4
+ :host{--spectrum-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
7
5
  --spectrum-neutral-subdued-background-color-default
8
6
  );--spectrum-badge-background-color-accent:var(
9
7
  --spectrum-accent-background-color-default
@@ -25,9 +23,7 @@ const styles = css`
25
23
  --spectrum-component-top-to-workflow-icon-100
26
24
  );--spectrum-badge-icon-only-spacing-horizontal:var(
27
25
  --spectrum-component-edge-to-visual-only-100
28
- )}:host([size=s]){--spectrum-badge-height:var(
29
- --spectrum-component-height-75
30
- );--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
26
+ )}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
31
27
  --spectrum-component-top-to-text-75
32
28
  );--spectrum-badge-label-spacing-vertical-bottom:var(
33
29
  --spectrum-component-bottom-to-text-75
@@ -39,9 +35,7 @@ const styles = css`
39
35
  --spectrum-component-top-to-workflow-icon-75
40
36
  );--spectrum-badge-icon-only-spacing-horizontal:var(
41
37
  --spectrum-component-edge-to-visual-only-75
42
- )}:host([size=m]){--spectrum-badge-height:var(
43
- --spectrum-component-height-100
44
- );--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
38
+ )}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
45
39
  --spectrum-component-top-to-text-100
46
40
  );--spectrum-badge-label-spacing-vertical-bottom:var(
47
41
  --spectrum-component-bottom-to-text-100
@@ -53,9 +47,7 @@ const styles = css`
53
47
  --spectrum-component-top-to-workflow-icon-100
54
48
  );--spectrum-badge-icon-only-spacing-horizontal:var(
55
49
  --spectrum-component-edge-to-visual-only-100
56
- )}:host([size=l]){--spectrum-badge-height:var(
57
- --spectrum-component-height-100
58
- );--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
50
+ )}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
59
51
  --spectrum-component-top-to-text-200
60
52
  );--spectrum-badge-label-spacing-vertical-bottom:var(
61
53
  --spectrum-component-bottom-to-text-200
@@ -67,9 +59,7 @@ const styles = css`
67
59
  --spectrum-component-top-to-workflow-icon-200
68
60
  );--spectrum-badge-icon-only-spacing-horizontal:var(
69
61
  --spectrum-component-edge-to-visual-only-200
70
- )}:host([size=xl]){--spectrum-badge-height:var(
71
- --spectrum-component-height-100
72
- );--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
62
+ )}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
73
63
  --spectrum-component-top-to-text-300
74
64
  );--spectrum-badge-label-spacing-vertical-bottom:var(
75
65
  --spectrum-component-bottom-to-text-300
@@ -83,13 +73,11 @@ const styles = css`
83
73
  --spectrum-component-edge-to-visual-only-300
84
74
  )}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(
85
75
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
86
- );border:1px solid transparent;border-radius:var(
76
+ );border:1px solid #0000;border-radius:var(
87
77
  --mod-badge-corner-radius,var(--spectrum-badge-corner-radius)
88
78
  );color:var(
89
79
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
90
- );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(
91
- --mod-badge-height,var(--spectrum-badge-height)
92
- );position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(
80
+ );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(
93
81
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
94
82
  )}:host([variant=neutral]){background:var(
95
83
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
@@ -103,9 +91,7 @@ const styles = css`
103
91
  --mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)
104
92
  )}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(
105
93
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
106
- );font-size:var(
107
- --mod-badge-font-size,var(--spectrum-badge-font-size)
108
- );line-height:var(
94
+ );font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(
109
95
  --mod-badge-line-height,var(--spectrum-badge-line-height)
110
96
  );padding-block-end:var(
111
97
  --mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)
@@ -115,11 +101,11 @@ const styles = css`
115
101
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
116
102
  );padding-inline-start:var(
117
103
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
118
- )}.spectrum-Badge--black-text .label{color:var(
104
+ )}:host([static=black]) .label{color:var(
119
105
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
120
106
  )}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(
121
107
  --mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)
122
- )}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
108
+ )}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
123
109
  --mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)
124
110
  );color:var(
125
111
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
@@ -139,7 +125,7 @@ const styles = css`
139
125
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
140
126
  );padding-inline-start:var(
141
127
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
142
- )}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(
128
+ )}:host([static=black]) ::slotted([slot=icon]){color:var(
143
129
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
144
130
  )}
145
131
  `;
package/src/spectrum-badge.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-badge.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-badge-corner-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(\n--spectrum-component-height-75\n);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid transparent;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(\n--mod-badge-height,var(--spectrum-badge-height)\n);position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(\n--mod-badge-font-size,var(--spectrum-badge-font-size)\n);line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}.spectrum-Badge--black-text .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+If,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-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid #0000;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}:host([static=black]) .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}:host([static=black]) ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiIf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-badge.css.js CHANGED
@@ -1,7 +1,5 @@
1
1
  "use strict";import{css as e}from"@spectrum-web-components/base";const o=e`
2
- :host{--spectrum-badge-corner-radius:var(
3
- --spectrum-corner-radius-100
4
- );--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
2
+ :host{--spectrum-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(
5
3
  --spectrum-neutral-subdued-background-color-default
6
4
  );--spectrum-badge-background-color-accent:var(
7
5
  --spectrum-accent-background-color-default
@@ -23,9 +21,7 @@
23
21
  --spectrum-component-top-to-workflow-icon-100
24
22
  );--spectrum-badge-icon-only-spacing-horizontal:var(
25
23
  --spectrum-component-edge-to-visual-only-100
26
- )}:host([size=s]){--spectrum-badge-height:var(
27
- --spectrum-component-height-75
28
- );--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
24
+ )}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(
29
25
  --spectrum-component-top-to-text-75
30
26
  );--spectrum-badge-label-spacing-vertical-bottom:var(
31
27
  --spectrum-component-bottom-to-text-75
@@ -37,9 +33,7 @@
37
33
  --spectrum-component-top-to-workflow-icon-75
38
34
  );--spectrum-badge-icon-only-spacing-horizontal:var(
39
35
  --spectrum-component-edge-to-visual-only-75
40
- )}:host([size=m]){--spectrum-badge-height:var(
41
- --spectrum-component-height-100
42
- );--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
36
+ )}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(
43
37
  --spectrum-component-top-to-text-100
44
38
  );--spectrum-badge-label-spacing-vertical-bottom:var(
45
39
  --spectrum-component-bottom-to-text-100
@@ -51,9 +45,7 @@
51
45
  --spectrum-component-top-to-workflow-icon-100
52
46
  );--spectrum-badge-icon-only-spacing-horizontal:var(
53
47
  --spectrum-component-edge-to-visual-only-100
54
- )}:host([size=l]){--spectrum-badge-height:var(
55
- --spectrum-component-height-100
56
- );--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
48
+ )}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(
57
49
  --spectrum-component-top-to-text-200
58
50
  );--spectrum-badge-label-spacing-vertical-bottom:var(
59
51
  --spectrum-component-bottom-to-text-200
@@ -65,9 +57,7 @@
65
57
  --spectrum-component-top-to-workflow-icon-200
66
58
  );--spectrum-badge-icon-only-spacing-horizontal:var(
67
59
  --spectrum-component-edge-to-visual-only-200
68
- )}:host([size=xl]){--spectrum-badge-height:var(
69
- --spectrum-component-height-100
70
- );--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
60
+ )}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(
71
61
  --spectrum-component-top-to-text-300
72
62
  );--spectrum-badge-label-spacing-vertical-bottom:var(
73
63
  --spectrum-component-bottom-to-text-300
@@ -81,13 +71,11 @@
81
71
  --spectrum-component-edge-to-visual-only-300
82
72
  )}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(
83
73
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
84
- );border:1px solid transparent;border-radius:var(
74
+ );border:1px solid #0000;border-radius:var(
85
75
  --mod-badge-corner-radius,var(--spectrum-badge-corner-radius)
86
76
  );color:var(
87
77
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
88
- );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(
89
- --mod-badge-height,var(--spectrum-badge-height)
90
- );position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(
78
+ );cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(
91
79
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
92
80
  )}:host([variant=neutral]){background:var(
93
81
  --mod-badge-background-color-default,var(--spectrum-badge-background-color-default)
@@ -101,9 +89,7 @@
101
89
  --mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)
102
90
  )}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(
103
91
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
104
- );font-size:var(
105
- --mod-badge-font-size,var(--spectrum-badge-font-size)
106
- );line-height:var(
92
+ );font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(
107
93
  --mod-badge-line-height,var(--spectrum-badge-line-height)
108
94
  );padding-block-end:var(
109
95
  --mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)
@@ -113,11 +99,11 @@
113
99
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
114
100
  );padding-inline-start:var(
115
101
  --mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)
116
- )}.spectrum-Badge--black-text .label{color:var(
102
+ )}:host([static=black]) .label{color:var(
117
103
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
118
104
  )}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(
119
105
  --mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)
120
- )}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
106
+ )}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(
121
107
  --mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)
122
108
  );color:var(
123
109
  --mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)
@@ -137,7 +123,7 @@
137
123
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
138
124
  );padding-inline-start:var(
139
125
  --mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)
140
- )}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(
126
+ )}:host([static=black]) ::slotted([slot=icon]){color:var(
141
127
  --mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)
142
128
  )}
143
129
  `;export default o;
package/src/spectrum-badge.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-badge.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-badge-corner-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(\n--spectrum-component-height-75\n);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(\n--spectrum-component-height-100\n);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid transparent;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(\n--mod-badge-height,var(--spectrum-badge-height)\n);position:relative;vertical-align:middle}.spectrum-Badge--black-text{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(\n--mod-badge-font-size,var(--spectrum-badge-font-size)\n);line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}.spectrum-Badge--black-text .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}slot[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}.spectrum-Badge--black-text ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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+If,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-badge-corner-radius:var(--spectrum-corner-radius-100);--spectrum-badge-line-height:var(--spectrum-line-height-100);--spectrum-badge-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-badge-label-icon-color-white:var(--spectrum-white);--spectrum-badge-label-icon-color-black:var(--spectrum-black);--spectrum-badge-background-color-default:var(\n--spectrum-neutral-subdued-background-color-default\n);--spectrum-badge-background-color-accent:var(\n--spectrum-accent-background-color-default\n);--spectrum-badge-background-color-informative:var(\n--spectrum-informative-background-color-default\n);--spectrum-badge-background-color-negative:var(\n--spectrum-negative-background-color-default\n);--spectrum-badge-background-color-positive:var(\n--spectrum-positive-background-color-default\n);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=s]){--spectrum-badge-height:var(--spectrum-component-height-75);--spectrum-badge-font-size:var(--spectrum-font-size-75);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-75\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-75\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-75);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-75\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-75\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-75\n)}:host([size=m]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-100\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-100\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-100);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-100\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-100\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-100\n)}:host([size=l]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-200);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-200\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-200\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-200);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-200\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-200\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-200\n)}:host([size=xl]){--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-300);--spectrum-badge-label-spacing-vertical-top:var(\n--spectrum-component-top-to-text-300\n);--spectrum-badge-label-spacing-vertical-bottom:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-badge-label-spacing-horizontal:var(\n--spectrum-component-edge-to-text-300\n);--spectrum-badge-workflow-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-badge-icon-text-spacing:var(--spectrum-text-to-visual-300);--spectrum-badge-icon-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-300\n);--spectrum-badge-icon-spacing-vertical-top:var(\n--spectrum-component-top-to-workflow-icon-300\n);--spectrum-badge-icon-only-spacing-horizontal:var(\n--spectrum-component-edge-to-visual-only-300\n)}@media (forced-colors:active){:host{border-color:CanvasText}}:host{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-smoothing:subpixel-antialiased;background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n);border:1px solid #0000;border-radius:var(\n--mod-badge-corner-radius,var(--spectrum-badge-corner-radius)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);cursor:default;display:inline-flex;inline-size:auto;min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));position:relative;vertical-align:middle}:host([static=black]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}:host([variant=neutral]){background:var(\n--mod-badge-background-color-default,var(--spectrum-badge-background-color-default)\n)}:host([variant=accent]){background:var(\n--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent)\n)}:host([variant=informative]){background:var(\n--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative)\n)}:host([variant=negative]){background:var(\n--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative)\n)}:host([variant=positive]){background:var(\n--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive)\n)}:host([fixed=inline-start]){border-end-start-radius:0;border-start-start-radius:0}:host([fixed=inline-end]){border-end-end-radius:0;border-start-end-radius:0}:host([fixed=block-start]){border-start-end-radius:0;border-start-start-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(\n--mod-badge-line-height,var(--spectrum-badge-line-height)\n);padding-block-end:var(\n--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom)\n);padding-block-start:var(\n--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal)\n)}:host([static=black]) .label{color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\n)}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(\n--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk)\n)}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);color:var(\n--mod-badge-label-icon-color-white,var(--spectrum-badge-label-icon-color-white)\n);flex:0 0 var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);inline-size:var(\n--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size)\n);padding-block-end:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-block-start:var(\n--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top)\n);padding-inline-end:var(\n--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing)\n);padding-inline-start:var(\n--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal)\n)}[icon-only]::slotted(*){padding-inline-end:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n);padding-inline-start:var(\n--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal)\n)}:host([static=black]) ::slotted([slot=icon]){color:var(\n--mod-badge-label-icon-color-black,var(--spectrum-badge-label-icon-color-black)\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiIf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -1,108 +1,137 @@
1
+ // @ts-check
1
2
  /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
3
+ Copyright 2023 Adobe. All rights reserved.
4
+ This file is licensed to you under the Apache License, Version 2.0 (the 'License');
4
5
  you may not use this file except in compliance with the License. You may obtain a copy
5
6
  of the License at http://www.apache.org/licenses/LICENSE-2.0
6
7
 
7
8
  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
+ the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
10
  OF ANY KIND, either express or implied. See the License for the specific language
10
11
  governing permissions and limitations under the License.
11
12
  */
12
13
 
14
+ import { converterFor } from '../../../tasks/process-spectrum-utils.js';
15
+
16
+ const converter = converterFor('spectrum-Badge');
17
+
18
+ /**
19
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
20
+ */
13
21
  const config = {
14
- spectrum: 'badge',
15
- components: [
22
+ conversions: [
16
23
  {
17
- name: 'badge',
18
- host: {
19
- selector: '.spectrum-Badge',
20
- },
21
- attributes: [
24
+ inPackage: '@spectrum-css/badge',
25
+ outPackage: 'badge',
26
+ fileName: 'badge',
27
+ excludeByComponents: [
22
28
  {
23
- type: 'enum',
24
- name: 'size',
25
- values: [
26
- {
27
- name: 's',
28
- selector: '.spectrum-Badge--sizeS',
29
- },
29
+ type: 'pseudo-class',
30
+ kind: 'hover',
31
+ },
32
+ ],
33
+ components: [
34
+ converter.classToHost(),
35
+ ...converter.enumerateAttributes(
36
+ [
37
+ ['spectrum-Badge--sizeS', 's'],
38
+ ['spectrum-Badge--sizeM', 'm'],
39
+ ['spectrum-Badge--sizeL', 'l'],
40
+ ['spectrum-Badge--sizeXL', 'xl'],
41
+ ],
42
+ 'size'
43
+ ),
44
+ ...converter.enumerateAttributes(
45
+ [
46
+ // semantic
47
+ ['spectrum-Badge--accent'],
48
+ ['spectrum-Badge--positive'],
49
+ ['spectrum-Badge--informative'],
50
+ ['spectrum-Badge--negative'],
51
+ ['spectrum-Badge--neutral'],
52
+ // non-semantic
53
+ ['spectrum-Badge--seafoam'],
54
+ ['spectrum-Badge--indigo'],
55
+ ['spectrum-Badge--purple'],
56
+ ['spectrum-Badge--fuchsia'],
57
+ ['spectrum-Badge--magenta'],
58
+ ['spectrum-Badge--yellow'],
59
+ ],
60
+ 'variant'
61
+ ),
62
+ ...converter.enumerateAttributes(
63
+ [
64
+ ['spectrum-Badge--fixed-inline-start', 'inline-start'],
65
+ ['spectrum-Badge--fixed-inline-end', 'inline-end'],
66
+ ['spectrum-Badge--fixed-block-start', 'block-start'],
67
+ ['spectrum-Badge--fixed-block-end', 'block-end'],
68
+ ],
69
+ 'fixed'
70
+ ),
71
+ ...converter.enumerateAttributes(
72
+ [['spectrum-Badge--black-text', 'black']],
73
+ 'static'
74
+ ),
75
+ converter.classToClass('spectrum-Badge-label'),
76
+ converter.classToSlotted('spectrum-Badge-icon', 'icon'),
77
+ {
78
+ find: [
30
79
  {
31
- name: 'm',
32
- selector: '.spectrum-Badge--sizeM',
80
+ type: 'class',
81
+ name: 'spectrum-Badge-icon--no-label',
33
82
  },
83
+ ],
84
+ replace: [
34
85
  {
35
- name: 'l',
36
- selector: '.spectrum-Badge--sizeL',
86
+ replace: {
87
+ type: 'attribute',
88
+ name: 'icon-only',
89
+ },
90
+ hoist: false,
37
91
  },
38
92
  {
39
- name: 'xl',
40
- selector: '.spectrum-Badge--sizeXL',
93
+ replace: {
94
+ type: 'pseudo-element',
95
+ kind: 'slotted',
96
+ selector: [
97
+ {
98
+ type: 'universal',
99
+ },
100
+ ],
101
+ },
41
102
  },
42
103
  ],
43
104
  },
44
105
  {
45
- type: 'enum',
46
- name: 'variant',
47
- values: [
48
- // semantic
49
- '.spectrum-Badge--accent',
50
- '.spectrum-Badge--positive',
51
- '.spectrum-Badge--informative',
52
- '.spectrum-Badge--negative',
53
- '.spectrum-Badge--neutral',
54
- // non-semantic
55
- '.spectrum-Badge--seafoam',
56
- '.spectrum-Badge--indigo',
57
- '.spectrum-Badge--purple',
58
- '.spectrum-Badge--fuchsia',
59
- '.spectrum-Badge--magenta',
60
- '.spectrum-Badge--yellow',
61
- ],
62
- },
63
- {
64
- type: 'enum',
65
- name: 'fixed',
66
- values: [
106
+ find: [
67
107
  {
68
- name: 'inline-start',
69
- selector: '.spectrum-Badge--fixed-inline-start',
108
+ type: 'class',
109
+ name: 'spectrum-Badge-icon',
70
110
  },
71
111
  {
72
- name: 'inline-end',
73
- selector: '.spectrum-Badge--fixed-inline-end',
112
+ type: 'combinator',
113
+ value: 'next-sibling',
74
114
  },
75
115
  {
76
- name: 'block-start',
77
- selector: '.spectrum-Badge--fixed-block-start',
116
+ type: 'class',
117
+ name: 'spectrum-Badge-label',
78
118
  },
119
+ ],
120
+ replace: [
79
121
  {
80
- name: 'block-end',
81
- selector: '.spectrum-Badge--fixed-block-end',
122
+ replace: {
123
+ type: 'attribute',
124
+ name: 'name',
125
+ operation: {
126
+ operator: 'equal',
127
+ value: 'icon',
128
+ },
129
+ },
130
+ hoist: false,
82
131
  },
83
132
  ],
84
133
  },
85
134
  ],
86
- classes: [
87
- {
88
- name: 'label',
89
- selector: '.spectrum-Badge-label',
90
- },
91
- ],
92
- slots: [
93
- {
94
- name: 'icon',
95
- selector: '.spectrum-Badge-icon',
96
- },
97
- ],
98
- /* disable :hover until Spectrum CSS disables hover upstream */
99
- exclude: [/\:hover/],
100
- complexSelectors: [
101
- {
102
- selector: '.spectrum-Badge-icon--no-label',
103
- replacement: '[icon-only]::slotted(*)',
104
- },
105
- ],
106
135
  },
107
136
  ],
108
137
  };
package/stories/badge.stories.js CHANGED
@@ -105,7 +105,8 @@ export const NonSemantic = () => {
105
105
  </sp-badge>
106
106
  <sp-badge
107
107
  variant="yellow"
108
- style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default); --mod-badge-label-icon-color-white: var(--spectrum-global-color-static-black);"
108
+ static="black"
109
+ style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default)"
109
110
  >
110
111
  Yellow
111
112
  </sp-badge>
package/stories/badge.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["badge.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*/\n\nimport '@spectrum-web-components/badge/sp-badge.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\n\nexport default {\n title: 'Badge',\n component: 'sp-badge',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-badge>Badge</sp-badge>\n `;\n};\n\nexport const Icons = (): TemplateResult => {\n return html`\n <sp-badge>No icon</sp-badge>\n\n <sp-badge>\n <sp-icon-checkmark-circle slot=\"icon\"></sp-icon-checkmark-circle>\n Icon and label\n </sp-badge>\n\n <sp-badge>\n <sp-icon-checkmark-circle slot=\"icon\"></sp-icon-checkmark-circle>\n </sp-badge>\n `;\n};\n\nexport const Sizes = (): TemplateResult => {\n return html`\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <sp-badge size=\"s\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Small\n </sp-badge>\n <sp-badge size=\"m\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Medium\n </sp-badge>\n <sp-badge size=\"l\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Large\n </sp-badge>\n <sp-badge size=\"xl\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Extra-large\n </sp-badge>\n <sp-badge style=\"max-width: 180px\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n This long content automatically wraps, but shows no more than\n two lines\n </sp-badge>\n </div>\n `;\n};\n\nexport const Semantic = (): TemplateResult => {\n return html`\n <sp-badge variant=\"accent\">Accent</sp-badge>\n <sp-badge variant=\"positive\">Positive</sp-badge>\n <sp-badge variant=\"informative\">Informative</sp-badge>\n <sp-badge variant=\"negative\">Negative</sp-badge>\n <sp-badge variant=\"neutral\">Neutral</sp-badge>\n `;\n};\n\nexport const NonSemantic = (): TemplateResult => {\n return html`\n <sp-badge\n variant=\"seafoam\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-seafoam-600)\"\n >\n Seafoam\n </sp-badge>\n <sp-badge\n variant=\"indigo\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-indigo-600)\"\n >\n Indigo\n </sp-badge>\n <sp-badge\n variant=\"purple\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-purple-600)\"\n >\n Purple\n </sp-badge>\n <sp-badge\n variant=\"fuchsia\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-fuchsia-600)\"\n >\n Fuchsia\n </sp-badge>\n <sp-badge\n variant=\"magenta\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-magenta-600)\"\n >\n Magenta\n </sp-badge>\n <sp-badge\n variant=\"yellow\"\n style=\"--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default); --mod-badge-label-icon-color-white: var(--spectrum-global-color-static-black);\"\n >\n Yellow\n </sp-badge>\n `;\n};\n\nexport const Inline = (): TemplateResult => {\n return html`\n Badge is a simple\n <sp-badge variant=\"positive\" size=\"s\">inline</sp-badge>\n element that should\n <sp-badge variant=\"neutral\" size=\"s\">flow</sp-badge>\n with the rest of the page:\n <sp-badge variant=\"negative\">Missing</sp-badge>\n <sp-badge variant=\"positive\">Successful</sp-badge>\n <sp-badge variant=\"accent\">Accent</sp-badge>\n `;\n};\n\nexport const Fixed = (): TemplateResult => {\n return html`\n <div\n style=\"position: relative; width: 400px; height: 200px; background: #eee\"\n >\n <sp-badge>None</sp-badge>\n <sp-badge\n fixed=\"block-start\"\n style=\"position: absolute; top: 0; left: 200px;\"\n >\n block-start\n </sp-badge>\n <sp-badge\n fixed=\"inline-end\"\n style=\"position: absolute; right: 0; top: 100px;\"\n >\n inline-end\n </sp-badge>\n <sp-badge\n fixed=\"block-end\"\n style=\"position: absolute; bottom: 0; left: 200px;\"\n >\n block-end\n </sp-badge>\n <sp-badge\n fixed=\"inline-start\"\n style=\"position: absolute; left: 0; top: 100px;\"\n >\n inline-start\n </sp-badge>\n </div>\n `;\n};\n"],
5
- "mappings": ";AAYA,OAAO;AACP,SAAS,YAA4B;AACrC,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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+BX;",
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/badge/sp-badge.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\n\nexport default {\n title: 'Badge',\n component: 'sp-badge',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-badge>Badge</sp-badge>\n `;\n};\n\nexport const Icons = (): TemplateResult => {\n return html`\n <sp-badge>No icon</sp-badge>\n\n <sp-badge>\n <sp-icon-checkmark-circle slot=\"icon\"></sp-icon-checkmark-circle>\n Icon and label\n </sp-badge>\n\n <sp-badge>\n <sp-icon-checkmark-circle slot=\"icon\"></sp-icon-checkmark-circle>\n </sp-badge>\n `;\n};\n\nexport const Sizes = (): TemplateResult => {\n return html`\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <sp-badge size=\"s\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Small\n </sp-badge>\n <sp-badge size=\"m\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Medium\n </sp-badge>\n <sp-badge size=\"l\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Large\n </sp-badge>\n <sp-badge size=\"xl\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Extra-large\n </sp-badge>\n <sp-badge style=\"max-width: 180px\">\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n This long content automatically wraps, but shows no more than\n two lines\n </sp-badge>\n </div>\n `;\n};\n\nexport const Semantic = (): TemplateResult => {\n return html`\n <sp-badge variant=\"accent\">Accent</sp-badge>\n <sp-badge variant=\"positive\">Positive</sp-badge>\n <sp-badge variant=\"informative\">Informative</sp-badge>\n <sp-badge variant=\"negative\">Negative</sp-badge>\n <sp-badge variant=\"neutral\">Neutral</sp-badge>\n `;\n};\n\nexport const NonSemantic = (): TemplateResult => {\n return html`\n <sp-badge\n variant=\"seafoam\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-seafoam-600)\"\n >\n Seafoam\n </sp-badge>\n <sp-badge\n variant=\"indigo\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-indigo-600)\"\n >\n Indigo\n </sp-badge>\n <sp-badge\n variant=\"purple\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-purple-600)\"\n >\n Purple\n </sp-badge>\n <sp-badge\n variant=\"fuchsia\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-fuchsia-600)\"\n >\n Fuchsia\n </sp-badge>\n <sp-badge\n variant=\"magenta\"\n style=\"--mod-badge-background-color-default: var(--spectrum-global-color-static-magenta-600)\"\n >\n Magenta\n </sp-badge>\n <sp-badge\n variant=\"yellow\"\n static=\"black\"\n style=\"--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default)\"\n >\n Yellow\n </sp-badge>\n `;\n};\n\nexport const Inline = (): TemplateResult => {\n return html`\n Badge is a simple\n <sp-badge variant=\"positive\" size=\"s\">inline</sp-badge>\n element that should\n <sp-badge variant=\"neutral\" size=\"s\">flow</sp-badge>\n with the rest of the page:\n <sp-badge variant=\"negative\">Missing</sp-badge>\n <sp-badge variant=\"positive\">Successful</sp-badge>\n <sp-badge variant=\"accent\">Accent</sp-badge>\n `;\n};\n\nexport const Fixed = (): TemplateResult => {\n return html`\n <div\n style=\"position: relative; width: 400px; height: 200px; background: #eee\"\n >\n <sp-badge>None</sp-badge>\n <sp-badge\n fixed=\"block-start\"\n style=\"position: absolute; top: 0; left: 200px;\"\n >\n block-start\n </sp-badge>\n <sp-badge\n fixed=\"inline-end\"\n style=\"position: absolute; right: 0; top: 100px;\"\n >\n inline-end\n </sp-badge>\n <sp-badge\n fixed=\"block-end\"\n style=\"position: absolute; bottom: 0; left: 200px;\"\n >\n block-end\n </sp-badge>\n <sp-badge\n fixed=\"inline-start\"\n style=\"position: absolute; left: 0; top: 100px;\"\n >\n inline-start\n </sp-badge>\n </div>\n `;\n};\n"],
5
+ "mappings": ";AAYA,OAAO;AACP,SAAS,YAA4B;AACrC,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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+BX;",
6
6
  "names": []
7
7
  }