@riebeckite/plugin-code-tabs 0.0.5 → 0.0.7

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 (4) hide show
  1. package/README.md +4 -0
  2. package/dist/index.js +2 -1
  3. package/package.json +2 -2
  4. package/style.css +84 -84
package/README.md CHANGED
@@ -95,3 +95,7 @@ all panels remain visible so every code block can still be read.
95
95
  - `rehypeCodeTabs(options?)` — rehype transform
96
96
  - `initCodeTabs(options?)` — client initializer
97
97
  - Types: `CodeTabsOptions`, `CodeTabsClientOptions`
98
+
99
+ ## See also
100
+
101
+ - [Plugin guide](../../../docs/en/plugin-system.md)
package/dist/index.js CHANGED
@@ -131,7 +131,8 @@ function getTabBlock(node) {
131
131
  const metaOwner = findMetaOwner(node);
132
132
  if (!metaOwner) return null;
133
133
  const meta = getCodeMeta(metaOwner);
134
- const label = meta ? parseTabLabel(meta) : null;
134
+ if (!meta) return null;
135
+ const label = parseTabLabel(meta);
135
136
  if (!label) return null;
136
137
  removeTabMeta(metaOwner, meta);
137
138
  node.properties = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/plugin-code-tabs",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -21,7 +21,7 @@
21
21
  "./style.css": "./style.css"
22
22
  },
23
23
  "dependencies": {
24
- "@riebeckite/core": "0.0.5"
24
+ "@riebeckite/core": "0.0.7"
25
25
  },
26
26
  "publishConfig": {
27
27
  "access": "public"
package/style.css CHANGED
@@ -1,84 +1,84 @@
1
- .rr-code-tabs {
2
- margin-block: 1.5rem;
3
- border: 1px solid
4
- var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
5
- background: var(--rb-color-surface, transparent);
6
- }
7
-
8
- .rr-code-tabs__tablist {
9
- display: flex;
10
- gap: 0.25rem;
11
- overflow-x: auto;
12
- padding: 0.5rem 0.5rem 0;
13
- border-bottom: 1px solid
14
- var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
15
- scrollbar-width: thin;
16
- }
17
-
18
- .rr-code-tabs__tab {
19
- appearance: none;
20
- flex: 0 0 auto;
21
- border: 1px solid transparent;
22
- border-bottom: 0;
23
- border-radius: 0.5rem 0.5rem 0 0;
24
- padding: 0.5rem 0.75rem;
25
- background: transparent;
26
- color: var(--rb-color-muted, currentColor);
27
- font: inherit;
28
- font-size: 0.875em;
29
- line-height: 1.3;
30
- cursor: pointer;
31
- }
32
-
33
- .rr-code-tabs__tab:hover {
34
- color: var(--rb-color-ink, currentColor);
35
- background: var(
36
- --rb-color-muted,
37
- color-mix(in srgb, currentColor 6%, transparent)
38
- );
39
- }
40
-
41
- .rr-code-tabs__tab:focus-visible {
42
- outline: 2px solid var(--rb-color-accent, currentColor);
43
- outline-offset: -2px;
44
- }
45
-
46
- .rr-code-tabs__tab[aria-selected="true"] {
47
- border-color: var(
48
- --rb-color-border,
49
- color-mix(in srgb, currentColor 16%, transparent)
50
- );
51
- background: var(--rb-color-paper, Canvas);
52
- color: var(--rb-color-ink, currentColor);
53
- }
54
-
55
- .rr-code-tabs__panel {
56
- padding: 0;
57
- }
58
-
59
- .rr-code-tabs__panel > :first-child {
60
- margin-top: 0;
61
- }
62
-
63
- .rr-code-tabs__panel > :last-child {
64
- margin-bottom: 0;
65
- }
66
-
67
- .rr-code-tabs__panel[hidden] {
68
- display: none;
69
- }
70
-
71
- .rr-code-tabs__code {
72
- margin-block: 0;
73
- }
74
-
75
- @media (max-width: 640px) {
76
- .rr-code-tabs {
77
- margin-inline: calc(var(--rr-content-inline-padding, 0px) * -1);
78
- border-inline: 0;
79
- }
80
-
81
- .rr-code-tabs__tab {
82
- padding-inline: 0.625rem;
83
- }
84
- }
1
+ .rr-code-tabs {
2
+ margin-block: 1.5rem;
3
+ border: 1px solid
4
+ var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
5
+ background: var(--rb-color-surface, transparent);
6
+ }
7
+
8
+ .rr-code-tabs__tablist {
9
+ display: flex;
10
+ gap: 0.25rem;
11
+ overflow-x: auto;
12
+ padding: 0.5rem 0.5rem 0;
13
+ border-bottom: 1px solid
14
+ var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
15
+ scrollbar-width: thin;
16
+ }
17
+
18
+ .rr-code-tabs__tab {
19
+ appearance: none;
20
+ flex: 0 0 auto;
21
+ border: 1px solid transparent;
22
+ border-bottom: 0;
23
+ border-radius: 0.5rem 0.5rem 0 0;
24
+ padding: 0.5rem 0.75rem;
25
+ background: transparent;
26
+ color: var(--rb-color-muted, currentColor);
27
+ font: inherit;
28
+ font-size: 0.875em;
29
+ line-height: 1.3;
30
+ cursor: pointer;
31
+ }
32
+
33
+ .rr-code-tabs__tab:hover {
34
+ color: var(--rb-color-ink, currentColor);
35
+ background: var(
36
+ --rb-color-muted,
37
+ color-mix(in srgb, currentColor 6%, transparent)
38
+ );
39
+ }
40
+
41
+ .rr-code-tabs__tab:focus-visible {
42
+ outline: 2px solid var(--rb-color-accent, currentColor);
43
+ outline-offset: -2px;
44
+ }
45
+
46
+ .rr-code-tabs__tab[aria-selected="true"] {
47
+ border-color: var(
48
+ --rb-color-border,
49
+ color-mix(in srgb, currentColor 16%, transparent)
50
+ );
51
+ background: var(--rb-color-paper, Canvas);
52
+ color: var(--rb-color-ink, currentColor);
53
+ }
54
+
55
+ .rr-code-tabs__panel {
56
+ padding: 0;
57
+ }
58
+
59
+ .rr-code-tabs__panel > :first-child {
60
+ margin-top: 0;
61
+ }
62
+
63
+ .rr-code-tabs__panel > :last-child {
64
+ margin-bottom: 0;
65
+ }
66
+
67
+ .rr-code-tabs__panel[hidden] {
68
+ display: none;
69
+ }
70
+
71
+ .rr-code-tabs__code {
72
+ margin-block: 0;
73
+ }
74
+
75
+ @media (max-width: 640px) {
76
+ .rr-code-tabs {
77
+ margin-inline: calc(var(--rr-content-inline-padding, 0px) * -1);
78
+ border-inline: 0;
79
+ }
80
+
81
+ .rr-code-tabs__tab {
82
+ padding-inline: 0.625rem;
83
+ }
84
+ }