@heliosgraphics/ui 2.0.1-alpha.9 → 2.0.1-beta.0

package/components/Button/Button.module.css

@@ -49,7 +49,6 @@
 	box-shadow: inset 0 0 0 1px var(--border-active);
 }
 
-/* Reset */
 .button .button__baseElement {
 	display: inline-flex;
 
@@ -68,7 +67,6 @@
 	pointer-events: none;
 }
 
-/* Sizes */
 .buttonSizeNormal {
 	--button-badge-size: 24px;
 	--button-badge-margin: 8px;
@@ -136,7 +134,6 @@
 	padding-inline: 7px;
 }
 
-/* Loading */
 .buttonLoading,
 .buttonDisabled {
 	pointer-events: none;
@@ -174,7 +171,6 @@
 	right: 6px;
 }
 
-/* Badge */
 .button__badge {
 	z-index: 2;
 
@@ -187,7 +183,6 @@
 	border-radius: var(--button-badge-radius);
 }
 
-/* Flair */
 .button__flair {
 	position: absolute;
 	top: var(--button-flair-offset);
@@ -203,7 +198,6 @@
 	color: var(--text);
 }
 
-/* Icon */
 .buttonSizeNormal .button__iconLeft,
 .buttonSizeNormal .button__iconRight {
 	padding-left: 8px;
@@ -235,7 +229,6 @@
 	padding-right: 5px;
 }
 
-/* IconRight */
 .buttonSizeNormal:not(.buttonIconOnly) .button__iconRight {
 	margin-left: -12px;
 }
@@ -253,7 +246,6 @@
 	opacity: 0;
 }
 
-/* Icon:focus */
 .buttonSizeNormal.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
 	margin-left: -40px;
 	width: 40px;

package/components/Icon/Icon.module.css

@@ -1,26 +1,25 @@
 .icon {
+	color: currentColor;
 	transition: all var(--speed-sm) var(--ease-in-out-sine);
 }
 
 .icon svg {
 	height: 100%;
 	width: 100%;
+}
 
-	fill: currentcolor;
-	stroke: currentcolor;
+.iconPrimary {
+	color: var(--ui-text-primary);
 }
 
