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

package/scss/components/_progress-circle.scss

@@ -0,0 +1,175 @@
+////
+/// @group progress-circle
+/// A circular progress indicator.
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "../selector";
+@use "../utils";
+@use "../color";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} size [100px] The width and height of the chart.
+/// @prop {Number} viewbox-size [32] The size of the SVG viewbox. Used to calculate mask radius.
+/// @prop {Number} stroke-width [10] The width of the progress circle's stroke.
+/// @prop {Color} color-track ["placeholder-background-alt"] The color of the inactive track. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-progress ["indicator"] The color of the progress stroke in a neutral state. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-mask [white] The color of the center mask that creates the donut hole. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-mask-pie [rgba(255, 255, 255, 0.5)] The mask color when using the pie style modifier.
+/// @prop {Color} value-color ["type"] The theme color name for the percentage text inside the circle.
+/// @prop {Color} value-color-outside ["type-tertiary"] The theme color name for the percentage text when displayed outside the circle.
+/// @prop {Dimension | List} value-margin-outside [(0.1em 0.35em)] The margin for the outside value text.
+/// @prop {Time} transition-duration [300ms] The duration for the stroke transition animation (when the component is updating already in the page)
+/// @prop {Time} animation-duration [1s] The duration for the stroke animation (relies on template having a custom build animation per pie based on dash array). This is used for initial animations
+/// @prop {Time} animation-delay [2s] The delay for the animation
+/// @prop {Time} animation-timing [ease-in] Timing function for animation
+/// @prop {Map} status-colors A map of status names to their corresponding colors (e.g., "low": "warning").
+/// @prop {Map} sizes A map of size variations. Each key is a modifier name (e.g., "small") and the value is a map with `size` and `stroke-width` properties.
+
+$config: (
+  "size": 100px,
+  "viewbox-size": 32,
+  "stroke-width": 10,
+  "color-track": "placeholder-background-alt",
+  "color-progress": "indicator",
+  "color-mask": white,
+  "color-mask-pie": rgba(255, 255, 255, 0.4),
+  "value-color": "type",
+  "value-color-outside": "type-tertiary",
+  "value-margin-outside" : (0.1em 0.35em),
+  "transition-duration" : 300ms,
+  "animation-duration" : 1s,
+  "animation-delay" : 2s,
+  "animation-timing" : ease-in,
+  "status-colors": (
+    "low": "danger",
+    "incomplete": "warning",
+    "complete": "success",
+  ),
+  "sizes": (
+    "small" : (
+      "size": 40px,
+      "stroke-width": 13,
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+@function get($name) {
+  @return utils.require-map-get($config, $name, "progress-circle [config]");
+}
+
+/// Prints component styles
+/// @demo progress-circle
+@mixin styles {
+  $prefix: selector.class("progress-circle");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    --ulu-progress-circle-stroke-width: #{ get("stroke-width") };
+  }
+  #{ $prefix }__chart {
+    position: relative;
+    line-height: 1;
+  }
+  #{ $prefix }__chart-value {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: color.get(get("value-color"));
+    text-shadow: none;
+  }
+  #{ $prefix }__chart-svg {
+    width: get("size");
+    height: get("size");
+    transform: rotate(-90deg);
+    border-radius: 50%;
+  }
+  #{ $prefix }__chart-track {
+    fill: transparent;
+    stroke: color.get(get("color-track"));
+    stroke-width: var(--ulu-progress-circle-stroke-width);
+  }
+  #{ $prefix }__chart-pie {
+    fill: transparent;
+    stroke: color.get(get("color-progress"));
+    stroke-width: var(--ulu-progress-circle-stroke-width);
+    stroke-dasharray: 0 100;
+    will-change: stroke-dasharray;
+    // If value is changing
+    transition: stroke get("transition-duration"); 
+    // For in template composed initial animation
+    animation-duration: get("animation-duration"); 
+    animation-delay: get("animation-delay"); 
+    animation-timing-function: get("animation-timing");
+  }
+  #{ $prefix }__chart-mask {
+    fill: color.get(get("color-mask"));
+    r: calc( (get("viewbox-size") / 2) - (var(--ulu-progress-circle-stroke-width) / 2) );
+  }
+  #{ $prefix }__value {
+    color: color.get(get("value-color-outside"));
+    margin: get("value-margin-outside");
+    font-weight: normal;
+    line-height: 1;
+  }
+
+  #{ $prefix }--outside {
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  #{ $prefix }--outside-below {
+    display: block;
+  }
+  #{ $prefix }--pie {
+    // Note do not adjust the custom property for this since we want the mask to still be sized correctly
+    #{ $prefix }__chart-pie {
+      stroke-width: get("viewbox-size"); // As large as the svg (so it fills the circle)
+    }
+    #{ $prefix }__chart-track {
+      fill: color.get(get("color-track"));
+    }
+    #{ $prefix }__chart-mask {
+      fill: color.get(get("color-mask-pie"));
+    }
+  }
+  #{ $prefix }--no-mask {
+    #{ $prefix }__chart-mask {
+      display: none;
+    }
+  }
+
+
+  @each $name, $props in get("sizes") {
+    #{ $prefix }--#{ $name } {
+      --ulu-progress-circle-stroke-width: #{map.get($props, "stroke-width")};
+      #{ $prefix }__chart-svg {
+        width: map.get($props, "size");
+        height: map.get($props, "size");
+      }
+    }
+  }
+  @each $name, $color in get("status-colors") {
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__chart-pie {
+        stroke: color.get($color);
+      }
+    }
+  }
+
+  
+}

