@ulu/frontend 0.1.0-beta.12 → 0.1.0-beta.121

package/scss/components/_form-theme.scss

@@ -7,96 +7,104 @@
 @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 ["danger"]
-/// @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 ["danger"]
-/// @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-bottom [0]
-/// @prop {} fieldset-border-radius [0]
-/// @prop {} fieldset-legend-color [inherit]
-/// @prop {} fieldset-legend-border-bottom [null]
-/// @prop {} fieldset-legend-padding-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 {Unit} inline-gap [1em] Gap between items that are inline like checkboxes
+/// @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] Check input outline when hovered.
+/// @prop {CssValue} check-input-outline-checked [null] Check input outline when checked.
+/// @prop {CssValue} check-input-outline-focus [1px solid white] Check input outline when focused.
+/// @prop {Color} check-input-touch-color-hover [#e8e8e8] Check input background color when hovered.
+/// @prop {Color} check-input-touch-color-focus [null] Check input background color when focused.
+/// @prop {Dimension} check-input-radio-size [0.3em] Radio border size.
+/// @prop {Dimension} check-input-checkmark-width [0.38em] Width of checkmark.
+/// @prop {Dimension} check-input-checkmark-height [0.68em] Height of checkmark.
+/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em] vertical offset of checkmark.
+/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em] stroke size of checkmark.
+/// @prop {Color} check-input-mark-color [currentColor] Check input color.
+/// @prop {Color} check-input-mark-color-hover [null] Check input color when hovered.
+/// @prop {Color} check-input-mark-color-focus [null] Check input color when focused.
+/// @prop {Color} check-input-mark-color-checked [null] Check input color when checked.
+/// @prop {Color} check-input-mark-color-indeterminate [null] Check input color when indeterminate.
+/// @prop {Number} check-input-disabled-opacity [0.6] Opacity of the check input when disabled.
+/// @prop {Dimension} check-input-border-radius [null] Checkbox input border radius.
+/// @prop {Color} description-color [false] Color of help text.
+/// @prop {CssValue} description-margin [(0.25em 0)] Margin for help text.
+/// @prop {Dimension} description-max-width [25em] Max width of help text.
+/// @prop {Number} description-line-height [true] Line height for description element, defaults to typography line-height-dense
+/// @prop {Color} fieldset-background [transparent] Background color of fieldset element.
+/// @prop {CssValue} fieldset-border [none] Border for fieldset
+/// @prop {Dimension} fieldset-margin-bottom [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-margin-top [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-padding [0] Padding for the fieldset element.
+/// @prop {Dimension} fieldset-margin-compact [0] @joe-check unused
+/// @prop {Dimension} fieldset-border-radius [0] Border radius of the fieldset element.
+/// @prop {Color} fieldset-legend-color [inherit] Text color for the fieldset's label.
+/// @prop {Dimension} fieldset-legend-border-bottom [null] Bottom border color for the fieldset's label
+/// @prop {Dimension} fieldset-legend-padding-bottom [null] Bottom padding for the fieldset's label
+/// @prop {Dimension} select-border-radius [4px] Border radius for the select element.
+/// @prop {Color} select-background-color [null] Background color for the select element.
+/// @prop {CssValue} select-border [null] The border for the select element. Fallback to input border.
+/// @prop {Dimension} select-padding-x [null] Horizontal padding for the select element. Fallback to input-padding-x.
+/// @prop {Dimension} select-padding-y [null] Vertical padding for the select element. Fallback to input-padding-y.
+/// @prop {CssValue} select-image [null] Url for select element's background image.
+/// @prop {Dimension} select-image-size [0.9em] Background size for the select image.
+/// @prop {Dimension} select-image-offset [0.7em] Offset for the select image.
+/// @prop {Dimension} select-image-margin [0.65em] select image margin.
+/// @prop {Dimension} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (
   "color"                                     : inherit,
