@heliosgraphics/ui 2.0.0-alpha.94 → 2.0.0-alpha.95

package/components/Button/Button.tsx

@@ -13,17 +13,17 @@ import type { HeliosIconType } from "../../types/icons"
 import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
 import type { ButtonProps } from "./Button.types"
 
-const BUTTON_ICON_SIZE: Record<string, number> = {
+const BUTTON_ICON_SIZE = {
 	tiny: 14,
 	small: 18,
 	normal: 24,
-}
+} as const satisfies Record<string, number>
 
-const BUTTON_ICON_LABEL_SIZE: Record<string, number> = {
+const BUTTON_ICON_LABEL_SIZE = {
 	tiny: 12,
 	small: 14,
 	normal: 16,
-}
+} as const satisfies Record<string, number>
 
 export const Button: FC<ButtonProps> = ({
 	accept,

package/components/Dialog/Dialog.module.css

@@ -12,23 +12,49 @@
 	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 	touch-action: pan-y;
 	transform: translateX(-50%);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-lg) ease-in-out,
+		transform var(--speed-lg) ease-in-out,
+		overlay var(--speed-lg) ease-in-out allow-discrete,
+		display var(--speed-lg) ease-in-out allow-discrete;
 }
 
-.dialogNarrow {
-	width: 420px;
+.dialog[open] {
+	opacity: 1;
+	transform: translateX(-50%);
 }
 
-.dialog:not(.dialogCentered) {
-	animation: dialogFadeIn var(--speed-lg) ease-in-out;
+@starting-style {
+	.dialog[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(6px);
+	}
+}
+
+.dialogNarrow {
+	width: 420px;
 }
 
 .dialogCentered {
 	top: 50%;
 
-	animation: dialogCenterFadeIn var(--speed-lg) ease-in-out;
 	transform: translateX(-50%) translateY(-50%);
 }
 
+.dialogCentered[open] {
+	opacity: 1;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+@starting-style {
+	.dialogCentered[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(calc(-50% + 6px));
+	}
+}
+
 .dialog__content {
 	position: relative;
 	z-index: var(--z-index-1);
@@ -48,9 +74,24 @@
 .dialog::backdrop {
 	--ui-bg-backdrop: rgba(80, 80, 80, 0.5);
 
-	animation: backdropFadeIn var(--speed-sm) ease-in-out;
 	background-color: var(--ui-bg-backdrop);
 	backdrop-filter: blur(2px);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		overlay var(--speed-sm) ease-in-out allow-discrete,
+		display var(--speed-sm) ease-in-out allow-discrete;
+}
+
+.dialog[open]::backdrop {
+	opacity: 1;
+}
+
+@starting-style {
+	.dialog[open]::backdrop {
+		opacity: 0;
+	}
 }
 
 @media (max-width: 576px) {
@@ -68,34 +109,3 @@
 		width: calc(100% - 16px);
 	}
 }
-
-@keyframes dialogFadeIn {
-	0% {
-		opacity: 0;
-		transform: translateX(-50%) translateY(6px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(0);
-	}
-}
-
-@keyframes dialogCenterFadeIn {
-	0% {
-		opacity: 0;
-		transform: translateX(-50%) translateY(calc(-50% + 6px));
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(-50%);
-	}
-}
-
-@keyframes backdropFadeIn {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}

package/components/Dialog/Dialog.tsx

@@ -9,9 +9,6 @@ import { Flex } from "../Flex"
 import { getClasses } from "@heliosgraphics/utils"
 import type { DialogProps } from "./Dialog.types"
 
-const ATTRIBUTE_SCROLL = "data-scroll" as const
-const POSITION_FIXED_CLASS = "fixed" as const
-
 export const Dialog: FC<DialogProps> = ({
 	title,
 	children,
@@ -25,46 +22,12 @@ export const Dialog: FC<DialogProps> = ({
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
 	const triggerRef = useRef<Element | null>(null)
 
-	const resetScroll = (): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.setAttribute(ATTRIBUTE_SCROLL, "")
-			dialogRef?.current?.scrollTo?.(0, 0)
-		})
-	}
-
-	const resetDocumentStyle = (scrollPosition: number): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.style.position = ""
-			document.body.style.height = ""
-			document.body.style.top = ""
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			return globalThis?.scrollTo?.(0, scrollPosition)
-		})
-	}
-
-	useEffect(() => {
-		return (): void => {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			resetDocumentStyle(scrollPosition)
-			resetScroll()
-		}
-	}, [title, isOpen])
-
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
 		if (isOpen) {
 			triggerRef.current = document.activeElement
 
-			const localPosition: number = document?.documentElement?.scrollTop ?? 0
-
-			document.body.classList.add(POSITION_FIXED_CLASS)
-			document.body.style.top = `-${localPosition}px`
-			document.body.setAttribute(ATTRIBUTE_SCROLL, localPosition.toString())
-
 			dialogRef?.current?.showModal?.()
 
 			const dialog = dialogRef.current
@@ -85,14 +48,7 @@ export const Dialog: FC<DialogProps> = ({
 				}
 				triggerRef.current = null
 			}
-		} else if (!dialogRef?.current) {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			resetDocumentStyle(scrollPosition)
-
+		} else {
 			dialogRef?.current?.close?.()
 		}
 

package/components/Donut/Donut.tsx

@@ -1,3 +1,4 @@
+import { getClasses } from "@heliosgraphics/utils"
 import { getDonutBorderSize } from "./Donut.utils"
 import { Flex } from "../Flex"
 import styles from "./Donut.module.css"
@@ -12,18 +13,14 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 	const dashSize = 100 - percentage
 	const donutColor: string = `hsl(var(--${color}-hue), var(--${color}-saturation), 50%)`
 
+	const donutClasses: string = getClasses(styles.donut, "relative")
 	const donutContainerStyle: object = {
 		height: size + "px",
 		width: size + "px",
 	}
 
 	return (
-		<Flex
-			style={donutContainerStyle}
-			className={`${styles.donut} relative`}
-			isCentered={true}
-			data-ui-component="Donut"
-		>
+		<Flex style={donutContainerStyle} className={donutClasses} isCentered={true} data-ui-component="Donut">
 			<Flex className="absolute top-0 left-0 z-50" style={donutContainerStyle} isCentered={true}>
 				{children}
 			</Flex>

package/components/Dropdown/Dropdown.module.css

@@ -48,30 +48,40 @@
 	position: absolute;
 	z-index: var(--z-index-8);
 
+	display: none;
 	min-width: 240px;
 	opacity: 0;
 
 	transition:
+		display 96ms ease-in-out allow-discrete,
 		transform 96ms ease-in-out,
 		opacity 96ms ease-in-out;
 	pointer-events: none;
 }
 
-.dropdown__nav.dropdown__navActive {
-	opacity: 1 !important;
+.dropdown__navActive {
+	display: block;
+	opacity: 1;
 
-	transform: translateY(0) !important;
+	transform: translateY(0);
 
 	pointer-events: all;
-}
 
-@keyframes dropdownFade {
-	0% {
+	@starting-style {
 		opacity: 0;
-		/* transform: translateY(-8px); */
 	}
-	100% {
-		opacity: 1;
-		/* transform: translateY(0); */
+}
+
+.dropdownBottomLeft .dropdown__navActive,
+.dropdownBottomRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(-6px);
+	}
+}
+
+.dropdownTopLeft .dropdown__navActive,
+.dropdownTopRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(6px);
 	}
 }

package/components/Dropdown/Dropdown.tsx

@@ -86,9 +86,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 
 	const onSetVisible = (): void => setVisible(!isVisible)
 
-	const navClasses: string = getClasses(styles.dropdown__nav, {
-		[styles.dropdown__navActive]: isVisible,
-	})
+	const navClasses: string = getClasses(styles.dropdown__nav, isVisible && styles.dropdown__navActive)
 
 	const itemsWithClose = useMemo(
 		() =>

package/components/Flex/Flex.tsx

@@ -1,7 +1,8 @@
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
+import type { FC } from "react"
 
-export const Flex = (props: FlexProps) => {
+export const Flex: FC<FlexProps> = (props) => {
 	const { ref, ...restProps } = props
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)

package/components/Heading/components/H1/H1.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H1Props } from "./H1.types"
 
 export const H1: FC<H1Props> = (props) => {
-	return <h1 {...props} className={`h1 ${props.className}`} data-ui-component="Heading.H1" />
+	return <h1 {...props} className={getClasses("h1", props.className)} data-ui-component="Heading.H1" />
 }

package/components/Heading/components/H2/H2.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H2Props } from "./H2.types"
 
 export const H2: FC<H2Props> = (props) => {
-	return <h2 {...props} className={`h2 ${props.className}`} data-ui-component="Heading.H2" />
+	return <h2 {...props} className={getClasses("h2", props.className)} data-ui-component="Heading.H2" />
 }

package/components/Heading/components/H3/H3.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H3Props } from "./H3.types"
 
 export const H3: FC<H3Props> = (props) => {
-	return <h3 {...props} className={`h3 ${props.className}`} data-ui-component="Heading.H3" />
+	return <h3 {...props} className={getClasses("h3", props.className)} data-ui-component="Heading.H3" />
 }

