@ulu/frontend 0.1.0-beta.4 → 0.1.0-beta.41

package/scss/components/_index.scss

@@ -6,11 +6,13 @@
 @forward "accordion" as accordion-*;
 @forward "adaptive-spacing" as adaptive-spacing-*;
 @forward "badge" as badge-*;
+@forward "basic-hero" as basic-hero-*;
 @forward "button" as button-*;
 @forward "button-verbose" as button-verbose-*;
 @forward "callout" as callout-*;
 @forward "card" as card-*;
 @forward "card-grid" as card-grid-*;
+@forward "counter-list" as counter-list-*;
 @forward "css-icon" as css-icon-*;
 @forward "data-grid" as data-grid-*;
 @forward "data-table" as data-table-*;
@@ -22,6 +24,7 @@
 @forward "image-grid" as image-grid-*;
 @forward "links" as links-*;
 @forward "list-lines" as list-lines-*;
+@forward "list-inline" as list-inline-*;
 @forward "list-ordered" as list-ordered-*;
 @forward "list-unordered" as list-unordered-*;
 @forward "menu-stack" as menu-stack-*;
@@ -36,6 +39,7 @@
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
 @forward "skip-link" as skip-link-*;
+@forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
@@ -54,11 +58,13 @@
 @use "adaptive-spacing";
 @use "accordion";
 @use "badge";
+@use "basic-hero";
 @use "button";
 @use "button-verbose";
 @use "callout";
 @use "card";
 @use "card-grid";
+@use "counter-list";
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
@@ -69,6 +75,7 @@
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
+@use "list-inline";
 @use "list-ordered";
 @use "list-unordered";
 @use "links";
@@ -84,6 +91,7 @@
 @use "rule";
 @use "scroll-slider";
 @use "skip-link";
+@use "sticky-list";
 @use "slider";
 @use "hero";
 @use "tabs";
@@ -103,11 +111,13 @@ $all-includes: (
   "accordion",
   "adaptive-spacing",
   "badge",
+  "basic-hero",
   "button",
   "button-verbose",
   "callout",
   "card",
   "card-grid",
+  "counter-list",
   "css-icon",
   "data-grid",
   "data-table",
@@ -119,6 +129,7 @@ $all-includes: (
   "image-grid",
   "links",
   "list-lines",
+  "list-inline",
   "list-ordered",
   "list-unordered",
   "menu-stack",
@@ -131,6 +142,7 @@ $all-includes: (
   "rule",
   "scroll-slider",
   "skip-link",
+  "sticky-list",
   "slider",
   "hero",
   "tabs",
@@ -196,6 +208,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
+  @if (list.index($includes, "basic-hero")) {
+    @include basic-hero.styles;
+  }
   @if (list.index($includes, "tag")) {
     @include tag.styles;
   }
@@ -208,6 +223,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "card-grid")) {
     @include card-grid.styles;
   }
+  @if (list.index($includes, "counter-list")) {
+    @include counter-list.styles;
+  }
   @if (list.index($includes, "css-icon")) {
     @include css-icon.styles;
   }
@@ -241,6 +259,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "list-lines")) {
     @include list-lines.styles;
   }
+  @if (list.index($includes, "list-inline")) {
+    @include list-inline.styles;
+  }
   @if (list.index($includes, "list-unordered")) {
     @include list-unordered.styles;
   }
@@ -283,6 +304,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "skip-link")) {
     @include skip-link.styles;
   }
+  @if (list.index($includes, "sticky-list")) {
+    @include sticky-list.styles;
+  }
   @if (list.index($includes, "slider")) {
     @include slider.styles;
   }

package/scss/components/_list-inline.scss

