@ulu/frontend 0.1.0-beta.83 → 0.1.0-beta.85

package/scss/components/_index.scss

@@ -8,6 +8,7 @@
 @forward "badge" as badge-*;
 @forward "basic-hero" as basic-hero-*;
 @forward "button" as button-*;
+@forward "button-group" as button-group-*;
 @forward "button-verbose" as button-verbose-*;
 @forward "callout" as callout-*;
 @forward "card" as card-*;
@@ -20,6 +21,7 @@
 @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-*;
@@ -32,9 +34,11 @@
 @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 "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
@@ -44,6 +48,7 @@
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
 @forward "tag" as tag-*;
+@forward "table-sticky" as table-sticky-*;
 @forward "tile-grid" as tile-grid-*;
 @forward "tile-button" as tile-button-*;
 @forward "tile-grid-overlay" as tile-grid-overlay-*;
@@ -60,6 +65,7 @@
 @use "badge";
 @use "basic-hero";
 @use "button";
+@use "button-group";
 @use "button-verbose";
 @use "callout";
 @use "card";
@@ -72,6 +78,7 @@
 @use "flipcard";
 @use "flipcard-grid";
 @use "form-theme";
+@use "headline-label";
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
@@ -84,9 +91,11 @@
 @use "nav-strip";
 @use "overlay-section";
 @use "pager";
+@use "panel";
 @use "placeholder-block";
 @use "popover";
 @use "pull-quote";
+@use "rail";
 @use "ratio-box";
 @use "rule";
 @use "scroll-slider";
@@ -97,6 +106,7 @@
 @use "tabs";
 @use "tag";
 @use "tile-grid";
+@use "table-sticky";
 @use "tile-button";
 @use "tile-grid-overlay";
 @use "vignette";
@@ -113,6 +123,7 @@ $all-includes: (
   "badge",
   "basic-hero",
   "button",
+  "button-group",
   "button-verbose",
   "callout",
   "card",
@@ -125,6 +136,7 @@ $all-includes: (
   "flipcard",
   "flipcard-grid",
   "form-theme",
+  "headline-label",
   "horizontal-rule",
   "image-grid",
   "links",
@@ -137,7 +149,9 @@ $all-includes: (
   "nav-strip",
   "overlay-section",
   "pager",
+  "panel",
   "popover",
+  "rail",
   "ratio-box",
   "rule",
   "scroll-slider",
@@ -147,6 +161,7 @@ $all-includes: (
   "hero",
   "tabs",
   "tag",
+  // "table-sticky", // Has to be included (for vue plugin)
   "tile-grid",
   "tile-button",
   "tile-grid-overlay",
@@ -202,6 +217,9 @@ $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;
   }
@@ -247,6 +265,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;
   }
@@ -283,6 +304,9 @@ $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;
   }
@@ -292,6 +316,9 @@ $current-includes: $all-includes;
   @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;
   }
@@ -313,6 +340,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "tabs")) {
     @include tabs.styles;
   }
+  @if (list.index($includes, "table-sticky")) {
+    @include table-sticky.styles;
+  }
   @if (list.index($includes, "tile-grid")) {
     @include tile-grid.styles;
   }

package/scss/components/_panel.scss