@@ -160,6 +168,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,
@@ -198,7 +207,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) {
@@ -344,7 +354,7 @@ $config: (
     transition: background-color 220ms ease-in-out;
     flex: 0 0 $input-touch-size; // When used in flex container
     // Box / Circle (centered absolute)
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;
@@ -362,7 +372,7 @@ $config: (
       transform: translate(-50%, -50%);
     }
     // Checkmark/ radio
-    &:after {
+    &::after {
       content: '';
       display: block;
       position: relative;
@@ -375,32 +385,32 @@ $config: (
     }
     &:focus {
       background-color: color.get(get("check-input-touch-color-focus"));
-      &:before {
+      &::before {
         border-color: color.get(get("check-input-border-color-focus"));
         outline: get("check-input-outline-focus");
       }
-      &:after {
+      &::after {
         border-color: color.get(get("check-input-mark-color-focus"));
       }
     }
     &:hover {
       background-color: color.get(get("check-input-touch-color-hover"));
-      &:before {
+      &::before {
         outline: get("check-input-outline-hover");
         background-color: color.get(get("check-input-background-color-hover"));
         border-color: color.get(get("check-input-border-color-hover"));
       }
-      &:after {
+      &::after {
         border-color: color.get(get("check-input-mark-color-hover"));
       }
     }
     &:checked {
-      &:before {
+      &::before {
         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 {
+      &::after {
         opacity: 1;
         border-color: color.get(get("check-input-mark-color-checked"));
       }
@@ -416,10 +426,10 @@ $config: (
     }
   }
   [type="checkbox"] {
-    &:before {
+    &::before {
       border-radius: -fallback("check-input-border-radius", "input-border-radius");
     }
-    &:after {
+    &::after {
       border-radius: 0;
       width: get("check-input-checkmark-width");
       height: get("check-input-checkmark-height");
@@ -432,11 +442,11 @@ $config: (
     }
     &:indeterminate,
     &[aria-checked=mixed] {
-      &:before {
+      &::before {
         background-color: color.get(get("check-input-background-color-indeterminate"));
         border-color: color.get(get("check-input-border-color-indeterminate"));
       }
-      &:after {
+      &::after {
         border-right: none;
         transform: translatey(50%);
         opacity: 1;
@@ -500,6 +510,7 @@ $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: color.get(get("description-color"));
 }

package/scss/components/_headline-label.scss

@@ -0,0 +1,83 @@
+////
+/// @group headline-label
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  "font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-bold"
+  ),
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  ),
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} color [ulu.cssvar-use("color-accent")] The text color of the headline label.
+/// @prop {Dimension} margin-bottom [0.2em] The bottom margin of the headline label.
+/// @prop {String} font-weight [typography.get("font-weight-bold")] The font weight of the headline label.
+/// @prop {String} font-family [typography.get("font-family-sans")] The font family of the headline label.
+/// @prop {Dimension|Number} line-height [typography.get("line-height-dense")] The font family of the headline label.
+/// @prop {String} text-transform [null] The font family of the headline label.
+/// @prop {String} type-size ["small"] The typography size preset to use for the headline label (e.g., "small", "medium", "large"), Only uses the font-size value for size
+
+$config: (
+  "color": "accent",
+  "margin-bottom": 0.2em,
+  "font-weight": true,
+  "font-family": true,
+  "line-height": true,
+  "text-transform" : null,
+  "type-size": "small"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-headline-label-set(( "color" : red ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+/// @example scss
+///   @include ulu.component-headline-label-get("color");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "headline-label [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-headline-label-styles();
+
+@mixin styles {
+  .headline-label {
+    display: block;
+    margin-bottom: get("margin-bottom");
+    font-weight: get("font-weight");
+    font-family: get("font-family");
+    line-height: get("line-height");
+    text-transform: get("text-transform");
+    color: color.get(get("color"));
+    @if (get("type-size")) {
+      @include typography.size(get("type-size"), $only-font-size: true);
+    }
+  }
+}

package/scss/components/_hero.scss

@@ -11,6 +11,7 @@
 @use "../utils";
 @use "../breakpoint";
 @use "../typography";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -86,11 +87,7 @@ $config: (
     width: 100%;
   }
   #{ $prefix }__graphic-media {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     object-fit: cover;
   }
   
@@ -171,11 +168,7 @@ $config: (
       z-index: 2;
     }
     #{ $prefix }__graphic {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      @include layout.absolute-fill();
     }
     &#{ $prefix }--bottom,
     &#{ $prefix }--bottom #{ $prefix }__content {

package/scss/components/_index.scss

@@ -6,18 +6,25 @@
 @forward "accordion" as accordion-*;
 @forward "adaptive-spacing" as adaptive-spacing-*;
 @forward "badge" as badge-*;
+@forward "badge-stack" as badge-stack-*;
+@forward "basic-hero" as basic-hero-*;
 @forward "button" as button-*;
+@forward "button-group" as button-group-*;
 @forward "button-verbose" as button-verbose-*;
+@forward "breadcrumb" as breadcrumb-*;
 @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-*;
+@forward "definition-list" as definition-list-*;
 @forward "fill-context" as fill-context-*;
 @forward "flipcard" as flipcard-*;
 @forward "flipcard-grid" as flipcard-grid-*;
 @forward "form-theme" as form-theme-*;
+@forward "headline-label" as headline-label-*;
 @forward "horizontal-rule" as horizontal-rule-*;
 @forward "image-grid" as image-grid-*;
 @forward "links" as links-*;
@@ -30,13 +37,19 @@
 @forward "nav-strip" as nav-strip-*;
 @forward "overlay-section" as overlay-section-*;
 @forward "pager" as pager-*;
+@forward "panel" as panel-*;
 @forward "placeholder-block" as placeholder-block-*;
 @forward "pull-quote" as pull-quote-*;
 @forward "popover" as popover-*;
+@forward "progress-bar" as progress-bar-*;
+@forward "progress-circle" as progress-circle-*;
+@forward "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
+@forward "skeleton" as skeleton-*;
 @forward "skip-link" as skip-link-*;
+@forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
@@ -55,18 +68,25 @@
 @use "adaptive-spacing";
 @use "accordion";
 @use "badge";
+@use "badge-stack";
+@use "basic-hero";
 @use "button";
+@use "button-group";
 @use "button-verbose";
+@use "breadcrumb";
 @use "callout";
 @use "card";
 @use "card-grid";
+@use "counter-list";
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
+@use "definition-list";
 @use "fill-context";
 @use "flipcard";
 @use "flipcard-grid";
 @use "form-theme";
+@use "headline-label";
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
@@ -79,13 +99,19 @@
 @use "nav-strip";
 @use "overlay-section";
 @use "pager";
+@use "panel";
 @use "placeholder-block";
 @use "popover";
+@use "progress-bar";
+@use "progress-circle";
 @use "pull-quote";
+@use "rail";
 @use "ratio-box";
 @use "rule";
 @use "scroll-slider";
+@use "skeleton";
 @use "skip-link";
+@use "sticky-list";
 @use "slider";
 @use "hero";
 @use "tabs";
@@ -105,18 +131,25 @@ $all-includes: (
   "accordion",
   "adaptive-spacing",
   "badge",
+  "badge-stack",
+  "basic-hero",
   "button",
+  "button-group",
   "button-verbose",
+  "breadcrumb",
   "callout",
   "card",
   "card-grid",
+  "counter-list",
   "css-icon",
   "data-grid",
   "data-table",
+  "definition-list",
   "fill-context",
   "flipcard",
   "flipcard-grid",
   "form-theme",
+  "headline-label",
   "horizontal-rule",
   "image-grid",
   "links",
@@ -129,11 +162,18 @@ $all-includes: (
   "nav-strip",
   "overlay-section",
   "pager",
+  "panel",
   "popover",
+  "progress-bar",
+  "progress-circle",
+  "pull-quote",
+  "rail",
   "ratio-box",
   "rule",
   "scroll-slider",
+  "skeleton",
   "skip-link",
+  "sticky-list",
   "slider",
   "hero",
   "tabs",
@@ -193,12 +233,24 @@ $current-includes: $all-includes;
   @if (list.index($includes, "button")) {
     @include button.styles;
   }
+  @if (list.index($includes, "button-group")) {
+    @include button-group.styles;
+  }
   @if (list.index($includes, "button-verbose")) {
     @include button-verbose.styles;
   }
+  @if (list.index($includes, "breadcrumb")) {
+    @include breadcrumb.styles;
+  }
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
+  @if (list.index($includes, "badge-stack")) {
+    @include badge-stack.styles;
+  }
+  @if (list.index($includes, "basic-hero")) {
+    @include basic-hero.styles;
+  }
   @if (list.index($includes, "tag")) {
     @include tag.styles;
   }
@@ -211,6 +263,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;
   }
@@ -220,6 +275,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "data-table")) {
     @include data-table.styles;
   }
+  @if (list.index($includes, "definition-list")) {
+    @include definition-list.styles;
+  }
   @if (list.index($includes, "fill-context")) {
     @include fill-context.styles;
   }
@@ -232,6 +290,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "form-theme")) {
     @include form-theme.styles;
   }
+  @if (list.index($includes, "headline-label")) {
+    @include headline-label.styles;
+  }
   @if (list.index($includes, "horizontal-rule")) {
     @include horizontal-rule.styles;
   }
@@ -268,15 +329,27 @@ $current-includes: $all-includes;
   @if (list.index($includes, "pager")) {
     @include pager.styles;
   }
+  @if (list.index($includes, "panel")) {
+    @include panel.styles;
+  }
   @if (list.index($includes, "placeholder-block")) {
     @include placeholder-block.styles;
   }
   @if (list.index($includes, "popover")) {
     @include popover.styles;
   }
+  @if (list.index($includes, "progress-bar")) {
+    @include progress-bar.styles;
+  }
+  @if (list.index($includes, "progress-circle")) {
+    @include progress-circle.styles;
+  }
   @if (list.index($includes, "pull-quote")) {
     @include pull-quote.styles;
   }
+  @if (list.index($includes, "rail")) {
+    @include rail.styles;
+  }
   @if (list.index($includes, "ratio-box")) {
     @include ratio-box.styles;
   }
@@ -286,9 +359,15 @@ $current-includes: $all-includes;
   @if (list.index($includes, "scroll-slider")) {
     @include scroll-slider.styles;
   }
+  @if (list.index($includes, "skeleton")) {
+    @include skeleton.styles;
+  }
   @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;
   }