@ulu/frontend 0.6.28 → 0.6.30

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/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/lib/scss/components/_modal.scss

@@ -36,6 +36,10 @@ $-fallbacks: (
     "function" : meta.get-function("get", false, "element"),
     "property" : "icon-centered-vertical-offset",
   ),
+  "title-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense",
+  )
 );
 
 /// Module Settings
@@ -79,6 +83,7 @@ $-fallbacks: (
 /// @prop {CssValue} title-font-weight [bold] Font weight of the title.
 /// @prop {CssValue} title-font-family [null] Font family for title
 /// @prop {Dimension} title-icon-margin [0.5em] The margin of the title icon
+/// @prop {Boolean|CssValue} title-line-height [true] If true will default to typography "line-height-dense", or set your own value
 /// @prop {String} title-size [large] The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
 /// @prop {CssValue} title-text-transform [null] Transform option for the title.
 /// @prop {Map} sizes [Map] Size options to enable unique stylings.
@@ -129,6 +134,7 @@ $config: (
   "title-font-family" :             null,
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
+  "title-line-height" :             true,
   "title-text-transform" :          null,
   "breakpoint" :                    true,
   "frame-aspect-ratio" :            list.slash(16, 9),
@@ -239,6 +245,7 @@ $config: (
     font-weight: get("title-font-weight");
     font-family: get("title-font-family");
     text-transform: get("title-text-transform");
+    line-height: get("title-line-height");
     @if (get("title-size")) {
       @include typography.size(get("title-size"), $only-font-size: true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.28",
+  "version": "0.6.30",
   "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": [