From 7329d8be17eb2d16ad4a4b08c1c0599277c7be5e Mon Sep 17 00:00:00 2001 From: Thom Date: Sat, 6 Jun 2026 17:28:10 -0700 Subject: [PATCH 1/7] feat: navbar wrapper and navlinks --- examples/playground.html | 20 +++++-- .../core-css/src/components/navigation.css | 56 +++++++++++++++++++ packages/core-css/src/index.css | 1 + 3 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 packages/core-css/src/components/navigation.css diff --git a/examples/playground.html b/examples/playground.html index 98bef6d..be35f65 100644 --- a/examples/playground.html +++ b/examples/playground.html @@ -179,14 +179,22 @@ + +
-
-
Component system · V0.x
-

- theme [IRON] components [22] -

-
diff --git a/packages/core-css/src/components/navigation.css b/packages/core-css/src/components/navigation.css new file mode 100644 index 0000000..4553659 --- /dev/null +++ b/packages/core-css/src/components/navigation.css @@ -0,0 +1,56 @@ +.elum-navbar { + align-items: center; + justify-content: space-between; + display: flex; + gap: 0; + overflow-x: auto; + overflow-y: hidden; + border-bottom: var(--elum-border-width) solid var(--elum-color-border); + padding: var(--elum-space-3) var(--elum-space-1); + margin: 0 2rem; + margin-bottom: 1.5rem; + position: sticky; + top: 0; + background-color: var(--elum-color-bg); + z-index: 999; +} + +.elum-navlinks { + align-items: center; + display: flex; + gap: 0; +} + +.elum-navlink { + color: var(--elum-card-title-color, var(--elum-color-accent)); + text-decoration: none; + font-size: var(--elum-card-title-size, var(--elum-text-sm)); + font-weight: 700; + letter-spacing: 0.08em; + line-height: var(--elum-lh-tight); + text-transform: uppercase; +} + +.elum-navlink:not(:last-child)::after { + display: inline; + color: var(--elum-color-muted); + content: "|"; + margin: 0 var(--elum-space-2); + font-size: 125%; + font-weight: 500; + line-height: 0; + vertical-align: middle; +} + +.elum-navlink:hover { + color: var(--elum-color-fg) +} + +.elum-navlink:focus-visible { + outline: var(--elum-color-focus) solid var(--elum-border-width); + outline-offset: var(--elum-border-width); +} + +.elum-navlink[aria-current="active"] { + +} diff --git a/packages/core-css/src/index.css b/packages/core-css/src/index.css index fccdb20..10f19b1 100644 --- a/packages/core-css/src/index.css +++ b/packages/core-css/src/index.css @@ -9,3 +9,4 @@ @import "./components/tabs.css"; @import "./components/toolbar.css"; @import "./components/query.css"; +@import "./components/navigation.css"; From 9b3e12e8d6dc39c04a7945a1d95dfb7d27a9f2de Mon Sep 17 00:00:00 2001 From: Thom Date: Sun, 7 Jun 2026 15:50:15 -0700 Subject: [PATCH 2/7] refactor: padding, link tweaks --- examples/playground.html | 17 +++++++++++------ packages/core-css/src/components/navigation.css | 17 ++++++++--------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/examples/playground.html b/examples/playground.html index be35f65..1fac86e 100644 --- a/examples/playground.html +++ b/examples/playground.html @@ -180,21 +180,26 @@
+
+
Component system · V0.x
+

+ theme [IRON] components [22] +

