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

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/types/ui/index.d.ts

@@ -20,5 +20,5 @@ export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
 export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
+declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts

@@ -6,5 +6,5 @@ export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
 export * as fontAwesome from "./font-awesome.js";
-declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
+declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map