package/scss/components/_pull-quote.scss

@@ -21,18 +21,18 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {} body-line-height [true]
-/// @prop {} image-margin-bottom [1rem]
-/// @prop {} image-margin-top [2.5rem]
-/// @prop {} name-margin-bottom [1rem]
-/// @prop {} padding-y [2em]
-/// @prop {} title-font-style [italic]
-/// @prop {} quote-mark-character ["\201c"]
-/// @prop {} quote-mark-color [null]
-/// @prop {} quote-mark-font-family ["Georgia"]
-/// @prop {} quote-mark-font-size [3.75em]
-/// @prop {} quote-mark-enabled [true]
-/// @prop {} quote-mark-line-height [0.35]
+/// @prop {Number} body-line-height [true]
+/// @prop {Dimension} image-margin-bottom [1rem]
+/// @prop {Dimension} image-margin-top [2.5rem]
+/// @prop {Dimension} name-margin-bottom [1rem]
+/// @prop {Dimension} padding-y [2em]
+/// @prop {CssValue} title-font-style [italic]
+/// @prop {String} quote-mark-character ["\201c"]
+/// @prop {Color} quote-mark-color [null]
+/// @prop {String} quote-mark-font-family ["Georgia"]
+/// @prop {Dimension} quote-mark-font-size [3.75em]
+/// @prop {Boolean} quote-mark-enabled [true]
+/// @prop {Number} quote-mark-line-height [0.35]
 
 $config: (
   "body-line-height" : true,
@@ -83,7 +83,7 @@ $config: (
   #{ $prefix }__body {
     line-height: get("body-line-height");
     @if (get("quote-mark-enabled")) {
-      &:before {
+      &::before {
         display: block;
         position: relative;
         // content: open-quote;

package/scss/components/_rail.scss

@@ -0,0 +1,127 @@
+////
+/// @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" : 1.5em,
+  "separator" : true,
+  "gap-modifiers": (
+    "small" : 0.5em,
+    "none" : 0,
+    "large" : 2em
+  ),
+  "rule-size" : 1px,
+  "rule-color" : "rule",
+  "rule-margin" : 1em
+) !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%;
+  }
+  #{ $prefix }--rule {
+    border-bottom: get("rule-size") solid color.get(get("rule-color"));
+    padding-bottom: get("rule-margin");
+  }
+
+  // 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/_ratio-box.scss

@@ -5,6 +5,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -49,11 +50,7 @@ $config: (
     padding: get("size") 0 0 0; 
   }
   .ratio-box__content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     border: 0;
   }
   @each $name, $size in get("sizes") {

package/scss/components/_rule.scss

@@ -82,6 +82,7 @@ $config: (
       width: $short-width;
       max-width: 100%;
       border-bottom-width: get("short-border-width");
+      display: inline-block;
     }
     @if get("short-modifiers") {
       @each $mod, $opts in get("short-modifiers") {

package/scss/components/_scroll-slider.scss

@@ -22,8 +22,6 @@
 /// @prop {Dimension} padding-bottom  [0]
 /// @prop {Dimension} padding-top  [0]
 /// @prop {String} prefix ["scroll-slide"]
-/// @prop {Color} button-background-color  [white]
-/// @prop {Color} button-background-color-hover  [white]
 /// @prop {CssValue} button-border  [2px solid white]
 /// @prop {Color} button-border-color-hover  [white]
 /// @prop {Dimension} button-border-radius  [50%]
@@ -46,8 +44,6 @@ $config: (
   "padding-bottom" : 0,
   "padding-top" : 0,
   "prefix": "scroll-slider",
-  "button-background-color" : white,
-  "button-background-color-hover" : white,
   "button-border" : 2px solid white,
   "button-border-color-hover" : white,
   "button-border-radius" : 50%,
@@ -124,7 +120,7 @@ $config: (
     @include layout.match-container-margin("scroll-padding-left", get("container"));
     // padding: 1rem;
     // Add space to end of list
-    // &:after {
+    // &::after {
     //   content: "\00a0";
     //   display: block;
     //   width: 1rem;

package/scss/components/_skeleton.scss

@@ -0,0 +1,126 @@
+////
+/// @group skeleton
+/// Placeholder component for skeleton (ie. loading state
+////
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} animation [pulse 2s cubic-bezier(0.4,0,0.6,1) infinite] The animation applied to skeleton elements.
+/// @prop {Color} color [type-disabled] The base color for skeleton elements.
+/// @prop {Color} background-color [#cbcbcb] The primary background color for skeleton elements.
+/// @prop {Color} background-color-alt [#aeaeae] An alternative background color for skeleton elements, used for variations.
+/// @prop {Dimension} border-radius [true] The border-radius for skeleton blocks and text. If set to true, uses the element.scss property for "border-radius".
+/// @prop {Dimension} inline-margin [0.35em] The margin between inline skeleton text elements.
+/// @prop {Number} media-ratio [(4/3)] The aspect ratio for skeleton media blocks (width/height).
+/// @prop {Dimension} text-border-radius [3em] The border-radius for skeleton text lines.
+/// @prop {Map} widths [Map] A map defining various width percentages for skeleton text lines (or used to size blocks/etc)
+
+$config: (
+  "animation" : UluPulse 2s cubic-bezier(0.4,0,0.6,1) infinite,
+  "color" : "type-disabled",
+  "background-color" : #e2e2e2,
+  "background-color-alt" : #bababa,
+  "border-radius": true,
+  "inline-margin" : 0.35em,
+  "media-ratio" : list.slash(4, 3),
+  "media-font-size" : 2rem,
+  "text-border-radius" : 3em,
+  "widths": (
+    "small-xxx" : 10%,
+    "small-xx" : 20%,
+    "small-x" : 30%,
+    "small" : 40%,
+    "large" : 70%,
+    "large-x" : 85%,
+    "large-xx" : 100%
+  ),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-skeleton-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-skeleton-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "skeleton [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo skeleton
+/// @example scss
+///  @include ulu.component-skeleton-styles();
+
+@mixin styles {
+  $prefix: selector.class("skeleton");
+
+  #{ $prefix } {
+    animation: get("animation");
+    color: color.get(get("color"));
+  }
+  #{ $prefix }--background {
+    background-color: color.get(get("background-color")) !important;
+  }
+  #{ $prefix }--block,
+  #{ $prefix }--text,
+  #{ $prefix }--media {
+    animation: get("animation");
+    color: color.get(get("color"));
+    background-color: color.get(get("background-color")) !important;
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }--media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: get("media-ratio");
+    font-size: get("media-font-size");
+  }
+  #{ $prefix }--text {
+    height: 1em;
+    width: 60%;
+    border-radius: get("text-border-radius");
+  }
+  #{ $prefix }--inline {
+    display: inline-block;
+  }
+  #{ $prefix }--inline + #{ $prefix }--inline {
+    margin-left: get("inline-margin");
+  }
+  #{ $prefix }--background-alt {
+    background-color: color.get(get("background-color-alt")) !important;
+  }
+  @each $name, $value in get("widths") {
+    #{ $prefix }--width-#{ $name } {
+      width: $value;
+    }
+  }
+}