@@ -0,0 +1,246 @@
+////
+/// @group panel
+/// A structured container for content with distinct header, body, and footer sections that can bleed to the edges.
+////
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [rgb(255, 255, 255)] The background color of the panel
+/// @prop {Color} border [null] Set border to panel
+/// @prop {Dimension} border-radius [element.$config.border-radius] The border radius of the panel
+/// @prop {CssValue} box-shadow [element.$config.box-shadow] The box-shadow of the panel
+/// @prop {Dimension} margin-bottom [1.5rem] The bottom margin of the panel
+/// @prop {CssValue} overflow [null] Value for overflow, not included by default as it interferes with position sticky, but could be useful for cropping if that's needed (can be set on rows too)
+
+$config: (
+  "background-color" : rgb(255, 255, 255),
+  "border" : null,
+  "border-radius" : true,
+  "box-shadow" : true,
+  "margin-bottom" : 1.5em,
+  "overflow" : null,
+) !default;
+
+/// Styles Map (for unique variations/modifiers)
+/// - Use this map to define distinct visual styles for the panel
+/// - This map is two levels the first level is the name of the modifier (see default below). 
+///   This will become the modifier for the pane; so ("transparent" : (...)) = .panel--transparent.
+///   The second level is that modifier row modifiers (ie. panel__row--header) (see row options below)
+/// - Keyword "default" means without modifier for both parent and row configs
+///   - For example "default" as panel container modifier name will mean
+///     styles for this without any modifiers
+///   - In a panels row config (second level) "default" will refer to the non-modified row (ie .panel__row)
+/// - Order matters, default should be first
+/// - Row Options
+///   - Each row can have the following options:
+///       overflow: Set overflow property if needed,
+///       aspect-ratio,
+///       height,
+///       min-height,
+///       padding,
+///       margin: Can be used to create gap between container and row
+///       background-color,
+///       font-weight,
+///       font-family,
+///       color,
+///       box-shadow,
+///       grow: Default the panel will grow to fill the containers height, passing false disables this
+///       border-top: If a string is passed it will resolved as an element rule style
+///       border-bottom: If a string is passed it will resolved as an element rule style
+/// @type Map
+
+$styles: (
+  "default" : (
+    "default" : (
+      "padding": 1em,
+    ),
+    "header" : (
+      "padding" : (0.75em 1em),
+      "background-color" : #e7e7e7,
+      "border-bottom" : "default",
+      "font-weight" : bold,
+      "grow" : false,
+      "breakpoints" : (
+        "small" : (
+          "direction" : "max",
+          "padding" : (0.25em 0.5em)
+        )
+      )
+    ),
+    "footer" : (
+      "padding" : (0.5em 1em),
+      "background-color" : #f4f4f4,
+      "border-top" : "default",
+      "grow" : false
+    ),
+    "separator-top" : (
+      "border-top" : "light",
+    ),
+    "separator-bottom" : (
+      "border-bottom" : "light",
+    )
+  ),
+  "transparent" : (
+    "default" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+    ),
+    "header" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    ),
+    "footer" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    )
+  ),
+  "compact" : (
+    "default" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "header" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "body" : (
+      "padding" : (0.5em 1em)
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-panel-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-panel-get("property");
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "panel [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Set style variations
+/// - See $styles for more information on map properties/structure
+/// @param {Map} $changes Map of changes (options for style include all config properties)
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+@mixin set-styles($changes, $merge-mode: null) {
+  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-panel-styles();
+@mixin styles {
+  $prefix: selector.class("panel");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    overflow: get("overflow");
+    background-color: get("background-color");
+    box-shadow: get("box-shadow");
+    border: get("border");
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }__row {
+    &:first-child {
+      border-top-left-radius: get("border-radius");
+      border-top-right-radius: get("border-radius");
+    }
+    &:last-child {
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+  }
+
+  @each $modifier, $rows in $styles {
+    @if ($modifier == "default") {
+      @each $row-name, $props in $rows {
+        @if ($row-name == "default") {
+          #{ $prefix }__row {
+            @include create-row-style($props);
+          }
+        } @else {
+          #{ $prefix }__row--#{ $row-name } {
+            @include create-row-style($props);
+          }
+        }
+      }
+    } @else {
+      #{ $prefix }--#{ $modifier } {
+        @each $row-name, $props in $rows {
+          @if ($row-name == "default") {
+            #{ $prefix }__row {
+              @include create-row-style($props);
+            }
+          } @else {
+            #{ $prefix }__row--#{ $row-name } {
+              @include create-row-style($props);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Create row styles
+/// @param {Map} $props - Row Options
+@mixin create-row-style($props) {
+  overflow: map.get($props, "overflow");
+  aspect-ratio: map.get($props, "aspect-ratio");
+  height: map.get($props, "height");
+  min-height: map.get($props, "min-height");
+  padding: map.get($props, "padding");
+  margin: map.get($props, "margin");
+  background-color: color.get(map.get($props, "background-color"));
+  font-weight: map.get($props, "font-weight");
+  font-family: map.get($props, "font-family");
+  color: color.get(map.get($props, "color"));
+  box-shadow: map.get($props, "box-shadow");
+  flex-grow: if(map.get($props, "grow") == false, 0, 1); // Default is grow
+  border-top: element.get-optional-rule-style(map.get($props, "border-top"));
+  border-bottom: element.get-optional-rule-style(map.get($props, "border-bottom"));
+  
+
+  // Allow passing breakpoint maps
+  $breakpoints: map.get($props, "breakpoints");
+  $b-options: ( "directionRequired" : true );
+
+  @if ($breakpoints and list.length($breakpoints)) {
+    @include breakpoint.from-each($breakpoints, $b-options) using ($b-props) {
+      @include create-row-style($b-props);
+    }
+  }
+}

package/scss/components/_rail.scss

@@ -0,0 +1,120 @@
+////
+/// @group rail
+////
+/// A horizontal, flexible container for arranging diverse inline elements.
+/// It provides a consistent layout for icons, labels, buttons, or other
+/// modular components, aligning content to either end or centering it.
+/// Item spacing is controlled via margins, allowing for individual item gap adjustments.
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../utils";
+@use "../color";
+@use "../selector";
+@use "../layout";
+@use "../element"; 
+
+// Used for function fallback
+$-fallbacks: (
+  "separator" : (
+    "function" : meta.get-function("get-rule-style", false, "element"),
+    "arguments" : ("light",)
+  ),
+);
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} gap [1em] The default space between items in the rail
+/// @prop {Map} gap-modifiers [("small" : 0.5em, "large" : 2em )] Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it
+/// @prop {Dimension} margin-bottom [1em] The default space after rail
+/// @prop {CssValue} separator [true] Pass border property for separator, defaults to element rule style light
+
+$config: (
+  "gap" : 1em,
+  "margin-bottom" : 1em,
+  "separator" : true,
+  "gap-modifiers": (
+    "small" : 0.5em,
+    "none" : 0,
+    "large" : 2em
+  ),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-rail-set(( "gap" : 1.5em ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-rail-get("gap");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "rail [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///   @include ulu.component-rail-styles();
+
+@mixin styles {
+  $prefix: selector.class("rail"); 
+  $gap: get("gap");
+
+  #{ $prefix } {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $gap;
+    margin-bottom: get("margin-bottom");
+    max-width: 100%;
+  }
+
+  // Modifiers
+  // - Note: Originally had mods for each type of flexbox layout
+  //   simplified to just agnostic naming and only what is currently needed
+  //   can update this in the future to add more alignment options if 
+  //   use cases come up
+
+  #{ $prefix }--justified { 
+    justify-content: space-between;
+  }
+  #{ $prefix }--baseline {
+    align-items: baseline;
+  }
+  #{ $prefix }--nowrap {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  // Item level modifiers
+  #{ $prefix }__item--pull {
+    margin-inline-start: auto;
+  }
+  #{ $prefix }__item--separator {
+    border-inline-start: get("separator");
+    padding-inline-start: $gap;
+  }
+
+  @each $name, $value in get("gap-modifiers") {
+
+    $calc-gap: $value - $gap;
+    
+    #{ $prefix }__item--gap-#{ $name } {
+      margin-inline-start: $calc-gap;
+
+      &#{ $prefix }__item--separator {
+        padding-inline-start: $value;
+      }
+    }
+  }
+}

