@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/components/_slider.scss

@@ -12,47 +12,45 @@
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [transparent] Background color for the entire slider section.
-/// @prop {Dimension} margin-bottom [3rem] Bottom margin color for the entire slider section.
-/// @prop {Dimension} margin-top [1rem] Top margin color for the entire slider section.
-/// @prop {Dimension} padding-bottom [0] Bottom padding for individual slides.
+/// @prop {Dimension} margin [(1rem 0 3rem 0)] Margin for slider container
 /// @prop {Dimension} padding-top [0] Top padding for individual slides.
-/// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides.
-/// @prop {Dimension} button-icon-offset-y [false] Offsets the control options down by adding a margin. 
+/// @prop {Dimension} button-offset-x [null] Offsets the control button in from their respective sides.
+/// @prop {Dimension} button-offset-y [null] Offsets the control button y
 /// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
-/// @prop {Dimension} button-size [3rem] Size of the button. Likely antiquated and replaced with button-width and button-height
-/// @prop {Color} dot-background-color [transparent] The color of the dot when unselected.
-/// @prop {Color} dot-background-color-hover [color.get("link")] The color of the dot when hovered.
-/// @prop {Color} dot-background-color-selected [color.get("link")] The color of the dot when selected.
-/// @prop {Dimension} dot-border-radius [50%] The border-radius of the dot.
-/// @prop {Color} dot-border-color [color.get("link")] The border color of the dot.
-/// @prop {Color} dot-border-color-hover [color.get("link")] The border color of the dot when hovered.
-/// @prop {Color} dot-border-color-selected [color.get("link")] The border color of the dot when selected.
-/// @prop {Dimension} dot-border-width [2px] The border width of the dot.
-/// @prop {Dimension} dot-size  [1rem] The height and width of the dot.
-/// @prop {Dimension} button-height  [1rem] The height of the button.
+/// @prop {Color} nav-margin [(0.5rem 0)] Margin for nav (dots)
+/// @prop {Color} nav-background-color [transparent] The color of the dot when unselected.
+/// @prop {Color} nav-background-color-hover [color.get("link")] The color of the dot when hovered.
+/// @prop {Color} nav-background-color-selected [color.get("link")] The color of the dot when selected.
+/// @prop {Dimension} nav-border-radius [50%] The border-radius of the dot.
+/// @prop {Color} nav-border-color [color.get("link")] The border color of the dot.
+/// @prop {Color} nav-border-color-hover [color.get("link")] The border color of the dot when hovered.
+/// @prop {Color} nav-border-color-selected [color.get("link")] The border color of the dot when selected.
+/// @prop {Dimension} nav-border-width [2px] The border width of the dot.
+/// @prop {Dimension} nav-size  [1rem] The height and width of the dot.
+/// @prop {Dimension} nav-gap  [0.2rem] Gap between nav items
 /// @prop {Dimension} button-width  [1rem] The width of the button.
 
 $config: (
   "background-color" : transparent,
-  "margin-bottom" : 3rem,
-  "margin-top" : 1rem,
-  "button-icon-offset-x" : 2rem,
-  "button-icon-offset-y" : false,
-  "button-margin" : 2rem,
-  "button-size" : 3rem,
-  "button-height": 2.5rem,
-  "button-width": 2.5rem,
-  "dot-background-color" : transparent,
-  "dot-background-color-hover" : "link",
-  "dot-background-color-selected" : "link",
-  "dot-border-color" : "link",
-  "dot-border-color-hover" : "link",
-  "dot-border-color-selected" : "link",
-  "dot-border-radius" : 50%,
-  "dot-border-width" : 2px,
-  "dot-size" :  1rem,
+  "margin" : (1rem 0 3rem 0),
   "padding-bottom" : 0,
   "padding-top" : 0,
+  "button-offset-x" : null,
+  "button-offset-y" : null,
+  "button-margin" : 2rem,
+  "button-width": 2.5rem,
+  "nav-background-color" : transparent,
+  "nav-background-color-hover" : "link",
+  "nav-background-color-selected" : "link",
+  "nav-border-color" : "link",
+  "nav-border-color-hover" : "link",
+  "nav-border-color-selected" : "link",
+  "nav-border-radius" : 50%,
+  "nav-gap" : 0.2rem,
+  "nav-border-width" : 2px,
+  "nav-size" :  1rem,
+  "nav-margin" : (0.5rem 0),
+  
   ) !default;
   
 /// Change modules $config
