@grantcodes/ui 2.0.2 → 2.1.0

package/src/test-utils/assert-helpers.js

@@ -31,10 +31,7 @@ export function assertAttribute(element, attribute, expectedValue) {
  */
 export function assertNoAttribute(element, attribute) {
 	const hasAttribute = element.hasAttribute(attribute);
-	assert.ok(
-		!hasAttribute,
-		`Element should not have attribute "${attribute}"`,
-	);
+	assert.ok(!hasAttribute, `Element should not have attribute "${attribute}"`);
 }
 
 /**
@@ -67,7 +64,10 @@ export function assertNoClass(element, className) {
  * @param {string} selector - The CSS selector
  */
 export function assertSelector(element, selector) {
-	assert.ok(element.matches(selector), `Element should match selector "${selector}"`);
+	assert.ok(
+		element.matches(selector),
+		`Element should match selector "${selector}"`,
+	);
 }
 
 /**
@@ -126,7 +126,11 @@ export function assertAria(element, ariaAttribute, expectedValue) {
  */
 export function assertVisible(element) {
 	const style = window.getComputedStyle(element);
-	assert.notStrictEqual(style.display, "none", "Element should not have display:none");
+	assert.notStrictEqual(
+		style.display,
+		"none",
+		"Element should not have display:none",
+	);
 	assert.notStrictEqual(
 		style.visibility,
 		"hidden",
@@ -146,5 +150,3 @@ export function assertHidden(element) {
 		element.hidden === true;
 	assert.ok(isHidden, "Element should be hidden");
 }
-
-

package/src/css/util/functions.css

@@ -1,16 +0,0 @@
-/* PLACEHOLDER: shadow() function conversion needed */
-/* Original SCSS:
-@function shadow($level: 0) {
-  $multiplier: $level + 1;
-  @return 0.1rem * $multiplier 0.2rem * $multiplier 0.4rem * $multiplier
-    rgba(0, 0, 0, 0.1 * $multiplier);
-}
-*/
-
-/* Manual conversion needed - consider using CSS custom properties for different shadow levels */
-:root {
-	--shadow-0: 0.1rem 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
-	--shadow-1: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-	--shadow-2: 0.3rem 0.6rem 1.2rem rgba(0, 0, 0, 0.3);
-	--shadow-3: 0.4rem 0.8rem 1.6rem rgba(0, 0, 0, 0.4);
-}

package/src/css/util/mixins.css

@@ -1,63 +0,0 @@
-/* Component base styles - inlined from mixin */
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-:host {
-	display: block;
-}
-
-/* PLACEHOLDER: custom-scrollbar mixin conversion needed */
-/* Original SCSS:
-@mixin custom-scrollbar($size: 0.5rem) {
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0.05);
-    border-radius: math.div($size, 2);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: math.div($size, 2);
-    min-height: 2rem;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-}
-*/
-
-/* Manual conversion needed - convert math.div($size, 2) to calc($size / 2) */
-.custom-scrollbar {
-	/* PLACEHOLDER: Add manual conversion here */
-}
-
-/* Focus ring styles - using tier-3 component tokens */
-:host {
-	outline-color: transparent;
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	outline-style: solid;
-	outline-width: var(--g-theme-focus-ring-width-default);
-}
-
-:host:focus-visible {
-	outline-color: var(--g-theme-focus-ring-color-default);
-}
-
-@media (prefers-contrast: more) {
-	:host:focus-visible {
-		outline-color: var(--g-theme-focus-ring-color-contrast);
-		box-shadow: 0 0 0
-			calc(
-				(
-					var(--g-theme-focus-ring-width-default) +
-					var(--g-theme-focus-ring-offset-default)
-				) *
-				1.5
-			)
-			var(--g-theme-focus-ring-color-contrast-shadow);
-	}
-}