-.iconPrimary svg {
-	fill: var(--ui-text-primary);
-	stroke: var(--ui-text-primary);
+.iconSecondary {
+	color: var(--ui-text-secondary);
 }
 
-.iconSecondary svg {
-	fill: var(--ui-text-secondary);
-	stroke: var(--ui-text-secondary);
+.iconTertiary {
+	color: var(--ui-text-tertiary);
 }
 
-.iconTertiary svg {
-	fill: var(--ui-text-tertiary);
-	stroke: var(--ui-text-tertiary);
+.iconInherit {
+	color: inherit;
 }

package/components/Icon/Icon.spec.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "bun:test"
+import { icons } from "@heliosgraphics/icons"
+import { readFileSync } from "fs"
+import { dirname, join } from "path"
+import { fileURLToPath } from "url"
+import { getIconIdScope, getScopedIconSvg } from "./Icon.utils"
+
+const __filename: string = fileURLToPath(import.meta.url)
+const __dirname: string = dirname(__filename)
+
+describe("Icon", () => {
+	it("should preserve fill-only, stroke-only, and mixed icon paint modes", () => {
+		expect(icons["triangle"]).toContain('fill="currentColor"')
+		expect(icons["triangle"]).not.toContain('stroke="currentColor"')
+
+		expect(icons["arrow-right"]).toContain('stroke="currentColor"')
+		expect(icons["arrow-right"]).not.toContain('fill="currentColor"')
+
+		expect(icons["tag"]).toContain('fill="currentColor"')
+		expect(icons["tag"]).toContain('stroke="currentColor"')
+	})
+
+	it("should not force fill or stroke on every svg", () => {
+		const iconStyles: string = readFileSync(join(__dirname, "Icon.module.css"), "utf8")
+
+		expect(iconStyles).toContain(".icon svg")
+		expect(iconStyles).not.toContain(".icon svg {\n\theight: 100%;\n\twidth: 100%;\n\n\tfill: currentcolor;")
+		expect(iconStyles).not.toContain("stroke: currentcolor;")
+	})
+
+	it("should scope svg definitions per icon instance", () => {
+		const scope: string = getIconIdScope(":r1:")
+		const actual: string = getScopedIconSvg(icons["layout-aside-right"], scope)
+
+		expect(actual).toContain(`id="${scope}-a"`)
+		expect(actual).toContain(`mask="url(#${scope}-a)"`)
+		expect(actual).not.toContain('id="a"')
+		expect(actual).not.toContain("url(#a)")
+	})
+})

package/components/Icon/Icon.tsx

@@ -1,10 +1,15 @@
+"use client"
+
 import { getClasses } from "@heliosgraphics/utils"
 import { icons } from "@heliosgraphics/icons"
 import styles from "./Icon.module.css"
-import type { FC } from "react"
+import { useId, type FC } from "react"
+import { getIconIdScope, getScopedIconSvg } from "./Icon.utils"
 import type { IconProps } from "./Icon.types"
 
 export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
+	const iconId: string = getIconIdScope(useId())
+	const iconSvg: string = getScopedIconSvg(icons[icon] || "", iconId)
 	const iconSizeStyle = {
 		height: size + "px",
 		minHeight: size + "px",
@@ -16,6 +21,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 		[styles.iconPrimary]: emphasis === "primary",
 		[styles.iconSecondary]: emphasis === "secondary",
 		[styles.iconTertiary]: emphasis === "tertiary",
+		[styles.iconInherit]: emphasis === "inherit",
 	})
 
 	return (
@@ -25,7 +31,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			aria-hidden={true}
 			data-ui-component="Icon"
 			data-ui-icon={icon}
-			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
+			dangerouslySetInnerHTML={{ __html: iconSvg }}
 		/>
 	)
 }

package/components/Icon/Icon.utils.ts

@@ -0,0 +1,11 @@
+const HREF_REFERENCE_REGEX = /\b(href|xlink:href)="#([^"]+)"/g
+const ID_ATTRIBUTE_REGEX = /\bid="([^"]+)"/g
+const URL_REFERENCE_REGEX = /url\(#([^\)]+)\)/g
+
+export const getIconIdScope = (id: string): string => `icon-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`
+
+export const getScopedIconSvg = (svg: string, scope: string): string =>
+	svg
+		.replace(ID_ATTRIBUTE_REGEX, `id="${scope}-$1"`)
+		.replace(URL_REFERENCE_REGEX, `url(#${scope}-$1)`)
+		.replace(HREF_REFERENCE_REGEX, `$1="#${scope}-$2"`)

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import type { FC } from "react"
-import { Button } from "../../../../../Button/Button"
-import { ButtonGroup } from "../../../../../ButtonGroup/ButtonGroup"
+import { Button } from "../../../../../Button"
+import { ButtonGroup } from "../../../../../ButtonGroup"
 import { useLayoutContext } from "../../../../../../hooks/useLayoutContext"
 import type { LayoutAsideToggleProps } from "./LayoutAsideToggle.types"
 

package/components/Markdown/Markdown.module.css

@@ -67,7 +67,6 @@
 	line-height: normal;
 }
 
-/* Element: Blockquote */
 .markdown blockquote {
 	position: relative;
 
@@ -110,7 +109,6 @@
 	line-height: inherit;
 }
 
-/* Element: Link */
 .markdown a {
 	color: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
 
@@ -118,7 +116,6 @@
 	text-decoration: underline;
 }
 
-/* Element: List */
 .markdown ul li {
 	list-style-type: disc;
 }
@@ -140,13 +137,11 @@
 	list-style-type: circle;
 }
 
-/* Element: Separator */
 .markdown hr {
 	border: 0;
 	border-top: 1px solid var(--ui-border-secondary);
 }
 
-/* Element: Table */
 .markdown table {
 	max-width: 100%;
 
@@ -181,7 +176,6 @@
 	border-radius: var(--radius-md);
 }
 
-/* Element: Headings */
 .markdown h1 {
 	font-size: var(--font-size-h1);
 	line-height: var(--line-height-h1);
@@ -222,24 +216,20 @@
 	line-height: var(--line-height-p);
 }
 
