@ulu/frontend 0.6.29 → 0.6.31

package/lib/js/utils/dom.js

@@ -13,6 +13,49 @@ export function dataAttributeToDatasetKey(attribute) {
   return kebabToCamel(attribute.replace(/^data-/, ""));
 }
 
+/**
+ * Groups a parent's children into rows based on their visual coordinates (top and left positions).
+ * Filters out hidden elements and sorts them visually to support CSS grid order properties.
+ * @param {HTMLElement} parent The grid/parent container
+ * @returns {HTMLElement[][]} A 2D array of rows, where each row is an array of elements in visual order.
+ */
+export function getVisualRows(parent) {
+  const children = [...parent.children];
+
+  // Map to bounding client rects and filter out hidden elements (e.g. display: none)
+  const items = children
+    .map(child => ({ child, rect: child.getBoundingClientRect() }))
+    .filter(item => item.rect.width !== 0 || item.rect.height !== 0);
+
+  if (items.length === 0) {
+    return [];
+  }
+
+  // Sort items visually: top-to-bottom, then left-to-right to support CSS order properties.
+  // Use Math.abs because comparison elements can be passed in either order; if a difference 
+  // exists in either direction (> 1px threshold for sub-pixel rounding), sort by top offset.
+  items.sort((a, b) => {
+    if (Math.abs(a.rect.top - b.rect.top) > 1) {
+      return a.rect.top - b.rect.top;
+    }
+    return a.rect.left - b.rect.left;
+  });
+
+  const rows = [];
+  let currentY = null;
+
+  // Group into rows
+  items.forEach(({ child, rect }) => {
+    if (currentY === null || Math.abs(rect.top - currentY) > 1) {
+      rows.push([]);
+      currentY = rect.top;
+    }
+    rows[rows.length - 1].push(child);
+  });
+
+  return rows;
+}
+
 /**
  *   Sets up the positional classes that would come from the equal
  *   height module. Needs to be rerun by user when layout changes
@@ -24,37 +67,28 @@ export function dataAttributeToDatasetKey(attribute) {
  *   @param {Object} classes Override the default equal heights classes
  */
 export function setPositionClasses(parent, classes = { 
-  columnFirst: 'position-column-first', 
-  columnLast: 'position-column-last', 
-  rowFirst: 'position-row-first', 
-  rowLast: 'position-row-last' 
+  columnFirst: "position-column-first", 
+  columnLast: "position-column-last", 
+  rowFirst: "position-row-first", 
+  rowLast: "position-row-last" 
 }) {  
   const children = [...parent.children];
-  const rows = [];
-  let lastY;
-  // Check element against last
-  // If they don't match it's a new row create a new array
-  // Then push into the last array in the rows array
-  children.forEach((child) => {
-    const y = child.getBoundingClientRect().y;
-    if (lastY !== y) rows.push([]);
-    rows[rows.length - 1].push(child);
-    lastY = y;
-    child.classList.remove(...Object.values(classes)); // Remove previously set classes
-  });
-  // Apply Classes
-  rows.forEach((row, index) => {
-    if (index === 0) 
-      row.forEach(child => child.classList.add(classes.rowFirst));
-    if (index == rows.length - 1) 
-      row.forEach(child => child.classList.add(classes.rowLast));
+  
+  // Remove previously set classes from all children first to avoid stale states
+  children.forEach(child => child.classList.remove(...Object.values(classes)));
+
+  const rows = getVisualRows(parent);
+
+  if (rows.length === 0) return;
+
+  // Apply row classes
+  rows[0].forEach(child => child.classList.add(classes.rowFirst));
+  rows[rows.length - 1].forEach(child => child.classList.add(classes.rowLast));
 
-    row.forEach((child, childIndex) => {
-      if (childIndex === 0) 
-        child.classList.add(classes.columnFirst);
-      if (childIndex == row.length - 1) 
-        child.classList.add(classes.columnLast);
-    });
+  // Apply column classes
+  rows.forEach((row) => {
+    row[0].classList.add(classes.columnFirst);
+    row[row.length - 1].classList.add(classes.columnLast);
   });
 }
 

package/lib/scss/_button.scss

@@ -333,6 +333,7 @@ $styles: (
   box-shadow: get-style-value($name, "box-shadow");
   text-decoration: get-style-value($name, "text-decoration");
   font-weight: get-style-value($name, "font-weight");
+  border-radius: get-style-value($name, "border-radius");
   @if get-style-value($name, "transition-duration") {
     transition-duration: get-style-value($name, "transition-duration");
   }

package/lib/scss/components/_card-grid.demo.html

@@ -3,15 +3,21 @@
   description: A responsive grid that automatically fills rows with cards.
 -->
 <div class="card-grid">
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 1</h3><p>Content for the first card.</p></div></div>
-  </article>
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 2</h3><p>Content for the second card.</p></div></div>
-  </article>
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 3</h3><p>Content for the third card.</p></div></div>
-  </article>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Card 1</h3><p>Content for the first card.</p></div></div>
+    </article>
+  </div>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Card 2</h3><p>Content for the second card.</p></div></div>
+    </article>
+  </div>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Card 3</h3><p>Content for the third card.</p></div></div>
+    </article>
+  </div>
 </div>
 
 <!-- @ulu-demo
@@ -19,16 +25,24 @@
   description: A grid with smaller minimum column widths and tighter gaps.
 -->
 <div class="card-grid card-grid--compact">
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 1</h3></div></div>
-  </article>
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 2</h3></div></div>
-  </article>
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 3</h3></div></div>
-  </article>
-  <article class="card">
-    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 4</h3></div></div>
-  </article>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 1</h3></div></div>
+    </article>
+  </div>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 2</h3></div></div>
+    </article>
+  </div>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 3</h3></div></div>
+    </article>
+  </div>
+  <div class="card-grid__item">
+    <article class="card">
+      <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 4</h3></div></div>
+    </article>
+  </div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.29",
+  "version": "0.6.31",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [