@semcore/tab-panel 3.2.5 → 3.3.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/lib/cjs/TabPanel.js +9 -9
  3. package/lib/cjs/style/tab-panel.shadow.css +19 -20
  4. package/lib/es6/TabPanel.js +9 -9
  5. package/lib/es6/style/tab-panel.shadow.css +19 -20
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [3.2.5] - 2022-11-30
5
+ ## [3.3.0] - 2022-12-12
6
6
 
7
- ### Changed
7
+ ### Added
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/utils` [3.41.0 ~> 3.42.0], `@semcore/flex-box` [4.6.4 ~> 4.6.5]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [3.2.3] - 2022-11-28
12
12
 
package/lib/cjs/TabPanel.js CHANGED
@@ -52,18 +52,18 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___STabPanel_1qpmh_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1qpmh_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1qpmh_gg_ .___SText_1qpmh_gg_{font-size:14px;line-height:1.42;font-weight:500}.___STabPanelItem_1qpmh_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1qpmh_gg_:active,.___STabPanelItem_1qpmh_gg_:focus,.___STabPanelItem_1qpmh_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1qpmh_gg_:hover{color:#191b23}.___STabPanelItem_1qpmh_gg_.__disabled_1qpmh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1qpmh_gg_.__keyboardFocused_1qpmh_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___STabPanelItem_1qpmh_gg_.__selected_1qpmh_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1qpmh_gg_.__selected_1qpmh_gg_:hover{color:#006dca}.___SText_1qpmh_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1qpmh_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1qpmh_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1qpmh_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_1qpmh_gg_:only-child{margin-right:8px;margin-left:8px}"
55
+ ".___STabPanel_kvg5u_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid var(--intergalactic-border-primary,#c4c7cf)}.___STabPanelItem_kvg5u_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary,#6c6e79);border:1px solid transparent;border-radius:var(--intergalactic-rounded-medium,6px) var(--intergalactic-rounded-medium,6px) 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_kvg5u_gg_ .___SText_kvg5u_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);font-weight:var(--intergalactic-medium,500)}.___STabPanelItem_kvg5u_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_kvg5u_gg_:active,.___STabPanelItem_kvg5u_gg_:focus,.___STabPanelItem_kvg5u_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_kvg5u_gg_:hover{color:var(--intergalactic-text-primary,#191b23)}.___STabPanelItem_kvg5u_gg_.__disabled_kvg5u_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___STabPanelItem_kvg5u_gg_.__keyboardFocused_kvg5u_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STabPanelItem_kvg5u_gg_.__selected_kvg5u_gg_{color:var(--intergalactic-text-link,#006dca);border-color:var(--intergalactic-border-primary,#c4c7cf);border-bottom-color:var(--intergalactic-border-primary-invert,#fff);flex-shrink:0}.___STabPanelItem_kvg5u_gg_.__selected_kvg5u_gg_:hover{color:var(--intergalactic-text-link-hover-active,#044792)}.___SText_kvg5u_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x,8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_kvg5u_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_kvg5u_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SAddon_kvg5u_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SAddon_kvg5u_gg_:only-child{margin-right:var(--intergalactic-spacing-2x,8px);margin-left:var(--intergalactic-spacing-2x,8px)}"
56
56
  /*__inner_css_end__*/
57
- , "1qpmh_gg_")
57
+ , "kvg5u_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__STabPanel": "___STabPanel_1qpmh_gg_",
61
- "__STabPanelItem": "___STabPanelItem_1qpmh_gg_",
62
- "__SText": "___SText_1qpmh_gg_",
63
- "_disabled": "__disabled_1qpmh_gg_",
64
- "_keyboardFocused": "__keyboardFocused_1qpmh_gg_",
65
- "_selected": "__selected_1qpmh_gg_",
66
- "__SAddon": "___SAddon_1qpmh_gg_"
60
+ "__STabPanel": "___STabPanel_kvg5u_gg_",
61
+ "__STabPanelItem": "___STabPanelItem_kvg5u_gg_",
62
+ "__SText": "___SText_kvg5u_gg_",
63
+ "_disabled": "__disabled_kvg5u_gg_",
64
+ "_keyboardFocused": "__keyboardFocused_kvg5u_gg_",
65
+ "_selected": "__selected_kvg5u_gg_",
66
+ "__SAddon": "___SAddon_kvg5u_gg_"
67
67
  });
68
68
  var optionsA11yEnhance = {
69
69
  onNeighborChange: function onNeighborChange(neighborElement) {
package/lib/cjs/style/tab-panel.shadow.css CHANGED
@@ -1,10 +1,8 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STabPanel {
4
2
  display: flex;
5
3
  width: 100%;
6
4
  max-width: 100%;
7
- border-bottom: 1px solid var(--gray-200);
5
+ border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
8
6
  }
9
7
 
10
8
  STabPanelItem {
@@ -13,9 +11,10 @@ STabPanelItem {
13
11
  display: inline-flex;
14
12
  min-width: 0;
15
13
  height: 32px;
16
- color: var(--gray-500);
14
+ color: var(--intergalactic-text-secondary, #6c6e79);
17
15
  border: 1px solid transparent;
18
- border-radius: 6px 6px 0 0;
16
+ border-radius: var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px) 0
17
+ 0;
19
18
  background: transparent;
20
19
  align-items: center;
21
20
  justify-content: center;
@@ -35,9 +34,9 @@ STabPanelItem {
35
34
  cursor: pointer;
36
35
 
37
36
  & SText {
38
- font-size: var(--fs-200);
39
- line-height: var(--lh-200);
40
- font-weight: 500;
37
+ font-size: var(--intergalactic-fs-200, 14px);
38
+ line-height: var(--intergalactic-lh-200, 142%);
39
+ font-weight: var(--intergalactic-medium, 500);
41
40
  }
42
41
 
43
42
  &::-moz-focus-inner {
@@ -53,34 +52,34 @@ STabPanelItem {
53
52
  }
54
53
 
55
54
  &:hover {
56
- color: var(--gray-800);
55
+ color: var(--intergalactic-text-primary, #191b23);
57
56
  }
58
57
  }
59
58
 
60
59
  STabPanelItem[disabled] {
61
- opacity: var(--disabled-opacity);
60
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
62
61
  cursor: default;
63
62
  pointer-events: none; /* Disable link interactions */
64
63
  }
65
64
 
66
65
  STabPanelItem[keyboardFocused] {
67
- box-shadow: var(--keyboard-focus);
66
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
68
67
  }
69
68
 
70
69
  STabPanelItem[selected] {
71
- color: var(--blue-500);
72
- border-color: var(--gray-200);
73
- border-bottom-color: var(--white);
70
+ color: var(--intergalactic-text-link, #006dca);
71
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
72
+ border-bottom-color: var(--intergalactic-border-primary-invert, #ffffff);
74
73
  flex-shrink: 0;
75
74
 
76
75
  &:hover {
77
- color: var(--blue-500);
76
+ color: var(--intergalactic-text-link-hover-active, #044792);
78
77
  }
79
78
  }
80
79
 
81
80
  SText {
82
81
  display: inline-block;
83
- margin: auto 8px;
82
+ margin: auto var(--intergalactic-spacing-2x, 8px);
84
83
  white-space: nowrap;
85
84
  overflow: hidden;
86
85
  text-overflow: ellipsis;
@@ -93,14 +92,14 @@ SAddon {
93
92
  }
94
93
 
95
94
  SAddon:not(:only-child):first-child {
96
- margin-left: 8px;
95
+ margin-left: var(--intergalactic-spacing-2x, 8px);
97
96
  }
98
97
 
99
98
  SAddon:not(:only-child):last-child {
100
- margin-right: 8px;
99
+ margin-right: var(--intergalactic-spacing-2x, 8px);
101
100
  }
102
101
 
103
102
  SAddon:only-child {
104
- margin-right: 8px;
105
- margin-left: 8px;
103
+ margin-right: var(--intergalactic-spacing-2x, 8px);
104
+ margin-left: var(--intergalactic-spacing-2x, 8px);
106
105
  }
package/lib/es6/TabPanel.js CHANGED
@@ -31,18 +31,18 @@ var style = (
31
31
  /*__reshadow_css_start__*/
32
32
  _sstyled.insert(
33
33
  /*__inner_css_start__*/
34
- ".___STabPanel_1qpmh_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1qpmh_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1qpmh_gg_ .___SText_1qpmh_gg_{font-size:14px;line-height:1.42;font-weight:500}.___STabPanelItem_1qpmh_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1qpmh_gg_:active,.___STabPanelItem_1qpmh_gg_:focus,.___STabPanelItem_1qpmh_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1qpmh_gg_:hover{color:#191b23}.___STabPanelItem_1qpmh_gg_.__disabled_1qpmh_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1qpmh_gg_.__keyboardFocused_1qpmh_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___STabPanelItem_1qpmh_gg_.__selected_1qpmh_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1qpmh_gg_.__selected_1qpmh_gg_:hover{color:#006dca}.___SText_1qpmh_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1qpmh_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1qpmh_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1qpmh_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_1qpmh_gg_:only-child{margin-right:8px;margin-left:8px}"
34
+ ".___STabPanel_kvg5u_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid var(--intergalactic-border-primary,#c4c7cf)}.___STabPanelItem_kvg5u_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary,#6c6e79);border:1px solid transparent;border-radius:var(--intergalactic-rounded-medium,6px) var(--intergalactic-rounded-medium,6px) 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_kvg5u_gg_ .___SText_kvg5u_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%);font-weight:var(--intergalactic-medium,500)}.___STabPanelItem_kvg5u_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_kvg5u_gg_:active,.___STabPanelItem_kvg5u_gg_:focus,.___STabPanelItem_kvg5u_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_kvg5u_gg_:hover{color:var(--intergalactic-text-primary,#191b23)}.___STabPanelItem_kvg5u_gg_.__disabled_kvg5u_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___STabPanelItem_kvg5u_gg_.__keyboardFocused_kvg5u_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STabPanelItem_kvg5u_gg_.__selected_kvg5u_gg_{color:var(--intergalactic-text-link,#006dca);border-color:var(--intergalactic-border-primary,#c4c7cf);border-bottom-color:var(--intergalactic-border-primary-invert,#fff);flex-shrink:0}.___STabPanelItem_kvg5u_gg_.__selected_kvg5u_gg_:hover{color:var(--intergalactic-text-link-hover-active,#044792)}.___SText_kvg5u_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x,8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_kvg5u_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_kvg5u_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SAddon_kvg5u_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SAddon_kvg5u_gg_:only-child{margin-right:var(--intergalactic-spacing-2x,8px);margin-left:var(--intergalactic-spacing-2x,8px)}"
35
35
  /*__inner_css_end__*/
36
- , "1qpmh_gg_")
36
+ , "kvg5u_gg_")
37
37
  /*__reshadow_css_end__*/
38
38
  , {
39
- "__STabPanel": "___STabPanel_1qpmh_gg_",
40
- "__STabPanelItem": "___STabPanelItem_1qpmh_gg_",
41
- "__SText": "___SText_1qpmh_gg_",
42
- "_disabled": "__disabled_1qpmh_gg_",
43
- "_keyboardFocused": "__keyboardFocused_1qpmh_gg_",
44
- "_selected": "__selected_1qpmh_gg_",
45
- "__SAddon": "___SAddon_1qpmh_gg_"
39
+ "__STabPanel": "___STabPanel_kvg5u_gg_",
40
+ "__STabPanelItem": "___STabPanelItem_kvg5u_gg_",
41
+ "__SText": "___SText_kvg5u_gg_",
42
+ "_disabled": "__disabled_kvg5u_gg_",
43
+ "_keyboardFocused": "__keyboardFocused_kvg5u_gg_",
44
+ "_selected": "__selected_kvg5u_gg_",
45
+ "__SAddon": "___SAddon_kvg5u_gg_"
46
46
  });
47
47
  var optionsA11yEnhance = {
48
48
  onNeighborChange: function onNeighborChange(neighborElement) {
package/lib/es6/style/tab-panel.shadow.css CHANGED
@@ -1,10 +1,8 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STabPanel {
4
2
  display: flex;
5
3
  width: 100%;
6
4
  max-width: 100%;
7
- border-bottom: 1px solid var(--gray-200);
5
+ border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
8
6
  }
9
7
 
10
8
  STabPanelItem {
@@ -13,9 +11,10 @@ STabPanelItem {
13
11
  display: inline-flex;
14
12
  min-width: 0;
15
13
  height: 32px;
16
- color: var(--gray-500);
14
+ color: var(--intergalactic-text-secondary, #6c6e79);
17
15
  border: 1px solid transparent;
18
- border-radius: 6px 6px 0 0;
16
+ border-radius: var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px) 0
17
+ 0;
19
18
  background: transparent;
20
19
  align-items: center;
21
20
  justify-content: center;
@@ -35,9 +34,9 @@ STabPanelItem {
35
34
  cursor: pointer;
36
35
 
37
36
  & SText {
38
- font-size: var(--fs-200);
39
- line-height: var(--lh-200);
40
- font-weight: 500;
37
+ font-size: var(--intergalactic-fs-200, 14px);
38
+ line-height: var(--intergalactic-lh-200, 142%);
39
+ font-weight: var(--intergalactic-medium, 500);
41
40
  }
42
41
 
43
42
  &::-moz-focus-inner {
@@ -53,34 +52,34 @@ STabPanelItem {
53
52
  }
54
53
 
55
54
  &:hover {
56
- color: var(--gray-800);
55
+ color: var(--intergalactic-text-primary, #191b23);
57
56
  }
58
57
  }
59
58
 
60
59
  STabPanelItem[disabled] {
61
- opacity: var(--disabled-opacity);
60
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
62
61
  cursor: default;
63
62
  pointer-events: none; /* Disable link interactions */
64
63
  }
65
64
 
66
65
  STabPanelItem[keyboardFocused] {
67
- box-shadow: var(--keyboard-focus);
66
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
68
67
  }
69
68
 
70
69
  STabPanelItem[selected] {
71
- color: var(--blue-500);
72
- border-color: var(--gray-200);
73
- border-bottom-color: var(--white);
70
+ color: var(--intergalactic-text-link, #006dca);
71
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
72
+ border-bottom-color: var(--intergalactic-border-primary-invert, #ffffff);
74
73
  flex-shrink: 0;
75
74
 
76
75
  &:hover {
77
- color: var(--blue-500);
76
+ color: var(--intergalactic-text-link-hover-active, #044792);
78
77
  }
79
78
  }
80
79
 
81
80
  SText {
82
81
  display: inline-block;
83
- margin: auto 8px;
82
+ margin: auto var(--intergalactic-spacing-2x, 8px);
84
83
  white-space: nowrap;
85
84
  overflow: hidden;
86
85
  text-overflow: ellipsis;
@@ -93,14 +92,14 @@ SAddon {
93
92
  }
94
93
 
95
94
  SAddon:not(:only-child):first-child {
96
- margin-left: 8px;
95
+ margin-left: var(--intergalactic-spacing-2x, 8px);
97
96
  }
98
97
 
99
98
  SAddon:not(:only-child):last-child {
100
- margin-right: 8px;
99
+ margin-right: var(--intergalactic-spacing-2x, 8px);
101
100
  }
102
101
 
103
102
  SAddon:only-child {
104
- margin-right: 8px;
105
- margin-left: 8px;
103
+ margin-right: var(--intergalactic-spacing-2x, 8px);
104
+ margin-left: var(--intergalactic-spacing-2x, 8px);
106
105
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tab-panel",
3
3
  "description": "Semrush TabPanel Component",
4
- "version": "3.2.5",
4
+ "version": "3.3.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",