@watermarkinsights/ripple 5.32.1-alpha.2 → 5.32.1-alpha.3
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/cjs/{app-globals-4ac5459c.js → app-globals-2a95ac29.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-navigation_3.cjs.entry.js +4 -4
- package/dist/cjs/wm-tag-input.cjs.entry.js +2 -3
- package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +5 -1
- package/dist/collection/components/wm-navigation/wm-navigation-item.js +25 -3
- package/dist/collection/components/wm-navigation/wm-navigation.js +41 -20
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +2 -3
- package/dist/docs/docs.json +16 -8
- package/dist/docs/skill/index.md +1 -0
- package/dist/docs/skill/wm-navigation-hamburger.md +4 -0
- package/dist/docs/skill/wm-navigation-item.md +20 -5
- package/dist/docs/skill/wm-navigation.md +39 -18
- package/dist/esm/{app-globals-10d4c715.js → app-globals-ef6f887a.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-navigation_3.entry.js +4 -4
- package/dist/esm/wm-tag-input.entry.js +2 -3
- package/dist/ripple/{p-5cf61da4.js → p-2a3e83f9.js} +1 -1
- package/dist/ripple/{p-a4ce3157.entry.js → p-93706eb1.entry.js} +1 -1
- package/dist/ripple/{p-729314c0.entry.js → p-fe0345dd.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/types/components/wm-navigation/wm-navigation-hamburger.d.ts +4 -0
- package/dist/types/components/wm-navigation/wm-navigation-item.d.ts +24 -2
- package/dist/types/components/wm-navigation/wm-navigation.d.ts +39 -18
- package/dist/types/components.d.ts +256 -80
- package/package.json +1 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-2a95ac29.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-2a95ac29.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -106,9 +106,9 @@ const Navigation = class {
|
|
|
106
106
|
} }));
|
|
107
107
|
}
|
|
108
108
|
render() {
|
|
109
|
-
return (index.h(index.Host, { key: '
|
|
109
|
+
return (index.h(index.Host, { key: 'a15b95ca5769e6a996542f3fb0f1edf8928ed4ea', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: 'add1bb58939e3d076c7890aa1cb3efd932f977dc', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '98491d3d97807417a13b677894ee452e89e9cea8', class: "tray" }, index.h("div", { key: 'cf058b8b33a07598f19318977e26e652304faf4f', class: "toggle-wrapper" }, index.h("wm-button", { key: '7e8d936e3fdc9c718bf9442b6840464a6caddcab', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
|
|
110
110
|
this.open = !this.open;
|
|
111
|
-
} })), index.h("ul", { key: '
|
|
111
|
+
} })), index.h("ul", { key: 'e90219ba02e6a2330095e12ee4793ac82100fc5d', class: "navlist" }, index.h("slot", { key: '83e672cf048480abbef358f8249cb1622e2fad3c' }))), this.isCollapsible && (index.h("div", { key: '3c16362bebb241d693aa6aa8fd7226a34039901d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
|
|
112
112
|
}
|
|
113
113
|
static get delegatesFocus() { return true; }
|
|
114
114
|
get el() { return index.getElement(this); }
|
|
@@ -157,7 +157,7 @@ const NavigationHamburger = class {
|
|
|
157
157
|
this.wmNavigationHamburgerClicked.emit();
|
|
158
158
|
}
|
|
159
159
|
render() {
|
|
160
|
-
return (index.h(index.Host, { key: '
|
|
160
|
+
return (index.h(index.Host, { key: '6f135919a43b55f7c4fca79d79e9a5c201d84fdd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '8d930f77ea878a4f7757084fe45178004cc8a74e', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: '798de550cd68d4d3b2ce78036206175e3901e1c0', class: "svg-icon svg-menu" }))));
|
|
161
161
|
}
|
|
162
162
|
static get delegatesFocus() { return true; }
|
|
163
163
|
get el() { return index.getElement(this); }
|
|
@@ -176,7 +176,7 @@ const NavigationItem = class {
|
|
|
176
176
|
this.active = undefined;
|
|
177
177
|
}
|
|
178
178
|
render() {
|
|
179
|
-
return (index.h(index.Host, { key: '
|
|
179
|
+
return (index.h(index.Host, { key: 'bbe3c0a165b8d7d4bf036e5a80b23eb11446b90e', role: "listitem" }, index.h("a", { key: '7f4ef86559f368dca39bd7a72ed05daafb539648', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: '8ae1aae920abe64829e87f2a107f1bf3eb752e50', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: '1da830a8aae16100d5c99b5bfe7e80086f8a7baa' })), index.h("div", { key: '876286ffd8f555d840538a088051faeede3882ae', class: "text" }, this.text))));
|
|
180
180
|
}
|
|
181
181
|
static get delegatesFocus() { return true; }
|
|
182
182
|
get el() { return index.getElement(this); }
|
|
@@ -327,7 +327,6 @@ const TagInput = class {
|
|
|
327
327
|
const addedNodes = Array.from(record.addedNodes);
|
|
328
328
|
if (addedNodes.length > 0) {
|
|
329
329
|
this.assignOptionIds();
|
|
330
|
-
// reassign rather than push: Stencil only re-renders on a state reference change
|
|
331
330
|
const newNodes = addedNodes.filter((n) => !this.tagsList.includes(n));
|
|
332
331
|
if (newNodes.length > 0) {
|
|
333
332
|
this.tagsList = [...this.tagsList, ...newNodes];
|
|
@@ -970,10 +969,10 @@ const TagInput = class {
|
|
|
970
969
|
}
|
|
971
970
|
}
|
|
972
971
|
render() {
|
|
973
|
-
return (index.h("div", { key: '
|
|
972
|
+
return (index.h("div", { key: 'dea9ac53c8001429751e759746085ebb7f9bcc98', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'd3956d7ac5042bf4e0629173cebe2e46ea7e9a3b', class: "label-wrapper" }, index.h("label", { key: '83e407057a18e0e6d21af52a35e7c57af40bf147', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '70d92671c54ad690834de1f6873aec20e5f4fd80', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '79dba949ca7f4e73d8275e6e8c07e7737c4cef43', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '24179f798549b936c2e2a90b43c377d5c7df155b', class: "upper-row" }, index.h("div", { key: '799d830b6ff63dec947f776cdcebce017f83f9bb', class: "svg-icon svg-search" }), index.h("div", { key: 'eb31ec918a327e87176db9bdda33e160eb40cf29', class: `tags-and-input-wrapper` }, index.h("ul", { key: 'cb5a56da3f08bac148853ec9e6bbf0f755cc8643', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
|
|
974
973
|
this.focusedTagIndex = undefined;
|
|
975
974
|
this.handleBlur(ev);
|
|
976
|
-
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: '
|
|
975
|
+
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: 'eb39838bb6fa30ed96864d605e58d8d28291bb09', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: '988f231710b140862bf4ff637611b3e7172e7e80', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '6826b1f0620e14e7e921314085523cf1c3623164', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '28632b831feb09801e7036f7b458303a5daee980', id: "error" }, this.errorMessage), index.h("div", { key: '339b33e97121b8abb5115e516e61a2fa56e4a34e', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
977
976
|
}
|
|
978
977
|
static get delegatesFocus() { return true; }
|
|
979
978
|
get el() { return index.getElement(this); }
|
|
@@ -25,6 +25,10 @@ import { intl, showTooltip, hideTooltip } from "../../global/functions";
|
|
|
25
25
|
* component's own and opens a visible gap at the header's outer edge. The box reserves no
|
|
26
26
|
* space on its trailing side, though — spacing between it and the next header element
|
|
27
27
|
* (typically a logo) is still up to the app's own header layout to provide.
|
|
28
|
+
* - This component must be the header's true first child at its true leading edge, so don't
|
|
29
|
+
* give the header uniform padding (or `padding-inline-start`) for breathing room — that
|
|
30
|
+
* inset falls on this component the same way padding on its own host would. If the header
|
|
31
|
+
* needs padding for its other content, use `padding-inline-end` instead.
|
|
28
32
|
* - The example below only illustrates the `nav-id`/`id` contract. For the full page
|
|
29
33
|
* placement — header, logo, and the `<main>` sidebar layout — see wm-navigation's
|
|
30
34
|
* "Basic navigation" example.
|
|
@@ -78,7 +82,7 @@ export class NavigationHamburger {
|
|
|
78
82
|
this.wmNavigationHamburgerClicked.emit();
|
|
79
83
|
}
|
|
80
84
|
render() {
|
|
81
|
-
return (h(Host, { key: '
|
|
85
|
+
return (h(Host, { key: '6f135919a43b55f7c4fca79d79e9a5c201d84fdd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '8d930f77ea878a4f7757084fe45178004cc8a74e', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '798de550cd68d4d3b2ce78036206175e3901e1c0', class: "svg-icon svg-menu" }))));
|
|
82
86
|
}
|
|
83
87
|
static get is() { return "wm-navigation-hamburger"; }
|
|
84
88
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,12 +3,30 @@ import { h, Host } from "@stencil/core";
|
|
|
3
3
|
* A single navigation link inside a wm-navigation. Renders as an anchor element with an
|
|
4
4
|
* optional icon slot. Always used as a direct child of wm-navigation.
|
|
5
5
|
*
|
|
6
|
+
* @category Navigation
|
|
7
|
+
*
|
|
6
8
|
* @slot - Optional icon element displayed before the link text.
|
|
7
9
|
*
|
|
10
|
+
* @accessibility
|
|
11
|
+
* - Rendered with `role="listitem"`.
|
|
12
|
+
* - The icon slot's wrapper carries `aria-hidden="true"`, so whatever is slotted there (an
|
|
13
|
+
* SVG, an icon-font element, an `<img>`) is already hidden from assistive tech — no need to
|
|
14
|
+
* add `aria-hidden` to it yourself.
|
|
15
|
+
*
|
|
8
16
|
* @usageNotes
|
|
9
17
|
* - Set `active` on the item that corresponds to the current route.
|
|
10
18
|
* - Clicking an item emits `wmNavigationItemClicked`, which the parent wm-navigation listens
|
|
11
19
|
* to in order to close the collapsible menu on narrow viewports.
|
|
20
|
+
* - Preferred, for an icon not already in Ripple's own set: an inline SVG referencing a shared
|
|
21
|
+
* sprite — `<svg width="1.5rem" height="1.5rem"><use href="...#icon-id"
|
|
22
|
+
* fill="currentColor"></use></svg>`. 24px (`1.5rem`) is the standard icon size for this slot.
|
|
23
|
+
* `fill="currentColor"` must be set explicitly — omitting it renders a fixed black icon
|
|
24
|
+
* instead of the active/hover color, since SVG's own default fill is black, not the
|
|
25
|
+
* inherited text color.
|
|
26
|
+
* - Ripple's bundled icon set is also available for icons it already includes (the
|
|
27
|
+
* `svg-icon svg-<name>` classes in Ripple's global styles). Avoid an icon font (e.g.
|
|
28
|
+
* Material Design Icons) or an `<img>` — neither can pick up the active/hover recoloring
|
|
29
|
+
* the way an SVG using `fill="currentColor"` can.
|
|
12
30
|
*
|
|
13
31
|
* @example {html} Basic navigation item
|
|
14
32
|
* <wm-navigation-item href="/dashboard" text="Dashboard" active></wm-navigation-item>
|
|
@@ -18,12 +36,16 @@ import { h, Host } from "@stencil/core";
|
|
|
18
36
|
*
|
|
19
37
|
* @example {html} Navigation item with icon
|
|
20
38
|
* <wm-navigation-item href="/reports" text="Reports">
|
|
21
|
-
* <
|
|
39
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
40
|
+
* <use href="/images/icons.svg#chart" fill="currentColor"></use>
|
|
41
|
+
* </svg>
|
|
22
42
|
* </wm-navigation-item>
|
|
23
43
|
*
|
|
24
44
|
* @example {react} Navigation item with icon
|
|
25
45
|
* <WmNavigationItem href="/reports" text="Reports">
|
|
26
|
-
* <
|
|
46
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
47
|
+
* <use href="/images/icons.svg#chart" fill="currentColor" />
|
|
48
|
+
* </svg>
|
|
27
49
|
* </WmNavigationItem>
|
|
28
50
|
*/
|
|
29
51
|
export class NavigationItem {
|
|
@@ -33,7 +55,7 @@ export class NavigationItem {
|
|
|
33
55
|
this.active = undefined;
|
|
34
56
|
}
|
|
35
57
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: 'bbe3c0a165b8d7d4bf036e5a80b23eb11446b90e', role: "listitem" }, h("a", { key: '7f4ef86559f368dca39bd7a72ed05daafb539648', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '8ae1aae920abe64829e87f2a107f1bf3eb752e50', class: "icon", "aria-hidden": "true" }, h("slot", { key: '1da830a8aae16100d5c99b5bfe7e80086f8a7baa' })), h("div", { key: '876286ffd8f555d840538a088051faeede3882ae', class: "text" }, this.text))));
|
|
37
59
|
}
|
|
38
60
|
static get is() { return "wm-navigation-item"; }
|
|
39
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,15 +26,15 @@ import { globalMessages } from "../../global/intl";
|
|
|
26
26
|
*
|
|
27
27
|
* @usageNotes
|
|
28
28
|
* - Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates
|
|
29
|
-
* with wm-navigation via the `wmNavigationHamburgerClicked` window event
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
* -
|
|
37
|
-
*
|
|
29
|
+
* with wm-navigation via the `wmNavigationHamburgerClicked` window event, so it does not need
|
|
30
|
+
* to be a DOM sibling of wm-navigation — place it in the page header instead, at the leading
|
|
31
|
+
* edge before the logo. It already reserves its own touch-target padding on narrower
|
|
32
|
+
* viewports, so don't add further leading margin or padding on the host for that — but the
|
|
33
|
+
* gap between it and the logo is still the header's own layout to provide; the hamburger's
|
|
34
|
+
* box reserves no trailing space of its own (see wm-navigation-hamburger's docs).
|
|
35
|
+
* - `open` can be set initially to `true` to start the navigation expanded.
|
|
36
|
+
* - wm-navigation-item accepts an icon in its default slot — see its own docs for the
|
|
37
|
+
* preferred SVG-sprite pattern.
|
|
38
38
|
*
|
|
39
39
|
* Required host setup:
|
|
40
40
|
* - Never set `display: none` or `visibility: hidden` on the host element or its wrapper
|
|
@@ -51,10 +51,9 @@ import { globalMessages } from "../../global/intl";
|
|
|
51
51
|
* navigation match whatever height the wrapper happens to end up. Give an ancestor
|
|
52
52
|
* (typically an app-shell wrapping the header and this wrapper) a fixed height such as
|
|
53
53
|
* `100vh`, make the wrapper itself `flex: 1; min-height: 0` within that shell, and give the
|
|
54
|
-
* actual content pane its own `overflow-y: auto; min-height: 0`. Skip the
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* constraint to scroll internally rather than just growing taller.
|
|
54
|
+
* actual content pane its own `overflow-y: auto; min-height: 0`. Skip it and the wrapper just
|
|
55
|
+
* grows to fit its tallest child, the whole document scrolls as one long page, and this
|
|
56
|
+
* component's own item list loses its independent scroll too.
|
|
58
57
|
*
|
|
59
58
|
* @example {html} Basic navigation
|
|
60
59
|
* <style>
|
|
@@ -65,6 +64,9 @@ import { globalMessages } from "../../global/intl";
|
|
|
65
64
|
* }
|
|
66
65
|
* .app-header {
|
|
67
66
|
* flex: 0 0 auto;
|
|
67
|
+
* display: flex;
|
|
68
|
+
* align-items: center;
|
|
69
|
+
* padding-inline-end: 1.5rem;
|
|
68
70
|
* }
|
|
69
71
|
* .app-main {
|
|
70
72
|
* display: flex;
|
|
@@ -84,8 +86,16 @@ import { globalMessages } from "../../global/intl";
|
|
|
84
86
|
* </header>
|
|
85
87
|
* <main class="app-main">
|
|
86
88
|
* <wm-navigation id="main-nav">
|
|
87
|
-
* <wm-navigation-item href="/dashboard" text="Dashboard" active
|
|
88
|
-
*
|
|
89
|
+
* <wm-navigation-item href="/dashboard" text="Dashboard" active>
|
|
90
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
91
|
+
* <use href="/images/icons.svg#dashboard" fill="currentColor"></use>
|
|
92
|
+
* </svg>
|
|
93
|
+
* </wm-navigation-item>
|
|
94
|
+
* <wm-navigation-item href="/reports" text="Reports">
|
|
95
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
96
|
+
* <use href="/images/icons.svg#chart" fill="currentColor"></use>
|
|
97
|
+
* </svg>
|
|
98
|
+
* </wm-navigation-item>
|
|
89
99
|
* </wm-navigation>
|
|
90
100
|
* <div class="app-main__content">Page content</div>
|
|
91
101
|
* </main>
|
|
@@ -93,7 +103,10 @@ import { globalMessages } from "../../global/intl";
|
|
|
93
103
|
*
|
|
94
104
|
* @example {react} Basic navigation
|
|
95
105
|
* <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
|
96
|
-
* <header
|
|
106
|
+
* <header
|
|
107
|
+
* className="app-header"
|
|
108
|
+
* style={{ display: "flex", alignItems: "center", paddingInlineEnd: "1.5rem" }}
|
|
109
|
+
* >
|
|
97
110
|
* <WmNavigationHamburger navId="main-nav" />
|
|
98
111
|
* <a className="app-header__logo" href="/">App Name</a>
|
|
99
112
|
* </header>
|
|
@@ -102,8 +115,16 @@ import { globalMessages } from "../../global/intl";
|
|
|
102
115
|
* style={{ display: "flex", alignItems: "stretch", flex: "1 1 auto", minHeight: 0 }}
|
|
103
116
|
* >
|
|
104
117
|
* <WmNavigation id="main-nav">
|
|
105
|
-
* <WmNavigationItem href="/dashboard" text="Dashboard" active={true}
|
|
106
|
-
*
|
|
118
|
+
* <WmNavigationItem href="/dashboard" text="Dashboard" active={true}>
|
|
119
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
120
|
+
* <use href="/images/icons.svg#dashboard" fill="currentColor" />
|
|
121
|
+
* </svg>
|
|
122
|
+
* </WmNavigationItem>
|
|
123
|
+
* <WmNavigationItem href="/reports" text="Reports">
|
|
124
|
+
* <svg width="1.5rem" height="1.5rem">
|
|
125
|
+
* <use href="/images/icons.svg#chart" fill="currentColor" />
|
|
126
|
+
* </svg>
|
|
127
|
+
* </WmNavigationItem>
|
|
107
128
|
* </WmNavigation>
|
|
108
129
|
* <div className="app-main__content" style={{ overflowY: "auto", minHeight: 0 }}>
|
|
109
130
|
* Page content
|
|
@@ -216,9 +237,9 @@ export class Navigation {
|
|
|
216
237
|
} }));
|
|
217
238
|
}
|
|
218
239
|
render() {
|
|
219
|
-
return (h(Host, { key: '
|
|
240
|
+
return (h(Host, { key: 'a15b95ca5769e6a996542f3fb0f1edf8928ed4ea', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'add1bb58939e3d076c7890aa1cb3efd932f977dc', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '98491d3d97807417a13b677894ee452e89e9cea8', class: "tray" }, h("div", { key: 'cf058b8b33a07598f19318977e26e652304faf4f', class: "toggle-wrapper" }, h("wm-button", { key: '7e8d936e3fdc9c718bf9442b6840464a6caddcab', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
|
|
220
241
|
this.open = !this.open;
|
|
221
|
-
} })), h("ul", { key: '
|
|
242
|
+
} })), h("ul", { key: 'e90219ba02e6a2330095e12ee4793ac82100fc5d', class: "navlist" }, h("slot", { key: '83e672cf048480abbef358f8249cb1622e2fad3c' }))), this.isCollapsible && (h("div", { key: '3c16362bebb241d693aa6aa8fd7226a34039901d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
|
|
222
243
|
}
|
|
223
244
|
static get is() { return "wm-navigation"; }
|
|
224
245
|
static get encapsulation() { return "shadow"; }
|
|
@@ -434,7 +434,6 @@ export class TagInput {
|
|
|
434
434
|
const addedNodes = Array.from(record.addedNodes);
|
|
435
435
|
if (addedNodes.length > 0) {
|
|
436
436
|
this.assignOptionIds();
|
|
437
|
-
// reassign rather than push: Stencil only re-renders on a state reference change
|
|
438
437
|
const newNodes = addedNodes.filter((n) => !this.tagsList.includes(n));
|
|
439
438
|
if (newNodes.length > 0) {
|
|
440
439
|
this.tagsList = [...this.tagsList, ...newNodes];
|
|
@@ -1077,10 +1076,10 @@ export class TagInput {
|
|
|
1077
1076
|
}
|
|
1078
1077
|
}
|
|
1079
1078
|
render() {
|
|
1080
|
-
return (h("div", { key: '
|
|
1079
|
+
return (h("div", { key: 'dea9ac53c8001429751e759746085ebb7f9bcc98', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd3956d7ac5042bf4e0629173cebe2e46ea7e9a3b', class: "label-wrapper" }, h("label", { key: '83e407057a18e0e6d21af52a35e7c57af40bf147', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '70d92671c54ad690834de1f6873aec20e5f4fd80', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '79dba949ca7f4e73d8275e6e8c07e7737c4cef43', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '24179f798549b936c2e2a90b43c377d5c7df155b', class: "upper-row" }, h("div", { key: '799d830b6ff63dec947f776cdcebce017f83f9bb', class: "svg-icon svg-search" }), h("div", { key: 'eb31ec918a327e87176db9bdda33e160eb40cf29', class: `tags-and-input-wrapper` }, h("ul", { key: 'cb5a56da3f08bac148853ec9e6bbf0f755cc8643', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
|
|
1081
1080
|
this.focusedTagIndex = undefined;
|
|
1082
1081
|
this.handleBlur(ev);
|
|
1083
|
-
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '
|
|
1082
|
+
}, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'eb39838bb6fa30ed96864d605e58d8d28291bb09', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '988f231710b140862bf4ff637611b3e7172e7e80', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '6826b1f0620e14e7e921314085523cf1c3623164', id: "info", class: "info-text" }, this.info)), h("div", { key: '28632b831feb09801e7036f7b458303a5daee980', id: "error" }, this.errorMessage), h("div", { key: '339b33e97121b8abb5115e516e61a2fa56e4a34e', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
|
|
1084
1083
|
}
|
|
1085
1084
|
static get is() { return "wm-tag-input"; }
|
|
1086
1085
|
static get encapsulation() { return "shadow"; }
|
package/dist/docs/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-09-
|
|
2
|
+
"timestamp": "2026-09-15T19:20:00",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.21.0",
|
|
@@ -7683,15 +7683,15 @@
|
|
|
7683
7683
|
},
|
|
7684
7684
|
{
|
|
7685
7685
|
"name": "usageNotes",
|
|
7686
|
-
"text": "- Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates\n with wm-navigation via the `wmNavigationHamburgerClicked` window event
|
|
7686
|
+
"text": "- Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates\n with wm-navigation via the `wmNavigationHamburgerClicked` window event, so it does not need\n to be a DOM sibling of wm-navigation — place it in the page header instead, at the leading\n edge before the logo. It already reserves its own touch-target padding on narrower\n viewports, so don't add further leading margin or padding on the host for that — but the\n gap between it and the logo is still the header's own layout to provide; the hamburger's\n box reserves no trailing space of its own (see wm-navigation-hamburger's docs).\n- `open` can be set initially to `true` to start the navigation expanded.\n- wm-navigation-item accepts an icon in its default slot — see its own docs for the\n preferred SVG-sprite pattern.\n\nRequired host setup:\n- Never set `display: none` or `visibility: hidden` on the host element or its wrapper\n container. The component manages its own visibility internally, and hiding the container\n from the outside blocks the overlay from appearing when the hamburger is triggered.\n- Give the element that wraps wm-navigation and the page content (commonly `<main>`) a flex\n or grid layout, and leave cross-axis alignment at its default (`align-items: stretch`,\n the default for both). This component's elevated surface, including its box-shadow, is\n sized to the host element's own height — overriding the default (e.g. `align-items:\n flex-start` or `center`) shrinks the host down to its item list's height, so the shadow\n clips partway down the page instead of running full height.\n- That flex/grid wrapper also needs a bounded height for real independent scrolling —\n `display: flex; align-items: stretch` alone does not create one, it only makes the\n navigation match whatever height the wrapper happens to end up. Give an ancestor\n (typically an app-shell wrapping the header and this wrapper) a fixed height such as\n `100vh`, make the wrapper itself `flex: 1; min-height: 0` within that shell, and give the\n actual content pane its own `overflow-y: auto; min-height: 0`. Skip it and the wrapper just\n grows to fit its tallest child, the whole document scrolls as one long page, and this\n component's own item list loses its independent scroll too."
|
|
7687
7687
|
},
|
|
7688
7688
|
{
|
|
7689
7689
|
"name": "example",
|
|
7690
|
-
"text": "{html} Basic navigation\n<style>\n.app-shell {\ndisplay: flex;\nflex-direction: column;\nheight: 100vh;\n}\n.app-header {\nflex: 0 0 auto;\n}\n.app-main {\ndisplay: flex;\nalign-items: stretch;\nflex: 1 1 auto;\nmin-height: 0;\n}\n.app-main__content {\noverflow-y: auto;\nmin-height: 0;\n}\n</style>\n<div class=\"app-shell\">\n<header class=\"app-header\">\n<wm-navigation-hamburger nav-id=\"main-nav\"></wm-navigation-hamburger>\n<a class=\"app-header__logo\" href=\"/\">App Name</a>\n</header>\n<main class=\"app-main\">\n<wm-navigation id=\"main-nav\">\n<wm-navigation-item href=\"/dashboard\" text=\"Dashboard\" active></wm-navigation-item>\n<wm-navigation-item href=\"/reports\" text=\"Reports\"></wm-navigation-item>\n</wm-navigation>\n<div class=\"app-main__content\">Page content</div>\n</main>\n</div>"
|
|
7690
|
+
"text": "{html} Basic navigation\n<style>\n.app-shell {\ndisplay: flex;\nflex-direction: column;\nheight: 100vh;\n}\n.app-header {\nflex: 0 0 auto;\ndisplay: flex;\nalign-items: center;\npadding-inline-end: 1.5rem;\n}\n.app-main {\ndisplay: flex;\nalign-items: stretch;\nflex: 1 1 auto;\nmin-height: 0;\n}\n.app-main__content {\noverflow-y: auto;\nmin-height: 0;\n}\n</style>\n<div class=\"app-shell\">\n<header class=\"app-header\">\n<wm-navigation-hamburger nav-id=\"main-nav\"></wm-navigation-hamburger>\n<a class=\"app-header__logo\" href=\"/\">App Name</a>\n</header>\n<main class=\"app-main\">\n<wm-navigation id=\"main-nav\">\n<wm-navigation-item href=\"/dashboard\" text=\"Dashboard\" active>\n<svg width=\"1.5rem\" height=\"1.5rem\">\n <use href=\"/images/icons.svg#dashboard\" fill=\"currentColor\"></use>\n</svg>\n</wm-navigation-item>\n<wm-navigation-item href=\"/reports\" text=\"Reports\">\n<svg width=\"1.5rem\" height=\"1.5rem\">\n <use href=\"/images/icons.svg#chart\" fill=\"currentColor\"></use>\n</svg>\n</wm-navigation-item>\n</wm-navigation>\n<div class=\"app-main__content\">Page content</div>\n</main>\n</div>"
|
|
7691
7691
|
},
|
|
7692
7692
|
{
|
|
7693
7693
|
"name": "example",
|
|
7694
|
-
"text": "{react} Basic navigation\n<div style={{ display: \"flex\", flexDirection: \"column\", height: \"100vh\" }}>\n<header
|
|
7694
|
+
"text": "{react} Basic navigation\n<div style={{ display: \"flex\", flexDirection: \"column\", height: \"100vh\" }}>\n<header\nclassName=\"app-header\"\nstyle={{ display: \"flex\", alignItems: \"center\", paddingInlineEnd: \"1.5rem\" }}\n>\n<WmNavigationHamburger navId=\"main-nav\" />\n<a className=\"app-header__logo\" href=\"/\">App Name</a>\n</header>\n<main\nclassName=\"app-main\"\nstyle={{ display: \"flex\", alignItems: \"stretch\", flex: \"1 1 auto\", minHeight: 0 }}\n>\n<WmNavigation id=\"main-nav\">\n<WmNavigationItem href=\"/dashboard\" text=\"Dashboard\" active={true}>\n<svg width=\"1.5rem\" height=\"1.5rem\">\n <use href=\"/images/icons.svg#dashboard\" fill=\"currentColor\" />\n</svg>\n</WmNavigationItem>\n<WmNavigationItem href=\"/reports\" text=\"Reports\">\n<svg width=\"1.5rem\" height=\"1.5rem\">\n <use href=\"/images/icons.svg#chart\" fill=\"currentColor\" />\n</svg>\n</WmNavigationItem>\n</WmNavigation>\n<div className=\"app-main__content\" style={{ overflowY: \"auto\", minHeight: 0 }}>\nPage content\n</div>\n</main>\n</div>"
|
|
7695
7695
|
},
|
|
7696
7696
|
{
|
|
7697
7697
|
"name": "requiredSetup",
|
|
@@ -7816,7 +7816,7 @@
|
|
|
7816
7816
|
},
|
|
7817
7817
|
{
|
|
7818
7818
|
"name": "usageNotes",
|
|
7819
|
-
"text": "- `nav-id` is required; it must match the `id` on the associated wm-navigation element.\n- Renders nothing and takes no layout space on viewports 1024px and wider (its internal\n button is hidden there). On narrower viewports the host is exactly a 60x60px box with the\n icon centered inside; that sizing already satisfies touch-target minimums, so don't add\n further leading margin or padding on the host for that — doing so stacks on top of the\n component's own and opens a visible gap at the header's outer edge. The box reserves no\n space on its trailing side, though — spacing between it and the next header element\n (typically a logo) is still up to the app's own header layout to provide.\n- The example below only illustrates the `nav-id`/`id` contract. For the full page\n placement — header, logo, and the `<main>` sidebar layout — see wm-navigation's\n \"Basic navigation\" example."
|
|
7819
|
+
"text": "- `nav-id` is required; it must match the `id` on the associated wm-navigation element.\n- Renders nothing and takes no layout space on viewports 1024px and wider (its internal\n button is hidden there). On narrower viewports the host is exactly a 60x60px box with the\n icon centered inside; that sizing already satisfies touch-target minimums, so don't add\n further leading margin or padding on the host for that — doing so stacks on top of the\n component's own and opens a visible gap at the header's outer edge. The box reserves no\n space on its trailing side, though — spacing between it and the next header element\n (typically a logo) is still up to the app's own header layout to provide.\n- This component must be the header's true first child at its true leading edge, so don't\n give the header uniform padding (or `padding-inline-start`) for breathing room — that\n inset falls on this component the same way padding on its own host would. If the header\n needs padding for its other content, use `padding-inline-end` instead.\n- The example below only illustrates the `nav-id`/`id` contract. For the full page\n placement — header, logo, and the `<main>` sidebar layout — see wm-navigation's\n \"Basic navigation\" example."
|
|
7820
7820
|
},
|
|
7821
7821
|
{
|
|
7822
7822
|
"name": "example",
|
|
@@ -7921,13 +7921,21 @@
|
|
|
7921
7921
|
"tag": "wm-navigation-item",
|
|
7922
7922
|
"docs": "A single navigation link inside a wm-navigation. Renders as an anchor element with an\noptional icon slot. Always used as a direct child of wm-navigation.",
|
|
7923
7923
|
"docsTags": [
|
|
7924
|
+
{
|
|
7925
|
+
"name": "category",
|
|
7926
|
+
"text": "Navigation"
|
|
7927
|
+
},
|
|
7924
7928
|
{
|
|
7925
7929
|
"name": "slot",
|
|
7926
7930
|
"text": "- Optional icon element displayed before the link text."
|
|
7927
7931
|
},
|
|
7932
|
+
{
|
|
7933
|
+
"name": "accessibility",
|
|
7934
|
+
"text": "- Rendered with `role=\"listitem\"`.\n- The icon slot's wrapper carries `aria-hidden=\"true\"`, so whatever is slotted there (an\n SVG, an icon-font element, an `<img>`) is already hidden from assistive tech — no need to\n add `aria-hidden` to it yourself."
|
|
7935
|
+
},
|
|
7928
7936
|
{
|
|
7929
7937
|
"name": "usageNotes",
|
|
7930
|
-
"text": "- Set `active` on the item that corresponds to the current route.\n- Clicking an item emits `wmNavigationItemClicked`, which the parent wm-navigation listens\n to in order to close the collapsible menu on narrow viewports."
|
|
7938
|
+
"text": "- Set `active` on the item that corresponds to the current route.\n- Clicking an item emits `wmNavigationItemClicked`, which the parent wm-navigation listens\n to in order to close the collapsible menu on narrow viewports.\n- Preferred, for an icon not already in Ripple's own set: an inline SVG referencing a shared\n sprite — `<svg width=\"1.5rem\" height=\"1.5rem\"><use href=\"...#icon-id\"\n fill=\"currentColor\"></use></svg>`. 24px (`1.5rem`) is the standard icon size for this slot.\n `fill=\"currentColor\"` must be set explicitly — omitting it renders a fixed black icon\n instead of the active/hover color, since SVG's own default fill is black, not the\n inherited text color.\n- Ripple's bundled icon set is also available for icons it already includes (the\n `svg-icon svg-<name>` classes in Ripple's global styles). Avoid an icon font (e.g.\n Material Design Icons) or an `<img>` — neither can pick up the active/hover recoloring\n the way an SVG using `fill=\"currentColor\"` can."
|
|
7931
7939
|
},
|
|
7932
7940
|
{
|
|
7933
7941
|
"name": "example",
|
|
@@ -7939,11 +7947,11 @@
|
|
|
7939
7947
|
},
|
|
7940
7948
|
{
|
|
7941
7949
|
"name": "example",
|
|
7942
|
-
"text": "{html} Navigation item with icon\n<wm-navigation-item href=\"/reports\" text=\"Reports\">\n<
|
|
7950
|
+
"text": "{html} Navigation item with icon\n<wm-navigation-item href=\"/reports\" text=\"Reports\">\n<svg width=\"1.5rem\" height=\"1.5rem\">\n<use href=\"/images/icons.svg#chart\" fill=\"currentColor\"></use>\n</svg>\n</wm-navigation-item>"
|
|
7943
7951
|
},
|
|
7944
7952
|
{
|
|
7945
7953
|
"name": "example",
|
|
7946
|
-
"text": "{react} Navigation item with icon\n<WmNavigationItem href=\"/reports\" text=\"Reports\">\n<
|
|
7954
|
+
"text": "{react} Navigation item with icon\n<WmNavigationItem href=\"/reports\" text=\"Reports\">\n<svg width=\"1.5rem\" height=\"1.5rem\">\n<use href=\"/images/icons.svg#chart\" fill=\"currentColor\" />\n</svg>\n</WmNavigationItem>"
|
|
7947
7955
|
}
|
|
7948
7956
|
],
|
|
7949
7957
|
"usage": {},
|
package/dist/docs/skill/index.md
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
| **Uploader** | `wm-uploader` | `wm-uploader.md` | Form Inputs |
|
|
29
29
|
| **Navigation** | `wm-navigation` | `wm-navigation.md` | Navigation |
|
|
30
30
|
| **Navigation Hamburger** | `wm-navigation-hamburger` | `wm-navigation-hamburger.md` | Navigation |
|
|
31
|
+
| **Navigation Item** | `wm-navigation-item` | `wm-navigation-item.md` | Navigation |
|
|
31
32
|
| **Navigator** | `wm-navigator` | `wm-navigator.md` | Navigation |
|
|
32
33
|
| **Pagination** | `wm-pagination` | `wm-pagination.md` | Navigation |
|
|
33
34
|
| **Tabs** | `wm-tab-list` | `wm-tab-list.md` | Navigation |
|
|
@@ -29,6 +29,10 @@ _None documented_
|
|
|
29
29
|
component's own and opens a visible gap at the header's outer edge. The box reserves no
|
|
30
30
|
space on its trailing side, though -- spacing between it and the next header element
|
|
31
31
|
(typically a logo) is still up to the app's own header layout to provide.
|
|
32
|
+
- This component must be the header's true first child at its true leading edge, so don't
|
|
33
|
+
give the header uniform padding (or `padding-inline-start`) for breathing room -- that
|
|
34
|
+
inset falls on this component the same way padding on its own host would. If the header
|
|
35
|
+
needs padding for its other content, use `padding-inline-end` instead.
|
|
32
36
|
- The example below only illustrates the `nav-id`/`id` contract. For the full page
|
|
33
37
|
placement -- header, logo, and the `<main>` sidebar layout -- see wm-navigation's
|
|
34
38
|
"Basic navigation" example.
|
|
@@ -22,6 +22,16 @@ _None documented_
|
|
|
22
22
|
- Set `active` on the item that corresponds to the current route.
|
|
23
23
|
- Clicking an item emits `wmNavigationItemClicked`, which the parent wm-navigation listens
|
|
24
24
|
to in order to close the collapsible menu on narrow viewports.
|
|
25
|
+
- Preferred, for an icon not already in Ripple's own set: an inline SVG referencing a shared
|
|
26
|
+
sprite -- `<svg width="1.5rem" height="1.5rem"><use href="...#icon-id"
|
|
27
|
+
fill="currentColor"></use></svg>`. 24px (`1.5rem`) is the standard icon size for this slot.
|
|
28
|
+
`fill="currentColor"` must be set explicitly -- omitting it renders a fixed black icon
|
|
29
|
+
instead of the active/hover color, since SVG's own default fill is black, not the
|
|
30
|
+
inherited text color.
|
|
31
|
+
- Ripple's bundled icon set is also available for icons it already includes (the
|
|
32
|
+
`svg-icon svg-<name>` classes in Ripple's global styles). Avoid an icon font (e.g.
|
|
33
|
+
Material Design Icons) or an `<img>` -- neither can pick up the active/hover recoloring
|
|
34
|
+
the way an SVG using `fill="currentColor"` can.
|
|
25
35
|
|
|
26
36
|
**Props:**
|
|
27
37
|
- `active` -- Marks this item as the currently active route, applying active styling.
|
|
@@ -37,9 +47,10 @@ close the collapsible menu on narrow viewports.
|
|
|
37
47
|
|
|
38
48
|
**Accessibility:**
|
|
39
49
|
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
|
|
50
|
+
- Rendered with `role="listitem"`.
|
|
51
|
+
- The icon slot's wrapper carries `aria-hidden="true"`, so whatever is slotted there (an
|
|
52
|
+
SVG, an icon-font element, an `<img>`) is already hidden from assistive tech -- no need to
|
|
53
|
+
add `aria-hidden` to it yourself.
|
|
43
54
|
|
|
44
55
|
**Related components:**
|
|
45
56
|
|
|
@@ -65,7 +76,9 @@ _Navigation item with icon_
|
|
|
65
76
|
|
|
66
77
|
```html
|
|
67
78
|
<wm-navigation-item href="/reports" text="Reports">
|
|
68
|
-
<
|
|
79
|
+
<svg width="1.5rem" height="1.5rem">
|
|
80
|
+
<use href="/images/icons.svg#chart" fill="currentColor"></use>
|
|
81
|
+
</svg>
|
|
69
82
|
</wm-navigation-item>
|
|
70
83
|
```
|
|
71
84
|
|
|
@@ -73,6 +86,8 @@ _Navigation item with icon_
|
|
|
73
86
|
|
|
74
87
|
```react
|
|
75
88
|
<WmNavigationItem href="/reports" text="Reports">
|
|
76
|
-
<
|
|
89
|
+
<svg width="1.5rem" height="1.5rem">
|
|
90
|
+
<use href="/images/icons.svg#chart" fill="currentColor" />
|
|
91
|
+
</svg>
|
|
77
92
|
</WmNavigationItem>
|
|
78
93
|
```
|
|
@@ -23,15 +23,15 @@ _None documented_
|
|
|
23
23
|
**Usage notes:**
|
|
24
24
|
|
|
25
25
|
- Use `wm-navigation-hamburger` (a separate component) as the external toggle. It communicates
|
|
26
|
-
with wm-navigation via the `wmNavigationHamburgerClicked` window event
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
-
|
|
34
|
-
|
|
26
|
+
with wm-navigation via the `wmNavigationHamburgerClicked` window event, so it does not need
|
|
27
|
+
to be a DOM sibling of wm-navigation -- place it in the page header instead, at the leading
|
|
28
|
+
edge before the logo. It already reserves its own touch-target padding on narrower
|
|
29
|
+
viewports, so don't add further leading margin or padding on the host for that -- but the
|
|
30
|
+
gap between it and the logo is still the header's own layout to provide; the hamburger's
|
|
31
|
+
box reserves no trailing space of its own (see wm-navigation-hamburger's docs).
|
|
32
|
+
- `open` can be set initially to `true` to start the navigation expanded.
|
|
33
|
+
- wm-navigation-item accepts an icon in its default slot -- see its own docs for the
|
|
34
|
+
preferred SVG-sprite pattern.
|
|
35
35
|
|
|
36
36
|
Required host setup:
|
|
37
37
|
- Never set `display: none` or `visibility: hidden` on the host element or its wrapper
|
|
@@ -48,10 +48,9 @@ Required host setup:
|
|
|
48
48
|
navigation match whatever height the wrapper happens to end up. Give an ancestor
|
|
49
49
|
(typically an app-shell wrapping the header and this wrapper) a fixed height such as
|
|
50
50
|
`100vh`, make the wrapper itself `flex: 1; min-height: 0` within that shell, and give the
|
|
51
|
-
actual content pane its own `overflow-y: auto; min-height: 0`. Skip the
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
constraint to scroll internally rather than just growing taller.
|
|
51
|
+
actual content pane its own `overflow-y: auto; min-height: 0`. Skip it and the wrapper just
|
|
52
|
+
grows to fit its tallest child, the whole document scrolls as one long page, and this
|
|
53
|
+
component's own item list loses its independent scroll too.
|
|
55
54
|
|
|
56
55
|
**Props:**
|
|
57
56
|
- `open` -- Controls the open/closed state of the collapsible navigation. Has no effect
|
|
@@ -105,6 +104,9 @@ height: 100vh;
|
|
|
105
104
|
}
|
|
106
105
|
.app-header {
|
|
107
106
|
flex: 0 0 auto;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
padding-inline-end: 1.5rem;
|
|
108
110
|
}
|
|
109
111
|
.app-main {
|
|
110
112
|
display: flex;
|
|
@@ -124,8 +126,16 @@ min-height: 0;
|
|
|
124
126
|
</header>
|
|
125
127
|
<main class="app-main">
|
|
126
128
|
<wm-navigation id="main-nav">
|
|
127
|
-
<wm-navigation-item href="/dashboard" text="Dashboard" active
|
|
128
|
-
<
|
|
129
|
+
<wm-navigation-item href="/dashboard" text="Dashboard" active>
|
|
130
|
+
<svg width="1.5rem" height="1.5rem">
|
|
131
|
+
<use href="/images/icons.svg#dashboard" fill="currentColor"></use>
|
|
132
|
+
</svg>
|
|
133
|
+
</wm-navigation-item>
|
|
134
|
+
<wm-navigation-item href="/reports" text="Reports">
|
|
135
|
+
<svg width="1.5rem" height="1.5rem">
|
|
136
|
+
<use href="/images/icons.svg#chart" fill="currentColor"></use>
|
|
137
|
+
</svg>
|
|
138
|
+
</wm-navigation-item>
|
|
129
139
|
</wm-navigation>
|
|
130
140
|
<div class="app-main__content">Page content</div>
|
|
131
141
|
</main>
|
|
@@ -136,7 +146,10 @@ _Basic navigation_
|
|
|
136
146
|
|
|
137
147
|
```react
|
|
138
148
|
<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
|
139
|
-
<header
|
|
149
|
+
<header
|
|
150
|
+
className="app-header"
|
|
151
|
+
style={{ display: "flex", alignItems: "center", paddingInlineEnd: "1.5rem" }}
|
|
152
|
+
>
|
|
140
153
|
<WmNavigationHamburger navId="main-nav" />
|
|
141
154
|
<a className="app-header__logo" href="/">App Name</a>
|
|
142
155
|
</header>
|
|
@@ -145,8 +158,16 @@ className="app-main"
|
|
|
145
158
|
style={{ display: "flex", alignItems: "stretch", flex: "1 1 auto", minHeight: 0 }}
|
|
146
159
|
>
|
|
147
160
|
<WmNavigation id="main-nav">
|
|
148
|
-
<WmNavigationItem href="/dashboard" text="Dashboard" active={true}
|
|
149
|
-
<
|
|
161
|
+
<WmNavigationItem href="/dashboard" text="Dashboard" active={true}>
|
|
162
|
+
<svg width="1.5rem" height="1.5rem">
|
|
163
|
+
<use href="/images/icons.svg#dashboard" fill="currentColor" />
|
|
164
|
+
</svg>
|
|
165
|
+
</WmNavigationItem>
|
|
166
|
+
<WmNavigationItem href="/reports" text="Reports">
|
|
167
|
+
<svg width="1.5rem" height="1.5rem">
|
|
168
|
+
<use href="/images/icons.svg#chart" fill="currentColor" />
|
|
169
|
+
</svg>
|
|
170
|
+
</WmNavigationItem>
|
|
150
171
|
</WmNavigation>
|
|
151
172
|
<div className="app-main__content" style={{ overflowY: "auto", minHeight: 0 }}>
|
|
152
173
|
Page content
|