@ulu/frontend 0.2.0-beta.8 → 0.2.1

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)

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 {

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-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(

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/_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

@@ -54,6 +54,7 @@
 @forward "hero" as hero-*;
 @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-*;
@@ -116,6 +117,7 @@
 @use "hero";
 @use "tabs";
 @use "tag";
+@use "tagged";
 @use "tile-grid";
 @use "tile-button";
 @use "tile-grid-overlay";
@@ -178,6 +180,7 @@ $all-includes: (
   "hero",
   "tabs",
   "tag",
+  "tagged",
   "tile-grid",
   "tile-button",
   "tile-grid-overlay",
@@ -254,6 +257,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;
   }

package/lib/scss/components/_panel.scss

@@ -229,7 +229,7 @@ $styles: (
   font-family: map.get($props, "font-family");
   color: color.get(map.get($props, "color"));
   box-shadow: map.get($props, "box-shadow");
-  flex-grow: if(map.get($props, "grow") == false, 0, 1); // Default is grow
+  flex-grow: utils.when(map.get($props, "grow") == false, 0, 1); // Default is grow
   border-top: element.get-optional-rule-style(map.get($props, "border-top"));
   border-bottom: element.get-optional-rule-style(map.get($props, "border-bottom"));
   

package/lib/scss/components/_popover.scss

@@ -8,9 +8,9 @@
 @use "sass:map";
 @use "sass:meta";
 
+@use "../utils";
 @use "../selector";
 @use "../typography";
-@use "../utils";
 @use "../color";
 @use "../layout";
 @use "../element";
@@ -298,11 +298,14 @@ $config: (
   $hypotenuse: utils.hypotenuse($unitless, $unitless);
   $hypotenuse-half: math.div($hypotenuse, 2);
   $manual-extent: get("arrow-box-shadow-extent");
-  $shadow-extent: if(
-    $manual-extent,
-    $manual-extent,
-    if(utils.is-list($box-shadow), utils.box-shadow-extent($box-shadow), 5px)
-  );
+  $shadow-extent: 5px;
+  
+  @if ($manual-extent) {
+    $shadow-extent: $manual-extent;
+  } @else if (utils.is-list($box-shadow)) {
+    $shadow-extent: utils.box-shadow-extent($box-shadow);
+  }
+
   $overlap: utils.strip-unit($shadow-extent);
   $mask-height: utils.add-unit($hypotenuse-half + $overlap, $unit);
   $mask-width: utils.add-unit($hypotenuse + $overlap, $unit);

package/lib/scss/components/_tabs.scss

@@ -6,13 +6,13 @@
 @use "sass:map";
 @use "sass:meta";
 
+@use "../utils";
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
 @use "../layout";
 @use "../typography";
 @use "../element";
-@use "../utils";
 
 // Used for function fallback
 $-fallbacks: (
@@ -43,7 +43,10 @@ $-fallbacks: (
 /// @prop {Color} indicator-transition-duration [200ms] The transition duration for indicator
 /// @prop {Color} indicator-scale-start [0] The starting scale for the indicator (set to 1 to disable expanding on click)
 /// @prop {Color} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
-/// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {Color|null} tab-color-focus [null] The type color for a tab when it has keyboard focus.
+/// @prop {Color} tab-background-color-focus [#eeeeee] The background color for a tab when it has keyboard focus.
+/// @prop {Boolean} tab-hide-native-focus [true] Hides the default browser outline on focused tabs.
 /// @prop {Color} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-background-color-selected [null] The tab background color when selected
 /// @prop {CssValue} tab-font-weight [true] The font weight for the tab, defaults to typography "font-weight-semibold"
@@ -69,6 +72,9 @@ $config: (
   "indicator-scale-start" : 0,
   "tab-color" : "type-tertiary",
   "tab-color-hover" : "selected",
+  "tab-color-focus": null,
+  "tab-background-color-focus": "selected-background",
+  "tab-hide-native-focus": true,
   "tab-color-selected" : "selected",
   "tab-background-color-selected" : null,
   "tab-font-weight" : true,
@@ -159,12 +165,21 @@ $config: (
       // Add focus so as user clicks item it starts the active state styling
       &:focus,
       &[aria-selected="true"] {
-        outline: none; // We are providing focus styling
+        @if get("tab-hide-native-focus") {
+          outline: none;
+        }
         &::after {
           opacity: 1;
           transform: scaleX(1);
         }
       }
+      // Add new focus-specific colors
+      // Using :focus-visible so it only applies to keyboard focus
+      &:focus-visible,
+      &[aria-selected="true"]:focus-visible {
+        color: color.get(get("tab-color-focus"));
+        background-color: color.get(get("tab-background-color-focus"));
+      }
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
         background-color: color.get(get("tab-background-color-selected"));
@@ -209,8 +224,8 @@ $config: (
         white-space: normal;
         text-align: left;
         &::after {
-          left: if(get("vertical-indicator-left"), 0, auto);
-          right: if(not get("vertical-indicator-left"), 0, auto);;
+          left: utils.when(get("vertical-indicator-left"), 0, auto);
+          right: utils.when(not get("vertical-indicator-left"), 0, auto);
           bottom: 0;
           top: 0;
           width: get("indicator-size");

package/lib/scss/components/_tagged.scss

@@ -0,0 +1,59 @@
+////
+/// @group tagged
+/// Provides styles to tags that should appear as superscripts of their related content. Custom properties --ulu-tagged-y, --ulu-tagged-x, and --ulu-tagged-transform can be adjusted if needed (inline style, in a specific styling for something, etc)
+////
+
+@use "sass:map";
+
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} position-x [-0.75em] Horizontal absolute position of the tag.
+/// @prop {Dimension} position-y [-0.75em] Vertical absolute position of the tag.
+/// @prop {CssValue} icon-opacity [null] Adds a transform styling to the tag.
+
+$config: (
+  "position-x": 0,
+  "position-y": 0,
+  "transform":  translate(50%, -50%)
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tagged-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-tagged-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "tagged [config]");
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-tagged-styles();
+
+@mixin styles {
+
+  $prefix: selector.class("tagged");
+
+  #{ $prefix } {
+    position: relative;
+  }
+  #{ $prefix }__tag {
+    position: absolute;
+    top: var(--ulu-tagged-y, get("position-y"));
+    right: var(--ulu-tagged-x, get("position-x"));
+    transform: var(--ulu-tagged-transform, get("transform"));
+    margin: 0; // So it doesn't interfere if present
+  }
+}