@@ -84,7 +82,7 @@ $config: (
   #{ $prefix } {
     position: relative; // for controls
     background-color: color.get(get("background-color"));
-    margin: get("margin-top") 0 get("margin-bottom") 0;
+    margin: get("margin");
   }
   #{ $prefix }__track,
   #{ $prefix-plugin }__controls,
@@ -97,34 +95,30 @@ $config: (
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-  }
-  @if get("button-icon-offset-y") {
-    #{ $prefix-plugin }__control-icon {
-      margin-top: get("button-icon-offset-y");
-    }
+    margin-top: get("button-offset-y");
   }
   #{ $prefix-plugin }__nav {
     display: flex;
     justify-content: center;
-    li {
-      margin: 0.5rem 0.15rem;
-    }
+    margin: get("nav-margin");
+    gap: get("nav-gap");
   }
   #{ $prefix-plugin }__nav-button {
     display: block;
-    width: get("dot-size");
-    height: get("dot-size");
-    background-color: color.get(get("dot-background-color"));
-    border: get("dot-border-width") solid color.get(get("dot-border-color"));
-    border-radius: get("dot-border-radius");
+    width: get("nav-size");
+    height: get("nav-size");
+    background-color: color.get(get("nav-background-color"));
+    border: get("nav-border-width") solid color.get(get("nav-border-color"));
+    border-radius: get("nav-border-radius");
     &:hover {
-      background-color: color.get(get("dot-background-color-hover"));
+      background-color: color.get(get("nav-background-color-hover"));
+      border-color: color.get(get("nav-border-color-hover"));
     }
   }
   #{ $prefix-plugin }__nav-button--active,
   #{ $prefix-plugin }__nav-button--active:hover {
-    background-color: color.get(get("dot-background-color-selected"));
-    border-color: color.get(get("dot-border-color-selected"));
+    background-color: color.get(get("nav-background-color-selected"));
+    border-color: color.get(get("nav-border-color-selected"));
   }
   #{ $prefix-plugin }__control-button,
   #{ $prefix-plugin }__nav-button {
@@ -164,42 +158,25 @@ $config: (
   }
   #{ $prefix-plugin }__control-button--previous {
     left: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-left: get("button-icon-offset-x");
-      }
-    }
+    margin-left: get("button-offset-x");
   }
   #{ $prefix-plugin }__control-button--next {
     right: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-right: get("button-icon-offset-x");
-      }
-    }
+    margin-right: get("button-offset-x");
   }
   #{ $prefix }--inset-controls {
     #{ $prefix }__slide-gap-for-controls {
-      $padding: get("button-width") + get("button-margin") + get("button-icon-offset-x");
+      $padding: get("button-width") + get("button-margin") + get("button-offset-x");
       padding-left: $padding;
       padding-right: $padding;
     }
     #{ $prefix-plugin }__control-button--previous {
       left: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-left: get("button-icon-offset-x");
-          
-        }
-      }
+      margin-left: get("button-offset-x");
     }
     #{ $prefix-plugin }__control-button--next {
       right: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-right: get("button-icon-offset-x");
-        }
-      }
+      margin-right: get("button-offset-x");
     }
   }
 }

package/scss/components/_spoke-spinner.scss

@@ -96,7 +96,7 @@ $styles: () !default;
     transform-origin: $sizeHalf $sizeHalf;
     animation: UluFadeOut get("duration") linear infinite;
   }
-  #{ $prefix }__spinner div:after {
+  #{ $prefix }__spinner div::after {
     content: " ";
     display: block;
     position: absolute;
@@ -181,7 +181,7 @@ $styles: () !default;
         transform-origin: $sizeHalf $sizeHalf;
         animation-duration: map.get($merged, "duration");
       }
-      #{ $prefix }__spinner div:after {
+      #{ $prefix }__spinner div::after {
         left: $sizeHalf - $spoke-widthHalf;
         width: $spoke-width;
         height: map.get($merged, "spoke-height");

package/scss/components/_sticky-list.scss

