@ulu/frontend 0.2.0-beta.9 → 0.3.0

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

@@ -11,16 +11,16 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {CssValue} compact-template-columns [1fr 1fr 1fr] The template-columns of the card-grid--compact.
-/// @prop {Dimension} compact-gap [1rem] The grid gap of the card-grid--compact.
-/// @prop {Dimension} gap [2rem] The grid gap of the card-grid.
-/// @prop {CssValue} template-columns [1fr 1fr] The template-columns of the card-grid.
+/// @prop {Dimension} gap [1.5rem] The grid gap of the card-grid.
+/// @prop {Dimension} min-width [20rem] The min-width for the implicit grid columns.
+/// @prop {Dimension} compact-gap [0.75rem] The grid gap of the card-grid--compact.
+/// @prop {Dimension} compact-min-width [14rem] The min-width for the implicit grid columns of the card-grid--compact.
 
 $config: (
   "gap" : 1.5rem,
-  "template-columns" : 1fr 1fr,
+  "min-width" : 20rem,
   "compact-gap" : 0.75rem,
-  "compact-template-columns" : 1fr 1fr 1fr,
+  "compact-min-width" : 14rem,
 ) !default;
 
 /// Change modules $config
@@ -51,12 +51,11 @@ $config: (
   
   #{ $prefix } {
     display: grid;
-    grid-template-columns: get("template-columns");
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, get("min-width")), 1fr));
     grid-auto-rows: 1fr;
     gap: get("gap");
     margin: get("gap") 0;
     #{ $prefix-card } {
-      max-width: none;
       margin: 0;
       &:not(#{ $prefix-card }--overlay) {
         height: 100%;
@@ -64,7 +63,7 @@ $config: (
     }
   }
   #{ $prefix }--compact {
-    grid-template-columns: get("compact-template-columns");
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, get("compact-min-width")), 1fr));
     gap: get("compact-gap");
   }
   #{ $prefix }--one-column {
@@ -73,9 +72,4 @@ $config: (
   #{ $prefix }--rows-fit {
     grid-auto-rows: auto;
   }
-  @include breakpoint.max("small") {
-    #{ $prefix } {
-      grid-template-columns: 1fr;
-    }
-  }
 }

package/lib/scss/components/_card.scss

@@ -235,9 +235,6 @@ $config: (
     flex-direction: column;
     min-height: get("body-min-height");
   }
-  #{ $prefix }__main {
-    flex-grow: 1;
-  }
   #{ $prefix }__footer {
     grid-column: 1;
     display: flex;
@@ -509,19 +506,23 @@ $config: (
         }
       }
     }
-    @include when-clickable($hover: true, $extra-selector: "#{ $prefix }--overlay") {
-      #{ $prefix }__body,
-      #{ $prefix }__footer {
-        background-color: color.get(get("overlay-background-color-hover"));
-      }
-      @if (get("overlay-shading")) {
-        #{ $prefix }__body {
-          @include -overlay-shading-gradient(
-            color.get(get("overlay-background-color-hover"))
-          );
+
+    @include when-clickable($hover: true) {
+      &#{ $prefix }--overlay {
+        #{ $prefix }__body,
+        #{ $prefix }__footer {
+          background-color: color.get(get("overlay-background-color-hover"));
+        }
+        @if (get("overlay-shading")) {
+          #{ $prefix }__body {
+            @include -overlay-shading-gradient(
+              color.get(get("overlay-background-color-hover"))
+            );
+          }
         }
       }
     }
+
     #{ $prefix }--overlay#{ $prefix }--footer-inline {
       grid-template-columns: 1fr auto;
       #{ $prefix }__footer {
@@ -561,6 +562,7 @@ $config: (
     justify-content: space-between;
   }
   #{ $prefix }__main {
+    flex-grow: 1;
     max-width: get("horizontal-main-max-width");
   }
   #{ $prefix }__aside {

package/lib/scss/components/_css-icon.scss

@@ -17,8 +17,8 @@
 
 @use "sass:map";
 @use "sass:math";
-@use "../color";
 
+@use "../color";
 @use "../utils";
 
 /// Module Settings
