@spectrum-web-components/badge 0.0.0-20241209155954
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 +162 -0
- package/package.json +73 -0
- package/sp-badge.d.ts +6 -0
- package/sp-badge.dev.js +5 -0
- package/sp-badge.dev.js.map +7 -0
- package/sp-badge.js +2 -0
- package/sp-badge.js.map +7 -0
- package/src/Badge.d.ts +31 -0
- package/src/Badge.dev.js +112 -0
- package/src/Badge.dev.js.map +7 -0
- package/src/Badge.js +12 -0
- package/src/Badge.js.map +7 -0
- package/src/badge-overrides.css.d.ts +2 -0
- package/src/badge-overrides.css.dev.js +7 -0
- package/src/badge-overrides.css.dev.js.map +7 -0
- package/src/badge-overrides.css.js +4 -0
- package/src/badge-overrides.css.js.map +7 -0
- package/src/badge.css.d.ts +2 -0
- package/src/badge.css.dev.js +7 -0
- package/src/badge.css.dev.js.map +7 -0
- package/src/badge.css.js +4 -0
- package/src/badge.css.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/spectrum-badge.css.d.ts +2 -0
- package/src/spectrum-badge.css.dev.js +7 -0
- package/src/spectrum-badge.css.dev.js.map +7 -0
- package/src/spectrum-badge.css.js +4 -0
- package/src/spectrum-badge.css.js.map +7 -0
- package/src/spectrum-config.js +149 -0
package/README.md
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
## Description
|
|
2
|
+
|
|
3
|
+
`<sp-badge>` elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/badge)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
|
|
9
|
+
[](https://studio.webcomponents.dev/edit/qxPsOTrGAPB92LzPfk4P/src/index.ts?p=stories)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
yarn add @spectrum-web-components/badge
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the side effectful registration of `<sp-badge>` via:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import '@spectrum-web-components/badge/sp-badge.js';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
When looking to leverage the `Badge` base class as a type and/or for extension purposes, do so via:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import { Badge } from '@spectrum-web-components/badge';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sizes
|
|
28
|
+
|
|
29
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
30
|
+
<sp-tab value="s">Small</sp-tab>
|
|
31
|
+
<sp-tab-panel value="s">
|
|
32
|
+
|
|
33
|
+
```html demo
|
|
34
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
35
|
+
<sp-badge size="s">Label</sp-badge>
|
|
36
|
+
<sp-badge size="s">
|
|
37
|
+
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
38
|
+
Icon and label
|
|
39
|
+
</sp-badge>
|
|
40
|
+
</div>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
</sp-tab-panel>
|
|
44
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
45
|
+
<sp-tab-panel value="m">
|
|
46
|
+
|
|
47
|
+
```html demo
|
|
48
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
49
|
+
<sp-badge size="m">Label</sp-badge>
|
|
50
|
+
<sp-badge size="m">
|
|
51
|
+
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
52
|
+
Icon and label
|
|
53
|
+
</sp-badge>
|
|
54
|
+
</div>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
</sp-tab-panel>
|
|
58
|
+
<sp-tab value="l">Large</sp-tab>
|
|
59
|
+
<sp-tab-panel value="l">
|
|
60
|
+
|
|
61
|
+
```html demo
|
|
62
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
63
|
+
<sp-badge size="l">Label</sp-badge>
|
|
64
|
+
<sp-badge size="l">
|
|
65
|
+
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
66
|
+
Icon and label
|
|
67
|
+
</sp-badge>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
</sp-tab-panel>
|
|
72
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
73
|
+
<sp-tab-panel value="xl">
|
|
74
|
+
|
|
75
|
+
```html demo
|
|
76
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
77
|
+
<sp-badge size="xl">Label</sp-badge>
|
|
78
|
+
<sp-badge size="xl">
|
|
79
|
+
<sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
|
|
80
|
+
Icon and label
|
|
81
|
+
</sp-badge>
|
|
82
|
+
</div>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
</sp-tab-panel>
|
|
86
|
+
</sp-tabs>
|
|
87
|
+
|
|
88
|
+
## Variants
|
|
89
|
+
|
|
90
|
+
The `<sp-badge>` can be customized with either semantic or non-semantic variants.
|
|
91
|
+
|
|
92
|
+
### Semantic
|
|
93
|
+
|
|
94
|
+
```html demo
|
|
95
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75);">
|
|
96
|
+
<sp-badge variant="accent">Informative</sp-badge>
|
|
97
|
+
<sp-badge variant="neutral">Neutral</sp-badge>
|
|
98
|
+
<sp-badge variant="informative">Informative</sp-badge>
|
|
99
|
+
<sp-badge variant="positive">Positive</sp-badge>
|
|
100
|
+
<sp-badge variant="negative">Negative</sp-badge>
|
|
101
|
+
<sp-badge variant="notice">Notice</sp-badge>
|
|
102
|
+
</div>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Non-Semantic
|
|
106
|
+
|
|
107
|
+
Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the `variant` attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.
|
|
108
|
+
|
|
109
|
+
```html demo
|
|
110
|
+
<div style="display: flex; gap: var(--spectrum-spacing-75); flex-wrap:wrap;">
|
|
111
|
+
<sp-badge variant="seafoam">Seafoam</sp-badge>
|
|
112
|
+
<sp-badge variant="indigo">Indigo</sp-badge>
|
|
113
|
+
<sp-badge variant="purple">Purple</sp-badge>
|
|
114
|
+
<sp-badge variant="fuchsia">Fuchsia</sp-badge>
|
|
115
|
+
<sp-badge variant="magenta">Magenta</sp-badge>
|
|
116
|
+
<sp-badge variant="yellow">Yellow</sp-badge>
|
|
117
|
+
<sp-badge variant="gray">Gray</sp-badge>
|
|
118
|
+
<sp-badge variant="red">Red</sp-badge>
|
|
119
|
+
<sp-badge variant="orange">Orange</sp-badge>
|
|
120
|
+
<sp-badge variant="chartreuse">Chartreuse</sp-badge>
|
|
121
|
+
<sp-badge variant="celery">Celery</sp-badge>
|
|
122
|
+
<sp-badge variant="green">Green</sp-badge>
|
|
123
|
+
<sp-badge variant="cyan">Cyan</sp-badge>
|
|
124
|
+
<sp-badge variant="blue">Blue</sp-badge>
|
|
125
|
+
</div>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Fixed
|
|
129
|
+
|
|
130
|
+
When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a UI, the `fixed` attribute/property can be leveraged to alter the border rounding based on the position you would like to achieve:
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<div
|
|
134
|
+
style="position: relative; width: 400px; height: 200px; background: #eee; max-width: 100%"
|
|
135
|
+
>
|
|
136
|
+
<sp-badge>None</sp-badge>
|
|
137
|
+
<sp-badge
|
|
138
|
+
fixed="block-start"
|
|
139
|
+
style="position: absolute; top: 0; left: 200px;"
|
|
140
|
+
>
|
|
141
|
+
block-start
|
|
142
|
+
</sp-badge>
|
|
143
|
+
<sp-badge
|
|
144
|
+
fixed="inline-end"
|
|
145
|
+
style="position: absolute; right: 0; top: 100px;"
|
|
146
|
+
>
|
|
147
|
+
inline-end
|
|
148
|
+
</sp-badge>
|
|
149
|
+
<sp-badge
|
|
150
|
+
fixed="block-end"
|
|
151
|
+
style="position: absolute; bottom: 0; left: 200px;"
|
|
152
|
+
>
|
|
153
|
+
block-end
|
|
154
|
+
</sp-badge>
|
|
155
|
+
<sp-badge
|
|
156
|
+
fixed="inline-start"
|
|
157
|
+
style="position: absolute; left: 0; top: 100px;"
|
|
158
|
+
>
|
|
159
|
+
inline-start
|
|
160
|
+
</sp-badge>
|
|
161
|
+
</div>
|
|
162
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spectrum-web-components/badge",
|
|
3
|
+
"version": "0.0.0-20241209155954",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "Web component implementation of a Spectrum design Badge",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "packages/badge"
|
|
13
|
+
},
|
|
14
|
+
"author": "",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/badge",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "src/index.js",
|
|
20
|
+
"module": "src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/Badge.js": {
|
|
29
|
+
"development": "./src/Badge.dev.js",
|
|
30
|
+
"default": "./src/Badge.js"
|
|
31
|
+
},
|
|
32
|
+
"./src/badge-overrides.css.js": "./src/badge-overrides.css.js",
|
|
33
|
+
"./src/badge.css.js": "./src/badge.css.js",
|
|
34
|
+
"./src/index.js": {
|
|
35
|
+
"development": "./src/index.dev.js",
|
|
36
|
+
"default": "./src/index.js"
|
|
37
|
+
},
|
|
38
|
+
"./sp-badge.js": {
|
|
39
|
+
"development": "./sp-badge.dev.js",
|
|
40
|
+
"default": "./sp-badge.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
45
|
+
},
|
|
46
|
+
"files": [
|
|
47
|
+
"**/*.d.ts",
|
|
48
|
+
"**/*.js",
|
|
49
|
+
"**/*.js.map",
|
|
50
|
+
"custom-elements.json",
|
|
51
|
+
"!stories/",
|
|
52
|
+
"!test/"
|
|
53
|
+
],
|
|
54
|
+
"keywords": [
|
|
55
|
+
"spectrum css",
|
|
56
|
+
"web components",
|
|
57
|
+
"lit-element",
|
|
58
|
+
"lit-html"
|
|
59
|
+
],
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"@spectrum-web-components/base": "0.0.0-20241209155954",
|
|
62
|
+
"@spectrum-web-components/shared": "0.0.0-20241209155954"
|
|
63
|
+
},
|
|
64
|
+
"devDependencies": {
|
|
65
|
+
"@spectrum-css/badge": "^5.0.0-s2-foundations.15"
|
|
66
|
+
},
|
|
67
|
+
"types": "./src/index.d.ts",
|
|
68
|
+
"customElements": "custom-elements.json",
|
|
69
|
+
"sideEffects": [
|
|
70
|
+
"./sp-*.js",
|
|
71
|
+
"./**/*.dev.js"
|
|
72
|
+
]
|
|
73
|
+
}
|
package/sp-badge.d.ts
ADDED
package/sp-badge.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-badge.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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
|
+
"mappings": ";AAYA,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,cAAc,YAAY,KAAK;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/sp-badge.js
ADDED
package/sp-badge.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-badge.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { 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
|
+
"mappings": "aAYA,OAAS,SAAAA,MAAa,iBACtB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,WAAYD,CAAK",
|
|
6
|
+
"names": ["Badge", "defineElement"]
|
|
7
|
+
}
|
package/src/Badge.d.ts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
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
|
+
export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
|
|
4
|
+
export declare const FIXED_VALUES: readonly ["inline-start", "inline-end", "block-start", "block-end"];
|
|
5
|
+
export type FixedValues = (typeof FIXED_VALUES)[number];
|
|
6
|
+
declare const Badge_base: typeof SpectrumElement & {
|
|
7
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
8
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
9
|
+
} & {
|
|
10
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
11
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
12
|
+
} & {
|
|
13
|
+
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
14
|
+
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* @element sp-badge
|
|
18
|
+
*
|
|
19
|
+
* @slot - Text label of the badge
|
|
20
|
+
* @slot icon - Optional icon that appears to the left of the label
|
|
21
|
+
*/
|
|
22
|
+
export declare class Badge extends Badge_base {
|
|
23
|
+
static get styles(): CSSResultArray;
|
|
24
|
+
get fixed(): FixedValues | undefined;
|
|
25
|
+
set fixed(fixed: FixedValues | undefined);
|
|
26
|
+
private _fixed?;
|
|
27
|
+
variant: BadgeVariant;
|
|
28
|
+
protected get hasIcon(): boolean;
|
|
29
|
+
protected render(): TemplateResult;
|
|
30
|
+
}
|
|
31
|
+
export {};
|
package/src/Badge.dev.js
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
html,
|
|
14
|
+
nothing,
|
|
15
|
+
SizedMixin,
|
|
16
|
+
SpectrumElement
|
|
17
|
+
} from "@spectrum-web-components/base";
|
|
18
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
19
|
+
import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
|
|
20
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
21
|
+
import styles from "./badge.css.js";
|
|
22
|
+
export const BADGE_VARIANTS = [
|
|
23
|
+
"accent",
|
|
24
|
+
"neutral",
|
|
25
|
+
"informative",
|
|
26
|
+
"positive",
|
|
27
|
+
"negative",
|
|
28
|
+
"notice",
|
|
29
|
+
"fuchsia",
|
|
30
|
+
"indigo",
|
|
31
|
+
"magenta",
|
|
32
|
+
"purple",
|
|
33
|
+
"seafoam",
|
|
34
|
+
"yellow",
|
|
35
|
+
"gray",
|
|
36
|
+
"red",
|
|
37
|
+
"orange",
|
|
38
|
+
"chartreuse",
|
|
39
|
+
"celery",
|
|
40
|
+
"green",
|
|
41
|
+
"cyan",
|
|
42
|
+
"blue"
|
|
43
|
+
];
|
|
44
|
+
export const FIXED_VALUES = [
|
|
45
|
+
"inline-start",
|
|
46
|
+
"inline-end",
|
|
47
|
+
"block-start",
|
|
48
|
+
"block-end"
|
|
49
|
+
];
|
|
50
|
+
export class Badge extends SizedMixin(
|
|
51
|
+
ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ""),
|
|
52
|
+
{
|
|
53
|
+
noDefaultSize: true
|
|
54
|
+
}
|
|
55
|
+
) {
|
|
56
|
+
constructor() {
|
|
57
|
+
super(...arguments);
|
|
58
|
+
this.variant = "informative";
|
|
59
|
+
}
|
|
60
|
+
static get styles() {
|
|
61
|
+
return [styles];
|
|
62
|
+
}
|
|
63
|
+
get fixed() {
|
|
64
|
+
return this._fixed;
|
|
65
|
+
}
|
|
66
|
+
set fixed(fixed) {
|
|
67
|
+
if (fixed === this.fixed) return;
|
|
68
|
+
const oldValue = this.fixed;
|
|
69
|
+
this._fixed = fixed;
|
|
70
|
+
if (fixed) {
|
|
71
|
+
this.setAttribute("fixed", fixed);
|
|
72
|
+
} else {
|
|
73
|
+
this.removeAttribute("fixed");
|
|
74
|
+
}
|
|
75
|
+
this.requestUpdate("fixed", oldValue);
|
|
76
|
+
}
|
|
77
|
+
get hasIcon() {
|
|
78
|
+
return this.slotContentIsPresent;
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
if (true) {
|
|
82
|
+
if (!BADGE_VARIANTS.includes(this.variant)) {
|
|
83
|
+
window.__swc.warn(
|
|
84
|
+
this,
|
|
85
|
+
`<${this.localName}> element expect the "variant" attribute to be one of the following:`,
|
|
86
|
+
"https://opensource.adobe.com/spectrum-web-components/components/badge/#variants",
|
|
87
|
+
{
|
|
88
|
+
issues: [...BADGE_VARIANTS]
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return html`
|
|
94
|
+
${this.hasIcon ? html`
|
|
95
|
+
<slot
|
|
96
|
+
name="icon"
|
|
97
|
+
?icon-only=${!this.slotHasContent}
|
|
98
|
+
></slot>
|
|
99
|
+
` : nothing}
|
|
100
|
+
<div class="label">
|
|
101
|
+
<slot></slot>
|
|
102
|
+
</div>
|
|
103
|
+
`;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
__decorateClass([
|
|
107
|
+
property({ reflect: true })
|
|
108
|
+
], Badge.prototype, "fixed", 1);
|
|
109
|
+
__decorateClass([
|
|
110
|
+
property({ type: String, reflect: true })
|
|
111
|
+
], Badge.prototype, "variant", 2);
|
|
112
|
+
//# sourceMappingURL=Badge.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Badge.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\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
|
+
"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
|
+
"names": []
|
|
7
|
+
}
|
package/src/Badge.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(o,r,e,i)=>{for(var t=i>1?void 0:i?p(r,e):r,s=o.length-1,n;s>=0;s--)(n=o[s])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&u(r,e,t),t};import{html as l,nothing as d,SizedMixin as f,SpectrumElement as m}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{ObserveSlotText as h}from"@spectrum-web-components/shared/src/observe-slot-text.js";import{ObserveSlotPresence as b}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import x from"./badge.css.js";export const BADGE_VARIANTS=["accent","neutral","informative","positive","negative","notice","fuchsia","indigo","magenta","purple","seafoam","yellow","gray","red","orange","chartreuse","celery","green","cyan","blue"],FIXED_VALUES=["inline-start","inline-end","block-start","block-end"];export class Badge extends f(h(b(m,'[slot="icon"]'),""),{noDefaultSize:!0}){constructor(){super(...arguments);this.variant="informative"}static get styles(){return[x]}get fixed(){return this._fixed}set fixed(e){if(e===this.fixed)return;const i=this.fixed;this._fixed=e,e?this.setAttribute("fixed",e):this.removeAttribute("fixed"),this.requestUpdate("fixed",i)}get hasIcon(){return this.slotContentIsPresent}render(){return l`
|
|
2
|
+
${this.hasIcon?l`
|
|
3
|
+
<slot
|
|
4
|
+
name="icon"
|
|
5
|
+
?icon-only=${!this.slotHasContent}
|
|
6
|
+
></slot>
|
|
7
|
+
`:d}
|
|
8
|
+
<div class="label">
|
|
9
|
+
<slot></slot>
|
|
10
|
+
</div>
|
|
11
|
+
`}}a([c({reflect:!0})],Badge.prototype,"fixed",1),a([c({type:String,reflect:!0})],Badge.prototype,"variant",2);
|
|
12
|
+
//# sourceMappingURL=Badge.js.map
|
package/src/Badge.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Badge.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\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
|
+
"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
|
+
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "ObserveSlotText", "ObserveSlotPresence", "styles", "fixed", "oldValue", "__decorateClass"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-icon-only-spacing-horizontal)}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=badge-overrides.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["badge-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-icon-only-spacing-horizontal)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as e}from"@spectrum-web-components/base";const a=e`
|
|
2
|
+
:host{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-icon-only-spacing-horizontal)}
|
|
3
|
+
`;export default a;
|
|
4
|
+
//# sourceMappingURL=badge-overrides.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["badge-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-icon-only-spacing-horizontal)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
@media (forced-colors:active){:host{border-color:CanvasText}}: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{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-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}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=badge.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["badge.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 @media (forced-colors:active){:host{border-color:CanvasText}}: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{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-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
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/badge.css.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as a}from"@spectrum-web-components/base";const e=a`
|
|
2
|
+
@media (forced-colors:active){:host{border-color:CanvasText}}: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{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-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}
|
|
3
|
+
`;export default e;
|
|
4
|
+
//# sourceMappingURL=badge.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["badge.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 @media (forced-colors:active){:host{border-color:CanvasText}}: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{--spectrum-badge-corner-radius:var(--system-badge-corner-radius);--spectrum-badge-line-height:var(--system-badge-line-height);--spectrum-badge-line-height-cjk:var(--system-badge-line-height-cjk);--spectrum-badge-label-icon-color:var(--system-badge-label-icon-color);--spectrum-badge-background-color-default:var(--system-badge-background-color-default);--spectrum-badge-background-color-accent:var(--system-badge-background-color-accent);--spectrum-badge-background-color-informative:var(--system-badge-background-color-informative);--spectrum-badge-background-color-negative:var(--system-badge-background-color-negative);--spectrum-badge-background-color-positive:var(--system-badge-background-color-positive);--spectrum-badge-background-color-notice:var(--system-badge-background-color-notice);--spectrum-badge-background-color-gray:var(--system-badge-background-color-gray);--spectrum-badge-background-color-red:var(--system-badge-background-color-red);--spectrum-badge-background-color-orange:var(--system-badge-background-color-orange);--spectrum-badge-background-color-yellow:var(--system-badge-background-color-yellow);--spectrum-badge-background-color-chartreuse:var(--system-badge-background-color-chartreuse);--spectrum-badge-background-color-celery:var(--system-badge-background-color-celery);--spectrum-badge-background-color-green:var(--system-badge-background-color-green);--spectrum-badge-background-color-seafoam:var(--system-badge-background-color-seafoam);--spectrum-badge-background-color-cyan:var(--system-badge-background-color-cyan);--spectrum-badge-background-color-blue:var(--system-badge-background-color-blue);--spectrum-badge-background-color-indigo:var(--system-badge-background-color-indigo);--spectrum-badge-background-color-purple:var(--system-badge-background-color-purple);--spectrum-badge-background-color-fuchsia:var(--system-badge-background-color-fuchsia);--spectrum-badge-background-color-magenta:var(--system-badge-background-color-magenta);--spectrum-badge-height:var(--system-badge-height);--spectrum-badge-font-size:var(--system-badge-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-icon-only-spacing-horizontal)}:host([variant=orange]){--spectrum-badge-label-icon-color:var(--system-badge-orange-label-icon-color)}:host([variant=yellow]){--spectrum-badge-label-icon-color:var(--system-badge-yellow-label-icon-color)}:host([variant=chartreuse]){--spectrum-badge-label-icon-color:var(--system-badge-chartreuse-label-icon-color)}:host([variant=celery]){--spectrum-badge-label-icon-color:var(--system-badge-celery-label-icon-color)}:host([variant=gray]){--spectrum-badge-label-icon-color:var(--system-badge-gray-label-icon-color)}:host([variant=red]){--spectrum-badge-label-icon-color:var(--system-badge-red-label-icon-color)}:host([variant=green]){--spectrum-badge-label-icon-color:var(--system-badge-green-label-icon-color)}:host([variant=seafoam]){--spectrum-badge-label-icon-color:var(--system-badge-seafoam-label-icon-color)}:host([variant=cyan]){--spectrum-badge-label-icon-color:var(--system-badge-cyan-label-icon-color)}:host([variant=blue]){--spectrum-badge-label-icon-color:var(--system-badge-blue-label-icon-color)}:host([variant=indigo]){--spectrum-badge-label-icon-color:var(--system-badge-indigo-label-icon-color)}:host([variant=purple]){--spectrum-badge-label-icon-color:var(--system-badge-purple-label-icon-color)}:host([variant=fuchsia]){--spectrum-badge-label-icon-color:var(--system-badge-fuchsia-label-icon-color)}:host([variant=magenta]){--spectrum-badge-label-icon-color:var(--system-badge-magenta-label-icon-color)}:host([size=s]){--spectrum-badge-height:var(--system-badge-size-s-height);--spectrum-badge-font-size:var(--system-badge-size-s-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-s-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-s-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-s-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-s-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-s-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-s-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-s-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-s-icon-only-spacing-horizontal)}:host([size=l]){--spectrum-badge-height:var(--system-badge-size-l-height);--spectrum-badge-font-size:var(--system-badge-size-l-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-l-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-l-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-l-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-l-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-l-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-l-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-l-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-l-icon-only-spacing-horizontal)}:host([size=xl]){--spectrum-badge-height:var(--system-badge-size-xl-height);--spectrum-badge-font-size:var(--system-badge-size-xl-font-size);--spectrum-badge-label-spacing-vertical-top:var(--system-badge-size-xl-label-spacing-vertical-top);--spectrum-badge-label-spacing-vertical-bottom:var(--system-badge-size-xl-label-spacing-vertical-bottom);--spectrum-badge-label-spacing-horizontal:var(--system-badge-size-xl-label-spacing-horizontal);--spectrum-badge-workflow-icon-size:var(--system-badge-size-xl-workflow-icon-size);--spectrum-badge-icon-text-spacing:var(--system-badge-size-xl-icon-text-spacing);--spectrum-badge-icon-spacing-horizontal:var(--system-badge-size-xl-icon-spacing-horizontal);--spectrum-badge-icon-spacing-vertical-top:var(--system-badge-size-xl-icon-spacing-vertical-top);--spectrum-badge-icon-only-spacing-horizontal:var(--system-badge-size-xl-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
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Badge.js';
|
package/src/index.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './Badge.dev.js'\n"],
|
|
5
|
+
"mappings": ";AAYA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.js
ADDED
package/src/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './Badge.js';\n"],
|
|
5
|
+
"mappings": "aAYA,WAAc",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
@media (forced-colors:active){:host{border-color:CanvasText}}: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))}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=spectrum-badge.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["spectrum-badge.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 @media (forced-colors:active){:host{border-color:CanvasText}}: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
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as a}from"@spectrum-web-components/base";const o=a`
|
|
2
|
+
@media (forced-colors:active){:host{border-color:CanvasText}}: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))}
|
|
3
|
+
`;export default o;
|
|
4
|
+
//# sourceMappingURL=spectrum-badge.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["spectrum-badge.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 @media (forced-colors:active){:host{border-color:CanvasText}}: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
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
// @ts-check
|
|
2
|
+
/*
|
|
3
|
+
Copyright 2023 Adobe. All rights reserved.
|
|
4
|
+
This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
5
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
6
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
|
|
8
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
9
|
+
the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
10
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
11
|
+
governing permissions and limitations under the License.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import { converterFor } from '../../../tasks/process-spectrum-utils.js';
|
|
15
|
+
|
|
16
|
+
const converter = converterFor('spectrum-Badge');
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
|
|
20
|
+
*/
|
|
21
|
+
const config = {
|
|
22
|
+
conversions: [
|
|
23
|
+
{
|
|
24
|
+
inPackage: '@spectrum-css/badge',
|
|
25
|
+
outPackage: 'badge',
|
|
26
|
+
fileName: 'badge',
|
|
27
|
+
excludeByComponents: [
|
|
28
|
+
{
|
|
29
|
+
type: 'pseudo-class',
|
|
30
|
+
kind: 'hover',
|
|
31
|
+
},
|
|
32
|
+
],
|
|
33
|
+
components: [
|
|
34
|
+
converter.classToHost(),
|
|
35
|
+
// Default to `size='m'` without needing the attribute
|
|
36
|
+
converter.classToHost('spectrum-Badge--sizeM'),
|
|
37
|
+
...converter.enumerateAttributes(
|
|
38
|
+
[
|
|
39
|
+
['spectrum-Badge--sizeS', 's'],
|
|
40
|
+
['spectrum-Badge--sizeL', 'l'],
|
|
41
|
+
['spectrum-Badge--sizeXL', 'xl'],
|
|
42
|
+
],
|
|
43
|
+
'size'
|
|
44
|
+
),
|
|
45
|
+
...converter.enumerateAttributes(
|
|
46
|
+
[
|
|
47
|
+
// semantic
|
|
48
|
+
['spectrum-Badge--accent'],
|
|
49
|
+
['spectrum-Badge--positive'],
|
|
50
|
+
['spectrum-Badge--informative'],
|
|
51
|
+
['spectrum-Badge--negative'],
|
|
52
|
+
['spectrum-Badge--neutral'],
|
|
53
|
+
['spectrum-Badge--notice'],
|
|
54
|
+
// non-semantic
|
|
55
|
+
['spectrum-Badge--seafoam'],
|
|
56
|
+
['spectrum-Badge--indigo'],
|
|
57
|
+
['spectrum-Badge--purple'],
|
|
58
|
+
['spectrum-Badge--fuchsia'],
|
|
59
|
+
['spectrum-Badge--magenta'],
|
|
60
|
+
['spectrum-Badge--yellow'],
|
|
61
|
+
['spectrum-Badge--gray'],
|
|
62
|
+
['spectrum-Badge--red'],
|
|
63
|
+
['spectrum-Badge--orange'],
|
|
64
|
+
['spectrum-Badge--chartreuse'],
|
|
65
|
+
['spectrum-Badge--celery'],
|
|
66
|
+
['spectrum-Badge--green'],
|
|
67
|
+
['spectrum-Badge--cyan'],
|
|
68
|
+
['spectrum-Badge--blue'],
|
|
69
|
+
],
|
|
70
|
+
'variant'
|
|
71
|
+
),
|
|
72
|
+
...converter.enumerateAttributes(
|
|
73
|
+
[
|
|
74
|
+
['spectrum-Badge--fixed-inline-start', 'inline-start'],
|
|
75
|
+
['spectrum-Badge--fixed-inline-end', 'inline-end'],
|
|
76
|
+
['spectrum-Badge--fixed-block-start', 'block-start'],
|
|
77
|
+
['spectrum-Badge--fixed-block-end', 'block-end'],
|
|
78
|
+
],
|
|
79
|
+
'fixed'
|
|
80
|
+
),
|
|
81
|
+
...converter.enumerateAttributes(
|
|
82
|
+
[['spectrum-Badge--black-text', 'black']],
|
|
83
|
+
'static-color'
|
|
84
|
+
),
|
|
85
|
+
converter.classToClass('spectrum-Badge-label'),
|
|
86
|
+
converter.classToSlotted('spectrum-Badge-icon', 'icon'),
|
|
87
|
+
{
|
|
88
|
+
find: [
|
|
89
|
+
{
|
|
90
|
+
type: 'class',
|
|
91
|
+
name: 'spectrum-Badge-icon--no-label',
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
replace: [
|
|
95
|
+
{
|
|
96
|
+
replace: {
|
|
97
|
+
type: 'attribute',
|
|
98
|
+
name: 'icon-only',
|
|
99
|
+
},
|
|
100
|
+
hoist: false,
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
replace: {
|
|
104
|
+
type: 'pseudo-element',
|
|
105
|
+
kind: 'slotted',
|
|
106
|
+
selector: [
|
|
107
|
+
{
|
|
108
|
+
type: 'universal',
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
find: [
|
|
117
|
+
{
|
|
118
|
+
type: 'class',
|
|
119
|
+
name: 'spectrum-Badge-icon',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'combinator',
|
|
123
|
+
value: 'next-sibling',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
type: 'class',
|
|
127
|
+
name: 'spectrum-Badge-label',
|
|
128
|
+
},
|
|
129
|
+
],
|
|
130
|
+
replace: [
|
|
131
|
+
{
|
|
132
|
+
replace: {
|
|
133
|
+
type: 'attribute',
|
|
134
|
+
name: 'name',
|
|
135
|
+
operation: {
|
|
136
|
+
operator: 'equal',
|
|
137
|
+
value: 'icon',
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
hoist: false,
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
},
|
|
146
|
+
],
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
export default config;
|