@grantcodes/ui 2.5.0 → 2.6.0

package/src/components/app-bar/app-bar.test.js

@@ -40,6 +40,12 @@ describe("App Bar Component", () => {
 		assert.ok(header, "Header element should exist");
 	});
 
+	it("should not have sticky class by default", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const appBar = element.shadowRoot.querySelector(".app-bar--sticky");
+		assert.ok(!appBar, "Should not have sticky class by default");
+	});
+
 	it("should apply sticky class when sticky", async () => {
 		element = await fixture("grantcodes-app-bar", {
 			sticky: true,
@@ -108,7 +114,7 @@ describe("App Bar Component", () => {
 		await element.updateComplete;
 
 		const mobileNav = element.shadowRoot.querySelector(
-			".app-bar__nav--mobile-open",
+			".app-bar__nav--open",
 		);
 		assert.ok(mobileNav, "Mobile nav should be rendered when open");
 	});

package/src/components/app-bar/nav-link.component.js

@@ -0,0 +1,15 @@
+import { LitElement, html } from "lit";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import navLinkStyles from "./nav-link.css" with { type: "css" };
+
+export class GrantCodesNavLink extends LitElement {
+	static styles = [focusRingStyles, navLinkStyles];
+
+	render() {
+		return html`
+			<span class="nav-link">
+				<slot></slot>
+			</span>
+		`;
+	}
+}

package/src/components/app-bar/nav-link.css

@@ -0,0 +1,58 @@
+  *,
+	*::before,
+	*::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-flex;
+  }
+
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--g-theme-border-radius-md);
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+  }
+
+  .nav-link:hover {
+    background-color: color-mix(in srgb, var(--g-theme-color-content-default) 8%, transparent);
+  }
+
+  /*
+   * Override light-DOM :where(a) base styles for slotted links.
+   * ::slotted() has lower cascade priority than outer-tree normal rules,
+   * so !important is needed for properties that the base layer also sets
+   * (color, text-decoration, opacity). This is a legitimate encapsulation
+   * use-case — nav links must look like ghost buttons regardless of what
+   * global link styles exist in the light DOM.
+   */
+  ::slotted(a),
+  ::slotted(a:visited),
+  ::slotted(a:hover),
+  ::slotted(a:active),
+  ::slotted(a:focus-visible) {
+    display: inline-flex;
+    align-items: center;
+    color: var(--g-theme-color-content-default) !important;
+    text-decoration: none !important;
+    opacity: 1 !important;
+    padding-block: var(--g-theme-spacing-xs, 0.25rem);
+    padding-inline: var(--g-theme-spacing-sm);
+    font-family: var(--g-theme-typography-label-font-family);
+    font-weight: var(--g-theme-typography-label-font-weight);
+    white-space: nowrap;
+  }
+
+  ::slotted(a:focus-visible) {
+    outline: var(--g-theme-focus-ring-width-default) solid var(--g-theme-focus-ring-color-default);
+    outline-offset: var(--g-theme-focus-ring-offset-default);
+    border-radius: var(--g-theme-border-radius-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav-link {
+      transition: none;
+    }
+  }

package/src/components/app-bar/nav-link.js

@@ -0,0 +1,6 @@
+import { GrantCodesNavLink } from "./nav-link.component.js";
+
+export * from "./nav-link.component.js";
+export default GrantCodesNavLink;
+
+customElements.define("grantcodes-nav-link", GrantCodesNavLink);

package/src/components/app-bar/nav-link.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesNavLink } from "./nav-link.js"
+
+export const NavLink = createComponent({
+	tagName: "grantcodes-nav-link",
+	elementClass: GrantCodesNavLink,
+	react: React,
+})

package/src/css/all.css

@@ -1,6 +1,8 @@
+/* Basically the same as base.css but with component styles included */
+
 @layer reset, base, utilities, components;
 
-@import "./base.css" layer(reset);
+@import "./reset.css" layer(reset);
 @import "./typography.css" layer(base);
 @import "./elements.css" layer(base);
 @import "./util/index.css" layer(utilities);

package/src/css/base.css

@@ -1,248 +1,7 @@
-/* CSS reset — inspired by sanitize.css (https://csstools.github.io/sanitize.css/)
-   Inlined to avoid broken relative node_modules paths when installed externally. */
+@layer reset, base, utilities;
 
-/* Box sizing and background */
-*,
-::before,
-::after {
-	box-sizing: border-box;
-	background-repeat: no-repeat;
-}
-
-::before,
-::after {
-	text-decoration: inherit;
-	vertical-align: inherit;
-}
-
-/* Root defaults */
-:where(:root) {
-	cursor: default;
-	line-height: 1.5;
-	overflow-wrap: break-word;
-	-moz-tab-size: 4;
-	tab-size: 4;
-	-webkit-tap-highlight-color: transparent;
-	-webkit-text-size-adjust: 100%;
-}
-
-html {
-    font: var(--g-theme-typography-body);
-}
-
-code,
-kbd,
-samp,
-pre {
-	font-family:
-		ui-monospace,
-		"Menlo",
-		"Consolas",
-		"Roboto Mono",
-		"Ubuntu Monospace",
-		"Noto Mono",
-		"Oxygen Mono",
-		"Liberation Mono",
-		monospace,
-		"Apple Color Emoji",
-		"Segoe UI Emoji",
-		"Segoe UI Symbol",
-		"Noto Color Emoji";
-}
-
-/* Sections */
-:where(body) {
-	margin: 0;
-}
-
-/* Grouping */
-:where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0;
-}
-
-:where(hr) {
-	color: inherit;
-	height: 0;
-}
-
-:where(nav) :where(ol, ul) {
-	list-style-type: none;
-	padding: 0;
-}
-
-/* Prevent VoiceOver from ignoring list semantics in Safari */
-:where(nav li)::before {
-	content: "\200B";
-	float: left;
-}
-
-:where(pre) {
-	font-size: 1em;
-	overflow: auto;
-}
-
-/* Text-level semantics */
-:where(abbr[title]) {
-	text-decoration: underline dotted;
-}
-
-:where(b, strong) {
-	font-weight: bolder;
-}
-
-:where(code, kbd, samp) {
-	font-size: 1em;
-}
-
-:where(small) {
-	font-size: 80%;
-}
-
-/* Embedded content */
-:where(audio, canvas, iframe, img, svg, video) {
-	vertical-align: middle;
-}
-
-:where(iframe) {
-	border-style: none;
-}
-
-:where(svg:not([fill])) {
-	fill: currentColor;
-}
-
-/* Tabular data */
-:where(table) {
-	border-collapse: collapse;
-	border-color: inherit;
-	text-indent: 0;
-}
-
-/* Forms — baseline normalisation */
-:where(button, input, select) {
-	margin: 0;
-}
-
-:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
-	-webkit-appearance: button;
-}
-
-:where(fieldset) {
-	border: 1px solid #a0a0a0;
-}
-
-:where(progress) {
-	vertical-align: baseline;
-}
-
-:where(textarea) {
-	margin: 0;
-	resize: vertical;
-}
-
-:where([type="search" i]) {
-	-webkit-appearance: textfield;
-	outline-offset: -2px;
-}
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-
-::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.54;
-}
-
-::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-	-webkit-appearance: button;
-	font: inherit;
-}
-
-/* Forms — typography and colour inheritance */
-:where(button, input, select, textarea) {
-	background-color: transparent;
-	border: 1px solid WindowFrame;
-	color: inherit;
-	font: inherit;
-	letter-spacing: inherit;
-	padding: 0.25em 0.375em;
-}
-
-:where([type="color" i], [type="range" i]) {
-	border-width: 0;
-	padding: 0;
-}
-
-/* Interactive */
-:where(details > summary:first-of-type) {
-	display: list-item;
-}
-
-/* Accessibility */
-:where([aria-busy="true" i]) {
-	cursor: progress;
-}
-
-:where([aria-controls]) {
-	cursor: pointer;
-}
-
-:where([aria-disabled="true" i], [disabled]) {
-	cursor: not-allowed;
-}
-
-:where([aria-hidden="false" i][hidden]) {
-	display: initial;
-}
-
-:where([aria-hidden="false" i][hidden]:not(:focus)) {
-	clip: rect(0, 0, 0, 0);
-	position: absolute;
-}
-
-/* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
-@media (prefers-reduced-motion: reduce) {
-	*,
-	::before,
-	::after {
-		animation-delay: -1ms !important;
-		animation-duration: 1ms !important;
-		animation-iteration-count: 1 !important;
-		background-attachment: initial !important;
-		scroll-behavior: auto !important;
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}
-
-/* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
-:root {
-	color-scheme: light dark;
-	--grantcodes-ui-theme: "none";
-	background-color: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
-	fill: currentColor;
-}
-
-/* Allow transitioning auto */
-:root {
-	@supports (interpolate-size: allow-keywords) {
-		interpolate-size: allow-keywords;
-	}
-}
-
-::selection {
-	background-color: var(--g-color-brand-purple-200);
-}
-
-/* Default backdrop styles */
-::backdrop {
-	background-color: rgba(0, 0, 0, 0.4);
-	backdrop-filter: blur(6px);
-}
+@import "./reset.css" layer(reset);
+@import "./typography.css" layer(base);
+@import "./elements.css" layer(base);
+@import "./util/index.css" layer(utilities);
+@import "./helpers.css" layer(utilities);

