@ulu/frontend 0.1.0-beta.3 → 0.1.0-beta.30

package/scss/components/_form-theme.scss

@@ -7,99 +7,111 @@
 @use "sass:meta";
 @use "sass:math";
 @use "sass:list";
+
 @use "../selector";
 @use "../utils";
 @use "../color";
 @use "../element";
 @use "../typography";
 
+// Used for function fallback
+$-fallbacks: (
+  "description-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense",
+  ),
+);
+
 /// Module Settings
 /// @type Map
-/// @prop {} color [inherit]
-/// @prop {} color-placeholder ["type-tertiary"]
-/// @prop {} drupal [false]
-/// @prop {} error-color ["error"]
-/// @prop {} error-highlight-color [rgb(251, 242, 242)]
-/// @prop {} error-selector [".is-danger"]
-/// @prop {} file-button-style [true]
-/// @prop {} font-weight-label [bold]
-/// @prop {} font-weight-legend [bold]
-/// @prop {} font-weight-placeholder [normal]
-/// @prop {} font-weight-input [null]
-/// @prop {} font-weight-textarea [null]
-/// @prop {} font-weight-select [null]
-/// @prop {} input-border [element.get-rule-style()]
-/// @prop {} input-border-radius [0]
-/// @prop {} input-margin-y [0.75em]
-/// @prop {} input-padding-x [0.5em]
-/// @prop {} input-padding-y [0.25em]
-/// @prop {} input-min-width [10em]
-/// @prop {} input-background-color [white]
-/// @prop {} item-border-radius [null]
-/// @prop {} item-highlight-width [6px]
-/// @prop {} required-color ["error"]
-/// @prop {} text-input-margin-bottom [0.5em]
-/// @prop {} text-input-margin-top [1em]
-/// @prop {} warning-color ["warning"]
-/// @prop {} warning-highlight-color [rgb(255, 249, 237)]
-/// @prop {} warning-selector [".is-warning"]
-/// @prop {} check-input-color [currentColor]
-/// @prop {} check-input-size [1.15em]
-/// @prop {} check-input-touch-size [2em]
-/// @prop {} check-input-background-color [white]
-/// @prop {} check-input-background-color-checked [white]
-/// @prop {} check-input-background-color-hover [white]
-/// @prop {} check-input-background-color-indeterminate [white]
-/// @prop {} check-input-border [null]
-/// @prop {} check-input-border-color-hover [null]
-/// @prop {} check-input-border-color-checked [null]
-/// @prop {} check-input-border-color-indeterminate [null]
-/// @prop {} check-input-border-color-focus [null]
-/// @prop {} check-input-outline [null]
-/// @prop {} check-input-outline-hover [null]
-/// @prop {} check-input-outline-checked [null]
-/// @prop {} check-input-outline-focus [1px solid white]
-/// @prop {} check-input-touch-color-hover [#e8e8e8]
-/// @prop {} check-input-touch-color-focus [null]
-/// @prop {} check-input-radio-size [0.3em]
-/// @prop {} check-input-checkmark-width [0.38em]
-/// @prop {} check-input-checkmark-height [0.68em]
-/// @prop {} check-input-checkmark-offset-y [-0.2em]
-/// @prop {} check-input-checkmark-stroke-size [0.18em]
-/// @prop {} check-input-mark-color [currentColor]
-/// @prop {} check-input-mark-color-hover [null]
-/// @prop {} check-input-mark-color-focus [null]
-/// @prop {} check-input-mark-color-checked [null]
-/// @prop {} check-input-mark-color-indeterminate [null]
-/// @prop {} check-input-disabled-opacity [0.6]
-/// @prop {} check-input-border-radius [null]
-/// @prop {} description-color [false]
-/// @prop {} description-margin [(0.25em 0)]
-/// @prop {} description-max-width [25em]
-/// @prop {} fieldset-background [transparent]
-/// @prop {} fieldset-border [none]
-/// @prop {} fieldset-margin-bottom [1rem]
-/// @prop {} fieldset-margin-top [1rem]
-/// @prop {} fieldset-padding [0]
-/// @prop {} fieldset-margin-compact [0]
-/// @prop {} fieldset-border-radius [0]
-/// @prop {} fieldset-legend-color [inherit]
-/// @prop {} fieldset-legend-border-bottom [null]
-/// @prop {} select-border-radius [4px]
-/// @prop {} select-background-color [null]
-/// @prop {} select-border [null]
-/// @prop {} select-padding-x [null]
-/// @prop {} select-padding-y [null]
-/// @prop {} select-image [null]
-/// @prop {} select-image-size [0.9em]
-/// @prop {} select-image-offset [0.7em]
-/// @prop {} select-image-margin [0.65em]
+/// @prop {CssValue} color [inherit] Color of the text of the form.
+/// @prop {CssValue} color-placeholder ["type-tertiary"] Color for the placeholder text.
+/// @prop {Boolean} drupal [false] Toggle if using drupal to include drupal specific styling.
+/// @prop {Color} error-color ["danger"] Type color for errors.
+/// @prop {Color} error-highlight-color [rgb(251, 242, 242)] Outline color of error container.
+/// @prop {String} error-selector [".is-danger"] Class for error styling.
+/// @prop {} file-button-style [true] @joe-check should this have a fallback
+/// @prop {CssValue} font-weight-label [bold] Font weight of the labels.
+/// @prop {CssValue} font-weight-legend [bold] Font weight of the legend.
+/// @prop {CssValue} font-weight-placeholder [normal] Font weight of placeholder text.
+/// @prop {CssValue} font-weight-input [null] Font weight of input text.
+/// @prop {CssValue} font-weight-textarea [null] Font weight of textarea text.
+/// @prop {CssValue} font-weight-select [null] Font weight of select text.
+/// @prop {CssValue} input-border [element.get-rule-style()] Border of the input.
+/// @prop {Dimension} input-border-radius [0] Border radius of the input.
+/// @prop {Dimension} input-padding-x [0.5em] Horizontal padding of the input.
+/// @prop {Dimension} input-padding-y [0.25em] Vertical padding of the input.
+/// @prop {Dimension} input-min-width [10em] Min width of the input.
+/// @prop {Color} input-background-color [white] Background color of the input.
+/// @prop {Dimension} item-border-radius [null] Border radius for __item.
+/// @prop {Dimension} item-highlight-width [6px] Width of the item box highlight.
+/// @prop {Color} required-color ["danger"] Color for required text.
+/// @prop {Dimension} text-input-margin-bottom [0.5em] Bottom margin for the label.
+/// @prop {Dimension} text-input-margin-top [1em] Top margin for the label.
+/// @prop {Color} warning-color ["warning"] The warning text color.
+/// @prop {Color} warning-highlight-color [rgb(255, 249, 237)] Outline color of the warning.
+/// @prop {String} warning-selector [".is-warning"] Selector for adding warning styles.
+/// @prop {Color} check-input-color [currentColor] @joe-check unused
+/// @prop {Dimension} check-input-size [1.15em] Size of input box.
+/// @prop {Dimension} check-input-touch-size [2em] Touchable size of the input box.
+/// @prop {Color} check-input-background-color [white] Background color for the check input.
+/// @prop {Color} check-input-background-color-checked [white] Background color for the check input when checked.
+/// @prop {Color} check-input-background-color-hover [white] Background color for the check input when hovered or focused.
+/// @prop {Color} check-input-background-color-indeterminate [white] Background color for the indeterminate check input.
+/// @prop {} check-input-border [null] @joe-check check how this is called with a fallback in the styles mixin
+/// @prop {Color} check-input-border-color-hover [null] Check input border color.
+/// @prop {Color} check-input-border-color-checked [null] Check input border color when checked.
+/// @prop {Color} check-input-border-color-indeterminate [null] Indeterminate check input border color.
+/// @prop {Color} check-input-border-color-focus [null] Check input border color when hovered or focused.
+/// @prop {CssValue} check-input-outline [null] Check input outline.
+/// @prop {CssValue} check-input-outline-hover [null]
+/// @prop {CssValue} check-input-outline-checked [null]
+/// @prop {CssValue} check-input-outline-focus [1px solid white]
+/// @prop {Color} check-input-touch-color-hover [#e8e8e8]
+/// @prop {Color} check-input-touch-color-focus [null]
+/// @prop {Dimension} check-input-radio-size [0.3em]
+/// @prop {Dimension} check-input-checkmark-width [0.38em]
+/// @prop {Dimension} check-input-checkmark-height [0.68em]
+/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em]
+/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em]
+/// @prop {Color} check-input-mark-color [currentColor]
+/// @prop {Color} check-input-mark-color-hover [null]
+/// @prop {Color} check-input-mark-color-focus [null]
+/// @prop {Color} check-input-mark-color-checked [null]
+/// @prop {Color} check-input-mark-color-indeterminate [null]
+/// @prop {Number} check-input-disabled-opacity [0.6]
+/// @prop {Dimension} check-input-border-radius [null]
+/// @prop {Color} description-color [false]
+/// @prop {CssValue} description-margin [(0.25em 0)]
+/// @prop {Dimension} description-max-width [25em]
+/// @prop {Number} description-line-height [true] Line height for description element, defaults to typograpahy line-height-dense
+/// @prop {Color} fieldset-background [transparent]
+/// @prop {CssValue} fieldset-border [none]
+/// @prop {Dimension} fieldset-margin-bottom [1rem]
+/// @prop {Dimension} fieldset-margin-top [1rem]
+/// @prop {Dimension} fieldset-padding [0]
+/// @prop {Dimension} fieldset-margin-compact [0]
+/// @prop {Dimension} fieldset-border-bottom [0]
+/// @prop {Dimension} fieldset-border-radius [0]
+/// @prop {Color} fieldset-legend-color [inherit]
+/// @prop {Dimension} fieldset-legend-border-bottom [null]
+/// @prop {Dimension} fieldset-legend-padding-bottom [null]
+/// @prop {Dimension} select-border-radius [4px]
+/// @prop {Color} select-background-color [null]
+/// @prop {CssValue} select-border [null]
+/// @prop {Dimension} select-padding-x [null]
+/// @prop {Dimension} select-padding-y [null]
+/// @prop {CssValue} select-image [null] 
+/// @prop {Dimension} select-image-size [0.9em]
+/// @prop {Dimension} select-image-offset [0.7em]
+/// @prop {Dimension} select-image-margin [0.65em]
+/// @prop {Dimension} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (
   "color"                                     : inherit,
   "color-placeholder"                         : "type-tertiary",
   "drupal"                                    : false,