-/* Element: strong, bold: 700 */
 .markdown b,
 .markdown strong {
 	font-weight: var(--font-weight-bold);
 }
 
-/* Element: Delete */
 .markdown del {
 	text-decoration: line-through;
 }
 
-/* Element: Italic */
 .markdown i,
 .markdown em {
 	font-style: italic;
 }
 
-/* Modifier: Code */
 .markdown *:not(pre) code {
 	display: inline-block;
 	padding: 0 4px;

package/components/Setup/Setup.spec.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "bun:test"
+import type { HeliosFixedThemeType } from "../../types/themes"
+import { code } from "./Setup.utils"
+
+describe("Setup", () => {
+	it("should execute when serialized into an inline script", () => {
+		const rootDataset: Record<string, string> = {}
+		const localStorageValues = new Map<string, string>()
+		const listeners: Record<string, (event: { matches: boolean }) => void> = {}
+
+		globalThis.__theme = "light" as HeliosFixedThemeType
+		globalThis.__onThemeChange = undefined
+		globalThis.__setPreferredTheme = (): void => {}
+		globalThis.document = {
+			documentElement: {
+				dataset: rootDataset,
+			},
+		} as Document
+		globalThis.localStorage = {
+			getItem: (key: string): string | null => localStorageValues.get(key) ?? null,
+			setItem: (key: string, value: string): void => {
+				localStorageValues.set(key, value)
+			},
+		} as Storage
+		globalThis.matchMedia = ((query: string): MediaQueryList => {
+			expect(query).toBe("(prefers-color-scheme: dark)")
+			return {
+				matches: true,
+				addEventListener: (type: string, listener: (event: { matches: boolean }) => void): void => {
+					listeners[type] = listener
+				},
+			} as MediaQueryList
+		}) as typeof globalThis.matchMedia
+
+		new Function(`return (${code.toString()})("system", undefined)`)()
+
+		expect(globalThis.__theme).toBe("dark")
+		expect(rootDataset["theme"]).toBe("dark")
+		expect(typeof listeners["change"]).toBe("function")
+
+		const changeListener = listeners["change"]
+		expect(changeListener).toBeDefined()
+		if (!changeListener) {
+			throw new Error("expected change listener to be registered")
+		}
+
+		changeListener({ matches: false })
+
+		expect(globalThis.__theme).toBe("light")
+		expect(rootDataset["theme"]).toBe("light")
+		expect(localStorageValues.get("theme")).toBe("light")
+	})
+})

package/components/Setup/Setup.utils.ts

@@ -0,0 +1,55 @@
+import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
+
+export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixedThemeType): void => {
+	globalThis.__onThemeChange = function (_theme: HeliosFixedThemeType): void {}
+
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
+	const setTheme = (newTheme: HeliosFixedThemeType): void => {
+		globalThis.__theme = newTheme
+		document.documentElement.dataset["theme"] = newTheme
+		globalThis.__onThemeChange?.(newTheme)
+	}
+
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
+	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
+		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
+	}
+
+	const isLocked: boolean = fixedTheme !== undefined || theme !== "system"
+
+	if (fixedTheme !== undefined && theme !== "system") {
+		console.warn("Setup: Both theme and fixedTheme props are set. fixedTheme takes precedence, theme prop is ignored.")
+	}
+
+	if (isLocked) {
+		const lockedTheme: HeliosFixedThemeType = fixedTheme ?? (theme as HeliosFixedThemeType)
+		globalThis.__setPreferredTheme = function (_newTheme: HeliosFixedThemeType): void {}
+		setTheme(lockedTheme)
+		return
+	}
+
+	let preferredTheme: HeliosFixedThemeType | undefined
+	const darkQuery: MediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)")
+
+	try {
+		const storedTheme: string | null = globalThis.localStorage.getItem("theme")
+		if (storedTheme === "dark" || storedTheme === "light") {
+			preferredTheme = storedTheme
+		}
+	} catch (error: unknown) {
+		console.error("failed to read theme from localStorage:", error)
+	}
+
+	globalThis.__setPreferredTheme = function (newTheme: HeliosFixedThemeType): void {
+		try {
+			setTheme(newTheme)
+			globalThis.localStorage.setItem("theme", newTheme)
+		} catch (error: unknown) {
+			console.error("failed to set theme:", error)
+		}
+	}
+
+	darkQuery.addEventListener("change", handleDarkModeChange)
+
+	setTheme(preferredTheme ?? (darkQuery.matches ? "dark" : "light"))
+}

