@ulu/frontend 0.2.0-beta.9 → 0.3.0

package/lib/js/utils/iframe.js

@@ -0,0 +1,59 @@
+/**
+ * @module utils/iframe
+ */
+
+import { separateCssUnit } from "@ulu/utils/string.js";
+
+const staticSizeRegex = /^\d+$/;
+
+/**
+ * Checks if an element's sole content is an iframe, and determines its layout type.
+ * Useful for determining if layout fixes should be applied to containers.
+ * @param {HTMLElement} container The container to check
+ * @returns {{iframe: HTMLIFrameElement, isStaticSize: boolean, width: string|null, height: string|null, aspectRatio: string|null, fillHeight: string|null}|null} Returns an object with iframe details, or null if not a sole iframe
+ */
+export function getSoleIframeLayout(container) {
+  const iframes = container.querySelectorAll("iframe");
+  
+  if (iframes.length === 1 && container.textContent.trim() === '') {
+    const iframe = iframes[0];
+    const attrW = iframe.getAttribute("width");
+    const attrH = iframe.getAttribute("height");
+    const isStaticSize = Boolean(attrW && attrH && staticSizeRegex.test(attrW) && staticSizeRegex.test(attrH));
+    
+    let fillHeight = null;
+
+    if (!isStaticSize) {
+      // Check inline style first, then fallback to attribute
+      const rawHeight = iframe.style.height || attrH;
+      
+      if (rawHeight) {
+        // If it's just numbers, treat it as pixels
+        if (staticSizeRegex.test(rawHeight)) {
+          fillHeight = `${rawHeight}px`;
+        } else {
+          try {
+            const parsed = separateCssUnit(rawHeight);
+            // Ignore percentages as they rely on parent height which we are trying to fix
+            if (parsed && parsed.unit && parsed.unit !== "%") {
+              fillHeight = rawHeight;
+            }
+          } catch (e) {
+            // separateCssUnit throws if no pattern matches, ignore silently
+          }
+        }
+      }
+    }
+
+    return {
+      iframe,
+      isStaticSize,
+      width: isStaticSize ? attrW : null,
+      height: isStaticSize ? attrH : null,
+      aspectRatio: isStaticSize ? `${attrW} / ${attrH}` : null,
+      fillHeight
+    };
+  }
+  
+  return null;
+}

package/lib/scss/_breakpoint.scss