-  "error-color"                               : "error",
+  "error-color"                               : "danger",
   "error-highlight-color"                     : rgb(251, 242, 242),
   "error-selector"                            : ".is-danger",
   "file-button-style"                         : true,
@@ -111,14 +123,14 @@ $config: (
   "font-weight-select"                        : null,
   "input-border"                              : element.get-rule-style(),
   "input-border-radius"                       : 0,
-  "input-margin-y"                            : 0.75em,
+  "item-margin-y"                            : 0.75em,
   "input-padding-x"                           : 0.5em,
   "input-padding-y"                           : 0.25em,
   "input-min-width"                           : 10em,
   "input-background-color"                    : white,
   "item-border-radius"                        : null,
   "item-highlight-width"                      : 6px,
-  "required-color"                            : "error",
+  "required-color"                            : "danger",
   "text-input-margin-bottom"                  : 0.5em,
   "text-input-margin-top"                     : 1em,
   "warning-color"                             : "warning",
@@ -157,6 +169,7 @@ $config: (
   "description-color"                         : false,
   "description-margin"                        : (0.25em 0),
   "description-max-width"                     : 25em,
+  "description-line-height"                   : true,
   "fieldset-background"                       : transparent,
   "fieldset-border"                           : none,
   "fieldset-margin-bottom"                    : 1rem,
@@ -166,6 +179,8 @@ $config: (
   "fieldset-border-radius"                    : 0,
   "fieldset-legend-color"                     : inherit,
   "fieldset-legend-border-bottom"             : null,
+  "fieldset-legend-padding-bottom"            : 0,
+  "fieldset-legend-margin-bottom"             : 0.5em,
   "select-border-radius"                      : 4px,
   "select-background-color"                   : null,
   "select-border"                             : null,
@@ -175,6 +190,7 @@ $config: (
   "select-image-size"                         : 0.9em,
   "select-image-offset"                       : 0.7em,
   "select-image-margin"                       : 0.65em,
+  "inline-gap"                                : 1em
 ) !default;
 
 /// Change modules $config
@@ -192,7 +208,8 @@ $config: (
 ///   @include ulu.component-form-theme-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "component-form-theme [config]");
+  $value: utils.require-map-get($config, $name, "component-form-theme [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 @function -fallback($op1, $op2) {
@@ -258,7 +275,7 @@ $config: (
   textarea,
   label,
   legend {
-    color: get("color");
+    color: color.get(get("color"));
     font-size: 1em;
     max-width: 100%;
     line-height: typography.get("line-height-dense");
@@ -291,7 +308,7 @@ $config: (
   [type="password"],
   [type="file"] {
     padding: get("input-padding-y") get("input-padding-x");
-    background-color: get("input-background-color");
+    background-color: color.get(get("input-background-color"));
     border-radius: get("input-border-radius");
     transition: border linear 0.2s;
     border: get("input-border");
@@ -305,9 +322,8 @@ $config: (
   }
   select {
     font-weight: get("font-weight-select");
-    border: get("select-border");
     border-radius: get("select-border-radius");
-    background-color: get("select-background-color");
+    background-color: color.get(get("select-background-color"));
     padding: -fallback("select-padding-y", "input-padding-y") -fallback("select-padding-x", "input-padding-x");
     border: -fallback("select-border", "input-border");
     @if get("select-image") {
@@ -365,39 +381,39 @@ $config: (
       opacity: 0;
       transform: rotate(45deg);
       transition: opacity ease-out 150ms;
-      border: get("check-input-radio-size") solid get("check-input-mark-color");
+      border: get("check-input-radio-size") solid color.get(get("check-input-mark-color"));
       border-radius: 50%;
     }
     &:focus {
-      background-color: get("check-input-touch-color-focus");
+      background-color: color.get(get("check-input-touch-color-focus"));
       &:before {
-        border-color: get("check-input-border-color-focus");
+        border-color: color.get(get("check-input-border-color-focus"));
         outline: get("check-input-outline-focus");
       }
       &:after {
-        border-color: get("check-input-mark-color-focus");
+        border-color: color.get(get("check-input-mark-color-focus"));
       }
     }
     &:hover {
-      background-color: get("check-input-touch-color-hover");
+      background-color: color.get(get("check-input-touch-color-hover"));
       &:before {
         outline: get("check-input-outline-hover");
-        background-color: get("check-input-background-color-hover");
-        border-color: get("check-input-border-color-hover");
+        background-color: color.get(get("check-input-background-color-hover"));
+        border-color: color.get(get("check-input-border-color-hover"));
       }
       &:after {
-        border-color: get("check-input-mark-color-hover");
+        border-color: color.get(get("check-input-mark-color-hover"));
       }
     }
     &:checked {
       &:before {
-        background-color: get("check-input-background-color-checked");
-        border-color: get("check-input-border-color-checked");
+        background-color: color.get(get("check-input-background-color-checked"));
+        border-color: color.get(get("check-input-border-color-checked"));
         outline: get("check-input-outline-checked");
       }
       &:after {
         opacity: 1;
-        border-color: get("check-input-mark-color-checked");
+        border-color: color.get(get("check-input-mark-color-checked"));
       }
     }
     
@@ -428,15 +444,15 @@ $config: (
     &:indeterminate,
     &[aria-checked=mixed] {
       &:before {
-        background-color: get("check-input-background-color-indeterminate");
-        border-color: get("check-input-border-color-indeterminate");
+        background-color: color.get(get("check-input-background-color-indeterminate"));
+        border-color: color.get(get("check-input-border-color-indeterminate"));
       }
       &:after {
         border-right: none;
         transform: translatey(50%);
         opacity: 1;
         height: get("check-input-checkmark-stroke-size");
-        border-color: get("check-input-mark-color-indeterminate");
+        border-color: color.get(get("check-input-mark-color-indeterminate"));
       }
     }
   }
@@ -449,38 +465,32 @@ $config: (
     margin-top: get("fieldset-margin-top");
     margin-bottom: get("fieldset-margin-bottom");
     border: get("fieldset-border");
-    background-color: get("fieldset-background");
+    background-color: color.get(get("fieldset-background"));
     border-radius: get("fieldset-border-radius");
     padding: get("fieldset-padding");
     
     > legend {
       font-weight: get("font-weight-legend");
       display: block;
-      margin: 0 0 0.5em 0;
+      margin: 0 0 get("fieldset-legend-margin-bottom") 0;
       border: 0;
-      padding: 0;
+      padding: 0 0 get("fieldset-legend-padding-bottom") 0;
       width: 100%;
       float: left;
-      > span {
-        display: block;
-        margin-bottom: 1rem;
-        padding-bottom: 0.5em;
-        padding-top: 0.5em;
-        border-bottom: get("fieldset-legend-border-bottom");
-        color: get("fieldset-legend-color");
-      }
+      border-bottom: get("fieldset-legend-border-bottom");
+      color: color.get(get("fieldset-legend-color"));
       & ~ * {
         clear: left;
       }
     }
     &#{ $selectError } {
       > legend {
-        color: $errorColor;
+        color: color.get($errorColor);
       }
     }
     &#{ $selectWarning } {
       > legend {
-        color: $warningColor;
+        color: color.get($warningColor);
       }
     }
   }
@@ -501,8 +511,9 @@ $config: (
   margin: get("description-margin");
   font-style: italic;
   @include typography.size("small", null, true);
+  line-height: get("description-line-height");
   max-width: get("description-max-width");
-  color: get("description-color");
+  color: color.get(get("description-color"));
 }
 
 /// Styles for form item that should have label as block and text input
@@ -547,11 +558,11 @@ $config: (
   #{ $prefix }__item {
     display: flex;
     align-items: center;
-    margin-bottom: get("input-margin-y");
+    margin-bottom: get("item-margin-y");
     border-radius: get("item-border-radius");
     flex-shrink: 0; // Cannot be smaller than content within
-    @include -form-item-state($selectError, $errorColor, get("error-highlight-color"));
-    @include -form-item-state($selectWarning, $warningColor, get("warning-highlight-color"));
+    @include -form-item-state($selectError, $errorColor, color.get(get("error-highlight-color")));
+    @include -form-item-state($selectWarning, $warningColor, color.get(get("warning-highlight-color")));
   }
   #{ $prefix }__item--align-top {
     align-items: flex-start;
@@ -565,8 +576,9 @@ $config: (
   #{ $prefix }__items-inline {
     display: flex;
     flex-wrap: wrap;
+    gap: get("inline-gap");
     > #{ $prefix }__item {
-      margin-right: 1.5em;
+      margin: 0;
     }
   }
   #{ $prefix }__actions {
@@ -578,10 +590,10 @@ $config: (
     }
   }
   #{ $prefix }__error {
-    color: $errorColor;
+    color: color.get($errorColor);
   }
   #{ $prefix }__warning {
-    color: $warningColor;
+    color: color.get($warningColor);
   }
 }
 
@@ -622,12 +634,12 @@ $config: (
     // outline: get("item-outline-width") solid $highlightColor;
     box-shadow: 0 0 0 get("item-highlight-width") $highlightColor;
     label {
-      color: $color;
+      color: color.get($color);
     }
     select,
     textarea,
     input:not([type="checkbox"]):not([type="radio"]) {
-      border-color: $color;
+      border-color: color.get($color);
     }
   }
 }

package/scss/components/_hero.scss

@@ -15,6 +15,15 @@
 /// Module Settings
 /// @type Map
 /// @prop {Map} extra-split-ratios  [wide 70/30] A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content]) 
+/// @prop {String} breakpoint ["medium"] At what breakpoint the hero goes to small screen styling.
+/// @prop {Dimension} height [100vh] Height of the hero.
+/// @prop {Dimension} height-compact [40vh] Height of the hero when using the "--compact" styling.
+/// @prop {Dimension} graphic-height-stacked [60vh] Height of the graphic.
+/// @prop {Dimension} content-max-width [40rem] Max width of the content.
+/// @prop {Dimension} content-padding-top [3rem] Top padding of the content.
+/// @prop {Dimension} content-padding-bottom [3rem] Bottom padding of the content.
+/// @prop {CssValue} text-align [center] Text align of the content.
+
 
 $config: (
   "breakpoint" : "medium",

package/scss/components/_index.scss

@@ -6,6 +6,7 @@
 @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-*;
@@ -22,6 +23,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 +38,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,6 +57,7 @@
 @use "adaptive-spacing";
 @use "accordion";
 @use "badge";
+@use "basic-hero";
 @use "button";
 @use "button-verbose";
 @use "callout";
@@ -69,6 +73,7 @@
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
+@use "list-inline";
 @use "list-ordered";
 @use "list-unordered";
 @use "links";
@@ -84,6 +89,7 @@
 @use "rule";
 @use "scroll-slider";
 @use "skip-link";
+@use "sticky-list";
 @use "slider";
 @use "hero";
 @use "tabs";
@@ -103,6 +109,7 @@ $all-includes: (
   "accordion",
   "adaptive-spacing",
   "badge",
+  "basic-hero",
   "button",
   "button-verbose",
   "callout",
@@ -119,6 +126,7 @@ $all-includes: (
   "image-grid",
   "links",
   "list-lines",
+  "list-inline",
   "list-ordered",
   "list-unordered",
   "menu-stack",
@@ -131,6 +139,7 @@ $all-includes: (
   "rule",
   "scroll-slider",
   "skip-link",
+  "sticky-list",
   "slider",
   "hero",
   "tabs",
@@ -196,6 +205,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;
   }
@@ -241,6 +253,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 +298,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");
+    }
+  }
+}