@heliosgraphics/ui 2.0.1-alpha.3 → 2.0.1-alpha.4

package/components/Dropdown/Dropdown.module.css

@@ -5,7 +5,9 @@
 	user-select: none;
 }
 
-.dropdownOpen [data-ui-component="Icon"] {
+.dropdownOpen .dropdown__activator [data-ui-icon="caret-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="arrow-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="chevron-down"] {
 	transition: transform 96ms ease-in-out;
 	transform: rotate(180deg);
 }
@@ -53,40 +55,19 @@
 	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__navActive {
-	display: block;
-	opacity: 1;
+.dropdown__nav.dropdown__navActive {
+	opacity: 1 !important;
 
-	transform: translateY(0);
+	transform: translateY(0) !important;
 
 	pointer-events: all;
-
-	@starting-style {
-		opacity: 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

@@ -95,6 +95,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 			<div
 				role="button"
 				tabIndex={0}
+				className={styles.dropdown__activator}
 				onClick={onSetVisible}
 				onKeyDown={onKeyDown}
 				aria-expanded={isVisible}

package/components/Icon/Icon.tsx

@@ -24,6 +24,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			style={iconSizeStyle}
 			aria-hidden={true}
 			data-ui-component="Icon"
+			data-ui-icon={icon}
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.3",
+	"version": "2.0.1-alpha.4",
 	"type": "module",
 	"sideEffects": [
 		"*.css",

package/{components/Markdown/Markdown.utils.spec.ts → utils/markdown.spec.ts}

@@ -1,5 +1,5 @@
 import { it, describe, expect } from "bun:test"
-import { renderMarkdown } from "./Markdown.utils"
+import { renderMarkdown } from "./markdown"
 
 describe("markdown", () => {
 	describe("renderMarkdown", () => {