+
diff --git a/packages/core-css/src/components/navigation.css b/packages/core-css/src/components/navigation.css index 4553659..ac54896 100644 --- a/packages/core-css/src/components/navigation.css +++ b/packages/core-css/src/components/navigation.css @@ -6,8 +6,7 @@ overflow-x: auto; overflow-y: hidden; border-bottom: var(--elum-border-width) solid var(--elum-color-border); - padding: var(--elum-space-3) var(--elum-space-1); - margin: 0 2rem; + padding: var(--elum-space-3) var(--elum-space-4); margin-bottom: 1.5rem; position: sticky; top: 0; @@ -22,6 +21,8 @@ } .elum-navlink { + display: inline-flex; + align-items: center; color: var(--elum-card-title-color, var(--elum-color-accent)); text-decoration: none; font-size: var(--elum-card-title-size, var(--elum-text-sm)); @@ -35,22 +36,20 @@ display: inline; color: var(--elum-color-muted); content: "|"; - margin: 0 var(--elum-space-2); - font-size: 125%; + margin: 0 var(--elum-space-1); font-weight: 500; line-height: 0; - vertical-align: middle; } .elum-navlink:hover { - color: var(--elum-color-fg) + color: var(--elum-color-fg); } .elum-navlink:focus-visible { outline: var(--elum-color-focus) solid var(--elum-border-width); - outline-offset: var(--elum-border-width); + outline-offset: calc(var(--elum-border-width) * 2); } -.elum-navlink[aria-current="active"] { - +.elum-navlink[aria-current="page"] { + color: var(--elum-color-fg); } From eac3e38628f2afe34dd97a855fe5213639f65ba4 Mon Sep 17 00:00:00 2001 From: Thom Date: Sun, 7 Jun 2026 17:32:21 -0700 Subject: [PATCH 3/7] refactor: repurpose tabs as in-page tabset --- examples/playground.html | 94 +++++++++++++++++----- packages/core-css/src/components/tabs.css | 6 +- packages/core-patterns/snippets/index.html | 12 ++- tests/playground.test.mjs | 11 ++- 4 files changed, 92 insertions(+), 31 deletions(-) diff --git a/examples/playground.html b/examples/playground.html index 1fac86e..9e12682 100644 --- a/examples/playground.html +++ b/examples/playground.html @@ -393,19 +393,21 @@

Telemetry

-

Navigation Tabs

+

Tabs

-

Page links with native current-page state.

+

Switch between views on a page

- +
+ + +
- +
+ Incident content here. +
+
@@ -556,28 +558,76 @@

State Matrix

diff --git a/packages/core-css/src/components/tabs.css b/packages/core-css/src/components/tabs.css index 89dbcfe..248f43b 100644 --- a/packages/core-css/src/components/tabs.css +++ b/packages/core-css/src/components/tabs.css @@ -13,8 +13,12 @@ } .elum-tab { + appearance: none; + background: transparent; + border: 0; border-bottom: var(--elum-border-width) solid var(--elum-color-border); color: var(--elum-color-muted); + cursor: pointer; display: inline-flex; padding: var(--elum-space-1) var(--elum-space-2); text-decoration: none; @@ -29,7 +33,7 @@ outline-offset: calc(var(--elum-border-width) * -1); } -.elum-tab[aria-current="page"] { +.elum-tab[aria-selected="true"] { background: var(--elum-color-bg); border: var(--elum-border-width) solid var(--elum-color-border); border-bottom: 0; diff --git a/packages/core-patterns/snippets/index.html b/packages/core-patterns/snippets/index.html index d2f8e1a..723bf57 100644 --- a/packages/core-patterns/snippets/index.html +++ b/packages/core-patterns/snippets/index.html @@ -180,10 +180,14 @@

Card Title

- + +
+ + +
+ +
Incident content here.
+
diff --git a/tests/playground.test.mjs b/tests/playground.test.mjs index 181ae44..06b405f 100644 --- a/tests/playground.test.mjs +++ b/tests/playground.test.mjs @@ -81,15 +81,18 @@ test("playground and snippets expose toolbar groups semantically", () => { } }); -test("playground and snippets expose navigation tabs semantically", () => { +test("playground and snippets expose the in-page tabset pattern", () => { for (const file of [PLAYGROUND_PATH, SNIPPETS_PATH]) { const html = readFileSync(file, "utf8"); assert.match(html, classToken("elum-tabs")); assert.match(html, classToken("elum-tab")); - assert.match(html, /aria-current="page"/); - assert.doesNotMatch(html, /role="tablist"/); - assert.doesNotMatch(html, /role="tab"/); + assert.match(html, /role="tablist"/); + assert.match(html, /role="tab"/); + assert.match(html, /role="tabpanel"/); + assert.match(html, /aria-selected="(?:true|false)"/); + assert.match(html, /aria-controls="[^"]+"/); + assert.doesNotMatch(html, /class="elum-tab"[^>]*aria-current="page"/); } }); From 39a7f72fbd689d233065a6eecae297fa365425da Mon Sep 17 00:00:00 2001 From: Thom Date: Sun, 7 Jun 2026 17:32:45 -0700 Subject: [PATCH 4/7] docs: document and demo navbar component --- README.md | 2 +- docs/component-usage.md | 19 ++++++++++++++----- examples/playground.html | 3 +-- packages/core-patterns/snippets/index.html | 9 +++++++++ tests/docs-contract.test.mjs | 3 ++- 5 files changed, 27 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 46e0a52..37131cb 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ Open `examples/playground.html` in a browser to see every component rendered tog ## Current Component Scope -Button, Input, Textarea, Checkbox, Radio Group, Select, Card, Alert, Badge, System Bar, Navigation Tabs, Toolbar, Query Row, Pagination, Empty State, Disclosure, Detail List, Status Label, Metrics, Meter, Data List, Data Table. +Button, Input, Textarea, Checkbox, Radio Group, Select, Card, Alert, Badge, System Bar, Navbar, Tabs, Toolbar, Query Row, Pagination, Empty State, Disclosure, Detail List, Status Label, Metrics, Meter, Data List, Data Table. ## Browser And Stability Notes diff --git a/docs/component-usage.md b/docs/component-usage.md index 71d8ea7..d3f1b50 100644 --- a/docs/component-usage.md +++ b/docs/component-usage.md @@ -67,12 +67,21 @@ Use semantic HTML first. Add ARIA only when native semantics are not enough. - Status values may use bracketed status text for terse terminal-style state. - Keep system bar copy short enough to wrap cleanly on narrow screens. -## Navigation Tabs +## Navbar -- **Wrapper:** `.elum-tabs` on a `