@@ -0,0 +1,80 @@
+////
+/// @group list-inline
+////
+
+@use "sass:map";
+
+@use "../element";
+@use "../selector";
+@use "../utils";
+
+/// Module Config
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
+/// @prop {Dimension} margin-top [0] Top margin of list.
+/// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
+/// @prop {Dimension} space-between [1em] Gap between item and dividers
+/// @prop {Dimension} space-between-large [1em] Gap between item and dividers when using large-gap modifier
+
+$config: (
+  "rule-style" : "light",
+  "margin-top": 0,
+  "margin-bottom": 1em,
+  "space-between" : 1em,
+  "space-between-large" : 2em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-list-inline-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-list-inline-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "list-inline [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-inline-styles();
+
+@mixin styles {
+  $prefix: selector.class("list-inline");
+  $border: element.get-rule-style(get("rule-style"));
+  
+  ul#{ $prefix },
+  #{ $prefix } ul {
+    list-style: none;
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix } {
+    li {
+      // Not using flex gap because we would need to position
+      // pseudo for divider, so we would still need to use math
+      // So custom properties couldn't be used (no benefit)
+      padding-right: get("space-between");
+      margin-right: get("space-between");
+      border-right: $border;
+      &:last-child {
+        border-right: none;
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+  }
+  #{ $prefix }--large-gap {
+    li {
+      padding-right: get("space-between-large");
+      margin-right: get("space-between-large");
+    }
+  }
+}

package/scss/components/_list-lines.scss

@@ -3,25 +3,40 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 
 @use "../element";
-@use "../color";
 @use "../typography";
+@use "../selector";
 @use "../utils";
 
+// Used for function fallback
+$-fallbacks: (
+  "dense-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
 /// Module Config
 /// @prop {Boolean} border-first [true] If enabled, adds a top border to the first item in list-lines.
 /// @prop {Boolean} border-last [true] If enabled, adds a bottom border to the last item in list-lines.
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
 /// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
 /// @prop {Dimension} margin-top [0] Top margin of list.
 /// @prop {Dimension} padding-between [1em] Padding between items in list.
+/// @prop {Dimension} padding-between [1em] Padding between items in list when using dense modifier
+/// @prop {Dimension} line-height-dense [true] Line height when list lines has dense modifier (defaults to typography line-height-dense)
 
 $config: (
   "border-first" : true,
   "border-last" : true,
   "margin-bottom": 1em,
   "margin-top": 0,
-  "padding-between" : 1em
+  "rule-style" : "light",
+  "padding-between" : 1em,
+  "dense-padding-between" : 0.65em,
+  "dense-line-height" : true
 ) !default;
 
 /// Change modules $config
@@ -39,31 +54,8 @@ $config: (
 ///   @include ulu.component-list-lines-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "grid [config]");
-}
-
-/// Output component styles
-
-@mixin inner-styles {
-  $border: element.get-rule-style("light") !default;
-  list-style: none;
-  margin: get("margin-top") 0 get("margin-bottom") 0;
-  padding: 0;
-  @if (get("border-first")) {
-    border-top: $border;
-  }
-  >li {
-    border-bottom: $border;
-    padding: get("padding-between") 0;
-    >*:last-child {
-      margin-bottom: 0;
-    }
-    @if (not get("border-last")) {
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
-  }
+  $value: utils.require-map-get($config, $name, "list-lines [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output component stylesheet
@@ -71,14 +63,33 @@ $config: (
 ///  @include ulu.component-list-lines-styles();
 
 @mixin styles {
-  
-  .list-lines {
-    @include inner-styles;
+  $prefix: selector.class("list-lines");
+  $border: element.get-rule-style(get("rule-style"));
+
+  #{ $prefix } {
+    list-style: none;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+    padding: 0;
+    @if (get("border-first")) {
+      border-top: $border;
+    }
+    >li {
+      border-bottom: $border;
+      padding: get("padding-between") 0;
+      >*:last-child {
+        margin-bottom: 0;
+      }
+      @if (not get("border-last")) {
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+    }
   }
-  .list-lines--dense {
+  #{ $prefix }--dense {
     >li {
-      padding: 0.5em 0;
-      line-height: typography.get("line-height-dense");
+      padding: get("dense-padding-between") 0;
+      line-height: get("dense-line-height");
     }
   }
 }

package/scss/components/_list-ordered.scss

@@ -3,7 +3,6 @@
 ////
 
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Output component stylesheet

package/scss/components/_menu-stack.scss

@@ -19,12 +19,20 @@ $-fallbacks: (
   "link-border-radius" : (
     "function" : meta.get-function("get", false, "button"),
     "property" : "border-radius"
+  ),
+  "label-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+  "link-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
   )
 );
     
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} checkbox-area-width [3em] The width of the checkbox are.
+/// @prop {Dimension} selectable-input-width [3em] The width of the checkbox/radio input
 /// @prop {Boolean} link-separated-margin [false] Enables a margin between the items in the menu-stack.
 /// @prop {Boolean} link-separated-rule-style [false] Enables a rule between the items in the menu-stack.
 /// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
@@ -36,7 +44,8 @@ $-fallbacks: (
 /// @prop {Color} label-color [null] The type color of the label.
 /// @prop {Dimension} label-margin [0.5em] The margin of the label.
 /// @prop {CssValue} label-text-transform [uppercase] Transforms the label text.
-/// @prop {CssValue} label-type-size [false] Adjusts the type size of the label.
+/// @prop {CssValue} label-type-size [false] Adjusts the type size of the label. Only uses font-size from type size.
+/// @prop {CssValue} label-line-height [true] Adjust the label line-height, defaults to typography line-height-dense
 /// @prop {list} link-active-selectors [(.is-active, '[aria-current=page]')] Selectors to apply active styling.
 /// @prop {Color} link-background-color [transparent] The background color of the menu-stack toggle. 
 /// @prop {Color} link-background-color-active [rgb(219, 219, 219)] The background color of the menu-stack toggle when active.
@@ -46,6 +55,7 @@ $-fallbacks: (
 /// @prop {Color} link-color-active [black] The type color of the menu-stack toggle when active.
 /// @prop {String} link-color-hover [link-hover] The type color of the menu-stack toggle when hovered or focused.  This uses color.scss, so the value of this option should be a color variable from color.scss.
 /// @prop {CssValue} link-font-weight [null] The font weight of the menu-stack toggle.
+/// @prop {CssValue} label-line-height [true] Adjust the link line-height, defaults to typography line-height-dense
 /// @prop {Dimension} link-icon-margin [0.65em] Adds a right margin to the icon.
 /// @prop {Dimension} link-icon-width [1em] The width of the icon.
 /// @prop {Dimension} link-margin [0.2em] Margin for the menu-stack toggle.
@@ -53,34 +63,35 @@ $-fallbacks: (
 /// @prop {Dimension} link-padding-y [0.35em] Vertical padding for menu-stack toggle.
 
 $config: (
-  "checkbox-area-width" : 3em,
+  "selectable-input-width" : 3em,
   "nested-indent" : 0.5em,
-  "rule-style" : "default",
+  "rule-style" : "light",
   "rule-margin" : 0.5em,
-  "link-separated-margin" : false,
-  "link-separated-rule-style" : false,
   "toggle-icon-rotate" : false,
-  "compact-link-padding-x": 0.75em,
-  "compact-link-padding-y": 0.25em,
-
   "label-color" : null,
   "label-margin" : 0.5em,
   "label-text-transform" : uppercase,
   "label-type-size" : false,
+  "label-line-height" : true,
+  "link-separated-margin" : false,
+  "link-separated-rule-style" : false,
   "link-active-selectors" : (".is-active", '[aria-current="page"]'),
   "link-background-color" : transparent,
   "link-background-color-active" : rgb(219, 219, 219),
-  "link-background-color-hover" : rgb(219, 219, 219),
+  "link-background-color-hover" : rgb(240, 240, 240),
   "link-border-radius" : true,
   "link-color" : "link",
   "link-color-active" : black,
   "link-color-hover" : "link-hover",
   "link-font-weight" : null,
+  "link-line-height" : true,
   "link-icon-margin" : 0.65em,
   "link-icon-width" : 1em,
   "link-margin" : 0.2em,
-  "link-padding-x": 1em,
-  "link-padding-y": 0.35em,
+  "link-padding-x": 1.25em,
+  "link-padding-y": 0.5em,
+  "compact-link-padding-x": 0.75em,
+  "compact-link-padding-y": 0.25em,
 ) !default;
 
 
@@ -116,6 +127,7 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("menu-stack");
+  $selectable-y: (get("link-padding-y") + get("link-margin"));
 
   #{ $prefix }--separated {
     border-top: element.get-rule-style(get("rule-style"));
@@ -126,6 +138,7 @@ $config: (
     text-transform: get("label-text-transform");
     padding-bottom: get("label-margin");
     color: color.get(get("label-color"));
+    line-height: get("label-line-height");
     @if (get("label-type-size")) {
       @include typography.size(get("label-type-size"), $only-font-size: true);
     }
@@ -150,7 +163,7 @@ $config: (
   // - Use the modifier "site-menu--contained" to keep the links within 
   //   the parent container (no optical alignment), should be within something that contains it
   #{ $prefix }__link,
-  #{ $prefix }__checkbox,
+  #{ $prefix }__selectable,
   #{ $prefix }__toggle {
     width: 100%;
     display: flex;
@@ -159,6 +172,7 @@ $config: (
     margin: get("link-margin") 0;
     border-radius: get("link-border-radius");
     font-weight: get("link-font-weight");
+    line-height: get("link-line-height");
     color: color.get(get("link-color"));
     background-color: color.get(get("link-background-color"));
     box-sizing: border-box;
@@ -177,19 +191,21 @@ $config: (
       }
     }
   }
-  #{ $prefix }__checkbox {
-    $checkbox-y: (get("link-padding-y") + get("link-margin"));
+  #{ $prefix }__selectable {
     padding: 0;
     position: relative;
-    [type="checkbox"] {
-      position: absolute;
-      top: $checkbox-y;
-      left: get("link-padding-x");
-    }
-    label {
-      width: 100%;
-      padding: $checkbox-y get("link-padding-x") $checkbox-y get("checkbox-area-width");
-    }
+  }
+  #{ $prefix }__selectable [type="checkbox"],
+  #{ $prefix }__selectable [type="radio"],
+  #{ $prefix }__selectable-input {
+    position: absolute;
+    top: $selectable-y;
+    left: get("link-padding-x");
+  }
+  #{ $prefix }__selectable label,
+  #{ $prefix }__selectable-label {
+    width: 100%;
+    padding: $selectable-y get("link-padding-x") $selectable-y get("selectable-input-width");
   }
   #{ $prefix }__link-text {
     display: block;
@@ -220,8 +236,8 @@ $config: (
 
   // Link buttons hang outside in margin so that text optically aligns
   #{ $prefix }--hanging {
-    padding-left: get("link-padding-x");
-    padding-right: get("link-padding-x");
+    // padding-left: get("link-padding-x");
+    // padding-right: get("link-padding-x");
     > #{ $prefix }__list > #{ $prefix }__item {
       > #{ $prefix }__link, 
       >#{ $prefix }__collapsible > #{ $prefix }__toggle {

package/scss/components/_modal.scss

@@ -54,12 +54,13 @@ $-fallbacks: (
 /// @prop {Color} header-color [white] Type color of the header.
 /// @prop {Dimension} header-padding [1rem] The padding of the modal header.
 /// @prop {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
-/// @prop {Color} resizer-background-color-hover [rgb(66, 66, 66)] The background color of the resizer when hovered or focused.
-/// @prop {Color} resizer-color [black] The type color of the resizer.
+/// @prop {Color} resizer-background-color-hover [rgb(192, 192, 192)] The background color of the resizer when hovered or focused.
+/// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
 /// @prop {Color} resizer-color-hover [black] The type color of the resizer when hovered or focused.
 /// @prop {Dimension} resizer-width [1rem] The width of the resizer.
 /// @prop {Color} title-color [white] Type color of the title.
 /// @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 {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.
@@ -75,7 +76,7 @@ $config: (
   "height":                         340px,
   "height-no-header":               100px,
   "width":                          60rem,
-  
+  "width-left-right" :              30rem,
   "animation-duration" :            300ms,
   "animation-duration-exit" :       150ms,
   "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
@@ -91,12 +92,13 @@ $config: (
   "header-color":                   white,
   "header-padding":                 1rem,
   "resizer-background-color":       rgb(221, 221, 221),
-  "resizer-background-color-hover": rgb(66, 66, 66),
-  "resizer-color":                  black,
+  "resizer-background-color-hover": rgb(192, 192, 192),
+  "resizer-color":                  rgb(99, 99, 99),
   "resizer-color-hover":            black,
-  "resizer-width":                  1rem,
+  "resizer-width":                  1.25rem,
   "title-color":                    white,
   "title-font-weight":              bold,
+  "title-font-family" :             null,
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
   "title-text-transform" :          null,
@@ -159,7 +161,7 @@ $config: (
     box-sizing: border-box;
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-sizing: border-box;
     animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
     &[open] {
@@ -168,7 +170,7 @@ $config: (
       flex-direction: column;
     }
     &::backdrop {
-      background: get("backdrop-color");
+      background: color.get(get("backdrop-color"));
       backdrop-filter: blur(get("backdrop-blur"));
       animation: uluModalBackdropIn get("animation-duration") get("animation-timing-function");
     }
@@ -180,8 +182,8 @@ $config: (
     flex: 0;
     padding: get("header-padding");
     border-bottom: get("header-border-bottom");
-    background-color: get("header-background-color");
-    color: get("header-color");
+    background-color: color.get(get("header-background-color"));
+    color: color.get(get("header-color"));
   }
   #{ $prefix }__body {
     flex: 1;
@@ -194,6 +196,7 @@ $config: (
     margin: 0;
     color: color.get(get("title-color"));
     font-weight: get("title-font-weight");
+    font-family: get("title-font-family");
     text-transform: get("title-text-transform");
     @if (get("title-size")) {
       @include typography.size(get("title-size"), $only-font-size: true);
@@ -208,15 +211,15 @@ $config: (
     font-size: get("close-font-size");
     width: get("close-size");
     height: get("close-size");
-    background-color: get("close-background-color");
+    background-color: color.get(get("close-background-color"));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: get("close-color");
+    color: color.get(get("close-color"));
     &:hover {
-      background-color: get("close-background-color-hover");
-      color: get("close-color-hover");
+      background-color: color.get(get("close-background-color-hover"));
+      color: color.get(get("close-color-hover"));
     }
   }
   #{ $prefix }__resizer {
@@ -227,17 +230,17 @@ $config: (
     width: get("resizer-width");
     display: block;
     cursor: col-resize;
-    background-color: get("resizer-background-color");
+    background-color: color.get(get("resizer-background-color"));
     display: flex;
     align-items: center;
     justify-content: center;
     transition-property: background-color, color;
     transition-duration: 300ms;
     transition-delay: 100ms; 
-    color: get("resizer-color");
+    color: color.get(get("resizer-color"));
     &:hover {
-      color: get("resizer-color-hover");
-      background-color: get("resizer-background-color-hover");
+      color: color.get(get("resizer-color-hover"));
+      background-color: color.get(get("resizer-background-color-hover"));
     }
     #{ $prefix }--left & {
       left: auto;
@@ -257,10 +260,17 @@ $config: (
       width: $size-width;
     }
   }
+
+  #{ $prefix }--fullscreen {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
   #{ $prefix }--right,
   #{ $prefix }--left {
     border-radius: 0;
     height: 100vh;
+    width: get("width-left-right");
     top: 0;
     bottom: 0;
     transform: none;
@@ -354,7 +364,7 @@ $config: (
       backdrop-filter: blur(0);
     }
     100% {
-      background-color: get("backdrop-color");
+      background-color: color.get(get("backdrop-color"));
       backdrop-filter: blur(get("backdrop-blur"));
     }
   }