package/components/Heading/components/H4/H4.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H4Props } from "./H4.types"
 
 export const H4: FC<H4Props> = (props) => {
-	return <h4 {...props} className={`h4 ${props.className}`} data-ui-component="Heading.H4" />
+	return <h4 {...props} className={getClasses("h4", props.className)} data-ui-component="Heading.H4" />
 }

package/components/Heading/components/H5/H5.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H5Props } from "./H5.types"
 
 export const H5: FC<H5Props> = (props) => {
-	return <h5 {...props} className={`h5 ${props.className}`} data-ui-component="Heading.H5" />
+	return <h5 {...props} className={getClasses("h5", props.className)} data-ui-component="Heading.H5" />
 }

package/components/Heading/components/H6/H6.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H6Props } from "./H6.types"
 
 export const H6: FC<H6Props> = (props) => {
-	return <h6 {...props} className={`h6 ${props.className}`} data-ui-component="Heading.H6" />
+	return <h6 {...props} className={getClasses("h6", props.className)} data-ui-component="Heading.H6" />
 }

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import type { FC } from "react"
 import { Input } from "../../../Input"
 import { getClasses } from "@heliosgraphics/utils"

package/components/Overlay/Overlay.module.css

@@ -7,18 +7,50 @@
 	height: 100%;
 	overflow: auto;
 	width: 100%;