@@ -322,7 +322,7 @@ $config: (
 
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
     // $drag-gap-multiplier: map.get($props, "drag-gap-multiplier");
-    // $drag-gap-multiplier: if($drag-gap-multiplier, $drag-gap-multiplier, 0);
+    // $drag-gap-multiplier: utils.when($drag-gap-multiplier, $drag-gap-multiplier, 0);
     &[class*="css-icon--drag"] {
       &::before {
         margin-top: -(($alt-width + $alt-width) * get("drag-gap-multiplier"));

package/lib/scss/components/_data-grid.scss

@@ -6,13 +6,13 @@
 @use "sass:map";
 @use "sass:math";
 
+@use "../utils";
 @use "../breakpoint";
 @use "../color";
 @use "../element";
 @use "../layout";
 @use "../selector";
 @use "../typography";
-@use "../utils";
 
 /// Module Settings
 /// @type Map
@@ -96,7 +96,7 @@ $config: (
   @if (not $name) {
     @return get("gutter");
   } @else {
-    $map: if($custom-map, $custom-map, get("extra-breakpoints"));
+    $map: utils.fallback($custom-map, get("extra-breakpoints"));
     $settings: utils.require-map-get($map, $name, "grid [get-gutter]");
     @return map.get($settings, "gutter");
   }
@@ -138,7 +138,7 @@ $config: (
 @mixin create(
   $columns: get("columns"),
   $breakpoint: get-default-breakpoint(),
-  $extra-breakpoints: if(breakpoint.exists("large"), get("extra-breakpoints"), false),
+  $extra-breakpoints: utils.when(breakpoint.exists("large"), get("extra-breakpoints"), false),
   $gutter: get("gutter"),
   $include-rules: false,
   $rule-size: get("rule-size"),
@@ -513,7 +513,7 @@ $config: (
       @include -create-extra-breakpoint(
         $name: $name, 
         $breakpoint: map.get($options, "breakpoint"),
-        $gutter: if($g, $g, $gutter),
+        $gutter: utils.fallback($g, $gutter),
         $columns: $columns,
         $attribute: $attribute,
         $attribute-item: $attribute-item,
@@ -760,7 +760,7 @@ $config: (
   $select-rule-row, 
   $between: false
 ) {
-  $key: if($between, 'between', $position);
+  $key: utils.when($between, 'between', $position);
 
   &#{'[#{ $attribute }*="rules-row: #{ $key }"]'} {
     > #{ $select-item } {

package/lib/scss/components/_data-list.scss

@@ -0,0 +1,270 @@
+////
+/// @group data-list
+/// A highly flexible, responsive list layout designed for displaying self-explanatory 
+/// or loosely structured data without relying on rigid table markup. On large screens, 
+/// it perfectly aligns item content into distinct columns using CSS Subgrid, while 
+/// seamlessly adapting to a clean, stacked flex view on smaller devices. Because it 
+/// is fundamentally a list and not a data table, content within should be comprehensible 
+/// when stacked without relying on explicit column headers. It handles complex structures 
+/// through nested groupings, supports optional visual headers, and provides interactive 
+/// states for clickable rows using simple presets or custom grids.
+////
+
+/// Benchmarks:
+/// - size: 3kb (gzip 0.7 KB) 
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../breakpoint";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "stacked-breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {String} grid-template-columns [1fr] The default master grid columns.
+/// @prop {String} grid-template-columns-stacked [100%] The stacked grid columns (default is single column stack).
+/// @prop {Dimension} row-gap [0] The space between list items (rows). Forced to 0 if overlap-borders is true.
+/// @prop {Dimension} column-gap [1rem] The space between columns.
+/// @prop {Dimension} column-gap-stacked [0.5rem] The space between stacked elements when stacked within an item.
+/// @prop {Dimension} group-gap-stacked [0.25rem] The space between stacked elements inside a nested column when stacked.
+/// @prop {Dimension} padding [1rem clamp(0.65rem, 3vw, 1.5rem),] The padding inside list items.
+/// @prop {Boolean} overlap-borders [true] If true, applies a negative top margin to items to prevent double-thick borders between touching rows, and forces row-gap to 0.
+/// @prop {Dimension} border-width [1px] The border width for the list items.
+/// @prop {String} border-color ["rule-light"] The border color key for the list items.
+/// @prop {Dimension} border-radius [null] The border radius for the list items.
+/// @prop {CssValue} box-shadow [null] The box shadow for the list items.
+/// @prop {Color} background-color [transparent] The default background color for items.
+/// @prop {Color} background-color-even [null] The background color for even-numbered items (for striping).
+/// @prop {Color} background-color-hover [null] The background color for items on hover.
+/// @prop {Color} clickable-background-color-hover [#e8e8e8] The background color for clickable items on hover.
+/// @prop {String} clickable-border-color-hover ["control-border-hover"] The border color for interactive (clickable) items on hover/focus.
+/// @prop {String} stacked-breakpoint [true] The breakpoint below which groups stack. Defaults to the global default breakpoint via function fallback.
+/// @prop {Number} span-count [4] The number of span modifiers to create, increase if needed, (ie. data-list__column--span-2, --span-3, ...)
+/// @prop {CssValue} header-font-weight [bold] The font weight for the header row text.
+/// @prop {Dimension} header-border-bottom-width [2px] The width for the bottom border of the header row.
+/// @prop {String} header-border-bottom-color ["rule"] The color key for the bottom border of the header row.
+
+$config: (
+  "grid-template-columns": 1fr,
+  "grid-template-columns-stacked": 100%,
+  "row-gap": 0,
+  "column-gap": 1rem,
+  "column-gap-stacked": 0.5rem,
+  "group-gap-stacked": 0.25rem,
+  "padding": 1rem clamp(0.65rem, 3vw, 1.5rem),
+  "overlap-borders": true,
+  "border-width": 1px,
+  "border-color": "rule-light",
+  "border-radius": null,
+  "box-shadow": null,
+  "background-color": transparent,
+  "background-color-even": #f9f9f9,
+  "background-color-hover": #f0f0f0,
+  "clickable-background-color-hover": #e8e8e8, // Slightly darker for interactive indication
+  "clickable-border-color-hover": "control-border-hover",
+  "stacked-breakpoint": true,
+  "span-count" : 6,
+  "header-font-weight": bold,
+  "header-border-bottom-width": 2px,
+  "header-border-bottom-color": "rule",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "data-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo data-list
+@mixin styles {
+  @include utils.file-header('component', 'data-list');
+
+  $prefix: selector.class("data-list");
+  $stacked-bp: get("stacked-breakpoint");
+  $overlap: get("overlap-borders");
+  $border-width: get("border-width");
+  
+  #{ $prefix } {
+    display: grid;
+    
+    @if $overlap {
+      gap: 0; // Forced to 0 when borders overlap to prevent disjointed negative margins
+    } @else {
+      gap: var(--ulu-data-list-row-gap, get("row-gap"));
+    }
+    
+    // Allows inline override via custom property, falls back to config default
+    grid-template-columns: var(--ulu-data-list-columns, get("grid-template-columns"));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    @include breakpoint.max($stacked-bp) {
+      // Switch to stacked grid template (defaults to 100% stack, but can be overridden for persistent cols)
+      grid-template-columns: var(--ulu-data-list-columns-stacked, get("grid-template-columns-stacked"));
+    }
+  }
+
+  // Row Item (Passes the grid down)
+  #{ $prefix }__item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    gap: var(--ulu-data-list-column-gap, get("column-gap"));
+    padding: get("padding");
+    background-color: color.get(get("background-color"));
+    border: element.optional-border($border-width, get("border-color"));
+    border-radius: get("border-radius");
+    box-shadow: get("box-shadow");
+
+    @if $overlap {
+      margin-top: calc(-1 * #{ $border-width });
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    
+
+    @include breakpoint.max($stacked-bp) {
+      // We keep display: grid/subgrid here to respect the stacked parent grid
+      gap: var(--ulu-data-list-column-gap-stacked, get("column-gap-stacked")); 
+    }
+
+    @if (get("background-color-hover")) {
+      &:hover {
+        background-color: color.get(get("background-color-hover"));
+      }
+    }
+  }
+
+  // Interactive z-index management for borders/shadows
+  #{ $prefix }__item:hover,
+  #{ $prefix }__item:focus-within,
+  #{ $prefix }__header #{ $prefix }__item {
+    position: relative;
+    z-index: 2;
+  }
+
+  // Columns (The cells / wrappers)
+  #{ $prefix }__column {
+    display: flex;
+    align-items: center;
+    gap: var(--ulu-data-list-column-gap, get("column-gap"));
+    // Defensive Layout: Prevents flexbox/grid from refusing to shrink below intrinsic content size.
+    // Without this, a long unbroken word or URL could force the column to expand, blowing out the grid.
+    // It allows text-overflow: ellipsis to work safely within a column without breaking the layout.
+    min-width: 0; 
+  }
+
+  // Automatic Groups (Subgrid on desktop, stack on smaller screens)
+  #{ $prefix }__column:has(> #{ $prefix }__column) {
+    display: grid;
+    grid-template-columns: subgrid;
+    // Default span is 1, use modifiers below for larger spans
+    
+    @include breakpoint.max($stacked-bp) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: stretch;
+      gap: var(--ulu-data-list-group-gap-stacked, get("group-gap-stacked")); // Tighter vertical gap when stacked
+    }
+  }
+
+  // Header Row (Optional)
+  #{ $prefix }__header {
+    display: contents; // Removes wrapper so children participate in grid
+
+    // Hide headers when stacked since columns stack
+    @include breakpoint.max($stacked-bp) {
+      display: none;
+    }
+
+    #{ $prefix }__item {
+      font-weight: get("header-font-weight");
+      background-color: transparent;
+      border-bottom: element.optional-border(get("header-border-bottom-width"), get("header-border-bottom-color"));
+      border-radius: 0; // Prevent rounding on headers
+      &:hover {
+        background-color: transparent; // No hover effect on headers
+      }
+    }
+  }
+
+  // Modifiers
+
+  // Structural Edge Modifiers (Decorating the default 1fr track)
+  #{ $prefix }--prefixed {
+    grid-template-columns: var(--ulu-data-list-columns, auto 1fr);
+    @include breakpoint.max($stacked-bp) {
+      grid-template-columns: var(--ulu-data-list-columns-stacked, auto 1fr);
+    }
+  }
+  #{ $prefix }--suffixed {
+    grid-template-columns: var(--ulu-data-list-columns, 1fr auto);
+    @include breakpoint.max($stacked-bp) {
+      grid-template-columns: var(--ulu-data-list-columns-stacked, 1fr auto);
+    }
+  }
+  #{ $prefix }--prefixed#{ $prefix }--suffixed {
+    grid-template-columns: var(--ulu-data-list-columns, auto 1fr auto);
+    @include breakpoint.max($stacked-bp) {
+      grid-template-columns: var(--ulu-data-list-columns-stacked, auto 1fr auto);
+    }
+  }
+
+  // Striped Rows
+  #{ $prefix }--striped {
+    @if (get("background-color-even")) {
+      #{ $prefix }__item:nth-child(even) {
+        background-color: color.get(get("background-color-even"));
+      }
+    }
+  }
+
+  // Interactive Rows (Proxy Click Support)
+  // Applied to parent to indicate all rows are interactive
+  #{ $prefix }--clickable {
+    #{ $prefix }__item {
+      cursor: pointer;
+      &:hover,
+      &:focus-within {
+        background-color: color.get(get("clickable-background-color-hover"));
+        border-color: color.get(get("clickable-border-color-hover"));
+      }
+    }
+  }
+
+  // Spanning (Required when a subgrid contains multiple child columns)
+  @for $i from 2 through get("span-count") {
+    #{ $prefix }__column--span-#{$i} {
+      grid-column: span #{$i};
+      
+      // Reset span when stacked so it fits the simplified grid
+      @include breakpoint.max($stacked-bp) {
+        grid-column: auto;
+      }
+    }
+  }
+}