@@ -0,0 +1,206 @@
+
+////
+/// @group sticky-list
+////
+/// Sticky first column, sticky elements inside adjacent columns to first. (Sticky list with header)
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:color" as sassColor;
+
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+@use "../typography";
+@use "../utils";
+@use "../selector";
+
+// Used for function fallback
+$-fallbacks: (
+  "margin" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "margin"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [transparent] Background color for the entire slider section.
+/// @prop {Number} margin [true] Margin on ends of component (defaults to element margin)
+/// @prop {Number} mask-offset-bottom [55vh] The offset for the mask (on bottom)
+/// @prop {Number} mask-offset-top [5rem] The offset for the mask (on top)
+/// @prop {Number} sticky-top [45vh] When to stick
+/// @prop {String} breakpoint ["medium"] The upward breakpoint that this is allowed to be sticky 
+/// @prop {String} type-size ["medium"] The typography size to use for title
+/// @prop {Number} title-width [40%] The width of the title when this is displayed in columns
+/// @prop {Number} title-min-width [8em] The min width for title when displayed in columns
+/// @prop {CssValue} title-text-align [right] Text alignment for title when displayed in columns
+/// @prop {Number} item-padding-x [0] Optional padding on the left/right for items
+/// @prop {Number} gap [2rem] The gap between title and items when displayed in columns
+/// @prop {Color} background-color [white] The background color used for the mask
+/// @prop {List} background-contexts Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])  
+
+$config: (
+  "margin" : true,
+  "mask-offset-bottom" : 55vh,
+  "mask-offset-top" : 5rem,
+  "sticky-top" : 45vh,
+  "breakpoint" : "medium",
+  "type-size" : "large",
+  "title-width" : 40%,
+  "title-min-width" : 8em,
+  "title-text-align" : right,
+  "item-padding-x" : 0,
+  "gap" : 2rem,
+  "background-color" : white,
+  "background-contexts" : (
+    (
+      "selector" : ".background-dark",
+      "background-color" : black,
+      "item-padding-x" : 1em
+    ),
+  )
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-sticky-list-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-sticky-list-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "sticky-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo sticky-list
+/// @example scss
+///   @include ulu.component-sticky-list-styles();
+/// @example html {preview}
+/// <div class="sticky-list">
+///   <strong class="sticky-list__title">Example:</strong>
+///   <ul class="sticky-list__list">
+///     <li class="sticky-list__item">
+///       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec nisl magna
+///     </li>
+///     <li class="sticky-list__item">
+///       Aenean sollicitudin mauris lectus, blandit suscipit lectus fringilla sed
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///   </ul>
+/// </div>
+
+@mixin styles {
+  $prefix: selector.class("sticky-list");
+  $mask-offset-top: get("mask-offset-top");
+  $mask-offset-bottom: get("mask-offset-bottom");
+  $type-size: get("type-size");
+  $sticky-top: get("sticky-top");
+
+  #{ $prefix } {
+    padding: get("margin") 0;
+  }
+  @include breakpoint.min(get("breakpoint")) {
+    #{ $prefix } {
+      display: flex;
+      align-items: flex-start;
+      gap: get("gap");
+      position: relative;
+      @if ($type-size and typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      } @else if ($type-size) {
+        @warn "Unable to find '#{$type-size}' typography size for title";
+      }
+    }
+    #{ $prefix }__title,
+    #{ $prefix } > :not(ul) {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      flex-basis: get("title-width");
+      min-width: get("title-min-width");
+      padding-top: $mask-offset-top;
+      padding-bottom: $mask-offset-bottom;
+      text-align: get("title-text-align");
+    }
+    #{ $prefix }__list,
+    #{ $prefix } > ul {
+      list-style: none;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-self: stretch;
+    }
+    #{ $prefix }__item,
+    #{ $prefix } > ul > li {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      margin: 0 !important; // If in editor (to complicated for :not())
+      padding: $mask-offset-top get("item-padding-x") $mask-offset-bottom get("item-padding-x");
+      @include set-background(get("background-color"));
+    }
+    #{ $prefix }__item:first-child,
+    #{ $prefix } > ul > li:first-child {
+      margin-top: 0;
+    }
+    #{ $prefix }__item:last-child,
+    #{ $prefix } > ul > li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Print out any contextual background styles
+  @each $props in get("background-contexts") {
+    $selector: map.get($props, "selector");
+    $item-padding-x: map.get($props, "item-padding-x");
+    @include breakpoint.min(get("breakpoint")) {
+      #{ $selector } {
+        #{ $prefix }__item,
+        #{ $prefix } > ul > li {
+          @if ($item-padding-x) {
+            padding-left: $item-padding-x;
+            padding-right: $item-padding-x;
+          }
+          @include set-background(map.get($props, "background-color"));
+        }
+      }
+    }
+  }
+}
+
+/// Outputs background color mask CSS (gradient from transparent to original color)
+/// @param {Color} $color The color to create the CSS for
+
+@mixin set-background($color) {
+  $color: color.get($color);
+  $color-transparent: sassColor.change($color, $alpha: 0);
+  background-color: $color;
+  background: linear-gradient(180deg, $color-transparent 0%, $color get("mask-offset-top"));
+}