package/components/Setup/css/feat.atomics.css

@@ -1,7 +1,4 @@
 @layer helios {
-	/* TODO sync with css */
-
-	/* background */
 	.ui-bg,
 	.ui-bg-primary {
 		background-color: var(--ui-bg-primary);
@@ -20,7 +17,6 @@
 		backdrop-filter: blur(3px);
 	}
 
-	/* radius utilities */
 	.radius-none {
 		border-radius: 0;
 	}
@@ -53,7 +49,6 @@
 		border-radius: 9999px;
 	}
 
-	/* scrollbar */
 	.ui-scrollbar::-webkit-scrollbar {
 		height: 8px;
 		width: 8px;
@@ -84,7 +79,6 @@
 		background-color: var(--ui-bg-soft-disabled-gray);
 	}
 
-	/* elevation */
 	.elevation-sm {
 		box-shadow: var(--ui-elevation-sm);
 	}
@@ -97,7 +91,6 @@
 		box-shadow: var(--ui-elevation-lg);
 	}
 
-	/* debug */
 	.debug * {
 		box-shadow: inset 0 0 0 1px var(--ui-bg-red);
 	}

package/components/Tile/Tile.module.css

@@ -3,7 +3,6 @@
 
 	background-color: var(--bg);
 	border: 1px solid var(--border);
-	border-radius: var(--radius-md);
 	color: var(--text);
 	overflow: hidden;
 	transition: all var(--speed-sm) var(--ease-in-out-sine);

package/components/Tile/Tile.tsx

@@ -34,8 +34,8 @@ export const Tile: FC<TileProps> = ({
 	const tileColorClasses: Array<string> = getColorClasses(resolvedColor, appearance)
 	const tileClasses = getClasses(styles.tile, ...tileColorClasses, {
 		[styles.tileLarge]: isLarge,
-		["radius-normal"]: isRounded,
-		["radius-max"]: isRound,
+		["radius-md"]: isRounded,
+		["radius-100"]: isRound,
 	})
 
 	return (

package/constants/scope.ts

@@ -32,9 +32,9 @@ const RESULT_ITEMS: Array<ResultItem> = [
 		onClick: () => null,
 		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
 	},
-	{ name: "Random Item", icon: "person" },
+	{ name: "Random Item", icon: "user" },
 	{ name: "Active Item", icon: "bell", isActive: true },
-	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "x-x" },
+	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "brand-x" },
 ]
 
 const MARKDOWN: string = `# Donec vestibulum

package/contexts/LayoutContext/LayoutContext.tsx

@@ -41,7 +41,6 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		// Set initial state
 		handleChange(mql)
 
 		mql.addEventListener("change", handleChange)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.9",
+	"version": "2.0.1-beta.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -41,11 +41,11 @@
 	},
 	"dependencies": {
 		"@heliosgraphics/css": "^1.0.0-alpha.10",
-		"@heliosgraphics/icons": "^1.0.0-alpha.14",
-		"@heliosgraphics/utils": "^6.0.0-alpha.16",
-		"marked": "^17.0.5",
-		"marked-linkify-it": "^3.1.14",
-		"marked-xhtml": "^1.0.14",
+		"@heliosgraphics/icons": "^1.0.0-beta.0",
+		"@heliosgraphics/utils": "^6.0.0-alpha.17",
+		"marked": "^18.0.3",
+		"marked-linkify-it": "^3.1.15",
+		"marked-xhtml": "^1.0.15",
 		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
@@ -54,10 +54,10 @@
 		"esbuild": "^0.28.0",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
-		"jsdom": "^29.0.1",
-		"next": "^16.2.2",
-		"prettier": "^3.8.1",
-		"typescript": "^6.0.2"
+		"jsdom": "^29.1.1",
+		"next": "^16.2.6",
+		"prettier": "^3.8.3",
+		"typescript": "^6.0.3"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",