package/lib/scss/components/_data-table.scss

@@ -27,6 +27,7 @@ $-fallbacks: (
 /// @prop {Dimension} cell-padding [(0.5em,)] Padding of the th and td elements.
 /// @prop {CssValue} text-align [left] Text align of the table.
 /// @prop {String} type-size ["small"] Font size of the table.
+/// @prop {CssValue} vertical-align [top] Vertical align for td/th
 /// @prop {Color} background-color [white] Background color of table container.
 /// @prop {Color} header-background-color [#f5f4f4] Background color of the the table header.
 /// @prop {Color} body-background-color [white] Background color of table body.
@@ -58,6 +59,7 @@ $config: (
   "cell-padding" : (0.5em,),
   "text-align" : left,
   "type-size" : "small",
+  "vertical-align" : top,
   "background-color" : white,
   "header-background-color" : #f5f4f4,
   "body-background-color" : white,
@@ -148,9 +150,9 @@ $config: (
       border-bottom: get("caption-border-bottom");
     }
     th,
-    tr,
     td {
       text-align: get("text-align");
+      vertical-align: get("vertical-align");
     }
     th {
       min-width: get("column-min-width");

package/lib/scss/components/_flipcard.scss

@@ -5,8 +5,9 @@
 /// Flipcard (content revealed on backside of card after click)
 
 @use "sass:map";
-@use "../color";
+
 @use "../utils";
+@use "../color";
 @use "../selector";
 
 /// Module Settings
@@ -196,7 +197,7 @@ $config: (
     }
     #{ $prefix }__front-content {
       color: color.get(get("title-color-image"));
-      @if(get("bottom-shadow")) {
+      @if (get("bottom-shadow")) {
         // bottom position includes padding so that the shadow 
         &::after {
           content: '';

package/lib/scss/components/_index.scss

@@ -19,6 +19,7 @@
 @forward "css-icon" as css-icon-*;
 @forward "data-grid" as data-grid-*;
 @forward "data-table" as data-table-*;
+@forward "data-list" as data-list-*;
 @forward "definition-list" as definition-list-*;
 @forward "fill-context" as fill-context-*;
 @forward "flipcard" as flipcard-*;
@@ -52,8 +53,10 @@
 @forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
 @forward "hero" as hero-*;
+@forward "table-scroller" as table-scroller-*;
 @forward "tabs" as tabs-*;
 @forward "tag" as tag-*;
+@forward "tagged" as tagged-*;
 @forward "tile-grid" as tile-grid-*;
 @forward "tile-button" as tile-button-*;
 @forward "tile-grid-overlay" as tile-grid-overlay-*;
@@ -81,6 +84,7 @@
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
+@use "data-list";
 @use "definition-list";
 @use "fill-context";
 @use "flipcard";
@@ -115,7 +119,9 @@
 @use "slider";
 @use "hero";
 @use "tabs";
+@use "table-scroller";
 @use "tag";
+@use "tagged";
 @use "tile-grid";
 @use "tile-button";
 @use "tile-grid-overlay";
@@ -144,6 +150,7 @@ $all-includes: (
   "css-icon",
   "data-grid",
   "data-table",
+  "data-list",
   "definition-list",
   "fill-context",
   "flipcard",
@@ -177,7 +184,9 @@ $all-includes: (
   "slider",
   "hero",
   "tabs",
+  "table-scroller",
   "tag",
+  "tagged",
   "tile-grid",
   "tile-button",
   "tile-grid-overlay",
@@ -254,6 +263,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "tag")) {
     @include tag.styles;
   }
+  @if (list.index($includes, "tagged")) {
+    @include tagged.styles;
+  }
   @if (list.index($includes, "callout")) {
     @include callout.styles;
   }
@@ -275,6 +287,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "data-table")) {
     @include data-table.styles;
   }
+  @if (list.index($includes, "data-list")) {
+    @include data-list.styles;
+  }
   @if (list.index($includes, "definition-list")) {
     @include definition-list.styles;
   }
@@ -374,6 +389,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "tabs")) {
     @include tabs.styles;
   }
+  @if (list.index($includes, "table-scroller")) {
+    @include table-scroller.styles;
+  }
   @if (list.index($includes, "tile-grid")) {
     @include tile-grid.styles;
   }

package/lib/scss/components/_menu-stack.scss

@@ -296,7 +296,7 @@ $styles: (
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
-    @include element.summary-remove-marker;
+    @include element.summary-remove-marker();  
   }
 
   // Modifiers