@@ -116,13 +116,13 @@ $sizes: (
 /// @return {Boolean} 
 /// @example scss {compile} Example usage
 ///   .test-exists {
-///     @if(ulu.breakpoint-exists("medium")) {
+///     @if (ulu.breakpoint-exists("medium")) {
 ///       @include ulu.breakpoint-min("medium") {
 ///         padding: 2rem;
 ///       }
 ///     }
 ///     // The below content doesn't print because the size doesn't exist.
-///     @if(ulu.breakpoint-exists("too-large")) {
+///     @if (ulu.breakpoint-exists("too-large")) {
 ///       @include ulu.breakpoint-min("too-large") {
 ///         padding: 20000rem;
 ///       }
@@ -131,7 +131,7 @@ $sizes: (
 
 @function exists($name) {
   $size: map.get($sizes, $name);
-  @return if($size != null, true, false);
+  @return utils.when($size != null, true, false);
 }
 
 /// Create a media query that matches the min-width for a given size

package/lib/scss/_button.scss

@@ -296,15 +296,15 @@ $styles: (
   // If a specific state [hover, active] grab that map
   @if ($state) {
     $state-style: map.get($style, $state);
-    $state-style: if($state-style, $state-style, ());
+    $state-style: utils.when($state-style, $state-style, ());
   }
   // From is the map to grab styles from
-  $from: if($state, $state-style, $style);
+  $from: utils.when($state, $state-style, $style);
   $value: map.get($from, $prop);
 
   // Fallback to parent (if hover)
   @if ($state == "hover") {
-    $value: if($value, $value, map.get($style, $prop)); 
+    $value: utils.when($value, $value, map.get($style, $prop)); 
   }
 
   @if (meta.type-of($value) == "string" and string.index($prop, "color")) {

package/lib/scss/_color.scss

@@ -20,7 +20,7 @@ $palette: (
   "white":                      white,
   "type":                       black,
   "type-secondary":             rgb(82, 82, 82),
-  "type-tertiary":              rgb(125, 125, 125),
+  "type-tertiary":              rgb(110, 110, 110),
   "type-disabled":              rgb(160, 160, 160),
   "headline":                   inherit,
   "background":                 white,
@@ -38,6 +38,7 @@ $palette: (
   "placeholder-background":     #e2e2e2,
   "placeholder-background-alt": #bababa,
   "selected":                   green,
+  "selected-background":        rgb(184, 202, 184),
   "box-shadow":                 rgba(0, 0, 0, 0.349),
   "box-shadow-hover":           rgba(0, 0, 0, 0.5),
   "rule":                       gray,
@@ -133,13 +134,13 @@ $color-classes: (
 
 @function exists($name) {
   $color: map.get($palette, $name);
-  @return if($color != null, true, false);
+  @return utils.when($color != null, true, false);
 }
 
 /// Set color contexts
 /// @param {Map} $changes A map to merge 
 /// @param {Map} $deep Use deep merge
-/// @param {Map} $overwrite Overwrite the completly (cannot be used with deep)
+/// @param {Map} $overwrite Overwrite the completely (cannot be used with deep)
 /// @example scss Overwriting contexts
 ///   @include ulu.color-set-contexts((
 ///     "dark" : (

package/lib/scss/_element.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "sass:meta";
+
 @use "color";
 @use "utils";
 
@@ -175,7 +176,12 @@ $rule-margins: (
 /// @param {String} $name ["default"] name of rule style
 
 @mixin rule-margin($name:  null) {
-  $margin: if($name, get-rule-margin($name), get("margin"));
+  $margin: null;
+  @if ($name) {
+    $margin: get-rule-margin($name);
+  } @else {
+    $margin: get("margin");
+  }
   margin-top: $margin;
   margin-bottom: $margin;
 }
@@ -337,7 +343,7 @@ $rule-margins: (
     "padding-adjust" : null,
   );
   $config: map.merge($defaults, $options);
-  $element: if($before, "::before", "::after");
+  $element: utils.when($before, "::before", "::after");
 
   &#{ $element } {
     content: "";
@@ -362,14 +368,14 @@ $rule-margins: (
   $options: (),
   $before: true
 ) {
-  $element: if($before, "::before", "::after");
+  $element: utils.when($before, "::before", "::after");
   $size: map.get($options, "size");
   $offset: map.get($options, "offset");
   $border-radius: map.get($options, "border-radius");
   $padding-adjust: map.get($options, "padding-adjust");
   
   $end: $side == "top" or $side == "bottom";
-  $position: if($offset, 0 - $offset, null);
+  $position: utils.when($offset, 0 - $offset, null);
 
   @if ($padding-adjust and $size) {
     padding-#{ $side }: calc($padding-adjust + $size);
@@ -424,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/_layout.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 @use "sass:list";
 @use "sass:meta";
+
 @use "utils";
 @use "breakpoint";
 @use "color";
@@ -128,14 +129,20 @@ $containers: (
 @mixin match-container-margin($property, $name: "container", $include-padding: true) {
   $container: get-container($name);
   $breakpoints: map.get($container, "breakpoints");
-  $padding: if($include-padding, get-container-padding($name, true), 0);
+  $padding: 0;
+  @if ($include-padding) {
+    $padding: get-container-padding($name, true);
+  }
   $max: map.get($container, "max-width");
   #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);
   @if $breakpoints {
     @each $breakpoint, $props in $breakpoints {
       $direction: map.get($props, "direction");
       @include breakpoint.from($breakpoint, $direction) {
-        $pad: if($include-padding, get-container-padding($name, true, $breakpoint), 0);
+        $pad: 0;
+        @if ($include-padding) {
+          $pad: get-container-padding($name, true, $breakpoint);
+        }
         #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);
       }
     }
@@ -154,7 +161,7 @@ $containers: (
   @if (not $is-list) {
     @return $padding;
   } @else {
-    @return list.nth($padding, if($sides, 2, 1));
+    @return list.nth($padding, utils.when($sides, 2, 1));
   }
 }
 
@@ -168,7 +175,7 @@ $containers: (
   $responsive: map.get($container, "responsive");
   $x: get-container-padding-x($name, $specific-breakpoint);
   $y: get-container-padding-y($name, $specific-breakpoint);
-  $resp-amount: if(meta.type-of($responsive) == number, $responsive, utils.get("responsive-change"));
+  $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get("responsive-change"));
   
   @if $responsive {
     @if $sides {

package/lib/scss/_selector.scss

@@ -5,6 +5,7 @@
 
 @use "sass:string";
 @use "sass:map";
+
 @use "utils";
 
 /// Module Settings
@@ -67,7 +68,7 @@ $-class-wildcards: ();
   // Check if it's a wildcard
   $wildcard: -get-class-wildcard($class);
   $override: map.get($-class-overrides, $class);
-  $updated: if($override, $override, if($wildcard, $wildcard, $class));
+  $updated: utils.fallback($override, $wildcard, $class);
   $name: "#{ get("prefix") }#{ $updated }";
   @if $name-only {
     @return $name;

package/lib/scss/_typography.scss

@@ -115,9 +115,8 @@ $config: (
 /// @param {Number} $base Conversion base (defaults to font-size)
 /// @return {Number} Rem value
 
-@function em($value, $base: null) {
+@function em($value, $base: get("font-size")) {
   @if (math.unit($value) == "px") {
-    $base: if($base, $base, get("font-size"));
     @return math.div($base, $value) * 1em;
   } @else  {
     @return $value;
@@ -128,7 +127,7 @@ $config: (
 /// @param {Boolean} $force Force words to break (will have unusual breaks)
 
 @mixin word-break($force: false) {
-  word-break: if($force, break-all, normal);
+  word-break: utils.when($force, break-all, normal);
   word-break: break-word;
   hyphens: auto;
 }
@@ -144,16 +143,16 @@ $config: (
 @function new-size($font-size, $line-height: true, $is-headline: false) {
   @return (
     "font-size": $font-size,
-    "font-weight" : if($is-headline, get("font-weight-bold"), null), 
+    "font-weight" : utils.when($is-headline, get("font-weight-bold"), null), 
     "line-height": $line-height,
-    "margin-bottom" : if($is-headline, get("margin-bottom"), null),
-    "margin-top" : if($is-headline, get("margin-top"), null),
+    "margin-bottom" : utils.when($is-headline, get("margin-bottom"), null),
+    "margin-top" : utils.when($is-headline, get("margin-top"), null),
     "responsive" : true,
-    "helper-class" : if($is-headline, false, true),
+    "helper-class" : utils.when($is-headline, false, true),
     "helper-class-prefixed" : true,
-    "base-class" : if($is-headline, true, false),
+    "base-class" : utils.when($is-headline, true, false),
     "base-class-prefixed" : false,
-    "color" : if($is-headline, color.get("headline"), null)
+    "color" : utils.when($is-headline, color.get("headline"), null)
   );
 }
 
@@ -353,7 +352,7 @@ $sizes: get-default-sizes() !default;
     line-height: get-size-converted-value($size, "line-height");
     margin-top: get-size-converted-value($size, "margin-top");
     margin-bottom: get-size-converted-value($size, "margin-bottom");
-    color: if($color, color.get($color), null);
+    color: utils.when($color, color.get($color), null);
   }
 
   // If they have breakpoints, process them

package/lib/scss/_utils.scss

@@ -106,12 +106,12 @@ $config: (
 ///     "h2" : true,
 ///     "h3" : false
 ///   );
-///   @if(ulu.utils-included("h2", $include-styles)) {
+///   @if (ulu.utils-included("h2", $include-styles)) {
 ///     h2 {
 ///       font-size: 24px;
 ///     }
 ///   }
-///   @if(ulu.utils-included("h3", $include-styles)) {
+///   @if (ulu.utils-included("h3", $include-styles)) {
 ///     h3 {
 ///       font-size: 18px;
 ///     }
@@ -136,6 +136,26 @@ $config: (
   }
 }
 
+/// Selects a value based on a condition (Ternary Function)
+/// - To replace SASS if() which is deprecated see
+/// - Eagerly evaluates arguments (use native @if or if(sass()... if you need lazy evaluation).
+/// @param {*} $condition The condition/value to test for truthiness
+/// @param {*} $true Value if true
+/// @param {*} $false Value if false
+/// @link https://sass-lang.com/documentation/breaking-changes/if-function/
+/// @example scss {compile} Example usage
+///   .test {
+///     color: ulu.utils-when(true, red, blue)
+///   }
+/// @return {*} Either true or false value based on conditions truthiness
+
+@function when($condition, $value-true, $value-false) {
+  @if $condition {
+    @return $value-true;
+  }
+  @return $value-false;
+}
+
 /// Provide a default when value type is not correct
 /// @param {String} $type type of value it should be
 /// @param {String} $value the value to provide if it is that type
@@ -177,13 +197,19 @@ $config: (
 @function number-info($number, $errors: false) {
 
   @if (meta.type-of($number) == 'number') {
-    $is-unitless: math.is-unitless($number);
-    @return (
-      "unit": if($is-unitless, null, math.unit($number)),
-      "value": if($is-unitless, $number, strip-unit($number)),
-      "invalid" : false
-    );
-
+    @if (math.is-unitless($number)) {
+      @return (
+        "unit": null,
+        "value": $number,
+        "invalid" : false
+      );
+    } @else {
+      @return (
+        "unit": math.unit($number),
+        "value": strip-unit($number),
+        "invalid" : false
+      );
+    }
   } @else {
     @if ($errors) {
       @error "Expected Number, got #{ meta.type-of($number) } for #{ $number }";
@@ -442,7 +468,7 @@ $config: (
 /// @param {*} $value The value to check
 /// @param {*} $default The value to return when true
 @function default($value, $default) {
-  @return if($value == true, $default, $value);
+  @return when($value == true, $default, $value);
 }
 
 /// Replaces all or one occurrence of a string within a string
@@ -456,7 +482,7 @@ $config: (
   $index: string.index($string, $find);
   
   @if ($index) {
-    $start: if($index == 1, "", string.slice($string, 1, string.length($find) - 1));
+    $start: when($index == 1, "", string.slice($string, 1, string.length($find) - 1));
     $end: string.slice($string, $index + string.length($find));
     $new: $start + $replace;
     @if ($all) {
@@ -542,10 +568,17 @@ $config: (
 /// @throw If the list length > 4 (incorrect syntax for shorthand)
 
 @function get-spacing($value) {
-  $is-list: meta.type-of($value) == "list";
-  $length: if($is-list, list.length($value), 1);
-  $single: $length == 1;
-  $top: if($is-list, list.nth($value, 1), $value);  // Top is always the same
+  @if (meta.type-of($value) != "list") {
+    @return (
+      "top" :    $value,
+      "right" :  $value,
+      "bottom" : $value,
+      "left" :   $value,
+    );
+  }
+
+  $length: list.length($value);
+  $top: list.nth($value, 1);  // Top is always the same
 
   @if ($length > 4) {
     @error "Spacing has more than 4 arguments (not correct shorthand)";
@@ -553,9 +586,9 @@ $config: (
 
   @return (
     "top" :    $top,
-    "right" :  if($single, $top, list.nth($value, 2)),
-    "bottom" : if($single, $top, list.nth($value, if($length >= 3, 3, 1))),
-    "left" :   if($single, $top, list.nth($value, if($length == 4, 4, 2)))
+    "right" :  list.nth($value, 1),
+    "bottom" : list.nth($value, when($length >= 3, 3, 1)),
+    "left" :   list.nth($value, when($length == 4, 4, 2))
   );
 }
 
@@ -831,7 +864,7 @@ $config: (
 /// @return {Map} The $value if it was a map, else empty map
 
 @function ensure-map($value) {
-  @return if(is-map($value), $value, ());
+  @return when(is-map($value), $value, ());
 }
 
 /// Returns true if edge passed is an end (top/bottom)
@@ -856,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

@@ -88,7 +88,7 @@ $config: (
   }
   p {
     $margin-top: typography.get("margin-top");
-    margin-top: if($margin-top, $margin-top, 0);
+    margin-top: utils.when($margin-top, $margin-top, 0);
     margin-bottom: typography.get("margin-bottom"); 
   }
   sub, sup {
@@ -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/_basic-hero.scss

@@ -81,7 +81,7 @@ $config: (
     padding-bottom: get("padding-bottom");
   }
   #{ $prefix }__content-main {
-    $min-width: if(get("main-min-width"), get("main-min-width"), get("main-max-width"));
+    $min-width: utils.fallback(get("main-min-width"), get("main-max-width"));
     // Using max/min-width so that we don't need to add selectors to change flex-basis
     // when centered. Using flex-basis: 0 to allow flexbox to decide the items width
     // allows it to expand/shrink within. min(100%... Never larger than parent

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/_button-verbose.scss

@@ -136,8 +136,8 @@ $config: (
   $cap-side: get("cap-side");
   $cap-defaults: (
     "offset" : utils.if-type("number", get("border-width"), 0),
-    "border-radius" : if(get("cap-match-radius"), get("border-radius"), 0),
-    "padding-adjust" : if(utils.is-side($cap-side), $padding-x, $padding-y)
+    "border-radius" : utils.when(get("cap-match-radius"), get("border-radius"), 0),
+    "padding-adjust" : utils.when(utils.is-side($cap-side), $padding-x, $padding-y)
   );
   
   #{ $prefix } {

package/lib/scss/components/_callout.scss

@@ -6,7 +6,6 @@
 @use "sass:map";
 @use "sass:meta";
 
-
 @use "../utils";
 @use "../selector";
 @use "../element";
@@ -132,7 +131,7 @@ $styles: (
     @if (not get("caps-disabled")) {   
       $cap-defaults: (
         "offset" : get("border-width"),
-        "border-radius" : if(get("cap-match-radius"), get("border-radius"), null),
+        "border-radius" : utils.when(get("cap-match-radius"), get("border-radius"), null),
         // "padding-adjust" : map.get($padding-info, $cap-side)
       );
       @include element.cap(
@@ -187,14 +186,14 @@ $styles: (
       @if ($cap and $caps-enabled) {
         $match-radius: utils.if-type("bool", $cap-match-radius, get("cap-match-radius"));
         // Padding adjust always has to be set (since size could change or padding)
-        $padding-info: utils.get-spacing(if($padding, $padding, get("padding")));
+        $padding-info: utils.get-spacing(utils.fallback($padding, get("padding")));
         $cap-radius: utils.if-type("number", $border-radius, get("border-radius"));
         $cap-options: utils.ensure-map(map.get($style, "cap-options"));
         $cap-defaults: (
           "size" : map.get(get("cap-options"), "size"),
           "padding-adjust" : map.get($padding-info, $cap-side),
           "offset" : $border-width,
-          "border-radius" : if($match-radius, $cap-radius, null)
+          "border-radius" : utils.when($match-radius, $cap-radius, null)
         );
 
         @include element.cap-appearance(