+
+	display: grid;
+	opacity: 1;
+	transition:
+		opacity var(--speed-md) ease-in-out,
+		display var(--speed-md) ease-in-out allow-discrete;
+}
+
+.overlay[data-open="false"] {
+	display: none;
+	opacity: 0;
+}
+
+@starting-style {
+	.overlay[data-open="true"] {
+		opacity: 0;
+	}
 }
 
 .overlay__content {
 	height: 100%;
-	opacity: 0;
+	opacity: 1;
+	transform: translateY(0);
 
-	animation: animOverlayContent var(--speed-sm) ease-in-out forwards 120ms;
-	transform: translateY(-24px);
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		transform var(--speed-sm) ease-in-out;
+	transition-delay: 120ms;
 
 	pointer-events: none;
 }
 
+.overlay[data-open="false"] .overlay__content {
+	opacity: 0;
+	transform: translateY(-24px);
+}
+
+@starting-style {
+	.overlay[data-open="true"] .overlay__content {
+		opacity: 0;
+		transform: translateY(-24px);
+	}
+}
+
 .overlay__contentCentered {
 	align-content: center;
 }
@@ -36,26 +68,18 @@
 	height: 100%;
 	width: 100%;
 
-	animation: animOverlayBackground var(--speed-md) ease-in-out forwards;
 	background-color: rgba(0, 0, 0, 0.85);
+	opacity: 1;
+
+	transition: opacity var(--speed-md) ease-in-out;
 }
 
