@forte-ui/react 1.0.0-alpha.1 → 1.0.0-alpha.2
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/dist/{NavList-DGvcIoJm.js → NavList-DIvfjtPW.js} +63 -56
- package/dist/components/nav-list/NavList.d.ts +17 -4
- package/dist/components/nav-list/NavList.js +1 -1
- package/dist/components/nav-list/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/NavList.css +1 -1
- package/docs-data/props.json +8 -1
- package/docs-data/theming.json +11 -11
- package/package.json +1 -1
|
@@ -5,21 +5,21 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
|
5
5
|
import { useRender as i } from "@base-ui/react/use-render";
|
|
6
6
|
import { Collapsible as a } from "@base-ui/react/collapsible";
|
|
7
7
|
import './styles/NavList.css';var o = {
|
|
8
|
-
root: "
|
|
9
|
-
section: "
|
|
10
|
-
sectionLabel: "
|
|
11
|
-
list: "
|
|
12
|
-
item: "
|
|
13
|
-
link: "
|
|
14
|
-
groupTrigger: "
|
|
15
|
-
groupLabel: "
|
|
16
|
-
group: "
|
|
17
|
-
groupIcon: "
|
|
18
|
-
groupPanel: "
|
|
19
|
-
groupContent: "
|
|
20
|
-
badge: "
|
|
21
|
-
}, s = t.createContext(null);
|
|
22
|
-
function
|
|
8
|
+
root: "_root_1af53_24",
|
|
9
|
+
section: "_section_1af53_167",
|
|
10
|
+
sectionLabel: "_sectionLabel_1af53_171",
|
|
11
|
+
list: "_list_1af53_190",
|
|
12
|
+
item: "_item_1af53_218",
|
|
13
|
+
link: "_link_1af53_223",
|
|
14
|
+
groupTrigger: "_groupTrigger_1af53_223",
|
|
15
|
+
groupLabel: "_groupLabel_1af53_259",
|
|
16
|
+
group: "_group_1af53_223",
|
|
17
|
+
groupIcon: "_groupIcon_1af53_344",
|
|
18
|
+
groupPanel: "_groupPanel_1af53_368",
|
|
19
|
+
groupContent: "_groupContent_1af53_362",
|
|
20
|
+
badge: "_badge_1af53_400"
|
|
21
|
+
}, s = t.createContext(null), c = t.createContext(!1);
|
|
22
|
+
function l(e) {
|
|
23
23
|
return /* @__PURE__ */ n("svg", {
|
|
24
24
|
width: "16",
|
|
25
25
|
height: "16",
|
|
@@ -39,20 +39,24 @@ function c(e) {
|
|
|
39
39
|
children: /* @__PURE__ */ n("path", { d: "m3.5 6 4.5 4.5L12.5 6" })
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
render:
|
|
45
|
-
ref:
|
|
42
|
+
var u = t.forwardRef(function({ size: t = "md", marker: r = "fill", revealActive: a = !1, render: s, className: l, ...u }, d) {
|
|
43
|
+
let f = i({
|
|
44
|
+
render: s,
|
|
45
|
+
ref: d,
|
|
46
46
|
defaultTagName: "nav",
|
|
47
47
|
props: {
|
|
48
|
-
className: e(o.root,
|
|
48
|
+
className: e(o.root, l),
|
|
49
49
|
"data-forte": "nav-list",
|
|
50
50
|
"data-size": t,
|
|
51
|
-
"data-marker":
|
|
52
|
-
...
|
|
51
|
+
"data-marker": r,
|
|
52
|
+
...u
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
|
-
|
|
55
|
+
return /* @__PURE__ */ n(c.Provider, {
|
|
56
|
+
value: a,
|
|
57
|
+
children: f
|
|
58
|
+
});
|
|
59
|
+
}), d = t.forwardRef(function({ className: r, children: i, ...a }, c) {
|
|
56
60
|
let [l, u] = t.useState();
|
|
57
61
|
return /* @__PURE__ */ n(s.Provider, {
|
|
58
62
|
value: u,
|
|
@@ -66,7 +70,7 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
66
70
|
children: i
|
|
67
71
|
})
|
|
68
72
|
});
|
|
69
|
-
}),
|
|
73
|
+
}), f = t.forwardRef(function({ className: r, id: i, ...a }, c) {
|
|
70
74
|
let l = t.useContext(s), u = t.useId(), d = i ?? u;
|
|
71
75
|
return t.useEffect(() => (l?.(d), () => l?.(void 0)), [l, d]), /* @__PURE__ */ n("div", {
|
|
72
76
|
ref: c,
|
|
@@ -75,45 +79,48 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
75
79
|
"data-forte": "nav-list-section-label",
|
|
76
80
|
...a
|
|
77
81
|
});
|
|
78
|
-
}),
|
|
82
|
+
}), p = t.forwardRef(function({ className: t, ...r }, i) {
|
|
79
83
|
return /* @__PURE__ */ n("ul", {
|
|
80
84
|
ref: i,
|
|
81
85
|
className: e(o.list, t),
|
|
82
86
|
"data-forte": "nav-list-list",
|
|
83
87
|
...r
|
|
84
88
|
});
|
|
85
|
-
}),
|
|
89
|
+
}), m = t.forwardRef(function({ className: t, ...r }, i) {
|
|
86
90
|
return /* @__PURE__ */ n("li", {
|
|
87
91
|
ref: i,
|
|
88
92
|
className: e(o.item, t),
|
|
89
93
|
"data-forte": "nav-list-item",
|
|
90
94
|
...r
|
|
91
95
|
});
|
|
92
|
-
}),
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
+
}), h = t.forwardRef(function({ active: n = !1, disabled: r = !1, render: a, className: s, href: l, onClick: u, ...d }, f) {
|
|
97
|
+
let p = t.useContext(c), m = t.useRef(null);
|
|
98
|
+
return t.useLayoutEffect(() => {
|
|
99
|
+
!p || !n || m.current?.scrollIntoView({ block: "nearest" });
|
|
100
|
+
}, [p, n]), i({
|
|
101
|
+
render: a,
|
|
102
|
+
ref: [f, m],
|
|
96
103
|
defaultTagName: "a",
|
|
97
104
|
props: {
|
|
98
|
-
className: e(o.link, "forte-focus-ring",
|
|
105
|
+
className: e(o.link, "forte-focus-ring", s),
|
|
99
106
|
"data-forte": "nav-list-link",
|
|
100
107
|
"data-focus-inset": "",
|
|
101
|
-
"data-active":
|
|
102
|
-
"data-disabled":
|
|
103
|
-
"aria-current":
|
|
104
|
-
"aria-disabled":
|
|
105
|
-
href:
|
|
106
|
-
...
|
|
108
|
+
"data-active": n ? "" : void 0,
|
|
109
|
+
"data-disabled": r ? "" : void 0,
|
|
110
|
+
"aria-current": n ? "page" : void 0,
|
|
111
|
+
"aria-disabled": r || void 0,
|
|
112
|
+
href: r ? void 0 : l,
|
|
113
|
+
...d,
|
|
107
114
|
onClick: (e) => {
|
|
108
|
-
if (
|
|
115
|
+
if (r) {
|
|
109
116
|
e.preventDefault();
|
|
110
117
|
return;
|
|
111
118
|
}
|
|
112
|
-
|
|
119
|
+
u?.(e);
|
|
113
120
|
}
|
|
114
121
|
}
|
|
115
122
|
});
|
|
116
|
-
}),
|
|
123
|
+
}), g = t.forwardRef(function({ className: t, render: r, ...i }, s) {
|
|
117
124
|
return /* @__PURE__ */ n(a.Root, {
|
|
118
125
|
ref: s,
|
|
119
126
|
className: e(o.group, t),
|
|
@@ -121,7 +128,7 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
121
128
|
render: r ?? /* @__PURE__ */ n("li", {}),
|
|
122
129
|
...i
|
|
123
130
|
});
|
|
124
|
-
}),
|
|
131
|
+
}), _ = t.forwardRef(function({ active: t = !1, icon: i = /* @__PURE__ */ n(l, {}), className: s, children: c, ...u }, d) {
|
|
125
132
|
return /* @__PURE__ */ r(a.Trigger, {
|
|
126
133
|
ref: d,
|
|
127
134
|
className: e(o.groupTrigger, "forte-focus-ring", s),
|
|
@@ -132,7 +139,7 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
132
139
|
children: [/* @__PURE__ */ n("span", {
|
|
133
140
|
className: o.groupLabel,
|
|
134
141
|
"data-forte": "nav-list-group-label",
|
|
135
|
-
children:
|
|
142
|
+
children: c
|
|
136
143
|
}), i === null ? null : /* @__PURE__ */ n("span", {
|
|
137
144
|
className: o.groupIcon,
|
|
138
145
|
"data-forte": "nav-list-group-icon",
|
|
@@ -140,7 +147,7 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
140
147
|
children: i
|
|
141
148
|
})]
|
|
142
149
|
});
|
|
143
|
-
}),
|
|
150
|
+
}), v = t.forwardRef(function({ keepMounted: t = !0, className: r, children: i, ...s }, c) {
|
|
144
151
|
return /* @__PURE__ */ n(a.Panel, {
|
|
145
152
|
ref: c,
|
|
146
153
|
keepMounted: t,
|
|
@@ -153,24 +160,24 @@ var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, c
|
|
|
153
160
|
children: i
|
|
154
161
|
})
|
|
155
162
|
});
|
|
156
|
-
}),
|
|
163
|
+
}), y = t.forwardRef(function({ className: t, ...r }, i) {
|
|
157
164
|
return /* @__PURE__ */ n("span", {
|
|
158
165
|
ref: i,
|
|
159
166
|
className: e(o.badge, t),
|
|
160
167
|
"data-forte": "nav-list-badge",
|
|
161
168
|
...r
|
|
162
169
|
});
|
|
163
|
-
}),
|
|
164
|
-
Root:
|
|
165
|
-
Section:
|
|
166
|
-
SectionLabel:
|
|
167
|
-
List:
|
|
168
|
-
Item:
|
|
169
|
-
Link:
|
|
170
|
-
Group:
|
|
171
|
-
GroupTrigger:
|
|
172
|
-
GroupPanel:
|
|
173
|
-
Badge:
|
|
170
|
+
}), b = {
|
|
171
|
+
Root: u,
|
|
172
|
+
Section: d,
|
|
173
|
+
SectionLabel: f,
|
|
174
|
+
List: p,
|
|
175
|
+
Item: m,
|
|
176
|
+
Link: h,
|
|
177
|
+
Group: g,
|
|
178
|
+
GroupTrigger: _,
|
|
179
|
+
GroupPanel: v,
|
|
180
|
+
Badge: y
|
|
174
181
|
};
|
|
175
182
|
//#endregion
|
|
176
|
-
export {
|
|
183
|
+
export { _ as a, p as c, f as d, v as i, u as l, y as n, m as o, g as r, h as s, b as t, d as u };
|
|
@@ -2,7 +2,7 @@ import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
|
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
export type NavListSize = "sm" | "md" | "lg";
|
|
5
|
-
export type NavListMarker = "fill" | "
|
|
5
|
+
export type NavListMarker = "fill" | "edge";
|
|
6
6
|
type BaseGroupProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;
|
|
7
7
|
type BaseGroupTriggerProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;
|
|
8
8
|
type BaseGroupPanelProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;
|
|
@@ -13,12 +13,25 @@ export interface NavListRootProps extends Omit<React.ComponentPropsWithoutRef<"n
|
|
|
13
13
|
*/
|
|
14
14
|
size?: NavListSize;
|
|
15
15
|
/**
|
|
16
|
-
* How the current item is marked. `"fill"` is a tinted row. `"
|
|
17
|
-
*
|
|
18
|
-
* the
|
|
16
|
+
* How the current item is marked. `"fill"` is a tinted row. `"edge"` adds
|
|
17
|
+
* an accent border along the row's inline-start edge on top of the fill —
|
|
18
|
+
* it follows the row's corner radius, and is a second, non-colour-only cue.
|
|
19
19
|
* @default "fill"
|
|
20
20
|
*/
|
|
21
21
|
marker?: NavListMarker;
|
|
22
|
+
/**
|
|
23
|
+
* Scroll the active row into view when it mounts or becomes active — for a
|
|
24
|
+
* list in its own scroll column, where a page load would otherwise start
|
|
25
|
+
* the reader back at the top with their place fifty rows below the fold.
|
|
26
|
+
* Scrolls each scrollable ancestor the minimum it needs and a row already
|
|
27
|
+
* in view not at all, so it never fights the browser's own restoration of
|
|
28
|
+
* the window scroll, and activating a visible row moves nothing. How far
|
|
29
|
+
* inside the container's edge the row lands is
|
|
30
|
+
* `--forte-nav-list-reveal-margin`. Off by default: the component does not
|
|
31
|
+
* move a scroll container it does not own unless asked.
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
revealActive?: boolean;
|
|
22
35
|
/**
|
|
23
36
|
* Replaces the rendered `<nav>` with another element or component — pass
|
|
24
37
|
* `render={<div />}` when the list sits inside a `<nav>` landmark you
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../NavList-
|
|
2
|
+
import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../NavList-DIvfjtPW.js";
|
|
3
3
|
export { l as NavList, a as NavListBadge, s as NavListGroup, r as NavListGroupPanel, e as NavListGroupTrigger, o as NavListItem, c as NavListLink, t as NavListList, i as NavListRoot, u as NavListSection, n as NavListSectionLabel };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../NavList-
|
|
1
|
+
import { t as e } from "../../NavList-DIvfjtPW.js";
|
|
2
2
|
export { e as NavList };
|
package/dist/index.js
CHANGED
|
@@ -48,7 +48,7 @@ import "./components/input-group/index.js";
|
|
|
48
48
|
import "./components/menu/index.js";
|
|
49
49
|
import { t as Y } from "./Menubar-Dax027Db.js";
|
|
50
50
|
import "./components/menubar/index.js";
|
|
51
|
-
import { t as X } from "./NavList-
|
|
51
|
+
import { t as X } from "./NavList-DIvfjtPW.js";
|
|
52
52
|
import "./components/nav-list/index.js";
|
|
53
53
|
import { t as Z } from "./NavigationMenu-BayQkUUb.js";
|
|
54
54
|
import "./components/navigation-menu/index.js";
|
package/dist/styles/NavList.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer forte.components{.
|
|
1
|
+
@layer forte.components{._root_1af53_24{--forte-nav-list-gap:var(--forte-space-5);--forte-nav-list-item-px:var(--forte-space-2);--forte-nav-list-item-py:var(--forte-list-item-py);--forte-nav-list-item-gap:var(--forte-control-gap);--forte-nav-list-item-radius:var(--forte-radius-control);--forte-nav-list-row-gap:var(--forte-space-1);--forte-nav-list-item-px-resolved:max(var(--forte-nav-list-item-px), min(var(--forte-nav-list-item-radius), var(--forte-space-4)));--forte-nav-list-item-font-size:var(--forte-font-size-2);--forte-nav-list-item-font-weight:var(--forte-font-weight-normal);--forte-nav-list-item-font-weight-active:var(--forte-font-weight-medium);--forte-nav-list-item-color:var(--forte-color-foreground-muted);--forte-nav-list-item-color-hover:var(--forte-color-foreground);--forte-nav-list-item-color-active:var(--forte-color-primary-text);--forte-nav-list-item-bg:transparent;--forte-nav-list-item-bg-hover:var(--forte-color-panel-hover);--forte-nav-list-item-bg-active:var(--forte-color-primary-soft);--forte-nav-list-reveal-margin:var(--forte-space-6);--forte-nav-list-label-font-size:var(--forte-font-size-1);--forte-nav-list-label-color:var(--forte-color-foreground-subtle);--forte-nav-list-label-tracking:.06em;--forte-nav-list-label-mb:var(--forte-space-2);--forte-nav-list-indent:var(--forte-space-3);--forte-nav-list-indent-gap:var(--forte-space-2);--forte-nav-list-guide-width:1px;--forte-nav-list-guide-color:var(--forte-color-border-muted);--forte-nav-list-edge-width:2px;--forte-nav-list-edge-color:var(--forte-color-primary);--forte-nav-list-icon-color:var(--forte-color-foreground-subtle);--forte-nav-list-icon-color-open:var(--forte-color-foreground);--forte-nav-list-icon-rotate:180deg;--forte-nav-list-badge-bg:var(--forte-color-secondary-soft);--forte-nav-list-badge-color:var(--forte-color-secondary-text);--forte-nav-list-duration:var(--forte-duration-normal);--forte-nav-list-ease:var(--forte-ease-standard);box-sizing:border-box;gap:var(--forte-nav-list-gap);font-family:var(--forte-font-sans);color:var(--forte-color-foreground);flex-direction:column;display:flex}._root_1af53_24[data-size=sm]{--forte-nav-list-item-py:var(--forte-space-1);--forte-nav-list-item-font-size:var(--forte-font-size-1)}._root_1af53_24[data-size=lg]{--forte-nav-list-item-py:var(--forte-space-3);--forte-nav-list-item-font-size:var(--forte-font-size-3)}._section_1af53_167{display:block}._sectionLabel_1af53_171{margin:0 0 var(--forte-nav-list-label-mb);padding-inline:var(--forte-nav-list-item-px-resolved);color:var(--forte-nav-list-label-color);font-size:var(--forte-nav-list-label-font-size);font-weight:var(--forte-font-weight-semibold);letter-spacing:var(--forte-nav-list-label-tracking);line-height:var(--forte-line-height-normal);text-transform:uppercase;cursor:default;-webkit-user-select:none;user-select:none}._list_1af53_190{gap:var(--forte-nav-list-row-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}._list_1af53_190 ._list_1af53_190{border-inline-start:var(--forte-nav-list-guide-width) solid var(--forte-nav-list-guide-color);margin-block-start:var(--forte-nav-list-row-gap);margin-inline-start:var(--forte-nav-list-indent);padding-inline-start:var(--forte-nav-list-indent-gap)}._item_1af53_218{display:block}._link_1af53_223,._groupTrigger_1af53_223{box-sizing:border-box;align-items:center;gap:var(--forte-nav-list-item-gap);min-height:var(--forte-target-min);padding:var(--forte-nav-list-item-py) var(--forte-nav-list-item-px-resolved);border-radius:var(--forte-nav-list-item-radius);background-color:var(--forte-nav-list-item-bg);color:var(--forte-nav-list-item-color);font-family:inherit;font-size:var(--forte-nav-list-item-font-size);font-weight:var(--forte-nav-list-item-font-weight);line-height:var(--forte-line-height-normal);scroll-margin-block:var(--forte-nav-list-reveal-margin);cursor:pointer;transition:background-color var(--forte-duration-fast) var(--forte-ease-standard), border-color var(--forte-duration-fast) var(--forte-ease-standard), color var(--forte-duration-fast) var(--forte-ease-standard);text-decoration:none;display:flex;position:relative}._link_1af53_223>svg,._groupLabel_1af53_259>svg{flex:none}@media (hover:hover){._link_1af53_223:hover:not([data-active],[data-disabled]),._groupTrigger_1af53_223:hover:not([data-disabled]){background-color:var(--forte-nav-list-item-bg-hover);color:var(--forte-nav-list-item-color-hover)}}._link_1af53_223[data-active],._groupTrigger_1af53_223[data-active]{background-color:var(--forte-nav-list-item-bg-active);color:var(--forte-nav-list-item-color-active);font-weight:var(--forte-nav-list-item-font-weight-active)}._link_1af53_223[data-disabled],._groupTrigger_1af53_223[data-disabled]{cursor:not-allowed;opacity:.55}._root_1af53_24[data-marker=edge] ._link_1af53_223,._root_1af53_24[data-marker=edge] ._groupTrigger_1af53_223{border-inline-start:var(--forte-nav-list-edge-width) solid transparent}._root_1af53_24[data-marker=edge] ._link_1af53_223[data-active],._root_1af53_24[data-marker=edge] ._groupTrigger_1af53_223[data-active]{border-inline-start-color:var(--forte-nav-list-edge-color)}._group_1af53_223{display:block}._groupTrigger_1af53_223{text-align:start;-webkit-user-select:none;user-select:none;border:0;justify-content:space-between;width:100%;margin:0}._groupLabel_1af53_259{align-items:center;gap:var(--forte-nav-list-item-gap);flex:auto;min-width:0;display:flex}._groupIcon_1af53_344{color:var(--forte-nav-list-icon-color);transition:color var(--forte-duration-fast) var(--forte-ease-standard), rotate var(--forte-duration-spring-snappy) var(--forte-ease-spring-snappy);flex:none;justify-content:center;align-items:center;display:inline-flex;rotate:0deg}._groupTrigger_1af53_223[data-panel-open] ._groupIcon_1af53_344{color:var(--forte-nav-list-icon-color-open);rotate:var(--forte-nav-list-icon-rotate)}._groupPanel_1af53_368{box-sizing:border-box;height:var(--collapsible-panel-height);transition:height var(--forte-nav-list-duration) var(--forte-nav-list-ease);overflow:hidden}._groupPanel_1af53_368[data-starting-style],._groupPanel_1af53_368[data-ending-style]{height:0}._groupContent_1af53_362{opacity:1;transition:opacity var(--forte-duration-fast) var(--forte-ease-standard), translate var(--forte-nav-list-duration) var(--forte-nav-list-ease);translate:0}._groupPanel_1af53_368[data-starting-style] ._groupContent_1af53_362,._groupPanel_1af53_368[data-ending-style] ._groupContent_1af53_362{opacity:0;translate:0 calc(-1 * var(--forte-travel-sm))}._badge_1af53_400{padding-inline:var(--forte-space-2);border-radius:var(--forte-radius-pill);background-color:var(--forte-nav-list-badge-bg);color:var(--forte-nav-list-badge-color);font-size:var(--forte-font-size-1);font-weight:var(--forte-font-weight-medium);line-height:var(--forte-line-height-normal);flex:none;align-items:center;margin-inline-start:auto;display:inline-flex}}@layer forte.a11y{@media (forced-colors:active){._root_1af53_24[data-marker=edge] ._link_1af53_223,._root_1af53_24[data-marker=edge] ._groupTrigger_1af53_223{border-inline-start-width:0}._link_1af53_223[data-active]:not([data-disabled]),._groupTrigger_1af53_223[data-active]:not([data-disabled]){color:highlighttext;background-color:highlight}._badge_1af53_400{border:1px solid canvastext}}}
|
package/docs-data/props.json
CHANGED
|
@@ -4164,7 +4164,7 @@
|
|
|
4164
4164
|
"type": "NavListMarker",
|
|
4165
4165
|
"required": false,
|
|
4166
4166
|
"defaultValue": "fill",
|
|
4167
|
-
"description": "How the current item is marked. `\"fill\"` is a tinted row. `\"
|
|
4167
|
+
"description": "How the current item is marked. `\"fill\"` is a tinted row. `\"edge\"` adds\nan accent border along the row's inline-start edge on top of the fill —\nit follows the row's corner radius, and is a second, non-colour-only cue."
|
|
4168
4168
|
},
|
|
4169
4169
|
{
|
|
4170
4170
|
"name": "render",
|
|
@@ -4173,6 +4173,13 @@
|
|
|
4173
4173
|
"defaultValue": null,
|
|
4174
4174
|
"description": "Replaces the rendered `<nav>` with another element or component — pass\n`render={<div />}` when the list sits inside a `<nav>` landmark you\nalready own, so the page does not grow a second one."
|
|
4175
4175
|
},
|
|
4176
|
+
{
|
|
4177
|
+
"name": "revealActive",
|
|
4178
|
+
"type": "boolean",
|
|
4179
|
+
"required": false,
|
|
4180
|
+
"defaultValue": "false",
|
|
4181
|
+
"description": "Scroll the active row into view when it mounts or becomes active — for a\nlist in its own scroll column, where a page load would otherwise start\nthe reader back at the top with their place fifty rows below the fold.\nScrolls each scrollable ancestor the minimum it needs and a row already\nin view not at all, so it never fights the browser's own restoration of\nthe window scroll, and activating a visible row moves nothing. How far\ninside the container's edge the row lands is\n`--forte-nav-list-reveal-margin`. Off by default: the component does not\nmove a scroll container it does not own unless asked."
|
|
4182
|
+
},
|
|
4176
4183
|
{
|
|
4177
4184
|
"name": "size",
|
|
4178
4185
|
"type": "NavListSize",
|
package/docs-data/theming.json
CHANGED
|
@@ -5222,6 +5222,13 @@
|
|
|
5222
5222
|
"part": "root",
|
|
5223
5223
|
"overrides": []
|
|
5224
5224
|
},
|
|
5225
|
+
{
|
|
5226
|
+
"name": "--forte-nav-list-reveal-margin",
|
|
5227
|
+
"value": "var(--forte-space-6)",
|
|
5228
|
+
"description": "How far inside the scroll container's edge a revealed row lands",
|
|
5229
|
+
"part": "root",
|
|
5230
|
+
"overrides": []
|
|
5231
|
+
},
|
|
5225
5232
|
{
|
|
5226
5233
|
"name": "--forte-nav-list-label-font-size",
|
|
5227
5234
|
"value": "var(--forte-font-size-1)",
|
|
@@ -5279,23 +5286,16 @@
|
|
|
5279
5286
|
"overrides": []
|
|
5280
5287
|
},
|
|
5281
5288
|
{
|
|
5282
|
-
"name": "--forte-nav-list-
|
|
5289
|
+
"name": "--forte-nav-list-edge-width",
|
|
5283
5290
|
"value": "2px",
|
|
5284
|
-
"description": "Width of the active-row
|
|
5291
|
+
"description": "Width of the active-row edge border",
|
|
5285
5292
|
"part": "root",
|
|
5286
5293
|
"overrides": []
|
|
5287
5294
|
},
|
|
5288
5295
|
{
|
|
5289
|
-
"name": "--forte-nav-list-
|
|
5296
|
+
"name": "--forte-nav-list-edge-color",
|
|
5290
5297
|
"value": "var(--forte-color-primary)",
|
|
5291
|
-
"description": "Colour of the active-row
|
|
5292
|
-
"part": "root",
|
|
5293
|
-
"overrides": []
|
|
5294
|
-
},
|
|
5295
|
-
{
|
|
5296
|
-
"name": "--forte-nav-list-rail-inset",
|
|
5297
|
-
"value": "18%",
|
|
5298
|
-
"description": "How far the rail stops short of the row's top and bottom edges",
|
|
5298
|
+
"description": "Colour of the active-row edge border",
|
|
5299
5299
|
"part": "root",
|
|
5300
5300
|
"overrides": []
|
|
5301
5301
|
},
|
package/package.json
CHANGED