package/src/css/elements/a.css

@@ -1,4 +1,4 @@
-a {
+:where(a) {
 	color: var(--g-theme-link-color-content-default);
 	text-decoration: underline;
 	transition:
@@ -6,25 +6,25 @@ a {
 		opacity 0.2s;
 }
 
-a:visited {
+:where(a:visited) {
 	color: var(--g-theme-link-color-content-visited);
 	opacity: 0.6;
 }
 
-a:hover,
-a:focus-visible {
+:where(a:hover),
+:where(a:focus-visible) {
 	opacity: 1;
 	color: var(--g-theme-link-color-content-hover);
 	text-decoration: underline wavy;
 }
 
-a:active {
+:where(a:active) {
 	color: var(--g-theme-link-color-content-active);
 }
 
 /* External links - special styling for links opening in new windows */
-a[target="_blank"]::after,
-a[rel~="external"]::after {
+:where(a[target="_blank"]::after),
+:where(a[rel~="external"]::after) {
 	content: "↗";
 	display: inline-block;
 	margin-inline-start: 0.25em;
@@ -38,7 +38,7 @@ a[rel~="external"]::after {
 /* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
 @supports selector(:external) {
 	/* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
-	a:external::after {
+	:where(a:external::after) {
 		content: "↗";
 		display: inline-block;
 		margin-inline-start: 0.25em;

package/src/css/reset.css

@@ -0,0 +1,246 @@
+/* CSS reset — inspired by sanitize.css (https://csstools.github.io/sanitize.css/)
+   Inlined to avoid broken relative node_modules paths when installed externally. */
+
+/* Box sizing and background */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+/* Root defaults */
+:where(:root) {
+	font: var(--g-theme-typography-body);
+	cursor: default;
+	line-height: 1.5;
+	overflow-wrap: break-word;
+	-moz-tab-size: 4;
+	tab-size: 4;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-text-size-adjust: 100%;
+}
+
+:where(:root, body) {
+    padding: 0;
+   	margin: 0;
+}
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		"Menlo",
+		"Consolas",
+		"Roboto Mono",
+		"Ubuntu Monospace",
+		"Noto Mono",
+		"Oxygen Mono",
+		"Liberation Mono",
+		monospace,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
+}
+
+
+/* Grouping */
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin: 0;
+}
+
+:where(hr) {
+	color: inherit;
+	height: 0;
+}
+
+:where(nav) :where(ol, ul) {
+	list-style-type: none;
+	padding: 0;
+}
+
+/* Prevent VoiceOver from ignoring list semantics in Safari */
+:where(nav li)::before {
+	content: "\200B";
+	float: left;
+}
+
+:where(pre) {
+	font-size: 1em;
+	overflow: auto;
+}
+
+/* Text-level semantics */
+:where(abbr[title]) {
+	text-decoration: underline dotted;
+}
+
+:where(b, strong) {
+	font-weight: bolder;
+}
+
+:where(code, kbd, samp) {
+	font-size: 1em;
+}
+
+:where(small) {
+	font-size: 80%;
+}
+
+/* Embedded content */
+:where(audio, canvas, iframe, img, svg, video) {
+	vertical-align: middle;
+}
+
+:where(iframe) {
+	border-style: none;
+}
+
+:where(svg:not([fill])) {
+	fill: currentColor;
+}
+
+/* Tabular data */
+:where(table) {
+	border-collapse: collapse;
+	border-color: inherit;
+	text-indent: 0;
+}
+
+/* Forms — baseline normalisation */
+:where(button, input, select) {
+	margin: 0;
+}
+
+:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
+	-webkit-appearance: button;
+}
+
+:where(fieldset) {
+	border: 1px solid #a0a0a0;
+}
+
+:where(progress) {
+	vertical-align: baseline;
+}
+
+:where(textarea) {
+	margin: 0;
+	resize: vertical;
+}
+
+:where([type="search" i]) {
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+::-webkit-input-placeholder {
+	color: inherit;
+	opacity: 0.54;
+}
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button;
+	font: inherit;
+}
+
+/* Forms — typography and colour inheritance */
+:where(button, input, select, textarea) {
+	background-color: transparent;
+	border: 1px solid WindowFrame;
+	color: inherit;
+	font: inherit;
+	letter-spacing: inherit;
+	padding: 0.25em 0.375em;
+}
+
+:where([type="color" i], [type="range" i]) {
+	border-width: 0;
+	padding: 0;
+}
+
+/* Interactive */
+:where(details > summary:first-of-type) {
+	display: list-item;
+}
+
+/* Accessibility */
+:where([aria-busy="true" i]) {
+	cursor: progress;
+}
+
+:where([aria-controls]) {
+	cursor: pointer;
+}
+
+:where([aria-disabled="true" i], [disabled]) {
+	cursor: not-allowed;
+}
+
+:where([aria-hidden="false" i][hidden]) {
+	display: initial;
+}
+
+:where([aria-hidden="false" i][hidden]:not(:focus)) {
+	clip: rect(0, 0, 0, 0);
+	position: absolute;
+}
+
+/* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-delay: -1ms !important;
+		animation-duration: 1ms !important;
+		animation-iteration-count: 1 !important;
+		background-attachment: initial !important;
+		scroll-behavior: auto !important;
+		transition-delay: 0s !important;
+		transition-duration: 0s !important;
+	}
+}
+
+/* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
+:root {
+	color-scheme: light dark;
+	--grantcodes-ui-theme: "none";
+	background-color: var(--g-theme-color-background-default);
+	color: var(--g-theme-color-content-default);
+	fill: currentColor;
+}
+
+/* Allow transitioning auto */
+:root {
+	@supports (interpolate-size: allow-keywords) {
+		interpolate-size: allow-keywords;
+	}
+}
+
+::selection {
+	background-color: var(--g-theme-color-background-brand);
+}
+
+/* Default backdrop styles */
+::backdrop {
+	background-color: rgba(0, 0, 0, 0.4);
+	backdrop-filter: blur(6px);
+}

package/src/css/themes/grantcodes.css

@@ -1,4 +1,5 @@
 @import "@grantcodes/style-dictionary/grantcodes/css";
 @import "@grantcodes/style-dictionary/grantcodes/css/theme";
 @import "@grantcodes/style-dictionary/grantcodes/css/dark";
+@import "@grantcodes/style-dictionary/grantcodes/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/greycliff";

package/src/css/themes/grantina.css

@@ -1,4 +1,5 @@
 @import "@grantcodes/style-dictionary/grantina/css";
 @import "@grantcodes/style-dictionary/grantina/css/theme";
 @import "@grantcodes/style-dictionary/grantina/css/dark";
+@import "@grantcodes/style-dictionary/grantina/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/grantina";

package/src/css/themes/todomap.css

@@ -1,6 +1,7 @@
 @import "@grantcodes/style-dictionary/todomap/css";
 @import "@grantcodes/style-dictionary/todomap/css/theme";
 @import "@grantcodes/style-dictionary/todomap/css/dark";
+@import "@grantcodes/style-dictionary/todomap/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
 
 html.todomap {

package/src/css/themes/wireframe.css

@@ -1,3 +1,4 @@
 @import "@grantcodes/style-dictionary/wireframe/css";
 @import "@grantcodes/style-dictionary/wireframe/css/theme";
 @import "@grantcodes/style-dictionary/wireframe/css/dark";
+@import "@grantcodes/style-dictionary/wireframe/css/light";

package/src/react.js

@@ -1,5 +1,6 @@
 export { Accordion } from "./components/accordion/accordion.react.js"
 export { AppBar } from "./components/app-bar/app-bar.react.js"
+export { NavLink } from "./components/app-bar/nav-link.react.js"
 export { Avatar } from "./components/avatar/avatar.react.js"
 export { Badge } from "./components/badge/badge.react.js"
 export { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/breadcrumb.react.js"