package/scss/components/_tabs.scss

@@ -9,6 +9,7 @@
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
+@use "../layout";
 @use "../typography";
 @use "../element";
 @use "../utils";
@@ -39,6 +40,8 @@ $-fallbacks: (
 /// @prop {Dimension} tabpanel-padding [(2rem,)] Padding for the tabpanel
 /// @prop {Dimension} indicator-size [0.25em] The size of the tab's active border/indicator
 /// @prop {Color} indicator-color [currentColor] The color of the indicator
+/// @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-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.
@@ -55,14 +58,17 @@ $-fallbacks: (
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
 
 $config: (
-  "margin" : (2rem, 0),
+  "margin" : (2rem 0),
   "print-margin" : 1.5em,
   "tablist-divider" : true,
   "tablist-divider-width" : 1px,
   "indicator-size" : 3px,
   "indicator-color" : currentColor,
+  "indicator-transition-duration" : 200ms,
+  "indicator-transition-timing" : ease-out,
+  "indicator-scale-start" : 0,
   "tab-color" : "type-tertiary",
-  "tab-color-hover" : "link-hover",
+  "tab-color-hover" : "selected",
   "tab-color-selected" : "selected",
   "tab-background-color-selected" : null,
   "tab-font-weight" : true,
@@ -118,6 +124,7 @@ $config: (
       overflow-x: auto;
       border-bottom: get("tablist-divider");
       border-bottom-width: get("tablist-divider-width");
+      @include layout.remove-scrollbar();
     }
     [role="tab"] {
       display: block;
@@ -140,17 +147,28 @@ $config: (
         left: 0;
         right: 0;
         height: get("indicator-size");
+        transition-property: opacity, background-color, transform;
+        transition-duration: get("indicator-transition-duration");
+        transition-timing-function: get("indicator-transition-timing");
+        transform: scaleX(get("indicator-scale-start"));
+        transform-origin: center;
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
       }
+      // Add focus so as user clicks item it starts the active state styling
+      &:focus,
       &[aria-selected="true"] {
-        color: color.get(get("tab-color-selected"));
-        background-color: color.get(get("tab-background-color-selected"));
+        outline: none; // We are providing focus styling
         &::after {
           opacity: 1;
+          transform: scaleX(1);
         }
       }
+      &[aria-selected="true"] {
+        color: color.get(get("tab-color-selected"));
+        background-color: color.get(get("tab-background-color-selected"));
+      }
     }
     [role="tabpanel"] {
       position: relative;

package/scss/components/_tag.scss

@@ -37,6 +37,9 @@ $-fallbacks: (
 /// @prop {Color} border-color [transparent] Border color for the tag.
 /// @prop {Dimension} border-width [1px] Border width of the tag.
 /// @prop {String} color ["type-tertiary"] Color of the tag text.
+/// @prop {String} counter-size [1.5em] Size when used as a counter (for numbers), will be this size by default and expand horizontally as needed (ie. circle/rounded rectangle or square/rectangle if without border radius)
+/// @prop {String} counter-border-radius [20px] May need to be adjusted or can be set to 0 for square/rectangle
+/// @prop {String} counter-padding-sides [0.26em] Counter left/right padding (this is the space/margin on the inside when the number can't fit in the circle/square
 
 $config: (
   "font-weight" : normal,
@@ -53,6 +56,9 @@ $config: (
   "border-color" : transparent,
   "border-width" : 1px,
   "color": "type-tertiary",
+  "counter-size" : 1.75em,
+  "counter-border-radius" : 20px,
+  "counter-padding-sides" : 0.26em
 ) !default;
 
 /// Style Map (alternate tag styles)
@@ -72,6 +78,13 @@ $styles: (
   )
 ) !default;
 
+/// Map of alternate sizes
+$sizes: (
+  "small" : (
+    "padding" : (0.25em 0.5em),
+    "type-size" : "small-x"
+  )
+) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -90,6 +103,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
+/// Set tag sizes 
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
 /// Get a config option
 /// @param {Map} $name Name of property
 /// @example scss
@@ -121,10 +142,10 @@ $styles: (
     background-color: color.get(get("background-color"));
     color: color.get(get("color"));
     font-family: get("font-family");
+    line-height: get("line-height");
     @if (typography.has-size(get("type-size"))) {
       @include typography.size(get("type-size"), $only-font-size: true);
     }
-    line-height: get("line-height");
     &:not(:last-child) {
       margin-right: get("margin-between");
     }
@@ -136,8 +157,32 @@ $styles: (
     }
   }
 
+  
+
+  @each $name, $size in $sizes {
+    $type-size: map.get($size, "type-size");
+
+    #{ $prefix }--#{ $name } {
+      padding: map.get($size, "padding");  
+      line-height: map.get($size, "line-height");
+      @if (typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      }
+    }
+  }
+
+  // Order Reason: Needs to inherit from sizes but not styles
+  #{ $prefix }--counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: get("counter-size");
+    height: get("counter-size");
+    border-radius: get("counter-border-radius");
+    padding: 0 get("counter-padding-sides");
+  }
+
   @each $name, $style in $styles {
-    $type-size: map.get($style, "type-size");
     #{ $prefix }--#{ $name } {
       background-color: color.get(map.get($style, "background-color")); 
       color: color.get(map.get($style, "color")); 
@@ -146,11 +191,8 @@ $styles: (
       border-color: color.get(map.get($style, "border-color")); 
       border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
-      padding: map.get($style, "padding");  
-      @if (typography.has-size($type-size)) {
-        @include typography.size($type-size, $only-font-size: true);
-      }
-      line-height: map.get($style, "line-height");
     }
   }
+
+
 }

package/scss/components/_vignette.scss

@@ -8,10 +8,12 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(0,0,0)] Color used for the fade-in of the vignette. Must be actual color not color module palette name
+/// @prop {CssValue} image-filter [saturate(85%)] Filter value placed over image.
 
 $config: (
   "background-color" : rgb(0,0,0),
@@ -48,11 +50,7 @@ $config: (
     &::after {
       content: "";
       display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      @include layout.absolute-fill();
       background: linear-gradient(0deg,color.change(get("background-color"), $alpha: 0.8),color.change(get("background-color"), $alpha: 0) 45%);
       pointer-events: none;
     }

package/scss/components/_wysiwyg.scss

@@ -13,13 +13,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} img-excluded-selectors [(".wysiwyg__exclude",)]
-/// @prop {List} ul-excluded-selectors [(".list-lines", ".wysiwyg__exclude")]
-/// @prop {Map} headline-sizes [Map]
+/// @prop {String} exclude-selector [".wysiwyg__exclude"] Applied to all selectors
+/// @prop {List} img-excluded-selectors [()] Extra selectors to prevent <img> styling
+/// @prop {List} ul-excluded-selectors [(".list-lines",)] Extra selectors to prevent <ul> styling
+/// @prop {List} link-excluded-selectors [("[class]",)] Extra selectors to prevent <a> styling
+/// @prop {Map} headline-sizes [Map] Headlines from typography sizes (ElementName : TypographySizeName, ...)
 
 $config: (
-  "img-excluded-selectors" : (".wysiwyg__exclude",),
-  "ul-excluded-selectors" : (".list-lines", ".wysiwyg__exclude"),
+  "exclude-selector" : ".wysiwyg__exclude",
+  "img-excluded-selectors" : (),
+  "ul-excluded-selectors" : (".list-lines",),
+  "link-excluded-selectors" : ("[class]",),
   "headline-sizes" : (
     "h2" : "h2",
     "h3" : "h3",
@@ -66,24 +70,28 @@ $config: (
 
 // Internal mixin
 @mixin _styles() {
-  $ul-excludes: list.join(get("ul-excluded-selectors"), (), $separator: comma);
-  $img-excludes: list.join(get("img-excluded-selectors"), (), $separator: comma);
+  $exclude-selector: get("exclude-selector");
+  $ul-excludes: list.join(get("ul-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $img-excludes: list.join(get("img-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $link-excludes: list.join(get("link-excluded-selectors"), ($exclude-selector), $separator: comma);
 
-  a:not([class]) {
+  a:not(#{ $link-excludes }) {
     @include element.link($visited: true, $active: true);
   }
   ul:not(#{ $ul-excludes }) {
     @include element.styles-unordered-list();
+    margin-bottom: element.get("margin");
   }
-  ol {
+  ol:not(#{ $exclude-selector }) {
     @include element.styles-ordered-list(inherit);
-  }
-  ul,
-  ol {
     margin-bottom: element.get("margin");
   }
+  // ul,
+  // ol {
+  //   margin-bottom: element.get("margin");
+  // }
   @each $element, $size in get("headline-sizes") {
-    #{ $element } {
+    #{ $element }:not(#{ $exclude-selector }) {
       @include typography.size($size);
     }
   }