package/scss/components/_table-sticky.scss

@@ -0,0 +1,185 @@
+////
+/// @group table-sticky
+/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow
+
+$config: (
+  "box-shadow": true,
+  "ui-color-disabled": #6490af,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-sticky-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-table-sticky-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "table-sticky [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+/// Prints component styles
+/// @demo table-sticky
+/// @example scss
+///  @include ulu.component-table-sticky-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-sticky");
+
+  #{ $prefix } {
+    position: relative; // For controls
+    width: 100%;
+    * {
+      box-sizing: border-box;
+    }
+  }
+  #{ $prefix }__display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    // scroll-behavior: smooth;
+  }
+  #{ $prefix }__table {
+    // border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  #{ $prefix }__sticky-wrap {
+    position: sticky;
+    top: -1px;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    margin-bottom: 200px; // Distance from bottom of table to disable
+    margin-top: -200px; // Distance from bottom of table to disable
+  }
+  #{ $prefix }__sticky-wrap--first-column-header {
+    z-index: 4;
+  }
+  #{ $prefix }__sticky-wrap--controls {
+    margin-top: -52vh;
+    margin-bottom: 52vh;
+  }
+  #{ $prefix }__header-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+  #{ $prefix }__table--first-column-header,
+  #{ $prefix }__table--first-column {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto !important;
+  }
+  #{ $prefix }__table--first-column {
+    z-index: 3;
+  }
+  #{ $prefix }__table--header {
+    will-change: transform;
+  }
+  #{ $prefix }__hidden-visually {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+  // NOTE: The table caption needs to be positioned normally
+  // as display table-cell. Making absolute for hidden-visually 
+  // is causing chrome to add an anonymous cell to the table resulting in a 1px
+  // cell under the header. Which is messing up alignments. The only solution
+  // without removing the <caption> (not good for WCAG) is to position it at the 
+  // of the table so it doesn't affect the header alignments. Then cropping it to 
+  // a pixel and using negative margin to remove it's pixel from the flow beneath 
+  #{ $prefix }__caption {
+    margin-bottom: -1px;
+    height: 1px;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+    display: none;
+  }
+  // Allow initiating scrolling by dragging first column
+  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
+    #{ $prefix }__table--first-column-header,
+    #{ $prefix }__table--first-column {
+      // pointer-events: none;
+      visibility: hidden;
+      // opacity: 0 !important;
+    }
+  }
+  #{ $prefix }__controls {
+    position: absolute;
+    top: 50vh;
+    right: 20px;
+  }
+  #{ $prefix }__controls-inner {
+    display: flex;
+  }
+  #{ $prefix }__control {
+    box-shadow: get("box-shadow");
+  }
+  #{ $prefix }__sort-button {
+    display: flex;
+    align-items: center;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: inherit;
+  }
+  #{ $prefix }__sort-button--focused {
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
+  }
+  #{ $prefix }__sort-icon {
+    margin-left: auto;
+    padding-left: 1em;
+    display: block;
+    opacity: 0.5;
+    .sort-active & {
+      opacity: 1;
+    }
+    .sort-ascending & {
+      #{ $prefix }__sort-icon-inner {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  #{ $prefix }__sort-icon-inner {
+    display: block;
+  }
+}
+
+