@spectrum-web-components/link 0.42.2 → 0.42.4
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 +9 -0
- package/package.json +5 -5
- package/src/Link.dev.js +1 -2
- package/src/Link.dev.js.map +1 -1
- package/src/link.css.dev.js +1 -1
- package/src/link.css.dev.js.map +1 -1
- package/src/link.css.js +1 -1
- package/src/link.css.js.map +1 -1
- package/src/spectrum-link.css.dev.js +1 -1
- package/src/spectrum-link.css.dev.js.map +1 -1
- package/src/spectrum-link.css.js +1 -1
- package/src/spectrum-link.css.js.map +1 -1
- package/stories/link.stories.js +5 -0
- package/stories/link.stories.js.map +2 -2
- package/test/link-memory.test.js +8 -0
- package/test/link-memory.test.js.map +7 -0
- package/test/link.test.js +17 -0
- package/test/link.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -42,6 +42,15 @@ Standard links are blue and should be used to call attention to the link or for
|
|
|
42
42
|
This is a <sp-link href="#">standard link</sp-link>.
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
+
### Disabled links
|
|
46
|
+
|
|
47
|
+
Disabled links are blue and should not propagate any events and they are not focussable.
|
|
48
|
+
|
|
49
|
+
<!-- prettier-ignore -->
|
|
50
|
+
```html
|
|
51
|
+
This is a <sp-link disabled href="#">disabled link</sp-link>.
|
|
52
|
+
```
|
|
53
|
+
|
|
45
54
|
### Secondary links
|
|
46
55
|
|
|
47
56
|
The secondary variant is the same color as the paragraph text inline of which it appears. Its subdued appearance is optimal for when the primary variant is too overwhelming, such as in blocks of text with several references linked throughout.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/link",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.42.
|
|
61
|
-
"@spectrum-web-components/shared": "^0.42.
|
|
60
|
+
"@spectrum-web-components/base": "^0.42.4",
|
|
61
|
+
"@spectrum-web-components/shared": "^0.42.4"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@spectrum-css/link": "^
|
|
64
|
+
"@spectrum-css/link": "^5.1.0"
|
|
65
65
|
},
|
|
66
66
|
"types": "./src/index.d.ts",
|
|
67
67
|
"customElements": "custom-elements.json",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "4924ffd06681ced537edaed873a9ce8b42cf155c"
|
|
73
73
|
}
|
package/src/Link.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
package/src/Link.dev.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Link.ts"],
|
|
4
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 { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport linkStyles from './link.css.js';\n\n/**\n * @element sp-link\n */\nexport class Link extends LikeAnchor(Focusable) {\n public static override get styles(): CSSResultArray {\n return [linkStyles];\n }\n\n @query('#anchor')\n anchorElement!: HTMLAnchorElement;\n\n @property({ type: String, reflect: true })\n public variant: 'secondary' | undefined;\n\n @property({ type: String, reflect: true })\n public static: 'black' | 'white' | undefined;\n\n /**\n * Uses quiet styles or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'quiet' })\n public quiet = false;\n\n public override get focusElement(): HTMLElement {\n return this.anchorElement;\n }\n\n protected override render(): TemplateResult {\n return this.renderAnchor({ id: 'anchor' });\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAaA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,OAAO,gBAAgB;AAKhB,aAAM,aAAa,WAAW,SAAS,EAAE;AAAA,EAAzC;AAAA;AAkBH,SAAO,QAAQ;AAAA;AAAA,EAjBf,WAA2B,SAAyB;AAChD,WAAO,CAAC,UAAU;AAAA,EACtB;AAAA,EAiBA,IAAoB,eAA4B;AAC5C,WAAO,KAAK;AAAA,EAChB;AAAA,EAEmB,SAAyB;AACxC,WAAO,KAAK,aAAa,EAAE,IAAI,SAAS,CAAC;AAAA,EAC7C;AACJ;AArBI;AAAA,EADC,MAAM,SAAS;AAAA,GALP,KAMT;AAGO;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GARhC,KASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAXhC,KAYF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,QAAQ,CAAC;AAAA,GAjBrD,KAkBF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/link.css.dev.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
4
|
+
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}:host{display:inline}:host(:focus){outline:none}:host([href]) a:focus-visible{text-decoration:underline double}:host([disabled]){pointer-events:none}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=link.css.dev.js.map
|
package/src/link.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["link.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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}:host{display:inline}:host(:focus){outline:none}:host([href]) a:focus-visible{text-decoration:underline double}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/link.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
-
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
2
|
+
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}:host{display:inline}:host(:focus){outline:none}:host([href]) a:focus-visible{text-decoration:underline double}:host([disabled]){pointer-events:none}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=link.css.js.map
|
package/src/link.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["link.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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}:host{display:inline}:host(:focus){outline:none}:host([href]) a:focus-visible{text-decoration:underline double}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
4
|
+
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}
|
|
5
5
|
`;
|
|
6
6
|
export default styles;
|
|
7
7
|
//# sourceMappingURL=spectrum-link.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-link.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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-link.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
-
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
2
|
+
:host{--spectrum-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}
|
|
3
3
|
`;export default o;
|
|
4
4
|
//# sourceMappingURL=spectrum-link.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-link.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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{-webkit-text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));
|
|
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-link-animation-duration:var(--spectrum-animation-duration-100);--spectrum-link-text-color-primary-default:var(--spectrum-accent-content-color-default);--spectrum-link-text-color-primary-hover:var(--spectrum-accent-content-color-hover);--spectrum-link-text-color-primary-active:var(--spectrum-accent-content-color-down);--spectrum-link-text-color-primary-focus:var(--spectrum-accent-content-color-key-focus);--spectrum-link-text-color-secondary-default:var(--spectrum-neutral-content-color-default);--spectrum-link-text-color-secondary-hover:var(--spectrum-neutral-content-color-hover);--spectrum-link-text-color-secondary-active:var(--spectrum-neutral-content-color-down);--spectrum-link-text-color-secondary-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-link-text-color-white:var(--spectrum-white);--spectrum-link-text-color-black:var(--spectrum-black)}@media (forced-colors:active){:host{--highcontrast-link-text-color-primary-default:LinkText;--highcontrast-link-text-color-primary-hover:LinkText;--highcontrast-link-text-color-primary-active:LinkText;--highcontrast-link-text-color-primary-focus:LinkText;--highcontrast-link-text-color-secondary-default:LinkText;--highcontrast-link-text-color-secondary-hover:LinkText;--highcontrast-link-text-color-secondary-active:LinkText;--highcontrast-link-text-color-secondary-focus:LinkText;--highcontrast-link-text-color-white:LinkText;--highcontrast-link-text-color-black:LinkText}}a{background-color:initial;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;transition:color var(--mod-link-animation-duration,var(--spectrum-link-animation-duration))ease-in-out;cursor:pointer;color:var(--highcontrast-link-text-color-primary-default,var(--mod-link-text-color-primary-default,var(--spectrum-link-text-color-primary-default)));outline:none;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:var(--highcontrast-link-text-color-primary-active,var(--mod-link-text-color-primary-active,var(--spectrum-link-text-color-primary-active)))}a:focus-visible{color:var(--highcontrast-link-text-color-primary-focus,var(--mod-link-text-color-primary-focus,var(--spectrum-link-text-color-primary-focus)));text-decoration:underline double;text-decoration-color:var(--highcontrast-link-focus-color,inherit)}:host([variant=secondary]) a{color:var(--highcontrast-link-text-color-secondary-default,var(--mod-link-text-color-secondary-default,var(--spectrum-link-text-color-secondary-default)))}:host([variant=secondary]) a:active{color:var(--highcontrast-link-text-color-secondary-active,var(--mod-link-text-color-secondary-active,var(--spectrum-link-text-color-secondary-active)))}:host([variant=secondary]) a:focus{color:var(--highcontrast-link-text-color-secondary-focus,var(--mod-link-text-color-secondary-focus,var(--spectrum-link-text-color-secondary-focus)))}:host([quiet]) a{-webkit-text-decoration:none;text-decoration:none}:host([static=white]) a,:host([static=white]) a:active,:host([static=white]) a:focus{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a,:host([static=black]) a:active,:host([static=black]) a:focus{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}@media (hover:hover){a:hover{color:var(--highcontrast-link-text-color-primary-hover,var(--mod-link-text-color-primary-hover,var(--spectrum-link-text-color-primary-hover)))}:host([variant=secondary]) a:hover{color:var(--highcontrast-link-text-color-secondary-hover,var(--mod-link-text-color-secondary-hover,var(--spectrum-link-text-color-secondary-hover)))}:host([quiet]) a:hover{-webkit-text-decoration:underline;text-decoration:underline}:host([static=white]) a:hover{color:var(--highcontrast-link-text-color-white,var(--mod-link-text-color-white,var(--spectrum-link-text-color-white)))}:host([static=black]) a:hover{color:var(--highcontrast-link-text-color-black,var(--mod-link-text-color-black,var(--spectrum-link-text-color-black)))}}\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/stories/link.stories.js
CHANGED
|
@@ -15,6 +15,11 @@ export const Quiet = () => {
|
|
|
15
15
|
This is a <sp-link quiet href="#">quiet link</sp-link> in a sentence.
|
|
16
16
|
`;
|
|
17
17
|
};
|
|
18
|
+
export const Disabled = () => {
|
|
19
|
+
return html`
|
|
20
|
+
This is a <sp-link disabled onclick="('hi')" href="#">disabled non focusable link</sp-link> in a sentence.
|
|
21
|
+
`;
|
|
22
|
+
};
|
|
18
23
|
export const secondary = () => {
|
|
19
24
|
return html`
|
|
20
25
|
This is a <sp-link variant="secondary" href="#">link</sp-link> in a sentence.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["link.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-link',\n title: 'Link',\n};\n\nexport const Default = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link href=\"#\">link</sp-link> in a sentence.\n `;\n};\n\nexport const Quiet = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link quiet href=\"#\">quiet link</sp-link> in a sentence.\n `;\n};\n\nexport const secondary = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link variant=\"secondary\" href=\"#\">link</sp-link> in a sentence.\n `;\n};\n\nexport const secondaryQuiet = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link variant=\"secondary\" quiet href=\"#\">quiet link</sp-link> in a sentence.\n `;\n};\n\nexport const staticWhite = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(240, 240, 240);\">\n This\n <sp-link static=\"white\" href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticBlack = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(15, 15, 15);\">\n This\n <sp-link static=\"black\" href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticWhiteQuiet = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(240, 240, 240);\">\n This\n <sp-link static=\"white\" quiet href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticBlackQuiet = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(15, 15, 15);\">\n This\n <sp-link static=\"black\" quiet href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const Download = (): TemplateResult => {\n const blob = new Blob(['some text for the file'], {\n type: 'text/plain;charset=utf-8',\n });\n return html`\n This is a\n <sp-link download=\"somefile.txt\" href=\"${URL.createObjectURL(blob)}\">\n downloadable file\n </sp-link>\n for you to click on.\n `;\n};\n"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AAEzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,QAAQ,MAAsB;AAEvC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAE3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iBAAiB,MAAsB;AAEhD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,WAAW,MAAsB;AAC1C,QAAM,OAAO,IAAI,KAAK,CAAC,wBAAwB,GAAG;AAAA,IAC9C,MAAM;AAAA,EACV,CAAC;AACD,SAAO;AAAA;AAAA,iDAEsC,IAAI,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAK1E;",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-link',\n title: 'Link',\n};\n\nexport const Default = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link href=\"#\">link</sp-link> in a sentence.\n `;\n};\n\nexport const Quiet = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link quiet href=\"#\">quiet link</sp-link> in a sentence.\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link disabled onclick=\"('hi')\" href=\"#\">disabled non focusable link</sp-link> in a sentence.\n `;\n};\n\nexport const secondary = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link variant=\"secondary\" href=\"#\">link</sp-link> in a sentence.\n `;\n};\n\nexport const secondaryQuiet = (): TemplateResult => {\n // prettier-ignore\n return html`\n This is a <sp-link variant=\"secondary\" quiet href=\"#\">quiet link</sp-link> in a sentence.\n `;\n};\n\nexport const staticWhite = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(240, 240, 240);\">\n This\n <sp-link static=\"white\" href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticBlack = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(15, 15, 15);\">\n This\n <sp-link static=\"black\" href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticWhiteQuiet = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(240, 240, 240);\">\n This\n <sp-link static=\"white\" quiet href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const staticBlackQuiet = (): TemplateResult => {\n return html`\n <div\n style=\"background-color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;\"\n >\n <p style=\"color: rgb(15, 15, 15);\">\n This\n <sp-link static=\"black\" quiet href=\"#\">link</sp-link>\n has a background.\n </p>\n </div>\n `;\n};\n\nexport const Download = (): TemplateResult => {\n const blob = new Blob(['some text for the file'], {\n type: 'text/plain;charset=utf-8',\n });\n return html`\n This is a\n <sp-link download=\"somefile.txt\" href=\"${URL.createObjectURL(blob)}\">\n downloadable file\n </sp-link>\n for you to click on.\n `;\n};\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AAEzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,QAAQ,MAAsB;AAEvC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAE1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAE3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iBAAiB,MAAsB;AAEhD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,WAAW,MAAsB;AAC1C,QAAM,OAAO,IAAI,KAAK,CAAC,wBAAwB,GAAG;AAAA,IAC9C,MAAM;AAAA,EACV,CAAC;AACD,SAAO;AAAA;AAAA,iDAEsC,IAAI,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAK1E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@open-wc/testing";
|
|
3
|
+
import "@spectrum-web-components/link/sp-link.js";
|
|
4
|
+
import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
|
|
5
|
+
testForMemoryLeaks(html`
|
|
6
|
+
<sp-link></sp-link>
|
|
7
|
+
`);
|
|
8
|
+
//# sourceMappingURL=link-memory.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["link-memory.test.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { html } from '@open-wc/testing';\nimport '@spectrum-web-components/link/sp-link.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(html`\n <sp-link></sp-link>\n`);\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAAY;AACrB,OAAO;AACP,SAAS,0BAA0B;AAEnC,mBAAmB;AAAA;AAAA,CAElB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/test/link.test.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import "@spectrum-web-components/link/sp-link.js";
|
|
3
3
|
import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
|
|
4
4
|
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
5
|
+
import { spy } from "sinon";
|
|
5
6
|
describe("Link", () => {
|
|
6
7
|
testForLitDevWarnings(
|
|
7
8
|
async () => await fixture(
|
|
@@ -45,5 +46,21 @@ describe("Link", () => {
|
|
|
45
46
|
expect(el.focusElement.getAttribute("rel")).to.eq("external");
|
|
46
47
|
await expect(el).to.be.accessible();
|
|
47
48
|
});
|
|
49
|
+
it("no click triggers for disabled link", async () => {
|
|
50
|
+
const clickSpy = spy();
|
|
51
|
+
const el = await fixture(
|
|
52
|
+
html`
|
|
53
|
+
<sp-link href="#" disabled @click=${() => clickSpy()}>
|
|
54
|
+
Disabled Link
|
|
55
|
+
</sp-link>
|
|
56
|
+
`
|
|
57
|
+
);
|
|
58
|
+
await elementUpdated(el);
|
|
59
|
+
expect(el).to.not.be.undefined;
|
|
60
|
+
expect(el.disabled).to.eq(true);
|
|
61
|
+
await expect(el).to.be.accessible();
|
|
62
|
+
el.click();
|
|
63
|
+
expect(clickSpy.callCount).to.equal(0);
|
|
64
|
+
});
|
|
48
65
|
});
|
|
49
66
|
//# sourceMappingURL=link.test.js.map
|
package/test/link.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["link.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/link/sp-link.js';\nimport { Link } from '@spectrum-web-components/link';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Link', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Link>(\n html`\n <sp-link href=\"test_url\">Default Link</sp-link>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\">Default Link</sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.textContent).to.include('Default Link');\n\n await expect(el).to.be.accessible();\n });\n\n it('loads[download]', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\" download=\"somefile.txt\">\n Default Link\n </sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.textContent).to.include('Default Link');\n\n await expect(el).to.be.accessible();\n });\n\n it('loads[rel]', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\" rel=\"external\">Default Link</sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.focusElement.getAttribute('rel')).to.eq('external');\n\n await expect(el).to.be.accessible();\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,OAAO;AAEP,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AACtD,SAAS,6BAA6B;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/link/sp-link.js';\nimport { Link } from '@spectrum-web-components/link';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { spy } from 'sinon';\n\ndescribe('Link', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Link>(\n html`\n <sp-link href=\"test_url\">Default Link</sp-link>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\">Default Link</sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.textContent).to.include('Default Link');\n\n await expect(el).to.be.accessible();\n });\n\n it('loads[download]', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\" download=\"somefile.txt\">\n Default Link\n </sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.textContent).to.include('Default Link');\n\n await expect(el).to.be.accessible();\n });\n\n it('loads[rel]', async () => {\n const el = await fixture<Link>(\n html`\n <sp-link href=\"test_url\" rel=\"external\">Default Link</sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.focusElement.getAttribute('rel')).to.eq('external');\n\n await expect(el).to.be.accessible();\n });\n\n it('no click triggers for disabled link', async () => {\n const clickSpy = spy();\n const el = await fixture<Link>(\n html`\n <sp-link href=\"#\" disabled @click=${() => clickSpy()}>\n Disabled Link\n </sp-link>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n expect(el.disabled).to.eq(true);\n await expect(el).to.be.accessible();\n el.click();\n expect(clickSpy.callCount).to.equal(0);\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAYA,OAAO;AAEP,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AACtD,SAAS,6BAA6B;AACtC,SAAS,WAAW;AAEpB,SAAS,QAAQ,MAAM;AACnB;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA,IAGJ;AAAA,EACR;AACA,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,EAAE,EAAE,GAAG,IAAI,GAAG;AACrB,WAAO,GAAG,WAAW,EAAE,GAAG,QAAQ,cAAc;AAEhD,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,mBAAmB,YAAY;AAC9B,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA,IAKJ;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,EAAE,EAAE,GAAG,IAAI,GAAG;AACrB,WAAO,GAAG,WAAW,EAAE,GAAG,QAAQ,cAAc;AAEhD,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,cAAc,YAAY;AACzB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,EAAE,EAAE,GAAG,IAAI,GAAG;AACrB,WAAO,GAAG,aAAa,aAAa,KAAK,CAAC,EAAE,GAAG,GAAG,UAAU;AAE5D,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,uCAAuC,YAAY;AAClD,UAAM,WAAW,IAAI;AACrB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA,oDACwC,MAAM,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5D;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,EAAE,EAAE,GAAG,IAAI,GAAG;AACrB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG,IAAI;AAC9B,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAClC,OAAG,MAAM;AACT,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EACzC,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|