@rvx/ui 0.4.6 → 0.5.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 (11) hide show
  1. package/dist/components/nav-bar.d.ts +14 -2
  2. package/dist/components/nav-bar.d.ts.map +1 -1
  3. package/dist/components/nav-bar.js +14 -5
  4. package/dist/components/nav-bar.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/components/nav-bar.tsx +67 -9
  7. package/theme/components/control-group.module.css +3 -3
  8. package/theme/components/nav-bar.module.css +32 -25
  9. package/theme/components/separated.module.css +2 -2
  10. package/theme/components/tabs.module.css +1 -1
  11. package/theme/global.css +2 -3
package/dist/components/nav-bar.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ClassValue, Content, Expression, StyleValue } from "rvx";
2
2
  import { Action } from "../common/events.js";
3
3
  import { AriaCurrent } from "../common/types.js";
4
+ import { LinkAnchorRel, LinkAnchorTarget, LinkReferrerPolicy } from "./link.js";
4
5
  export declare function NavBar(props: {
5
6
  class?: ClassValue;
6
7
  style?: StyleValue;
@@ -9,16 +10,27 @@ export declare function NavBar(props: {
9
10
  center?: Content;
10
11
  end?: Content;
11
12
  }): unknown;
12
- export declare function NavBarButton(props: {
13
+ export declare function NavBarItem(props: {
13
14
  class?: ClassValue;
14
15
  style?: StyleValue;
15
- children?: unknown;
16
+ children?: Content;
16
17
  disabled?: Expression<boolean | undefined>;
17
18
  action?: Action;
19
+ download?: Expression<string | boolean | undefined>;
20
+ href?: Expression<string | undefined>;
21
+ hreflang?: Expression<string | undefined>;
22
+ target?: Expression<LinkAnchorTarget | string | undefined>;
23
+ referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
24
+ rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
18
25
  title?: Expression<string | undefined>;
19
26
  current?: Expression<AriaCurrent | undefined>;
20
27
  "aria-expanded"?: Expression<boolean | undefined>;
21
28
  "aria-haspopup"?: Expression<string | undefined>;
22
29
  "aria-controls"?: Expression<string | undefined>;
23
30
  }): unknown;
31
+ export declare function NavBarContent(props: {
32
+ class?: ClassValue;
33
+ style?: StyleValue;
34
+ children?: Content;
35
+ }): unknown;
24
36
  //# sourceMappingURL=nav-bar.d.ts.map
package/dist/components/nav-bar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,WAyBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAE9C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACjD,WAoCA"}
1
+ {"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAGhF,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,WAyBA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IAKpD,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAKtC,QAAQ,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAK1C,MAAM,CAAC,EAAE,UAAU,CAAC,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAO3D,cAAc,CAAC,EAAE,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;IAO5D,GAAG,CAAC,EAAE,UAAU,CAAC,aAAa,GAAG,aAAa,EAAE,GAAG,SAAS,CAAC,CAAC;IAE9D,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAE9C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACjD,WA6CA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,WAWA"}
package/dist/components/nav-bar.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
2
2
  import styles from "@rvx/ui/theme/components/nav-bar.module.css";
3
3
  import { get, map } from "rvx";
4
4
  import { isPending } from "rvx/async";
5
- import { optionalString } from "rvx/convert";
5
+ import { optionalString, separated } from "rvx/convert";
6
6
  import { handleActionEvent, isKey } from "../common/events.js";
7
7
  import { Row } from "./row.js";
8
8
  export function NavBar(props) {
@@ -16,7 +16,7 @@ export function NavBar(props) {
16
16
  }
17
17
  ], children: _jsxs("div", { class: styles.grid, children: [_jsx("div", { class: styles.start, children: props.start }), _jsx("div", { class: styles.center, children: props.center }), _jsx("div", { class: styles.end, children: props.end })] }) });
18
18
  }
19
- export function NavBarButton(props) {
19
+ export function NavBarItem(props) {
20
20
  const disabled = () => isPending() || get(props.disabled);
21
21
  function action(event) {
22
22
  if (disabled() || !props.action) {
@@ -24,14 +24,23 @@ export function NavBarButton(props) {
24
24
  }
25
25
  handleActionEvent(event, props.action);
26
26
  }
27
- return _jsx("button", { type: "button", disabled: disabled, class: [
27
+ const isLink = props.href !== undefined;
28
+ const Tag = isLink ? "a" : "button";
29
+ return _jsx(Tag, { type: isLink ? undefined : "button", disabled: disabled, class: [
28
30
  props.class,
29
31
  styles.item,
30
32
  map(props.current, current => current ? styles.current : undefined),
31
- ], style: props.style, title: props.title, "aria-current": optionalString(props.current), "aria-expanded": optionalString(props["aria-expanded"]), "aria-haspopup": props["aria-haspopup"], "aria-controls": props["aria-controls"], "on:click": action, "on:keydown": event => {
33
+ map(props["aria-expanded"], expanded => expanded ? styles.expanded : undefined),
34
+ ], style: props.style, title: props.title, "aria-current": optionalString(props.current), "aria-expanded": optionalString(props["aria-expanded"]), "aria-haspopup": props["aria-haspopup"], "aria-controls": props["aria-controls"], download: isLink && props.download, href: isLink && props.href, hreflang: isLink && props.hreflang, target: isLink && props.target, referrerpolicy: isLink && map(props.referrerpolicy, v => v ?? "no-referrer"), rel: isLink && separated(map(props.rel, v => v ?? "noreferrer"), " "), "on:click": action, "on:keydown": event => {
32
35
  if (isKey(event, "enter") || isKey(event, " ")) {
33
36
  action(event);
34
37
  }
35
- }, children: _jsx(Row, { class: styles.item_content, align: "center", children: props.children }) });
38
+ }, children: props.children });
39
+ }
40
+ export function NavBarContent(props) {
41
+ return _jsx(Row, { class: [
42
+ props.class,
43
+ styles.content
44
+ ], style: props.style, align: "center", children: props.children });
36
45
  }
37
46
  //# sourceMappingURL=nav-bar.js.map
package/dist/components/nav-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,6CAA6C,CAAC;AACjE,OAAO,EAAmC,GAAG,EAAE,GAAG,EAAc,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAU,iBAAiB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,UAAU,MAAM,CAAC,KAOtB;IACA,OAAO,cACN,KAAK,EAAE;YACN,MAAM,CAAC,GAAG;YACV,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX;gBACC,uBAAuB,EAAE,KAAK,CAAC,UAAU;aACzC;SACD,YAED,eAAK,KAAK,EAAE,MAAM,CAAC,IAAI,aACtB,cAAK,KAAK,EAAE,MAAM,CAAC,KAAK,YACtB,KAAK,CAAC,KAAK,GACP,EACN,cAAK,KAAK,EAAE,MAAM,CAAC,MAAM,YACvB,KAAK,CAAC,MAAM,GACR,EACN,cAAK,KAAK,EAAE,MAAM,CAAC,GAAG,YACpB,KAAK,CAAC,GAAG,GACL,IACD,GACD,CAAC;AACR,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAY5B;IACA,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1D,SAAS,MAAM,CAAC,KAAY;QAC3B,IAAI,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACjC,OAAO;QACR,CAAC;QACD,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,iBACN,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX,MAAM,CAAC,IAAI;YACX,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;SACnE,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,kBACJ,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,mBAC5B,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,mBACtC,KAAK,CAAC,eAAe,CAAC,mBACtB,KAAK,CAAC,eAAe,CAAC,cAE3B,MAAM,gBACJ,KAAK,CAAC,EAAE;YACnB,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;gBAChD,MAAM,CAAC,KAAK,CAAC,CAAC;YACf,CAAC;QACF,CAAC,YAED,KAAC,GAAG,IAAC,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,KAAK,EAAC,QAAQ,YAC7C,KAAK,CAAC,QAAQ,GACV,GACE,CAAC;AACX,CAAC"}
1
+ {"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "rvx"
13
13
  ],
14
14
  "license": "MIT",
15
- "version": "0.4.6",
15
+ "version": "0.5.0",
16
16
  "type": "module",
17
17
  "main": "./dist/index.js",
18
18
  "sideEffects": false,
@@ -33,6 +33,6 @@
33
33
  "typescript": "^6.0.2"
34
34
  },
35
35
  "peerDependencies": {
36
- "rvx": "^24.1.3"
36
+ "rvx": "^25.0.0"
37
37
  }
38
38
  }
package/src/components/nav-bar.tsx CHANGED
@@ -1,9 +1,10 @@
1
1
  import styles from "@rvx/ui/theme/components/nav-bar.module.css";
2
2
  import { ClassValue, Content, Expression, get, map, StyleValue } from "rvx";
3
3
  import { isPending } from "rvx/async";
4
- import { optionalString } from "rvx/convert";
4
+ import { optionalString, separated } from "rvx/convert";
5
5
  import { Action, handleActionEvent, isKey } from "../common/events.js";
6
6
  import { AriaCurrent } from "../common/types.js";
7
+ import { LinkAnchorRel, LinkAnchorTarget, LinkReferrerPolicy } from "./link.js";
7
8
  import { Row } from "./row.js";
8
9
 
9
10
  export function NavBar(props: {
@@ -40,12 +41,43 @@ export function NavBar(props: {
40
41
  </nav>;
41
42
  }
42
43
 
43
- export function NavBarButton(props: {
44
+ export function NavBarItem(props: {
44
45
  class?: ClassValue;
45
46
  style?: StyleValue;
46
- children?: unknown;
47
+ children?: Content;
47
48
  disabled?: Expression<boolean | undefined>;
48
49
  action?: Action;
50
+ download?: Expression<string | boolean | undefined>;
51
+
52
+ /**
53
+ * The url this link points to.
54
+ */
55
+ href?: Expression<string | undefined>;
56
+
57
+ /**
58
+ * Hints the human language of the linked url.
59
+ */
60
+ hreflang?: Expression<string | undefined>;
61
+
62
+ /**
63
+ * The link target.
64
+ */
65
+ target?: Expression<LinkAnchorTarget | string | undefined>;
66
+
67
+ /**
68
+ * How much of the referrer to send when following the link.
69
+ *
70
+ * @default "no-referrer"
71
+ */
72
+ referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
73
+
74
+ /**
75
+ * The link type.
76
+ *
77
+ * @default "noreferrer"
78
+ */
79
+ rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
80
+
49
81
  title?: Expression<string | undefined>;
50
82
  current?: Expression<AriaCurrent | undefined>;
51
83
 
@@ -62,13 +94,17 @@ export function NavBarButton(props: {
62
94
  handleActionEvent(event, props.action);
63
95
  }
64
96
 
65
- return <button
66
- type="button"
97
+ const isLink = props.href !== undefined;
98
+ const Tag = isLink ? "a" : "button";
99
+
100
+ return <Tag
101
+ type={isLink ? undefined : "button"}
67
102
  disabled={disabled}
68
103
  class={[
69
104
  props.class,
70
105
  styles.item,
71
106
  map(props.current, current => current ? styles.current : undefined),
107
+ map(props["aria-expanded"], expanded => expanded ? styles.expanded : undefined),
72
108
  ]}
73
109
  style={props.style}
74
110
  title={props.title}
@@ -77,6 +113,13 @@ export function NavBarButton(props: {
77
113
  aria-haspopup={props["aria-haspopup"]}
78
114
  aria-controls={props["aria-controls"]}
79
115
 
116
+ download={isLink && props.download}
117
+ href={isLink && props.href}
118
+ hreflang={isLink && props.hreflang}
119
+ target={isLink && props.target}
120
+ referrerpolicy={isLink && map(props.referrerpolicy, v => v ?? "no-referrer")}
121
+ rel={isLink && separated(map(props.rel, v => v ?? "noreferrer"), " ")}
122
+
80
123
  on:click={action}
81
124
  on:keydown={event => {
82
125
  if (isKey(event, "enter") || isKey(event, " ")) {
@@ -84,8 +127,23 @@ export function NavBarButton(props: {
84
127
  }
85
128
  }}
86
129
  >
87
- <Row class={styles.item_content} align="center">
88
- {props.children}
89
- </Row>
90
- </button>;
130
+ {props.children}
131
+ </Tag>;
132
+ }
133
+
134
+ export function NavBarContent(props: {
135
+ class?: ClassValue;
136
+ style?: StyleValue;
137
+ children?: Content;
138
+ }) {
139
+ return <Row
140
+ class={[
141
+ props.class,
142
+ styles.content
143
+ ]}
144
+ style={props.style}
145
+ align="center"
146
+ >
147
+ {props.children}
148
+ </Row>;
91
149
  }
package/theme/components/control-group.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  box-shadow: var(--control-shadow);
5
5
  border-radius: var(--control-radius);
6
- gap: var(--separator);
6
+ gap: var(--separator-size);
7
7
 
8
8
  & > * {
9
9
  box-shadow: none;
@@ -29,7 +29,7 @@
29
29
  border-end-end-radius: 0;
30
30
  }
31
31
  & > * {
32
- margin-inline-start: calc((var(--space-scale) - 1) * var(--separator));
32
+ margin-inline-start: calc((var(--space-scale) - 1) * var(--separator-size));
33
33
  }
34
34
  }
35
35
 
@@ -52,6 +52,6 @@
52
52
  border-end-end-radius: 0;
53
53
  }
54
54
  & > * {
55
- margin-block-start: calc((var(--space-scale) - 1) * var(--separator));
55
+ margin-block-start: calc((var(--space-scale) - 1) * var(--separator-size));
56
56
  }
57
57
  }
package/theme/components/nav-bar.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .nav {
3
- background-color: var(--bg-alt);
3
+ background-color: var(--nav-bar-bg);
4
4
  display: flex;
5
5
  flex-direction: row;
6
6
  justify-content: center;
@@ -13,7 +13,7 @@
13
13
 
14
14
  display: grid;
15
15
  grid-template-columns: 1fr auto 1fr;
16
- gap: var(--group-column-gap);
16
+ gap: var(--content-column-gap);
17
17
  }
18
18
 
19
19
  .start,
@@ -21,7 +21,7 @@
21
21
  .end {
22
22
  display: flex;
23
23
  flex-direction: row;
24
- gap: var(--group-column-gap);
24
+ gap: var(--content-column-gap);
25
25
  }
26
26
 
27
27
  .start {
@@ -35,7 +35,8 @@
35
35
  .item {
36
36
  display: flex;
37
37
  flex-direction: row;
38
- align-items: stretch;
38
+ align-items: center;
39
+ white-space: nowrap;
39
40
 
40
41
  font-family: inherit;
41
42
  font-size: inherit;
@@ -44,9 +45,13 @@
44
45
 
45
46
  cursor: pointer;
46
47
  outline: none;
48
+ text-decoration: none;
49
+
50
+ padding-inline: 0;
51
+ padding-block: calc(var(--content-padding-block) + var(--marker-size)) var(--content-padding-block);
47
52
 
48
- padding: 0;
49
53
  border: none;
54
+ border-block-end: var(--marker-size) solid transparent;
50
55
 
51
56
  background-color: transparent;
52
57
  color: var(--fg-secondary);
@@ -55,31 +60,33 @@
55
60
  cursor: default;
56
61
  filter: var(--control-disabled);
57
62
  }
58
- }
59
-
60
- .item_content {
61
- padding-block: var(--content-padding-block) calc(var(--content-padding-block) - var(--content-border));
62
-
63
- border-block-end: var(--content-border) solid transparent;
64
63
 
65
- transition: background-color var(--transition-color),
66
- margin var(--transition-color),
67
- padding var(--transition-color);
64
+ transition: border-block-end-color var(--transition-color),
65
+ color var(--transition-color);
68
66
 
69
- .item:hover:not(:active):not([disabled]) > &,
70
- .item:focus-visible:not(:active):not([disabled]) > & {
71
- background-color: var(--bg-active);
72
- }
73
-
74
- .item:hover:not([disabled]) > &,
75
- .item:focus-visible:not([disabled]) > & {
76
- margin-inline: calc(var(--group-column-gap) / -2);
77
- padding-inline: calc(var(--group-column-gap) / 2);
78
- z-index: 1;
67
+ &:hover:not([disabled]),
68
+ &:focus-visible:not([disabled]),
69
+ &.expanded {
70
+ color: var(--fg);
71
+ border-block-end-color: var(--nav-bar-marker-hover);
79
72
  }
80
73
 
81
- .current > & {
74
+ &.current.current {
82
75
  color: var(--fg);
83
76
  border-block-end-color: var(--accent);
84
77
  }
85
78
  }
79
+
80
+ .content {
81
+ padding-block: var(--group-padding-block);
82
+ }
83
+
84
+ :global(.rvx-dark) {
85
+ --nav-bar-bg: rgb(32 32 32);
86
+ --nav-bar-marker-hover: rgb(80 80 80);
87
+ }
88
+
89
+ :global(.rvx-light) {
90
+ --nav-bar-bg: rgb(240 240 240);
91
+ --nav-bar-marker-hover: rgb(172 172 172);
92
+ }
package/theme/components/separated.module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  overflow: hidden;
8
8
  }
9
9
  & > :not(.has_separator) + :not(.has_separator) {
10
- border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
10
+ border-block-start: calc(var(--separator-size) * var(--space-scale)) solid var(--separator-color);
11
11
  }
12
12
  }
13
13
 
@@ -19,6 +19,6 @@
19
19
  overflow: hidden;
20
20
  }
21
21
  & > :not(.has_separator) + :not(.has_separator) {
22
- border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
22
+ border-inline-start: calc(var(--separator-size) * var(--space-scale)) solid var(--separator-color);
23
23
  }
24
24
  }
package/theme/components/tabs.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .list {
3
3
  display: flex;
4
4
  flex-direction: row;
5
- border-bottom: var(--separator) solid var(--separator-color);
5
+ border-bottom: var(--separator-size) solid var(--separator-color);
6
6
  }
7
7
 
8
8
  .list_padded {
package/theme/global.css CHANGED
@@ -53,7 +53,8 @@ body {
53
53
  --transition-color: .1s ease;
54
54
  --transition-layout: .25s ease;
55
55
 
56
- --separator: calc(2rem / 14);
56
+ --separator-size: calc(2rem / 14);
57
+ --marker-size: calc(3rem / 14);
57
58
 
58
59
  --overflow-safe-area: calc(2rem / 14);
59
60
  --input-extension: calc(5rem / 14);
@@ -67,7 +68,6 @@ body {
67
68
  --bg: rgb(24 24 24);
68
69
  --bg-alt: rgb(32 32 32);
69
70
  --bg-selection: rgb(64 150 255 / .5);
70
- --bg-active: rgb(48 48 48);
71
71
 
72
72
  --fg: white;
73
73
  --accent: rgb(64 160 255);
@@ -97,7 +97,6 @@ body {
97
97
  --bg: white;
98
98
  --bg-alt: rgb(250 250 250);
99
99
  --bg-selection: rgb(0 127 255 / .3);
100
- --bg-active: rgb(232 232 232);
101
100
 
102
101
  --fg: rgb(42 42 42);
103
102
  --accent: rgb(0 127 255);