@spectrum-web-components/badge 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +156 -13
- package/package.json +3 -3
- package/sp-badge.d.ts +11 -0
- package/sp-badge.dev.js.map +1 -1
- package/sp-badge.js.map +1 -1
- package/src/Badge.d.ts +11 -0
- package/src/Badge.dev.js.map +1 -1
- package/src/Badge.js.map +1 -1
- package/src/badge-overrides.css.dev.js.map +1 -1
- package/src/badge-overrides.css.js.map +1 -1
- package/src/badge.css.dev.js.map +1 -1
- package/src/badge.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-badge.css.dev.js.map +1 -1
- package/src/spectrum-badge.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
3
|
`<sp-badge>` elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
|
|
4
4
|
|
|
@@ -7,23 +7,50 @@
|
|
|
7
7
|
[](https://www.npmjs.com/package/@spectrum-web-components/badge)
|
|
8
8
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
|
|
9
9
|
|
|
10
|
-
```
|
|
10
|
+
```bash
|
|
11
11
|
yarn add @spectrum-web-components/badge
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
Import the side effectful registration of `<sp-badge>` via:
|
|
15
15
|
|
|
16
|
-
```
|
|
16
|
+
```js
|
|
17
17
|
import '@spectrum-web-components/badge/sp-badge.js';
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
When looking to leverage the `Badge` base class as a type and/or for extension purposes, do so via:
|
|
21
21
|
|
|
22
|
-
```
|
|
22
|
+
```js
|
|
23
23
|
import { Badge } from '@spectrum-web-components/badge';
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
### Anatomy
|
|
27
|
+
|
|
28
|
+
A badge is made up of the following parts:
|
|
29
|
+
|
|
30
|
+
- **Icon**: an `<sp-icon-*>` element can be used to display an icon within the badge.
|
|
31
|
+
- **Label**: text can be displayed within the badge by using the default slot.
|
|
32
|
+
|
|
33
|
+
Badges can contain either a label, an icon, or both.
|
|
34
|
+
|
|
35
|
+
```html demo
|
|
36
|
+
<sp-badge size="s">Label only</sp-badge>
|
|
37
|
+
<sp-badge size="s">
|
|
38
|
+
<sp-icon-checkmark-circle
|
|
39
|
+
label="Icon-only badge"
|
|
40
|
+
slot="icon"
|
|
41
|
+
></sp-icon-checkmark-circle>
|
|
42
|
+
</sp-badge>
|
|
43
|
+
<sp-badge size="s">
|
|
44
|
+
<sp-icon-settings slot="icon"></sp-icon-settings>
|
|
45
|
+
Icon and label
|
|
46
|
+
</sp-badge>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Options
|
|
50
|
+
|
|
51
|
+
It is not recommended to make badges interactive. Consider using a different component if you need interactivity, such as buttons, tags, or links.
|
|
52
|
+
|
|
53
|
+
#### Sizes
|
|
27
54
|
|
|
28
55
|
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
29
56
|
<sp-tab value="s">Small</sp-tab>
|
|
@@ -32,6 +59,12 @@ import { Badge } from '@spectrum-web-components/badge';
|
|
|
32
59
|
```html demo
|
|
33
60
|
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
34
61
|
<sp-badge size="s">Label</sp-badge>
|
|
62
|
+
<sp-badge size="s">
|
|
63
|
+
<sp-icon-checkmark-circle
|
|
64
|
+
label="Icon-only badge"
|
|
65
|
+
slot="icon"
|
|
66
|
+
></sp-icon-checkmark-circle>
|
|
67
|
+
</sp-badge>
|
|
35
68
|
<sp-badge size="s">
|
|
36
69
|
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
37
70
|
Icon and label
|
|
@@ -46,6 +79,12 @@ import { Badge } from '@spectrum-web-components/badge';
|
|
|
46
79
|
```html demo
|
|
47
80
|
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
48
81
|
<sp-badge size="m">Label</sp-badge>
|
|
82
|
+
<sp-badge size="m">
|
|
83
|
+
<sp-icon-checkmark-circle
|
|
84
|
+
label="Icon-only badge"
|
|
85
|
+
slot="icon"
|
|
86
|
+
></sp-icon-checkmark-circle>
|
|
87
|
+
</sp-badge>
|
|
49
88
|
<sp-badge size="m">
|
|
50
89
|
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
51
90
|
Icon and label
|
|
@@ -60,6 +99,12 @@ import { Badge } from '@spectrum-web-components/badge';
|
|
|
60
99
|
```html demo
|
|
61
100
|
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
62
101
|
<sp-badge size="l">Label</sp-badge>
|
|
102
|
+
<sp-badge size="l">
|
|
103
|
+
<sp-icon-checkmark-circle
|
|
104
|
+
label="Icon-only badge"
|
|
105
|
+
slot="icon"
|
|
106
|
+
></sp-icon-checkmark-circle>
|
|
107
|
+
</sp-badge>
|
|
63
108
|
<sp-badge size="l">
|
|
64
109
|
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
65
110
|
Icon and label
|
|
@@ -74,6 +119,12 @@ import { Badge } from '@spectrum-web-components/badge';
|
|
|
74
119
|
```html demo
|
|
75
120
|
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
76
121
|
<sp-badge size="xl">Label</sp-badge>
|
|
122
|
+
<sp-badge size="xl">
|
|
123
|
+
<sp-icon-checkmark-circle
|
|
124
|
+
label="Icon-only badge"
|
|
125
|
+
slot="icon"
|
|
126
|
+
></sp-icon-checkmark-circle>
|
|
127
|
+
</sp-badge>
|
|
77
128
|
<sp-badge size="xl">
|
|
78
129
|
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
79
130
|
Icon and label
|
|
@@ -84,15 +135,24 @@ import { Badge } from '@spectrum-web-components/badge';
|
|
|
84
135
|
</sp-tab-panel>
|
|
85
136
|
</sp-tabs>
|
|
86
137
|
|
|
87
|
-
|
|
138
|
+
#### Variants
|
|
139
|
+
|
|
140
|
+
The `<sp-badge>` can be customized with either semantic or non-semantic variants. Badges are intended as display elements (like status lights), so avoid using badges for critical actions.
|
|
88
141
|
|
|
89
|
-
|
|
142
|
+
<sp-tabs selected="semantic" auto label="Semantic and non-semantic variants">
|
|
143
|
+
<sp-tab value="semantic">Semantic</sp-tab>
|
|
144
|
+
<sp-tab-panel value="semantic">
|
|
90
145
|
|
|
91
|
-
|
|
146
|
+
When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
|
|
147
|
+
|
|
148
|
+
- **Positive**: approved, complete, success, new, purchased, licensed
|
|
149
|
+
- **Informative**: active, in use, live, published
|
|
150
|
+
- **Negative**: error, alert, rejected, failed
|
|
151
|
+
- **Neutral**: archived, deleted, paused, draft, not started, ended
|
|
92
152
|
|
|
93
153
|
```html demo
|
|
94
154
|
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
95
|
-
<sp-badge variant="accent">
|
|
155
|
+
<sp-badge variant="accent">Accent</sp-badge>
|
|
96
156
|
<sp-badge variant="neutral">Neutral</sp-badge>
|
|
97
157
|
<sp-badge variant="informative">Informative</sp-badge>
|
|
98
158
|
<sp-badge variant="positive">Positive</sp-badge>
|
|
@@ -101,9 +161,11 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants
|
|
|
101
161
|
</div>
|
|
102
162
|
```
|
|
103
163
|
|
|
104
|
-
|
|
164
|
+
</sp-tab-panel>
|
|
165
|
+
<sp-tab value="nonsemantic">Non-semantic</sp-tab>
|
|
166
|
+
<sp-tab-panel value="nonsemantic">
|
|
105
167
|
|
|
106
|
-
|
|
168
|
+
When badges are for color-coded categories, they use non-semantic colors. Non-semantic variants are ideally used for when there are 8 categories or less.
|
|
107
169
|
|
|
108
170
|
```html demo
|
|
109
171
|
<div style="display: flex; gap: var(--spectrum-spacing-75); flex-wrap:wrap;">
|
|
@@ -124,9 +186,12 @@ Non-semantic badge colors are no longer supported directly by Spectrum and Spect
|
|
|
124
186
|
</div>
|
|
125
187
|
```
|
|
126
188
|
|
|
127
|
-
|
|
189
|
+
</sp-tab-panel>
|
|
190
|
+
</sp-tabs>
|
|
191
|
+
|
|
192
|
+
#### Fixed positioning
|
|
128
193
|
|
|
129
|
-
|
|
194
|
+
`<sp-badge>` can be displayed as if it is "fixed" to the edge of a UI. The `fixed` attribute can be leveraged to alter the border rounding based on the position you would like to achieve. Fixed positioning options include `block-start`, `block-end`, `inline-start`, and `inline-end`.
|
|
130
195
|
|
|
131
196
|
```html
|
|
132
197
|
<div
|
|
@@ -159,3 +224,81 @@ When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a
|
|
|
159
224
|
</sp-badge>
|
|
160
225
|
</div>
|
|
161
226
|
```
|
|
227
|
+
|
|
228
|
+
### Behaviors
|
|
229
|
+
|
|
230
|
+
Badges are not interactive by default.
|
|
231
|
+
|
|
232
|
+
When a badge's label is too long for the available horizontal space, it wraps to form another line. Text wrapping can be enforced when a `max-inline-size` is applied to the badge. If there is no room for a second line of text, the badge should truncate and include a tooltip to expose the full text upon hover.
|
|
233
|
+
|
|
234
|
+
```html demo
|
|
235
|
+
<overlay-trigger>
|
|
236
|
+
<sp-badge style="max-inline-size: 350px;" slot="trigger">
|
|
237
|
+
Wikipedia is the best thing ever. Anyone in the world can write anything
|
|
238
|
+
they want about any subject so you know you are getting the best
|
|
239
|
+
possible information.
|
|
240
|
+
</sp-badge>
|
|
241
|
+
<sp-tooltip slot="hover-content">
|
|
242
|
+
Wikipedia is the best thing ever. Anyone in the world can write anything
|
|
243
|
+
they want about any subject so you know you are getting the best
|
|
244
|
+
possible information.
|
|
245
|
+
</sp-tooltip>
|
|
246
|
+
</overlay-trigger>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### Accessibility
|
|
250
|
+
|
|
251
|
+
<div style="margin-block-end: 2rem">
|
|
252
|
+
<sp-table>
|
|
253
|
+
<sp-table-head>
|
|
254
|
+
<sp-table-head-cell>Do ✅</sp-table-head-cell>
|
|
255
|
+
<sp-table-head-cell>Don't ❌</sp-table-head-cell>
|
|
256
|
+
</sp-table-head>
|
|
257
|
+
<sp-table-body>
|
|
258
|
+
<sp-table-row>
|
|
259
|
+
<sp-table-cell>Use badges for status indication</sp-table-cell>
|
|
260
|
+
<sp-table-cell>Use badges for critical actions</sp-table-cell>
|
|
261
|
+
</sp-table-row>
|
|
262
|
+
<sp-table-row>
|
|
263
|
+
<sp-table-cell>Use visible labels most often</sp-table-cell>
|
|
264
|
+
<sp-table-cell>Overwhelm a user with too much critical information</sp-table-cell>
|
|
265
|
+
</sp-table-row>
|
|
266
|
+
<sp-table-row>
|
|
267
|
+
<sp-table-cell>Use icon-only badges with aria-label</sp-table-cell>
|
|
268
|
+
</sp-table-row>
|
|
269
|
+
<sp-table-row>
|
|
270
|
+
<sp-table-cell>Use badges for supplemental information</sp-table-cell>
|
|
271
|
+
</sp-table-row>
|
|
272
|
+
</sp-table-body>
|
|
273
|
+
</sp-table>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
#### Always include a label
|
|
277
|
+
|
|
278
|
+
Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only. If a visible label isn't specified, an `aria-label` must be provided to the icon for accessibility. An icon-only badge is best for very small spaces, and it should include a tooltip on hover to provide more context for the icon's meaning.
|
|
279
|
+
|
|
280
|
+
Remember that a tooltip does not replace an accessible label.
|
|
281
|
+
|
|
282
|
+
```html demo
|
|
283
|
+
<overlay-trigger>
|
|
284
|
+
<sp-badge size="m" slot="trigger">
|
|
285
|
+
<sp-icon-checkmark-circle
|
|
286
|
+
label="Labels are important"
|
|
287
|
+
slot="icon"
|
|
288
|
+
></sp-icon-checkmark-circle>
|
|
289
|
+
</sp-badge>
|
|
290
|
+
<sp-tooltip placement="top" slot="hover-content">
|
|
291
|
+
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
292
|
+
Labels are important
|
|
293
|
+
</sp-tooltip>
|
|
294
|
+
</overlay-trigger>
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
#### Keyboard interactions
|
|
298
|
+
|
|
299
|
+
- <kbd>Tab</kbd>: Places focus on the badge if it is interactive.
|
|
300
|
+
- <kbd>Space</kbd> or <kbd>Enter</kbd>: Filters results by the selected badge or performs the action associated with the badge.
|
|
301
|
+
|
|
302
|
+
#### Don't override semantic colors
|
|
303
|
+
|
|
304
|
+
The badge's variants provide semantic meaning through both color and ARIA attributes, ensuring that information is not conveyed through color alone.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/badge",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
"css"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/base": "1.
|
|
68
|
-
"@spectrum-web-components/shared": "1.
|
|
67
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
68
|
+
"@spectrum-web-components/shared": "1.8.0"
|
|
69
69
|
},
|
|
70
70
|
"types": "./src/index.d.ts",
|
|
71
71
|
"customElements": "custom-elements.json",
|
package/sp-badge.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Badge } from './src/Badge.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-badge.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-badge.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Badge } from './src/Badge.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-badge': Badge;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,cAAc,YAAY,KAAK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-badge.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-badge.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Badge } from './src/Badge.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-badge', Badge);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-badge': Badge;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,SAAAA,MAAa,iBACtB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,WAAYD,CAAK",
|
|
6
6
|
"names": ["Badge", "defineElement"]
|
|
7
7
|
}
|
package/src/Badge.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
export declare const BADGE_VARIANTS: readonly ["accent", "neutral", "informative", "positive", "negative", "notice", "fuchsia", "indigo", "magenta", "purple", "seafoam", "yellow", "gray", "red", "orange", "chartreuse", "celery", "green", "cyan", "blue"];
|
|
3
14
|
export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
|
package/src/Badge.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Badge.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport styles from './badge.css.js';\n\nexport const BADGE_VARIANTS = [\n 'accent',\n 'neutral',\n 'informative',\n 'positive',\n 'negative',\n 'notice',\n 'fuchsia',\n 'indigo',\n 'magenta',\n 'purple',\n 'seafoam',\n 'yellow',\n 'gray',\n 'red',\n 'orange',\n 'chartreuse',\n 'celery',\n 'green',\n 'cyan',\n 'blue',\n] as const;\nexport type BadgeVariant = (typeof BADGE_VARIANTS)[number];\nexport const FIXED_VALUES = [\n 'inline-start',\n 'inline-end',\n 'block-start',\n 'block-end',\n] as const;\nexport type FixedValues = (typeof FIXED_VALUES)[number];\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends SizedMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), ''),\n {\n noDefaultSize: true,\n }\n) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public get fixed(): FixedValues | undefined {\n return this._fixed;\n }\n\n public set fixed(fixed: FixedValues | undefined) {\n if (fixed === this.fixed) return;\n const oldValue = this.fixed;\n this._fixed = fixed;\n if (fixed) {\n this.setAttribute('fixed', fixed);\n } else {\n this.removeAttribute('fixed');\n }\n this.requestUpdate('fixed', oldValue);\n }\n\n private _fixed?: FixedValues;\n\n @property({ type: String, reflect: true })\n public variant: BadgeVariant = 'informative';\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected override render(): TemplateResult {\n if (window.__swc.DEBUG) {\n if (!BADGE_VARIANTS.includes(this.variant)) {\n window.__swc.warn(\n this,\n `<${this.localName}> element expect the \"variant\" attribute to be one of the following:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',\n {\n issues: [...BADGE_VARIANTS],\n }\n );\n }\n }\n return html`\n ${this.hasIcon\n ? html`\n <slot\n name=\"icon\"\n ?icon-only=${!this.slotHasContent}\n ></slot>\n `\n : nothing}\n <div class=\"label\">\n <slot></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,OAAO,YAAY;AAEZ,aAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEO,aAAM,eAAe;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AASO,aAAM,cAAc;AAAA,EACvB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAAA,EACzE;AAAA,IACI,eAAe;AAAA,EACnB;AACJ,EAAE;AAAA,EALK;AAAA;AA8BH,SAAO,UAAwB;AAAA;AAAA,EAxB/B,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAGA,IAAW,QAAiC;AACxC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,MAAM,OAAgC;AAC7C,QAAI,UAAU,KAAK,MAAO;AAC1B,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,KAAK;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AACA,SAAK,cAAc,SAAS,QAAQ;AAAA,EACxC;AAAA,EAOA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEmB,SAAyB;AACxC,QAAI,MAAoB;AACpB,UAAI,CAAC,eAAe,SAAS,KAAK,OAAO,GAAG;AACxC,eAAO,MAAM;AAAA,UACT;AAAA,UACA,IAAI,KAAK,SAAS;AAAA,UAClB;AAAA,UACA;AAAA,YACI,QAAQ,CAAC,GAAG,cAAc;AAAA,UAC9B;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,sBAGzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AACJ;AApDe;AAAA,EADV,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVlB,MAWE;AAmBJ;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA7BhC,MA8BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Badge.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Badge.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport styles from './badge.css.js';\n\nexport const BADGE_VARIANTS = [\n 'accent',\n 'neutral',\n 'informative',\n 'positive',\n 'negative',\n 'notice',\n 'fuchsia',\n 'indigo',\n 'magenta',\n 'purple',\n 'seafoam',\n 'yellow',\n 'gray',\n 'red',\n 'orange',\n 'chartreuse',\n 'celery',\n 'green',\n 'cyan',\n 'blue',\n] as const;\nexport type BadgeVariant = (typeof BADGE_VARIANTS)[number];\nexport const FIXED_VALUES = [\n 'inline-start',\n 'inline-end',\n 'block-start',\n 'block-end',\n] as const;\nexport type FixedValues = (typeof FIXED_VALUES)[number];\n\n/**\n * @element sp-badge\n *\n * @slot - Text label of the badge\n * @slot icon - Optional icon that appears to the left of the label\n */\nexport class Badge extends SizedMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), ''),\n {\n noDefaultSize: true,\n }\n) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public get fixed(): FixedValues | undefined {\n return this._fixed;\n }\n\n public set fixed(fixed: FixedValues | undefined) {\n if (fixed === this.fixed) return;\n const oldValue = this.fixed;\n this._fixed = fixed;\n if (fixed) {\n this.setAttribute('fixed', fixed);\n } else {\n this.removeAttribute('fixed');\n }\n this.requestUpdate('fixed', oldValue);\n }\n\n private _fixed?: FixedValues;\n\n @property({ type: String, reflect: true })\n public variant: BadgeVariant = 'informative';\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected override render(): TemplateResult {\n if (window.__swc.DEBUG) {\n if (!BADGE_VARIANTS.includes(this.variant)) {\n window.__swc.warn(\n this,\n `<${this.localName}> element expect the \"variant\" attribute to be one of the following:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',\n {\n issues: [...BADGE_VARIANTS],\n }\n );\n }\n }\n return html`\n ${this.hasIcon\n ? html`\n <slot\n name=\"icon\"\n ?icon-only=${!this.slotHasContent}\n ></slot>\n `\n : nothing}\n <div class=\"label\">\n <slot></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EACA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,uBAAAC,MAA2B,+DACpC,OAAOC,MAAY,iBAEZ,aAAM,eAAiB,CAC1B,SACA,UACA,cACA,WACA,WACA,SACA,UACA,SACA,UACA,SACA,UACA,SACA,OACA,MACA,SACA,aACA,SACA,QACA,OACA,MACJ,EAEa,aAAe,CACxB,eACA,aACA,cACA,WACJ,EASO,aAAM,cAAcL,EACvBG,EAAgBC,EAAoBH,EAAiB,eAAe,EAAG,EAAE,EACzE,CACI,cAAe,EACnB,CACJ,CAAE,CALK,kCA8BH,KAAO,QAAwB,cAxB/B,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAM,CAClB,CAGA,IAAW,OAAiC,CACxC,OAAO,KAAK,MAChB,CAEA,IAAW,MAAMC,EAAgC,CAC7C,GAAIA,IAAU,KAAK,MAAO,OAC1B,MAAMC,EAAW,KAAK,MACtB,KAAK,OAASD,EACVA,EACA,KAAK,aAAa,QAASA,CAAK,EAEhC,KAAK,gBAAgB,OAAO,EAEhC,KAAK,cAAc,QAASC,CAAQ,CACxC,CAOA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEmB,QAAyB,CAaxC,OAAOT;AAAA,cACD,KAAK,QACDA;AAAA;AAAA;AAAA,uCAGqB,CAAC,KAAK,cAAc;AAAA;AAAA,oBAGzCC,CAAO;AAAA;AAAA;AAAA;AAAA,SAKrB,CACJ,CApDeS,EAAA,CADVN,EAAS,CAAE,QAAS,EAAK,CAAC,GAVlB,MAWE,qBAmBJM,EAAA,CADNN,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA7BhC,MA8BF",
|
|
6
6
|
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "ObserveSlotText", "ObserveSlotPresence", "styles", "fixed", "oldValue", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["badge-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["badge-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/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 2025 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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}:host{align-items:center}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}::slotted([slot=icon]){flex-shrink:0}.label slot{max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);display:block;overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}:host{align-items:center}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}::slotted([slot=icon]){flex-shrink:0}.label slot{max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);display:block;overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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 2025 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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}:host{align-items:center}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}::slotted([slot=icon]){flex-shrink:0}.label slot{max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);display:block;overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}:host{align-items:center}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}::slotted([slot=icon]){flex-shrink:0}.label slot{max-height:calc(var(--spectrum-badge-line-height)*var(--spectrum-badge-font-size)*2);display:block;overflow:hidden}[icon-only]+.label{display:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './Badge.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Badge.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAYA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Badge.js';\n"],
|
|
5
5
|
"mappings": "aAYA,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-badge.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-badge.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :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:var(--spectrum-white);--spectrum-badge-background-color-default:var(--spectrum-neutral-subdued-background-color-default);--spectrum-badge-background-color-accent:var(--spectrum-accent-background-color-default);--spectrum-badge-background-color-informative:var(--spectrum-informative-background-color-default);--spectrum-badge-background-color-negative:var(--spectrum-negative-background-color-default);--spectrum-badge-background-color-positive:var(--spectrum-positive-background-color-default);--spectrum-badge-background-color-notice:var(--spectrum-notice-background-color-default);--spectrum-badge-background-color-gray:var(--spectrum-gray-background-color-default);--spectrum-badge-background-color-red:var(--spectrum-red-background-color-default);--spectrum-badge-background-color-orange:var(--spectrum-orange-background-color-default);--spectrum-badge-background-color-yellow:var(--spectrum-yellow-background-color-default);--spectrum-badge-background-color-chartreuse:var(--spectrum-chartreuse-background-color-default);--spectrum-badge-background-color-celery:var(--spectrum-celery-background-color-default);--spectrum-badge-background-color-green:var(--spectrum-green-background-color-default);--spectrum-badge-background-color-seafoam:var(--spectrum-seafoam-background-color-default);--spectrum-badge-background-color-cyan:var(--spectrum-cyan-background-color-default);--spectrum-badge-background-color-blue:var(--spectrum-blue-background-color-default);--spectrum-badge-background-color-indigo:var(--spectrum-indigo-background-color-default);--spectrum-badge-background-color-purple:var(--spectrum-purple-background-color-default);--spectrum-badge-background-color-fuchsia:var(--spectrum-fuchsia-background-color-default);--spectrum-badge-background-color-magenta:var(--spectrum-magenta-background-color-default);--spectrum-badge-height:var(--spectrum-component-height-100);--spectrum-badge-font-size:var(--spectrum-font-size-100);--spectrum-badge-label-spacing-vertical-top:var(--spectrum-component-top-to-text-100);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-100);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-100);--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(--spectrum-component-edge-to-visual-100);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-100);--highcontrast-badge-border-color:CanvasText}:host([variant=celery]),:host([variant=chartreuse]),:host([variant=orange]),:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--spectrum-black)}:host([variant=blue]),:host([variant=cyan]),:host([variant=fuchsia]),:host([variant=gray]),:host([variant=green]),:host([variant=indigo]),:host([variant=magenta]),:host([variant=purple]),:host([variant=red]),:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--spectrum-badge-label-icon-color-primary)}: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(--spectrum-component-top-to-text-75);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-75);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-75);--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(--spectrum-component-edge-to-visual-75);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-75)}: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(--spectrum-component-top-to-text-200);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-200);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-200);--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(--spectrum-component-edge-to-visual-200);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-200)}: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(--spectrum-component-top-to-text-300);--spectrum-badge-label-spacing-vertical-bottom:var(--spectrum-component-bottom-to-text-300);--spectrum-badge-label-spacing-horizontal:var(--spectrum-component-edge-to-text-300);--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(--spectrum-component-edge-to-visual-300);--spectrum-badge-icon-spacing-vertical-top:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-badge-icon-only-spacing-horizontal:var(--spectrum-component-edge-to-visual-only-300)}@media (forced-colors:active){:host{border-color:var(--highcontrast-badge-border-color)}}:host{min-block-size:var(--mod-badge-height,var(--spectrum-badge-height));inline-size:auto;vertical-align:middle;cursor:default;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;border-radius:var(--mod-badge-corner-radius,var(--spectrum-badge-corner-radius));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));border:1px solid #0000;display:inline-flex;position:relative}:host,:host([variant=neutral]){background:var(--mod-badge-background-color-default,var(--spectrum-badge-background-color-default))}:host([variant=accent]){background:var(--mod-badge-background-color-accent,var(--spectrum-badge-background-color-accent))}:host([variant=informative]){background:var(--mod-badge-background-color-informative,var(--spectrum-badge-background-color-informative))}:host([variant=negative]){background:var(--mod-badge-background-color-negative,var(--spectrum-badge-background-color-negative))}:host([variant=positive]){background:var(--mod-badge-background-color-positive,var(--spectrum-badge-background-color-positive))}:host([variant=notice]){background:var(--mod-badge-background-color-notice,var(--spectrum-badge-background-color-notice))}:host([variant=gray]){background:var(--mod-badge-background-color-gray,var(--spectrum-badge-background-color-gray))}:host([variant=red]){background:var(--mod-badge-background-color-red,var(--spectrum-badge-background-color-red))}:host([variant=orange]){background:var(--mod-badge-background-color-orange,var(--spectrum-badge-background-color-orange))}:host([variant=yellow]){background:var(--mod-badge-background-color-yellow,var(--spectrum-badge-background-color-yellow))}:host([variant=chartreuse]){background:var(--mod-badge-background-color-chartreuse,var(--spectrum-badge-background-color-chartreuse))}:host([variant=celery]){background:var(--mod-badge-background-color-celery,var(--spectrum-badge-background-color-celery))}:host([variant=green]){background:var(--mod-badge-background-color-green,var(--spectrum-badge-background-color-green))}:host([variant=seafoam]){background:var(--mod-badge-background-color-seafoam,var(--spectrum-badge-background-color-seafoam))}:host([variant=cyan]){background:var(--mod-badge-background-color-cyan,var(--spectrum-badge-background-color-cyan))}:host([variant=blue]){background:var(--mod-badge-background-color-blue,var(--spectrum-badge-background-color-blue))}:host([variant=indigo]){background:var(--mod-badge-background-color-indigo,var(--spectrum-badge-background-color-indigo))}:host([variant=purple]){background:var(--mod-badge-background-color-purple,var(--spectrum-badge-background-color-purple))}:host([variant=fuchsia]){background:var(--mod-badge-background-color-fuchsia,var(--spectrum-badge-background-color-fuchsia))}:host([variant=magenta]){background:var(--mod-badge-background-color-magenta,var(--spectrum-badge-background-color-magenta))}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}.label{font-size:var(--mod-badge-font-size,var(--spectrum-badge-font-size));line-height:var(--mod-badge-line-height,var(--spectrum-badge-line-height));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-label-spacing-vertical-top,var(--spectrum-badge-label-spacing-vertical-top));padding-block-end:var(--mod-badge-label-spacing-vertical-bottom,var(--spectrum-badge-label-spacing-vertical-bottom));padding-inline-start:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal));padding-inline-end:var(--mod-badge-label-spacing-horizontal,var(--spectrum-badge-label-spacing-horizontal))}.label:lang(ja),.label:lang(ko),.label:lang(zh){line-height:var(--mod-badge-line-height-cjk,var(--spectrum-badge-line-height-cjk))}[name=icon]+.label{padding-inline-start:0}::slotted([slot=icon]){block-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));inline-size:var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));flex:0 0 var(--mod-badge-workflow-icon-size,var(--spectrum-badge-workflow-icon-size));color:var(--mod-badge-label-icon-color,var(--spectrum-badge-label-icon-color));padding-block-start:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-block-end:var(--mod-badge-icon-spacing-vertical-top,var(--spectrum-badge-icon-spacing-vertical-top));padding-inline-start:var(--mod-badge-icon-spacing-horizontal,var(--spectrum-badge-icon-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-text-spacing,var(--spectrum-badge-icon-text-spacing))}[icon-only]::slotted(*){padding-inline-start:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal));padding-inline-end:var(--mod-badge-icon-only-spacing-horizontal,var(--spectrum-badge-icon-only-spacing-horizontal))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|