@semcore/link 5.20.2 → 5.21.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/CHANGELOG.md CHANGED
@@ -2,7 +2,13 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [5.20.2-prerelease.1] - 2024-02-09
5
+ ## [5.21.0-prerelease.1] - 2024-02-16
6
+
7
+ ### Changed
8
+
9
+ - Used native outline to display links focus ring to fix highlighting of wrapped inline links.
10
+
11
+ ## [5.20.2] - 2024-02-09
6
12
 
7
13
  ### Changed
8
14
 
package/lib/cjs/Link.js CHANGED
@@ -23,18 +23,18 @@ var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
23
23
  var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
24
24
  var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
25
25
  /*__reshadow-styles__:"./style/link.shadow.css"*/
26
- var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SLink_1m2kb_gg_{display:inline-block;font-family:inherit;color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SLink_1m2kb_gg_:active,.___SLink_1m2kb_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SLink_1m2kb_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SLink_1m2kb_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_1m2kb_gg_.__active_1m2kb_gg_,.___SLink_1m2kb_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_1m2kb_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_1m2kb_gg_.__active_1m2kb_gg_ .___SText_1m2kb_gg_,.___SLink_1m2kb_gg_:active .___SText_1m2kb_gg_{border-color:currentColor}@media (hover:hover){.___SLink_1m2kb_gg_:hover .___SText_1m2kb_gg_{border-color:currentColor}}.___SLink_1m2kb_gg_.__enableVisited_1m2kb_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_1m2kb_gg_.__enableVisited_1m2kb_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_1m2kb_gg_.__keyboardFocused_1m2kb_gg_::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SLink_1m2kb_gg_.__disabled_1m2kb_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_1m2kb_gg_.__noWrapText_1m2kb_gg_{white-space:nowrap}.___SLink_1m2kb_gg_.__inline_1m2kb_gg_{display:inline}.___SAddon_1m2kb_gg_{display:inline-flex;justify-content:center;align-items:center;margin-bottom:var(--intergalactic-spacing-05x, 2px);vertical-align:middle}.___SLink_1m2kb_gg_ .___SAddon_1m2kb_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_1m2kb_gg_ .___SAddon_1m2kb_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_1m2kb_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_{color:var(--text-color_1m2kb)}.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_.__active_1m2kb_gg_,.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_:active{color:var(--text-color_1m2kb);filter:brightness(.8)}@media (hover:hover){.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_:hover{color:var(--text-color_1m2kb);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_1m2kb_gg_,.___SText_1m2kb_gg_{transition:none}}" /*__inner_css_end__*/, "1m2kb_gg_") /*__reshadow_css_end__*/, {
27
- "__SLink": "___SLink_1m2kb_gg_",
28
- "_keyboardFocused": "__keyboardFocused_1m2kb_gg_",
29
- "_disabled": "__disabled_1m2kb_gg_",
30
- "_noWrapText": "__noWrapText_1m2kb_gg_",
31
- "_inline": "__inline_1m2kb_gg_",
32
- "__SAddon": "___SAddon_1m2kb_gg_",
33
- "__SText": "___SText_1m2kb_gg_",
34
- "_active": "__active_1m2kb_gg_",
35
- "_enableVisited": "__enableVisited_1m2kb_gg_",
36
- "_text-color": "__text-color_1m2kb_gg_",
37
- "--text-color": "--text-color_1m2kb"
26
+ var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SLink_15k1c_gg_{display:inline-block;font-family:inherit;color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SLink_15k1c_gg_:active,.___SLink_15k1c_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SLink_15k1c_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SLink_15k1c_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_15k1c_gg_.__active_15k1c_gg_,.___SLink_15k1c_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_15k1c_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_15k1c_gg_.__active_15k1c_gg_ .___SText_15k1c_gg_,.___SLink_15k1c_gg_:active .___SText_15k1c_gg_{border-color:currentColor}@media (hover:hover){.___SLink_15k1c_gg_:hover .___SText_15k1c_gg_{border-color:currentColor}}.___SLink_15k1c_gg_.__enableVisited_15k1c_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_15k1c_gg_.__enableVisited_15k1c_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_15k1c_gg_.__keyboardFocused_15k1c_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SLink_15k1c_gg_.__disabled_15k1c_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_15k1c_gg_.__noWrapText_15k1c_gg_{white-space:nowrap}.___SLink_15k1c_gg_.__inline_15k1c_gg_{display:inline}.___SAddon_15k1c_gg_{display:inline-flex;justify-content:center;align-items:center;margin-bottom:var(--intergalactic-spacing-05x, 2px);vertical-align:middle}.___SLink_15k1c_gg_ .___SAddon_15k1c_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_15k1c_gg_ .___SAddon_15k1c_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_15k1c_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SLink_15k1c_gg_.__text-color_15k1c_gg_{color:var(--text-color_15k1c)}.___SLink_15k1c_gg_.__text-color_15k1c_gg_.__active_15k1c_gg_,.___SLink_15k1c_gg_.__text-color_15k1c_gg_:active{color:var(--text-color_15k1c);filter:brightness(.8)}@media (hover:hover){.___SLink_15k1c_gg_.__text-color_15k1c_gg_:hover{color:var(--text-color_15k1c);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_15k1c_gg_,.___SText_15k1c_gg_{transition:none}}" /*__inner_css_end__*/, "15k1c_gg_") /*__reshadow_css_end__*/, {
27
+ "__SLink": "___SLink_15k1c_gg_",
28
+ "_keyboardFocused": "__keyboardFocused_15k1c_gg_",
29
+ "_disabled": "__disabled_15k1c_gg_",
30
+ "_noWrapText": "__noWrapText_15k1c_gg_",
31
+ "_inline": "__inline_15k1c_gg_",
32
+ "__SAddon": "___SAddon_15k1c_gg_",
33
+ "__SText": "___SText_15k1c_gg_",
34
+ "_active": "__active_15k1c_gg_",
35
+ "_enableVisited": "__enableVisited_15k1c_gg_",
36
+ "_text-color": "__text-color_15k1c_gg_",
37
+ "--text-color": "--text-color_15k1c"
38
38
  });
39
39
  var RootLink = /*#__PURE__*/function (_Component) {
40
40
  (0, _inherits2["default"])(RootLink, _Component);
@@ -43,12 +43,10 @@ SLink {
43
43
  }
44
44
  }
45
45
 
46
- SLink[keyboardFocused]::after {
47
- position: absolute;
48
- display: block;
49
- content: '';
50
- inset: 0;
51
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
46
+ SLink[keyboardFocused] {
47
+ outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
48
+ outline-style: solid;
49
+ outline-width: 3px;
52
50
  }
53
51
 
54
52
  SLink[disabled] {
package/lib/es6/Link.js CHANGED
@@ -19,18 +19,18 @@ import logger from '@semcore/utils/lib/logger';
19
19
  import hasLabels from '@semcore/utils/lib/hasLabels';
20
20
  import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
21
21
  /*__reshadow-styles__:"./style/link.shadow.css"*/
22
- var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLink_1m2kb_gg_{display:inline-block;font-family:inherit;color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SLink_1m2kb_gg_:active,.___SLink_1m2kb_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SLink_1m2kb_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SLink_1m2kb_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_1m2kb_gg_.__active_1m2kb_gg_,.___SLink_1m2kb_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_1m2kb_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_1m2kb_gg_.__active_1m2kb_gg_ .___SText_1m2kb_gg_,.___SLink_1m2kb_gg_:active .___SText_1m2kb_gg_{border-color:currentColor}@media (hover:hover){.___SLink_1m2kb_gg_:hover .___SText_1m2kb_gg_{border-color:currentColor}}.___SLink_1m2kb_gg_.__enableVisited_1m2kb_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_1m2kb_gg_.__enableVisited_1m2kb_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_1m2kb_gg_.__keyboardFocused_1m2kb_gg_::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SLink_1m2kb_gg_.__disabled_1m2kb_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_1m2kb_gg_.__noWrapText_1m2kb_gg_{white-space:nowrap}.___SLink_1m2kb_gg_.__inline_1m2kb_gg_{display:inline}.___SAddon_1m2kb_gg_{display:inline-flex;justify-content:center;align-items:center;margin-bottom:var(--intergalactic-spacing-05x, 2px);vertical-align:middle}.___SLink_1m2kb_gg_ .___SAddon_1m2kb_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_1m2kb_gg_ .___SAddon_1m2kb_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_1m2kb_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_{color:var(--text-color_1m2kb)}.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_.__active_1m2kb_gg_,.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_:active{color:var(--text-color_1m2kb);filter:brightness(.8)}@media (hover:hover){.___SLink_1m2kb_gg_.__text-color_1m2kb_gg_:hover{color:var(--text-color_1m2kb);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_1m2kb_gg_,.___SText_1m2kb_gg_{transition:none}}" /*__inner_css_end__*/, "1m2kb_gg_") /*__reshadow_css_end__*/, {
23
- "__SLink": "___SLink_1m2kb_gg_",
24
- "_keyboardFocused": "__keyboardFocused_1m2kb_gg_",
25
- "_disabled": "__disabled_1m2kb_gg_",
26
- "_noWrapText": "__noWrapText_1m2kb_gg_",
27
- "_inline": "__inline_1m2kb_gg_",
28
- "__SAddon": "___SAddon_1m2kb_gg_",
29
- "__SText": "___SText_1m2kb_gg_",
30
- "_active": "__active_1m2kb_gg_",
31
- "_enableVisited": "__enableVisited_1m2kb_gg_",
32
- "_text-color": "__text-color_1m2kb_gg_",
33
- "--text-color": "--text-color_1m2kb"
22
+ var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLink_15k1c_gg_{display:inline-block;font-family:inherit;color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SLink_15k1c_gg_:active,.___SLink_15k1c_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SLink_15k1c_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SLink_15k1c_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_15k1c_gg_.__active_15k1c_gg_,.___SLink_15k1c_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_15k1c_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_15k1c_gg_.__active_15k1c_gg_ .___SText_15k1c_gg_,.___SLink_15k1c_gg_:active .___SText_15k1c_gg_{border-color:currentColor}@media (hover:hover){.___SLink_15k1c_gg_:hover .___SText_15k1c_gg_{border-color:currentColor}}.___SLink_15k1c_gg_.__enableVisited_15k1c_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_15k1c_gg_.__enableVisited_15k1c_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_15k1c_gg_.__keyboardFocused_15k1c_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SLink_15k1c_gg_.__disabled_15k1c_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_15k1c_gg_.__noWrapText_15k1c_gg_{white-space:nowrap}.___SLink_15k1c_gg_.__inline_15k1c_gg_{display:inline}.___SAddon_15k1c_gg_{display:inline-flex;justify-content:center;align-items:center;margin-bottom:var(--intergalactic-spacing-05x, 2px);vertical-align:middle}.___SLink_15k1c_gg_ .___SAddon_15k1c_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_15k1c_gg_ .___SAddon_15k1c_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_15k1c_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SLink_15k1c_gg_.__text-color_15k1c_gg_{color:var(--text-color_15k1c)}.___SLink_15k1c_gg_.__text-color_15k1c_gg_.__active_15k1c_gg_,.___SLink_15k1c_gg_.__text-color_15k1c_gg_:active{color:var(--text-color_15k1c);filter:brightness(.8)}@media (hover:hover){.___SLink_15k1c_gg_.__text-color_15k1c_gg_:hover{color:var(--text-color_15k1c);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_15k1c_gg_,.___SText_15k1c_gg_{transition:none}}" /*__inner_css_end__*/, "15k1c_gg_") /*__reshadow_css_end__*/, {
23
+ "__SLink": "___SLink_15k1c_gg_",
24
+ "_keyboardFocused": "__keyboardFocused_15k1c_gg_",
25
+ "_disabled": "__disabled_15k1c_gg_",
26
+ "_noWrapText": "__noWrapText_15k1c_gg_",
27
+ "_inline": "__inline_15k1c_gg_",
28
+ "__SAddon": "___SAddon_15k1c_gg_",
29
+ "__SText": "___SText_15k1c_gg_",
30
+ "_active": "__active_15k1c_gg_",
31
+ "_enableVisited": "__enableVisited_15k1c_gg_",
32
+ "_text-color": "__text-color_15k1c_gg_",
33
+ "--text-color": "--text-color_15k1c"
34
34
  });
35
35
  var RootLink = /*#__PURE__*/function (_Component) {
36
36
  _inherits(RootLink, _Component);
@@ -43,12 +43,10 @@ SLink {
43
43
  }
44
44
  }
45
45
 
46
- SLink[keyboardFocused]::after {
47
- position: absolute;
48
- display: block;
49
- content: '';
50
- inset: 0;
51
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
46
+ SLink[keyboardFocused] {
47
+ outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
48
+ outline-style: solid;
49
+ outline-width: 3px;
52
50
  }
53
51
 
54
52
  SLink[disabled] {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/link",
3
3
  "description": "Semrush Link Component",
4
- "version": "5.20.2",
4
+ "version": "5.21.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",