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

package/scss/components/_pager.scss

@@ -15,9 +15,9 @@
 /// Module Settings
 /// @type Map
 /// @prop {String} background-color [link] The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} background-color-hover [linkhover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} background-color-hover [link-hover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {String} border-color [link] The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} border-color-hover [linkhover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} border-color-hover [link-hover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Dimension} border-radius [50%] The border radius of the pager item.
 /// @prop {Dimension} border-width [1px] The border width of the pager item.
 /// @prop {Color} color [white] The type color of the pager item.
@@ -32,7 +32,7 @@
 /// @prop {Color} active-color [type] The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {CssValue} active-font-weight [bold] The font weight of the pager when focused or hovered.
 /// @prop {String} action-background-color [link] The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} action-background-color-hover [linkhover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} action-background-color-hover [link-hover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-border-color [transparent] The border color of the action options of the pager.
 /// @prop {String} action-border-color-hover [link] The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-color [white] The type color of the actions options of the pager.
@@ -72,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -81,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-get("property");
 
 

package/scss/components/_placeholder-block.scss

@@ -67,7 +67,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -76,7 +76,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-get("property");
 
 @function get($name) {

package/scss/components/_popover.scss

@@ -94,7 +94,7 @@ $config: (
   
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-popover-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -103,7 +103,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-popover-get("property");
 
 @function get($name) {

package/scss/components/_pull-quote.scss

@@ -52,7 +52,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-pull-quote-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -61,7 +61,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-pull-quote-get("property");
 
 @function get($name) {

package/scss/components/_ratio-box.scss

@@ -22,7 +22,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-ratio-box-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -31,7 +31,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-ratio-box-get("property");
 
 @function get($name) {

package/scss/components/_rule.scss

@@ -10,9 +10,9 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} short-border-width [4px] Short rule width of border
-/// @prop {Number} short-modifiers [false] @joe-check
-/// @prop {Number} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
+/// @prop {Dimension} short-border-width [4px] Short rule width of border
+/// @prop {Object} short-modifiers [false] Objects to adjust the styles of different short rule styles.
+/// @prop {Dimension} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
 
 $config: (
   "short-border-width" : 4px,
@@ -22,7 +22,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-rule-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -31,7 +31,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-rule-get("property");
 
 @function get($name) {

package/scss/components/_scroll-slider.scss

@@ -64,7 +64,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-scroll-slider-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -73,7 +73,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-scroll-slider-get("property");
 
 @function get($name) {

package/scss/components/_slider.scss

@@ -7,34 +7,19 @@
 
 @use "../color";
 @use "../utils";
-@use "../breakpoint";
 @use "../selector";
 
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [transparent] Background color for the entire slider section.
-/// @prop {List} breakpoint ["small"] Currently commented out @joe-check
 /// @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} padding-bottom-small [0] Smaller option for bottom padding for individual slides. Currently commented out @joe-check
 /// @prop {Dimension} padding-top [0] Top padding for individual slides.
-/// @prop {Dimension} padding-top-small [0] Smaller option for top padding for individual slides. Currently commented out @joe-check
-/// @prop {Color} button-background-color [transparent] Currently unused @joe-check
-/// @prop {Color} button-background-color-hover [color.get("link-hover")] Currently unused @joe-check
-/// @prop {CssValue} button-border [2px solid color.get("link")] Currently unused @joe-check
-/// @prop {Color} button-border-color-hover  [color.get("link-hover")] Currently unused @joe-check
-/// @prop {Dimension} button-border-radius [50%] Currently unused @joe-check
-/// @prop {Color} button-color [color.get("link")] Currently unused @joe-check
-/// @prop {Color} button-color-hover [white] Currently unused @joe-check
-/// @prop {Dimension} button-font-size [1.35rem] Currently unused @joe-check
-/// @prop {Dimension} button-font-size-small [false] Currently unused @joe-check
-/// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides. @joe-check
+/// @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-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
-/// @prop {Dimension} button-margin-small [0.75rem] Currently commented out @joe-check
 /// @prop {Dimension} button-size [3rem] Size of the button. Likely antiquated and replaced with button-width and button-height
-/// @prop {Dimension} button-size-small [false] Currently commented out @joe-check
 /// @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.
@@ -49,24 +34,12 @@
 
 $config: (
   "background-color" : transparent,
-  "breakpoint" : "small",
   "margin-bottom" : 3rem,
   "margin-top" : 1rem,
-  "button-background-color" : transparent,
-  "button-border" : 2px solid color.get("link"),
-  "button-border-color-hover" :  color.get("link-hover"),
-  "button-border-radius" : 50%,
-  "button-color-hover" : white,
-  "button-background-color-hover" : color.get("link-hover"),
-  "button-color" : color.get("link"),
-  "button-font-size" : 1.35rem,
   "button-icon-offset-x" : 2rem,
   "button-icon-offset-y" : false,
-  "button-font-size-small" : false,
   "button-margin" : 2rem,
-  "button-margin-small" : 0.75rem,
   "button-size" : 3rem,
-  "button-size-small" : false,
   "button-height": 2.5rem,
   "button-width": 2.5rem,
   "dot-background-color" : transparent,
@@ -79,14 +52,12 @@ $config: (
   "dot-border-width" : 2px,
   "dot-size" :  1rem,
   "padding-bottom" : 0,
-  "padding-bottom-small" : 0,
   "padding-top" : 0,
-  "padding-top-small" : 0,
   ) !default;
   
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-slider-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -95,7 +66,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-slider-get("property");
 
 @function get($name) {
@@ -180,14 +151,7 @@ $config: (
   }
   #{ $prefix }__slide {
     margin: 0;
-    // @if (get("button-size-small")) {
-    //   @include breakpoint.max(get("breakpoint")) {
-    //     $bp-slide-padding: get("button-size-small") + get("button-margin-small");
-    //     padding: get("padding-top-small") $bp-slide-padding get("padding-bottom-small") $bp-slide-padding;
-    //   }
-    // }
-  }
-  // @joe-check should we remove this modifier for universal slide padding in favor of the individualized modifiers below?
+  }
   #{ $prefix }--slide-control-margins {
     #{ $prefix }__slide {
       padding: get("padding-top") $slide-padding-x get("padding-bottom") $slide-padding-x;

package/scss/components/_tabs.scss

@@ -9,41 +9,74 @@
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
+@use "../typography";
 @use "../element";
 @use "../utils";
 
 // Used for function fallback
 $-fallbacks: (
-  "tablist-border-bottom" : (
+  "tablist-divider" : (
     "function" : meta.get-function("get-rule-style", false, "element"),
     "arguments" : ("light",)
+  ),
+  "tab-font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-semibold"
+  ),
+  "vertical-breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
   )
 );
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} border-radius [8px] The border radius of the tabs.
-/// @prop {Dimension} border-width [0.25em] The width of the tab border.
-/// @prop {Dimension} margin [2rem] The gap between tabs and above and below tabs.
+/// @prop {Dimension} margin [(2rem, 0)] The margin for the tabs container
 /// @prop {Dimension} print-margin [1.5em] Margin between tabs when stacked for print
-/// @prop {CssValue} tablist-border-bottom [true] The bottom border of the tabs. If set to true, will use the element.scss property for "get-rule-style".
+/// @prop {CssValue} tablist-divider [true] The border separating the tabs from the panels. By default (true) will use element rule light style
+/// @prop {Dimension} tablist-divider-width [1px] The width of the divider
 /// @prop {Color} tabpanel-background-color [rgb(245, 245, 245)] The tabpanel background color.
-/// @prop {Color} tab-border-color-selected [currentColor] The border color when selected.
-/// @prop {String} 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 {String} 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 {String} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {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} 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.
+/// @prop {Color} tab-background-color-selected [null] The tab background color when selected
+/// @prop {CssValue} tab-font-weight [true] The font weight for the tab, defaults to typography "font-weight-semibold"
+/// @prop {Dimension} tab-padding [0.75em 0.1em 0.75em 0.1em] Padding for the tab
+/// @prop {Dimension} tab-gap [1em] Gap between tabs
+/// @prop {Dimension} vertical-tablist-width [minmax(15rem, 30%),] The width of the tablist column when tabs are layout is vertical
+/// @prop {Dimension} vertical-tab-padding [(0.25em 0.75em)] Tab padding when vertical
+/// @prop {Dimension} vertical-divider-width [0px] Divider between tabs and panels when vertical
+/// @prop {Dimension} vertical-tab-gap [0.75em] The gap between tabs when vertical
+/// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
+/// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
+/// @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: (
-  "border-radius" : 8px,
-  "border-width" : 0.25em,
-  "margin" : 2rem,
+  "margin" : (2rem, 0),
   "print-margin" : 1.5em,
-  "tablist-border-bottom" : true,
-  "tabpanel-background-color" : rgb(245, 245, 245),
-  "tab-border-color-selected" : currentColor,
-  "tab-color" : "link",
+  "tablist-divider" : true,
+  "tablist-divider-width" : 1px,
+  "indicator-size" : 3px,
+  "indicator-color" : currentColor,
+  "tab-color" : "type-tertiary",
   "tab-color-hover" : "link-hover",
   "tab-color-selected" : "selected",
+  "tab-background-color-selected" : null,
+  "tab-font-weight" : true,
+  "tab-padding" : (0.75em),
+  "tab-gap" : 1em,
+  "tabpanel-background-color" : #f6f6f6,
+  "tabpanel-padding" : (2rem),
+  "vertical-tablist-width" : minmax(15rem, 30%),
+  "vertical-tab-padding" : (0.25em 0.75em),
+  "vertical-divider-width" : 0px,
+  "vertical-tab-gap" : 0.75em,
+  "vertical-indicator-left" : true,
+  "vertical-breakpoint" : true,
+  "horizontal-tab-wrap" : false
 ) !default;
 
 /// Change modules $config
@@ -73,75 +106,107 @@ $config: (
   @include utils.file-header("component", "tabs");
 
   $prefix: selector.class("tabs");
+  $tabpanel-spacing: utils.get-spacing(get("tabpanel-padding"));
 
   #{ $prefix } {
-    margin-bottom: get("margin");
-    margin-top: get("margin");
+    margin: get("margin");
     [role="tablist"] {
       position: relative;
       z-index: 2;
       display: flex; 
+      gap: get("tab-gap");
       overflow-x: auto;
-      margin-bottom: -1px;
-      border-bottom: get("tablist-border-bottom");
+      border-bottom: get("tablist-divider");
+      border-bottom-width: get("tablist-divider-width");
     }
     [role="tab"] {
       display: block;
       position: relative; 
       cursor: pointer;
-      padding: 0.75em 0.1em 0.75em 0.1em;
-      color: color.get(get("tab-color"));
-      font-weight: bold;
-      border-bottom: get("border-width") solid transparent;
       text-align: center;
-      white-space: nowrap;
-      &:not(:first-child) {
-        margin-left: 1.25em;
-        @include breakpoint.min("small") {
-          margin-left: 2em;
-        }
+      padding: get("tab-padding");
+      color: color.get(get("tab-color"));
+      font-weight: get("tab-font-weight");
+      @if (not get("horizontal-tab-wrap")) {
+        white-space: nowrap;
+      }
+      // Indicator
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: color.get(get("indicator-color"));
+        opacity: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: get("indicator-size");
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
       }
-      &:hover,
-      &:focus,
-      &[aria-selected="true"] {
-        border-bottom-color: currentColor;
-      }
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
-        border-bottom-color: get("tab-border-color-selected");
-        opacity: 1;
+        background-color: color.get(get("tab-background-color-selected"));
+        &::after {
+          opacity: 1;
+        }
       }
     }
     [role="tabpanel"] {
       position: relative;
       z-index: 1;
-      padding: 2rem get("margin");
-      margin-bottom: -1px;
+      padding: get("tabpanel-padding");
       overflow: hidden;
-
       background-color: get("tabpanel-background-color");
-      [class*="video-embed"],
-      .full-width-image {
-        margin-left: -(get("margin"));
-        margin-right: -(get("margin"));
-        width: calc(100% + #{ get("margin")  * 2 });
-        max-width: none;
-        &:first-child {
-          margin-top: -2rem;
-        }
-        &:last-child {
-          margin-bottom: -2rem;
+    }
+  }
+  // For images, etc that should fill tabpanel
+  #{ $prefix }__tabpanel-content-fill {
+    margin-left: -(map.get($tabpanel-spacing, "left"));
+    margin-right: -(map.get($tabpanel-spacing, "right"));
+    width: calc(100% + #{ map.get($tabpanel-spacing, "left") + map.get($tabpanel-spacing, "right") });
+    max-width: none;
+    &:first-child {
+      margin-top: -(map.get($tabpanel-spacing, "top"));
+    }
+    &:last-child {
+      margin-bottom: -(map.get($tabpanel-spacing, "bottom"));
+    }
+  }
+
+  @include breakpoint.min(get("vertical-breakpoint")) {
+    #{ $prefix }--vertical {
+      display: grid;
+      grid-template-columns: get("vertical-tablist-width") auto; 
+      [role="tablist"] {
+        flex-direction: column;
+        gap: get("vertical-tab-gap");
+        border-right: get("tablist-divider");
+        border-right-width: get("vertical-divider-width");
+        grid-column: 1;
+      }
+      [role="tab"] {
+        padding: get("vertical-tab-padding");
+        white-space: normal;
+        text-align: left;
+        &::after {
+          left: if(get("vertical-indicator-left"), 0, auto);
+          right: if(not get("vertical-indicator-left"), 0, auto);;
+          bottom: 0;
+          top: 0;
+          width: get("indicator-size");
+          height: auto;
         }
       }
+      [role="tabpanel"] {
+        grid-column: 2; // needed for equalHeights in vertical
+      }
     }
   }
+
   #{ $prefix }--transparent {
     [role="tablist"] {
       background-color: transparent;
-      box-shadow: none;
       padding-left: 0;
       padding-right: 0;
     }
@@ -155,13 +220,13 @@ $config: (
   #{ $prefix }--full-width {
     > [role="tablist"] {
       justify-content: safe center;
-      box-shadow: 0 4px 4px rgba(0,0,0,0.2);
     }
     >[role="tabpanel"] {
       background-color: transparent;
       padding: 0;
     }
   }
+
   // Display all tabs during print
   #{ $prefix }--print {
     @media print {

package/scss/components/_tag.scss

@@ -28,8 +28,8 @@ $-fallbacks: (
 /// @prop {CssValue} box-shadow [none] Box shadow for the tag.
 /// @prop {Dimension} padding [(0.4em 0.75em)] Inner padding for the tag.
 /// @prop {CssValue} vertical-align [baseline] Vertical alignment of tag text.
-/// @prop {Dimension} margin-between [0.5em] Margin between tags.
-/// @prop {Dimension} margin-between-tags [0] @joe-check 
+/// @prop {Dimension} margin-between [0.5em] Margin between tag and other elements.
+/// @prop {Dimension} margin-between-tags [0] Margin between tag and other tags.
 /// @prop {Number} line-height [1] Line height for the tag text.
 /// @prop {String} type-size ["small"] Font size for the tag text.
 /// @prop {Color} background-color [#eaeaea] Background color of the tag.