-@keyframes animOverlayBackground {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+.overlay[data-open="false"] .overlay__layer {
+	opacity: 0;
 }
 
-@keyframes animOverlayContent {
-	0% {
+@starting-style {
+	.overlay[data-open="true"] .overlay__layer {
 		opacity: 0;
-		transform: translateY(-24px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
 	}
 }

package/components/Overlay/Overlay.tsx

@@ -4,8 +4,6 @@ import type { OverlayProps } from "./Overlay.types"
 import { getClasses } from "@heliosgraphics/utils"
 
 export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpen }) => {
-	if (!isOpen) return null
-
 	const hideFunction = (event: MouseEvent<HTMLDivElement>): void => {
 		event.preventDefault()
 		event.stopPropagation()
@@ -18,7 +16,14 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 	})
 
 	return (
-		<section className={styles.overlay} role="dialog" aria-modal="true" data-ui-component="Overlay">
+		<section
+			className={styles.overlay}
+			role="dialog"
+			aria-modal="true"
+			aria-hidden={!isOpen}
+			data-ui-component="Overlay"
+			data-open={isOpen}
+		>
 			<div className={contentClasses}>{children}</div>
 			<div className={styles.overlay__layer} onClick={hideFunction} />
 		</section>

package/components/Pill/Pill.tsx

@@ -7,11 +7,11 @@ import styles from "./Pill.module.css"
 import { memo, type FC } from "react"
 import type { PillProps } from "./Pill.types"
 
-const PILL_ICON_SIZE: Record<string, number> = {
+const PILL_ICON_SIZE = {
 	tiny: 12,
 	small: 16,
 	normal: 24,
-}
+} as const satisfies Record<string, number>
 
 export const Pill: FC<PillProps> = memo(
 	({

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -1,10 +1,11 @@
 import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
+import type { FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }: SegmentButtonProps) => {
+export const SegmentButton: FC<SegmentButtonProps> = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }) => {
 	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
 		[styles.segmentButtonActive]: isActive,
 	})

package/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { getClasses } from "@heliosgraphics/utils"
 import { useId, useRef, useState, type FC, type KeyboardEvent } from "react"
 import type { TabsProps } from "./Tabs.types"
 import styles from "./Tabs.module.css"
@@ -12,6 +13,8 @@ export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) =
 
 	if (!items || !sections) return null
 
+	const tabListClasses: string = getClasses(styles.tabs__ol, "flex gap-2")
+
 	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
 		let nextIndex: number | null = null
 
@@ -31,7 +34,7 @@ export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) =
 
 	return (
 		<div data-ui-component="Tabs">
-			<div role="tablist" className={`${styles.tabs__ol} flex gap-2`}>
+			<div role="tablist" className={tabListClasses}>
 				{items.map((tab, index) => (
 					<div
 						key={tab}
@@ -45,7 +48,7 @@ export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) =
 						id={`${tabsId}-tab-${index}`}
 						onClick={() => setActive(index)}
 						onKeyDown={(event) => handleKeyDown(event, index)}
-						className={`${styles.tabs__ol__item} ${active === index ? styles.tabs__ol__itemActive : ""}`}
+						className={getClasses(styles.tabs__ol__item, { [styles.tabs__ol__itemActive]: active === index })}
 					>
 						<Text type="small" fontWeight="medium">
 							{tab}

package/components/Text/components/Div/Div.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { DivProps } from "./Div.types"
 import type { FC } from "react"
 
 export const Div: FC<DivProps> = (props) => {
-	return <div {...props} className={`p ${props.className}`} data-ui-component="Text.Div" />
+	return <div {...props} className={getClasses("p", props.className)} data-ui-component="Text.Div" />
 }

package/components/Text/components/Micro/Micro.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { MicroProps } from "./Micro.types"
 
 export const Micro: FC<MicroProps> = (props) => {
-	return <small {...props} className={`micro ${props.className}`} data-ui-component="Text.Micro" />
+	return <small {...props} className={getClasses("micro", props.className)} data-ui-component="Text.Micro" />
 }

package/components/Text/components/P/P.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { PProps } from "./P.types"
 
 export const P: FC<PProps> = (props) => {
-	return <p {...props} className={`p ${props.className}`} data-ui-component="Text.P" />
+	return <p {...props} className={getClasses("p", props.className)} data-ui-component="Text.P" />
 }

package/components/Text/components/Small/Small.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { SmallProps } from "./Small.types"
 
 export const Small: FC<SmallProps> = (props) => {
-	return <small {...props} className={`small ${props.className}`} data-ui-component="Text.Small" />
+	return <small {...props} className={getClasses("small", props.className)} data-ui-component="Text.Small" />
 }

package/components/Text/components/Tiny/Tiny.tsx

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { TinyProps } from "./Tiny.types"
 
 export const Tiny: FC<TinyProps> = (props) => {
-	return <small {...props} className={`tiny ${props.className}`} data-ui-component="Text.Tiny" />
+	return <small {...props} className={getClasses("tiny", props.className)} data-ui-component="Text.Tiny" />
 }

package/components/Tooltip/Tooltip.module.css

@@ -19,6 +19,19 @@
 	border-radius: var(--radius-sm);
 
 	position-area: bottom center;
+
+	opacity: 1;
+	transition:
+		opacity 150ms ease-out,
+		display 150ms ease-out allow-discrete;
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	&:not(:popover-open) {
+		opacity: 0;
+	}
 }
 
 .tooltipBottomLeft {

package/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { TooltipTrigger } from "./components/TooltipTrigger"
 import { TooltipContent } from "./components/TooltipContent"
 import { TooltipContext } from "./Tooltip.utils"
 
-const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string | undefined> = {
+const POSITION_CLASS_MAP = {
 	"bottom-center": undefined,
 	"bottom-left": styles.tooltipBottomLeft,
 	"bottom-right": styles.tooltipBottomRight,
@@ -17,7 +17,7 @@ const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string |
 	"top-right": styles.tooltipTopRight,
 	"left-center": styles.tooltipLeftCenter,
 	"right-center": styles.tooltipRightCenter,
-}
+} as const satisfies Record<NonNullable<TooltipProps["position"]>, string | undefined>
 
 const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
 	const [isOpen, setIsOpen] = useState<boolean>(isVisible)

package/components/Tooltip/components/TooltipContent/TooltipContent.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Text } from "../../../Text"
 import { useTooltipContext } from "../../Tooltip.utils"
 import type { CSSProperties, FC } from "react"

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { TooltipTriggerProps } from "./TooltipTrigger.types"
 import { useTooltipContext } from "../../Tooltip.utils"
 import type { CSSProperties, FC } from "react"

package/components/shared/ResultList/ResultList.tsx

@@ -4,10 +4,10 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import type { ChangeEvent } from "react"
+import type { ChangeEvent, FC } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
-export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
+export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 	if (!items?.length || isHidden) return null
 
 	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")

package/constants/components.ts

@@ -49,7 +49,7 @@ import { meta as metaTimestamp } from "../components/Timestamp/Timestamp.meta"
 import { meta as metaToggle } from "../components/Toggle/Toggle.meta"
 import { meta as metaTooltip } from "../components/Tooltip/Tooltip.meta"
 
-export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
+export const COMPONENTS = {
 	Alert: metaAlert,
 	Breadcrumb: metaBreadcrumb,
 	Browser: metaBrowser,
@@ -98,4 +98,4 @@ export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
 	Timestamp: metaTimestamp,
 	Toggle: metaToggle,
 	Tooltip: metaTooltip,
-}
+} as const satisfies Record<string, HeliosAttributeMeta<unknown>>

package/constants/meta.ts

@@ -3,34 +3,34 @@ import type { HeliosComponentStatusType, HeliosComponentCategoryType } from "../
 import type { HeliosColorType } from "../types/colors"
 import type { HeliosIconType } from "../types/icons"
 
-export const STATUS_COLORS: Record<HeliosComponentStatusType, HeliosColorType> = {
+export const STATUS_COLORS = {
 	experimental: "pink",
 	nominal: "gray",
 	stable: "green",
 	internal: "gray",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosColorType>
 
-export const STATUS_ICONS: Record<HeliosComponentStatusType, HeliosIconType> = {
+export const STATUS_ICONS = {
 	experimental: "bolt",
 	nominal: "bolt",
 	stable: "check",
 	internal: "bullseye",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosIconType>
 
-export const STATUS_NAMES: Record<HeliosComponentStatusType, string> = {
+export const STATUS_NAMES = {
 	experimental: "Experimental",
 	nominal: "Might Change",
 	stable: "Stable",
 	internal: "Internal",
-}
+} as const satisfies Record<HeliosComponentStatusType, string>
 
-export const TYPE_NAMES: Record<HeliosComponentCategoryType, string> = {
+export const TYPE_NAMES = {
 	content: "Content",
 	pattern: "Pattern",
 	core: "Core",
 	layout: "Layout",
 	meta: "Meta",
-}
+} as const satisfies Record<HeliosComponentCategoryType, string>
 
 interface StatusReturnType {
 	color: HeliosColorType
@@ -40,7 +40,7 @@ interface StatusReturnType {
 }
 
 export const getStatus = (component: string = "Example"): StatusReturnType => {
-	const componentMeta = COMPONENTS[component]
+	const componentMeta = COMPONENTS[component as keyof typeof COMPONENTS]
 
 	if (!componentMeta || !componentMeta._status) {
 		throw new Error(`Component "${component}" not found or missing _status`)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.94",
+	"version": "2.0.0-alpha.95",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -45,7 +45,7 @@
 		"@heliosgraphics/css": "^1.0.0-alpha.5",
 		"@heliosgraphics/icons": "^1.0.0-alpha.11",
 		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"marked": "^17.0.2",
+		"marked": "^17.0.3",
 		"marked-linkify-it": "^3.1.14",
 		"marked-xhtml": "^1.0.14"
 	},
@@ -56,8 +56,8 @@
 		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "^0.27.3",
 		"esbuild-css-modules-plugin": "^3.1.5",
-		"glob": "^13.0.3",
-		"jsdom": "^28.0.0",
+		"glob": "^13.0.6",
+		"jsdom": "^28.1.0",
 		"next": "^16.1.6",
 		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",