@ulu/frontend 0.2.1 → 0.3.1

package/lib/scss/_element.scss

@@ -430,3 +430,18 @@ $rule-margins: (
     content: "";
   }
 }
+
+/// Helper function to construct a border using the color module
+/// Returns null if the required parameters are missing or zero, preventing output
+/// @param {Dimension} $width The border width
+/// @param {String|Color} $color The color value/key to resolve through color.get()
+/// @param {String} $style [solid] The border style
+/// @return {List|Null} The combined border shorthand, or null
+
+@function optional-border($width, $color, $style: solid) {
+  // Not using () breaks syntax highlighting
+  @if $width and $width != 0 and $width != none and $color {
+    @return $width $style color.get($color);
+  }
+  @return null;
+}

package/lib/scss/_utils.scss

@@ -889,4 +889,26 @@ $config: (
 
 @function is-side($edge) {
   @return not is-end($edge);
+}
+
+/// For legacy aspect ratio conversion
+/// - For a given value if it's a percentage number convert to css aspect ratio like 16/9
+/// @param {String|Number} $value The ratio value to normalize.
+/// @return {String} Either the original value or a converted value depending on if it was a percentage number
+
+@function normalize-aspect-ratio($value) {
+  @if is-number($value) and not math.is-unitless($value) {
+    $info: number-info($value);
+    @if ($info) {
+      $u: map.get($info, "unit");
+      $v: map.get($info, "value");
+      @if $u == "%" {
+        @return string.unquote("100 / #{ $v }");
+      }
+    }
+  }
+  @if is-string($value) {
+    @return string.unquote($value);
+  }
+  @return $value;
 }

package/lib/scss/base/_elements.scss

@@ -180,6 +180,9 @@ $config: (
   blockquote {
     margin: 0;
   }
+  summary {
+    cursor: pointer;
+  }
   @if get("details-animation") {
     details {
       &[open] {

package/lib/scss/components/_accordion.scss

@@ -163,7 +163,7 @@ $config: (
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0; 
 
-        @if (get("summary-border-enabled")) {
+        @if (get("summary-border-enabled")) { 
           &::after {
             content: "";
             position: absolute;
@@ -191,7 +191,7 @@ $config: (
     align-items: center;
 
     @include typography.optional-size(get("summary-type-size"), $only-font-size: true);
-    @include element.summary-remove-marker;
+    @include element.summary-remove-marker();
     &:hover,
     &:focus {
       background-color: color.get(get("summary-background-color-hover"));
@@ -262,6 +262,11 @@ $config: (
       & > #{ $prefix }__summary {
         border-radius: get("border-radius");
         border-bottom: none;
+        @if (get("summary-border-enabled")) { 
+          &::after {
+            content: none;
+          }
+        }
       }
     }
   }

package/lib/scss/components/_badge.scss

@@ -42,7 +42,7 @@ $config: (
   "sizes" : (
     "small" : (
       "font-size" : 1.2rem,
-      "width" :  5rem
+      "width" :  4rem
     ),
     "large" : (
       "font-size" : 2.75rem,

package/lib/scss/components/_button-group.scss

@@ -13,11 +13,13 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension}  gap  [0.45em] Gap between buttons
+/// @prop {Dimension} gap [0.45em] Gap between buttons
+/// @prop {Dimension} gap-joined [0] When using --joined modifier optional gap, if 0 the buttons borders will overlap, joined-gap is useful if your buttons don't have borders
 /// @prop {Boolean}  no-min-width  [true] Buttons within the button group should have no min width
 
 $config: (
   "gap": 0.45em,
+  "gap-joined" : 0,
   "no-min-width" : true
 ) !default;
 
@@ -61,13 +63,16 @@ $config: (
   #{ $prefix }--joined {
     flex-wrap: nowrap;
     overflow-x: auto;
-    gap: 0;
+    gap: get("gap-joined");
     // border-radius: button.get("border-radius");
     #{ $prefix-button } {
       position: relative; // To move to front when hover/active
       border-radius: 0;
       min-width: 0;
-      margin-left: -(button.get("border-width"));
+      @if (get("gap-joined") == 0) {
+        margin-left: -(button.get("border-width"));
+      }
+      
       &:first-child {
         border-top-left-radius: $button-radius;
         border-bottom-left-radius: $button-radius;

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/_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/_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,6 +53,7 @@
 @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-*;
@@ -82,6 +84,7 @@
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
+@use "data-list";
 @use "definition-list";
 @use "fill-context";
 @use "flipcard";
@@ -116,6 +119,7 @@
 @use "slider";
 @use "hero";
 @use "tabs";
+@use "table-scroller";
 @use "tag";
 @use "tagged";
 @use "tile-grid";
@@ -146,6 +150,7 @@ $all-includes: (
   "css-icon",
   "data-grid",
   "data-table",
+  "data-list",
   "definition-list",
   "fill-context",
   "flipcard",
@@ -179,6 +184,7 @@ $all-includes: (
   "slider",
   "hero",
   "tabs",
+  "table-scroller",
   "tag",
   "tagged",
   "tile-grid",
@@ -281,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;
   }
@@ -380,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