@rhavenside/baseline-ui 1.0.4 → 1.0.6

package/src/components/_modal.scss

@@ -26,17 +26,21 @@
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
 }
 
 .bl-modal-dialog {
   position: relative;
-  width: auto;
-  margin: var(--spacing-md);
+  width: 100%;
+  max-width: 500px;
+  margin: 0;
   pointer-events: none;
 
   @media (min-width: 576px) {
     max-width: 500px;
-    margin: var(--spacing-xl) auto;
   }
 
   @media (min-width: 768px) {
@@ -130,28 +134,60 @@
 
 // Modal Sizes
 .bl-modal-sm {
-  @media (min-width: 576px) {
-    max-width: 300px;
+  .bl-modal-dialog {
+    @media (min-width: 576px) {
+      max-width: 300px;
+    }
   }
 }
 
 .bl-modal-lg {
-  @media (min-width: 1024px) {
-    max-width: 1000px;
+  .bl-modal-dialog {
+    @media (min-width: 1024px) {
+      max-width: 1000px;
+    }
   }
 }
 
 .bl-modal-xl {
-  @media (min-width: 1024px) {
-    max-width: 1200px;
+  .bl-modal-dialog {
+    @media (min-width: 1024px) {
+      max-width: 1200px;
+    }
   }
 }
 
-// Centered Modal
-.bl-modal-centered {
+// Modal Positions
+.bl-modal-top {
+  align-items: flex-start;
+  padding-top: var(--spacing-xl);
+}
+
+.bl-modal-bottom {
+  align-items: flex-end;
+  padding-bottom: var(--spacing-xl);
+}
+
+.bl-modal-left {
+  justify-content: flex-start;
+  padding-left: var(--spacing-xl);
+  
   .bl-modal-dialog {
-    display: flex;
-    align-items: center;
-    min-height: calc(100% - (var(--spacing-xl) * 2));
+    margin-right: auto;
   }
 }
+
+.bl-modal-right {
+  justify-content: flex-end;
+  padding-right: var(--spacing-xl);
+  
+  .bl-modal-dialog {
+    margin-left: auto;
+  }
+}
+
+// Centered Modal (default, can be explicitly set)
+.bl-modal-centered {
+  align-items: center;
+  justify-content: center;
+}

package/src/components/_spinner.scss

@@ -115,4 +115,8 @@
   border-width: var(--border-width-base);
 }
 
-// Spinner Grow (Alternative Style - removed, using square frame only)
+.bl-spinner-xl {
+  width: 4rem;
+  height: 4rem;
+  border-width: var(--border-width-base);
+}

package/src/icons/_icons.scss

@@ -5,14 +5,15 @@
 @use '../tokens/tokens' as *;
 
 // Icon Font Face (to be generated from icon font files)
-@font-face {
-  font-family: 'Baseline Icons';
-  src: url('../fonts/baseline-icons.woff2') format('woff2'),
-       url('../fonts/baseline-icons.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
+// Font files are optional - icons will work without them using Unicode fallback
+// @font-face {
+//   font-family: 'Baseline Icons';
+//   src: url('../fonts/baseline-icons.woff2') format('woff2'),
+//        url('../fonts/baseline-icons.woff') format('woff');
+//   font-weight: normal;
+//   font-style: normal;
+//   font-display: swap;
+// }
 
 // Base Icon Class
 .bl-icon {

package/src/js/baseline.js

@@ -50,10 +50,18 @@ function autoInit() {
 }
 
 // Initialize when DOM is ready
+// Use requestAnimationFrame for better timing with ES modules
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', autoInit);
+  document.addEventListener('DOMContentLoaded', () => {
+    // Wait for next frame to ensure all elements are rendered
+    requestAnimationFrame(() => {
+      requestAnimationFrame(autoInit);
+    });
+  });
 } else {
-  // Use setTimeout to ensure DOM is fully ready
-  setTimeout(autoInit, 0);
+  // DOM already loaded, but wait for next frame to ensure everything is ready
+  requestAnimationFrame(() => {
+    requestAnimationFrame(autoInit);
+  });
 }