@shohojdhara/atomix 0.4.1 → 0.4.3

package/src/lib/utils/__tests__/fontPreloader.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import {
+  createFontPreloadLink,
+  preloadFonts,
+  generateFontPreloadTags,
+  type FontPreloadConfig,
+} from '../fontPreloader';
+
+describe('fontPreloader', () => {
+  describe('createFontPreloadLink', () => {
+    it('should create a link element with correct attributes', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff2',
+        weight: 400,
+        style: 'normal',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link).toBeInstanceOf(HTMLLinkElement);
+      expect(link.rel).toBe('preload');
+      expect(link.as).toBe('font');
+      expect(link.href).toContain('/fonts/test.woff2');
+      expect(link.type).toBe('font/woff2');
+      expect(link.crossOrigin).toBe('anonymous');
+    });
+
+    it('should use default values for optional properties', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff2',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link.type).toBe('font/woff2');
+      expect(link.crossOrigin).toBe('anonymous');
+    });
+
+    it('should respect custom format and crossorigin', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff',
+        format: 'woff',
+        crossorigin: 'use-credentials',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link.type).toBe('font/woff');
+      expect(link.crossOrigin).toBe('use-credentials');
+    });
+  });
+
+  describe('preloadFonts', () => {
+    it('should create multiple link elements', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+        { family: 'Font 2', path: '/f2.woff2' },
+      ];
+
+      const links = preloadFonts(configs);
+
+      expect(links).toHaveLength(2);
+      expect(links[0]).toBeInstanceOf(HTMLLinkElement);
+      expect(links[1]).toBeInstanceOf(HTMLLinkElement);
+      expect(links[0].href).toContain('/f1.woff2');
+      expect(links[1].href).toContain('/f2.woff2');
+    });
+  });
+
+  describe('generateFontPreloadTags', () => {
+    it('should generate HTML strings for preload links', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+      ];
+
+      const tags = generateFontPreloadTags(configs);
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0]).toContain('<link rel="preload" as="font"');
+      expect(tags[0]).toContain('href="/f1.woff2"');
+      expect(tags[0]).toContain('type="font/woff2"');
+      expect(tags[0]).toContain('crossorigin="anonymous"');
+    });
+
+    it('should handle multiple configurations', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+        { family: 'Font 2', path: '/f2.woff', format: 'woff' },
+      ];
+
+      const tags = generateFontPreloadTags(configs);
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0]).toContain('href="/f1.woff2"');
+      expect(tags[1]).toContain('href="/f2.woff"');
+      expect(tags[1]).toContain('type="font/woff"');
+    });
+  });
+});

package/src/styles/02-tools/_tools.breakpoints.scss

@@ -8,7 +8,7 @@
 // Breakpoint viewport sizes and media queries.
 @mixin media-breakpoint-up($name, $breakpoints: breakpoints.$grid-breakpoints) {
   $min: map.get($breakpoints, $name);
-  @if $min and $min != 0 {
+  @if $min {
     @media (min-width: $min) {
       @content;
     }

package/src/styles/02-tools/_tools.utility-api.scss

@@ -22,7 +22,7 @@ $utility-defaults: (
   class: null,
   state: null,
   local-vars: (),
-  is-important: true,
+  rtl: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -77,11 +77,11 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, is-important), !important, null);
+            #{$property}: $value;
           }
         } @else if $value != null {
           // Guard: only emit property declaration if value is not null
-          #{$property-class}: $value if(map.get($utility, is-important), !important, null);
+          #{$property-class}: $value;
         }
 
         // Add local CSS variables if specified
@@ -111,11 +111,11 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}#{$modifier}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, is-important), !important, null);
+            #{$property}: $value;
           }
         } @else if $value != null {
           // Guard: only emit property declaration if value is not null
-          #{$base-class}: $value if(map.get($utility, is-important), !important, null);
+          #{$base-class}: $value;
         }
 
         // Add local CSS variables if specified
@@ -169,7 +169,7 @@ $utility-defaults: (
         values: map.get($config, values),
         class: map.get($config, class),
         state: map.get($config, state),
-        is-important: map.get($config, is-important),
+        rtl: map.get($config, rtl),
         css-var: map.get($config, css-var),
         local-vars: map.get($config, local-vars),
         responsive: map.get($config, responsive),

package/src/styles/06-components/_components.accordion.scss

@@ -83,7 +83,6 @@
   &__icon {
     color: var(--#{config.$prefix}accordion-icon-color);
     font-size: var(--#{config.$prefix}accordion-icon-size);
-    will-change: transform;
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
@@ -95,7 +94,6 @@
   &__panel {
     height: var(--panel-height);
     overflow: hidden;
-    will-change: height;
 
     @if accordion.$accordion-enable-smooth-scroll {
       scroll-behavior: smooth;

package/src/styles/06-components/_components.chart.scss

@@ -634,7 +634,6 @@
       text-rendering: optimizeLegibility;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;
-      will-change: contents;
       backface-visibility: hidden;
       transform: translateZ(0);
       opacity: 0;

package/src/styles/06-components/_components.dropdown.scss

@@ -99,7 +99,6 @@
     pointer-events: none;
 
     &:not(.is-glass) {
-      will-change: transform, opacity, visibility;
       transform: translateY(-15px) scale(0.95);
       transform-origin: top center;
     }

package/src/styles/06-components/_components.edge-panel.scss

@@ -39,7 +39,6 @@
     opacity: 0;
     z-index: map.get($z-layers, 1);
     transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
-    will-change: opacity;
 
     &.is-animating {
       animation: fadeIn 0.3s ease forwards;
@@ -62,7 +61,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    will-change: transform, opacity;
 
     &.is-animating {
       animation: slideIn var(--#{$prefix}edge-panel-animation-duration)

package/src/styles/06-components/_components.photoviewer.scss

@@ -77,7 +77,6 @@
   max-height: 100%;
   object-fit: contain;
   transform-origin: center center;
-  will-change: transform;
 
   // Enhanced image quality
   image-rendering: auto;

package/src/styles/06-components/_components.river.scss

@@ -149,7 +149,6 @@
     max-width: none;
     @include square(100%);
     @include object-fit(cover);
-    will-change: transform;
   }
 
   // When the river has a background image, we need to adjust text colors for readability

package/src/styles/06-components/_components.slider.scss

@@ -43,8 +43,6 @@
     }
 
     .c-slider__wrapper {
-      will-change: transform;
-
       &.transitioning {
         transition: transform var(--#{config.$prefix}slider-speed)
           var(--#{config.$prefix}slider-easing);
@@ -85,7 +83,6 @@
   z-index: slider.$slider-z-index-base;
   display: flex;
   box-sizing: content-box;
-  will-change: transform;
 }
 
 .c-slider__slide {

package/src/styles/99-utilities/_utilities.glass-fixes.scss

@@ -14,7 +14,6 @@
   transform-style: flat !important;
   will-change: auto !important;
   transform: none !important;
-  z-index: unset;
 }
 
 // =============================================================================

package/src/styles/99-utilities/_utilities.text.scss

@@ -99,6 +99,7 @@ $utilities-text: (
     values: (
       break: break-word,
     ),
+    rtl: false,
   ),
   'color': (
     property: color,