@spectrum-web-components/avatar 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -7
- package/package.json +3 -3
- package/sp-avatar.d.ts +11 -0
- package/sp-avatar.dev.js.map +1 -1
- package/sp-avatar.js.map +1 -1
- package/src/Avatar.d.ts +11 -0
- package/src/Avatar.dev.js.map +1 -1
- package/src/Avatar.js.map +1 -1
- package/src/avatar-overrides.css.dev.js.map +1 -1
- package/src/avatar-overrides.css.js.map +1 -1
- package/src/avatar.css.dev.js.map +1 -1
- package/src/avatar.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-avatar.css.dev.js.map +1 -1
- package/src/spectrum-avatar.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
An `<sp-avatar>` is a
|
|
3
|
+
An `<sp-avatar>` is a thumbnail representation of an entity, such as a user or an organization. Avatars can have a defined image, which is usually uploaded by a user.
|
|
4
|
+
|
|
5
|
+
[View the design documentation for this component.](https://spectrum.adobe.com/page/avatar/)
|
|
4
6
|
|
|
5
7
|
### Usage
|
|
6
8
|
|
|
@@ -8,23 +10,27 @@ An `<sp-avatar>` is a great way to feature a visual representation of a user.
|
|
|
8
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/avatar)
|
|
9
11
|
[](https://stackblitz.com/edit/vitejs-vite-swzc3ix8)
|
|
10
12
|
|
|
11
|
-
```
|
|
13
|
+
```zsh
|
|
12
14
|
yarn add @spectrum-web-components/avatar
|
|
13
15
|
```
|
|
14
16
|
|
|
15
17
|
Import the side effectful registration of `<sp-avatar>` via:
|
|
16
18
|
|
|
17
|
-
```
|
|
19
|
+
```js
|
|
18
20
|
import '@spectrum-web-components/avatar/sp-avatar.js';
|
|
19
21
|
```
|
|
20
22
|
|
|
21
23
|
When looking to leverage the `Avatar` base class as a type and/or for extension purposes, do so via:
|
|
22
24
|
|
|
23
|
-
```
|
|
25
|
+
```js
|
|
24
26
|
import { Avatar } from '@spectrum-web-components/avatar';
|
|
25
27
|
```
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
### Options
|
|
30
|
+
|
|
31
|
+
#### Sizes
|
|
32
|
+
|
|
33
|
+
Avatar sizes scale exponentially, based on the Spectrum type scale. These range from `size-50` to `size-700`. An avatar can also be customized to fit appropriately for your context. The default size is `size-100`.
|
|
28
34
|
|
|
29
35
|
<sp-tabs selected="100" auto label="Size Attribute Options">
|
|
30
36
|
<sp-tab value="50">50</sp-tab>
|
|
@@ -137,6 +143,16 @@ import { Avatar } from '@spectrum-web-components/avatar';
|
|
|
137
143
|
</sp-tab-panel>
|
|
138
144
|
</sp-tabs>
|
|
139
145
|
|
|
140
|
-
|
|
146
|
+
### States
|
|
147
|
+
|
|
148
|
+
#### Generic avatars
|
|
149
|
+
|
|
150
|
+
Use branded generic avatars when a user has not set their avatar image. These images are designed to be abstracted from all genders, locales, and cultures.
|
|
151
|
+
|
|
152
|
+
#### Disabled
|
|
153
|
+
|
|
154
|
+
An avatar in a disabled state shows that an avatar exists, but is not available or a user is not active in that circumstance. This can be used to maintain layout continuity and communicate that an avatar may become available or active later.
|
|
155
|
+
|
|
156
|
+
### Accessibility
|
|
141
157
|
|
|
142
158
|
The `label` attribute of the `<sp-avatar>` will be passed into the `<img>` element as the `alt` tag for use in defining a textual representation of the image displayed.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/avatar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
"css"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/base": "1.
|
|
68
|
-
"@spectrum-web-components/shared": "1.
|
|
67
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
68
|
+
"@spectrum-web-components/shared": "1.8.0"
|
|
69
69
|
},
|
|
70
70
|
"types": "./src/index.d.ts",
|
|
71
71
|
"customElements": "custom-elements.json",
|
package/sp-avatar.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Avatar } from './src/Avatar.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-avatar.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-avatar.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Avatar } from './src/Avatar.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-avatar', Avatar);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-avatar': Avatar;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-avatar.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-avatar.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Avatar } from './src/Avatar.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-avatar', Avatar);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-avatar': Avatar;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
|
|
6
6
|
"names": ["Avatar", "defineElement"]
|
|
7
7
|
}
|
package/src/Avatar.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
14
|
export type AvatarSize = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700;
|
package/src/Avatar.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Avatar.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport avatarStyles from './avatar.css.js';\n\nexport type AvatarSize = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700;\nconst validSizes: AvatarSize[] = [50, 75, 100, 200, 300, 400, 500, 600, 700];\nconst defaultSize = validSizes[2];\n\n/**\n * @element sp-avatar\n */\nexport class Avatar extends LikeAnchor(Focusable) {\n public static override get styles(): CSSResultArray {\n return [avatarStyles];\n }\n\n @query('#link')\n anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this.anchorElement || this;\n }\n\n @property()\n public src = '';\n\n @property({ type: Number, reflect: true })\n public get size(): AvatarSize {\n return this._size;\n }\n\n public set size(value: AvatarSize) {\n const size = value;\n const validSize = (\n validSizes.includes(size) ? size : defaultSize\n ) as AvatarSize;\n if (validSize) {\n this.setAttribute('size', `${validSize}`);\n }\n if (this._size === validSize) {\n return;\n }\n const oldSize = this._size;\n this._size = validSize;\n this.requestUpdate('size', oldSize);\n }\n\n private _size = defaultSize;\n\n protected override render(): TemplateResult {\n const avatar = html`\n <img\n class=\"image\"\n alt=${ifDefined(this.label || undefined)}\n src=${this.src}\n />\n `;\n if (this.href) {\n return this.renderAnchor({\n id: 'link',\n className: 'link',\n anchorContent: avatar,\n });\n }\n return avatar;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('size')) {\n this.setAttribute('size', `${this.size}`);\n }\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,OAAO,kBAAkB;AAGzB,MAAM,aAA2B,CAAC,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAC3E,MAAM,cAAc,WAAW,CAAC;AAKzB,aAAM,eAAe,WAAW,SAAS,EAAE;AAAA,EAA3C;AAAA;AAaH,SAAO,MAAM;AAuBb,SAAQ,QAAQ;AAAA;AAAA,EAnChB,WAA2B,SAAyB;AAChD,WAAO,CAAC,YAAY;AAAA,EACxB;AAAA,EAKA,IAAoB,eAA4B;AAC5C,WAAO,KAAK,iBAAiB;AAAA,EACjC;AAAA,EAMA,IAAW,OAAmB;AAC1B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,KAAK,OAAmB;AAC/B,UAAM,OAAO;AACb,UAAM,YACF,WAAW,SAAS,IAAI,IAAI,OAAO;AAEvC,QAAI,WAAW;AACX,WAAK,aAAa,QAAQ,GAAG,SAAS,EAAE;AAAA,IAC5C;AACA,QAAI,KAAK,UAAU,WAAW;AAC1B;AAAA,IACJ;AACA,UAAM,UAAU,KAAK;AACrB,SAAK,QAAQ;AACb,SAAK,cAAc,QAAQ,OAAO;AAAA,EACtC;AAAA,EAImB,SAAyB;AACxC,UAAM,SAAS;AAAA;AAAA;AAAA,sBAGD,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA,sBAClC,KAAK,GAAG;AAAA;AAAA;AAGtB,QAAI,KAAK,MAAM;AACX,aAAO,KAAK,aAAa;AAAA,QACrB,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,eAAe;AAAA,MACnB,CAAC;AAAA,IACL;AACA,WAAO;AAAA,EACX;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,GAAG,KAAK,IAAI,EAAE;AAAA,IAC5C;AAAA,EACJ;AACJ;AAxDI;AAAA,EADC,MAAM,OAAO;AAAA,GALL,OAMT;AAOO;AAAA,EADN,SAAS;AAAA,GAZD,OAaF;AAGI;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAfhC,OAgBE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Avatar.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Avatar.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport avatarStyles from './avatar.css.js';\n\nexport type AvatarSize = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700;\nconst validSizes: AvatarSize[] = [50, 75, 100, 200, 300, 400, 500, 600, 700];\nconst defaultSize = validSizes[2];\n\n/**\n * @element sp-avatar\n */\nexport class Avatar extends LikeAnchor(Focusable) {\n public static override get styles(): CSSResultArray {\n return [avatarStyles];\n }\n\n @query('#link')\n anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this.anchorElement || this;\n }\n\n @property()\n public src = '';\n\n @property({ type: Number, reflect: true })\n public get size(): AvatarSize {\n return this._size;\n }\n\n public set size(value: AvatarSize) {\n const size = value;\n const validSize = (\n validSizes.includes(size) ? size : defaultSize\n ) as AvatarSize;\n if (validSize) {\n this.setAttribute('size', `${validSize}`);\n }\n if (this._size === validSize) {\n return;\n }\n const oldSize = this._size;\n this._size = validSize;\n this.requestUpdate('size', oldSize);\n }\n\n private _size = defaultSize;\n\n protected override render(): TemplateResult {\n const avatar = html`\n <img\n class=\"image\"\n alt=${ifDefined(this.label || undefined)}\n src=${this.src}\n />\n `;\n if (this.href) {\n return this.renderAnchor({\n id: 'link',\n className: 'link',\n anchorContent: avatar,\n });\n }\n return avatar;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('size')) {\n this.setAttribute('size', `${this.size}`);\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,cAAAC,MAAkB,qDAC3B,OAAS,aAAAC,MAAiB,mDAE1B,OAAOC,MAAkB,kBAGzB,MAAMC,EAA2B,CAAC,GAAI,GAAI,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,GAAG,EACrEC,EAAcD,EAAW,CAAC,EAKzB,aAAM,eAAeH,EAAWC,CAAS,CAAE,CAA3C,kCAaH,KAAO,IAAM,GAuBb,KAAQ,MAAQG,EAnChB,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAY,CACxB,CAKA,IAAoB,cAA4B,CAC5C,OAAO,KAAK,eAAiB,IACjC,CAMA,IAAW,MAAmB,CAC1B,OAAO,KAAK,KAChB,CAEA,IAAW,KAAKG,EAAmB,CAC/B,MAAMC,EAAOD,EACPE,EACFJ,EAAW,SAASG,CAAI,EAAIA,EAAOF,EAKvC,GAHIG,GACA,KAAK,aAAa,OAAQ,GAAGA,CAAS,EAAE,EAExC,KAAK,QAAUA,EACf,OAEJ,MAAMC,EAAU,KAAK,MACrB,KAAK,MAAQD,EACb,KAAK,cAAc,OAAQC,CAAO,CACtC,CAImB,QAAyB,CACxC,MAAMC,EAASb;AAAA;AAAA;AAAA,sBAGDG,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA,sBAClC,KAAK,GAAG;AAAA;AAAA,UAGtB,OAAI,KAAK,KACE,KAAK,aAAa,CACrB,GAAI,OACJ,UAAW,OACX,cAAeU,CACnB,CAAC,EAEEA,CACX,CAEmB,aAAaC,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,GAAG,KAAK,IAAI,EAAE,CAEhD,CACJ,CAxDIC,EAAA,CADCb,EAAM,OAAO,GALL,OAMT,6BAOOa,EAAA,CADNd,EAAS,GAZD,OAaF,mBAGIc,EAAA,CADVd,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAfhC,OAgBE",
|
|
6
6
|
"names": ["html", "property", "query", "ifDefined", "LikeAnchor", "Focusable", "avatarStyles", "validSizes", "defaultSize", "value", "size", "validSize", "oldSize", "avatar", "changes", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["avatar-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["avatar-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["avatar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-color-opacity:1;--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100);--spectrum-avatar-border-radius:var(--spectrum-avatar-block-size);--spectrum-avatar-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-avatar-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-avatar-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-avatar-color-opacity-disabled:var(--spectrum-avatar-opacity-disabled)}:host([size=\"50\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-50);--spectrum-avatar-block-size:var(--spectrum-avatar-size-50)}:host([size=\"75\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-75);--spectrum-avatar-block-size:var(--spectrum-avatar-size-75)}:host([size=\"100\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100)}:host([size=\"200\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-200);--spectrum-avatar-block-size:var(--spectrum-avatar-size-200)}:host([size=\"300\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-300);--spectrum-avatar-block-size:var(--spectrum-avatar-size-300)}:host([size=\"400\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-400);--spectrum-avatar-block-size:var(--spectrum-avatar-size-400)}:host([size=\"500\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-500);--spectrum-avatar-block-size:var(--spectrum-avatar-size-500)}:host([size=\"600\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-600);--spectrum-avatar-block-size:var(--spectrum-avatar-size-600)}:host([size=\"700\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-700);--spectrum-avatar-block-size:var(--spectrum-avatar-size-700)}@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--mod-avatar-color-opacity,var(--spectrum-avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--mod-avatar-color-opacity-disabled,var(--spectrum-avatar-color-opacity-disabled))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);block-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);border-style:solid;border-width:var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--mod-avatar-focus-indicator-color,var(--spectrum-avatar-focus-indicator-color)));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));position:absolute;inset-block-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1);inset-inline-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1)}.link{outline:0}.image{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius))}img{vertical-align:top}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/avatar.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["avatar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-color-opacity:1;--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100);--spectrum-avatar-border-radius:var(--spectrum-avatar-block-size);--spectrum-avatar-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-avatar-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-avatar-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-avatar-color-opacity-disabled:var(--spectrum-avatar-opacity-disabled)}:host([size=\"50\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-50);--spectrum-avatar-block-size:var(--spectrum-avatar-size-50)}:host([size=\"75\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-75);--spectrum-avatar-block-size:var(--spectrum-avatar-size-75)}:host([size=\"100\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100)}:host([size=\"200\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-200);--spectrum-avatar-block-size:var(--spectrum-avatar-size-200)}:host([size=\"300\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-300);--spectrum-avatar-block-size:var(--spectrum-avatar-size-300)}:host([size=\"400\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-400);--spectrum-avatar-block-size:var(--spectrum-avatar-size-400)}:host([size=\"500\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-500);--spectrum-avatar-block-size:var(--spectrum-avatar-size-500)}:host([size=\"600\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-600);--spectrum-avatar-block-size:var(--spectrum-avatar-size-600)}:host([size=\"700\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-700);--spectrum-avatar-block-size:var(--spectrum-avatar-size-700)}@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--mod-avatar-color-opacity,var(--spectrum-avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--mod-avatar-color-opacity-disabled,var(--spectrum-avatar-color-opacity-disabled))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);block-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);border-style:solid;border-width:var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--mod-avatar-focus-indicator-color,var(--spectrum-avatar-focus-indicator-color)));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));position:absolute;inset-block-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1);inset-inline-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1)}.link{outline:0}.image{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius))}img{vertical-align:top}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './Avatar.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Avatar.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAWA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Avatar.js';\n"],
|
|
5
5
|
"mappings": "aAWA,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-avatar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-color-opacity:1;--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100);--spectrum-avatar-border-radius:var(--spectrum-avatar-block-size);--spectrum-avatar-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-avatar-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-avatar-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-avatar-color-opacity-disabled:var(--spectrum-avatar-opacity-disabled)}:host([size=\"50\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-50);--spectrum-avatar-block-size:var(--spectrum-avatar-size-50)}:host([size=\"75\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-75);--spectrum-avatar-block-size:var(--spectrum-avatar-size-75)}:host([size=\"100\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100)}:host([size=\"200\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-200);--spectrum-avatar-block-size:var(--spectrum-avatar-size-200)}:host([size=\"300\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-300);--spectrum-avatar-block-size:var(--spectrum-avatar-size-300)}:host([size=\"400\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-400);--spectrum-avatar-block-size:var(--spectrum-avatar-size-400)}:host([size=\"500\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-500);--spectrum-avatar-block-size:var(--spectrum-avatar-size-500)}:host([size=\"600\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-600);--spectrum-avatar-block-size:var(--spectrum-avatar-size-600)}:host([size=\"700\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-700);--spectrum-avatar-block-size:var(--spectrum-avatar-size-700)}@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--mod-avatar-color-opacity,var(--spectrum-avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--mod-avatar-color-opacity-disabled,var(--spectrum-avatar-color-opacity-disabled))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);block-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);border-style:solid;border-width:var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--mod-avatar-focus-indicator-color,var(--spectrum-avatar-focus-indicator-color)));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));position:absolute;inset-block-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1);inset-inline-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1)}.link{outline:0}.image{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-avatar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-color-opacity:1;--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100);--spectrum-avatar-border-radius:var(--spectrum-avatar-block-size);--spectrum-avatar-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-avatar-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-avatar-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-avatar-color-opacity-disabled:var(--spectrum-avatar-opacity-disabled)}:host([size=\"50\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-50);--spectrum-avatar-block-size:var(--spectrum-avatar-size-50)}:host([size=\"75\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-75);--spectrum-avatar-block-size:var(--spectrum-avatar-size-75)}:host([size=\"100\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-100);--spectrum-avatar-block-size:var(--spectrum-avatar-size-100)}:host([size=\"200\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-200);--spectrum-avatar-block-size:var(--spectrum-avatar-size-200)}:host([size=\"300\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-300);--spectrum-avatar-block-size:var(--spectrum-avatar-size-300)}:host([size=\"400\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-400);--spectrum-avatar-block-size:var(--spectrum-avatar-size-400)}:host([size=\"500\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-500);--spectrum-avatar-block-size:var(--spectrum-avatar-size-500)}:host([size=\"600\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-600);--spectrum-avatar-block-size:var(--spectrum-avatar-size-600)}:host([size=\"700\"]){--spectrum-avatar-inline-size:var(--spectrum-avatar-size-700);--spectrum-avatar-block-size:var(--spectrum-avatar-size-700)}@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--mod-avatar-color-opacity,var(--spectrum-avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--mod-avatar-color-opacity-disabled,var(--spectrum-avatar-color-opacity-disabled))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);block-size:calc(var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap))*2);border-style:solid;border-width:var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--mod-avatar-focus-indicator-color,var(--spectrum-avatar-focus-indicator-color)));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius));position:absolute;inset-block-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1);inset-inline-start:calc((var(--mod-avatar-focus-indicator-gap,var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness,var(--spectrum-avatar-focus-indicator-thickness)))*-1)}.link{outline:0}.image{inline-size:var(--mod-avatar-inline-size,var(--spectrum-avatar-inline-size));block-size:var(--mod-avatar-block-size,var(--spectrum-avatar-block-size));border-radius:var(--mod-avatar-border-radius,var(--spectrum-avatar-border-radius))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|