@ulu/frontend 0.6.12 → 0.6.14

package/lib/scss/_button.scss

@@ -28,6 +28,7 @@ $-fallbacks: (
 /// @prop {Dimension} min-width [9rem] The smallest width for all buttons
 /// @prop {Dimension} padding [(0.75em 1.5em)] Button inner padding value, pass space separated list
 /// @prop {CssValue} white-space [nowrap] Adjust button line wrapping, by default line's are not wrapped
+/// @prop {Dimension} gap [0.5em] Gap to use between items within the button
 /// @prop {String} border-color ["control-border"] The border color for the button, usually if there is no border we set this to match the background color so if a button with no borders is adjacent a style that has borders the heights will match.
 /// @prop {String} border-color-hover ["control-border-hover"] Color of border when button is hovered
 /// @prop {String} border-color-active ["control-border-active"] Color of border when a button has active class
@@ -84,7 +85,7 @@ $config: (
   "transition-enabled":      true,
   "transition-duration":     200ms,
   "transition-properties":   (border-color, background-color, color, box-shadow),
-  "button-icon-offset":      true,
+  "gap":                     0.5em,
 ) !default;
   
 /// Button sizes
@@ -199,9 +200,11 @@ $styles: (
     @include reset();
   }
   appearance: none; // If used with select for example
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: get("gap");
   text-transform: get("text-transform");
-  text-align: center;
   text-shadow: get("text-shadow");
   vertical-align: middle;
   font-family: get("font-family");

package/lib/scss/components/_badge.scss

@@ -20,20 +20,28 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} background-color [gray] Background color (if no image)
+/// @prop {Color} background-color [gray] Background color (if no image)
+/// @prop {Color} background-color-hover [null] Optional background color for hover when using badge--clickable modifier
 /// @prop {Number} border-radius [50%] Border radius of badge
-/// @prop {Number} color [black] Type color
+/// @prop {Color} color [black] Type color
+/// @prop {Color} color-hover [null] Optional color for hover when using badge--clickable modifier
+/// @prop {CssValue} box-shadow [null] Optional box-shadow
+/// @prop {CssValue} box-shadow-hover [null] Optional box-shadow for hover when using badge--clickable modifier
 /// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Number} font-weight [bold] Font weight
-/// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
+/// @prop {Keyword} font-weight [bold] Font weight
+/// @prop {String} font-family [true] Specify font family, defaults to typography font-family-sans
 /// @prop {Number} width [10rem] Width of badge (default size)
 /// @prop {Number} hover-scale [1.2] Scale of badge (if clickable) on hover (enlarges badge)
 /// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
-  "background-color":    gray,
+  "background-color":    rgb(205, 205, 205),
+  "background-color-hover": null,
   "border-radius":       50%,
   "color":               black,
+  "color-hover":         null,
+  "box-shadow" :         null,
+  "box-shadow-hover" :   null,
   "font-size":           1.5rem,
   "font-weight":         bold,
   "font-family":         true,
@@ -110,7 +118,8 @@ $config: (
     text-align: center;
     border-radius: get("border-radius");
     transition: transform 100ms ease-in-out;
-    // Incase this is used as a link or router-link
+    box-shadow: get("box-shadow");
+    // In case this is used as a link or router-link
     &,
     &:hover,
     &:focus,
@@ -125,6 +134,9 @@ $config: (
     &:hover,
     &:focus {
       #{ $prefix }__inner {
+        color: color.get(get("color-hover"));
+        background-color: color.get(get("background-color-hover"));
+        box-shadow: get("box-shadow-hover");
         transform: scale(get("hover-scale"));
       }
     }

package/lib/scss/components/_button.demo.html

@@ -22,3 +22,9 @@
   description: A larger button variant.
 -->
 <button class="button button--large">Large Button</button>
+
+<!-- @ulu-demo
+  title: Left Aligned Button
+  description: A button with its content aligned to the left, useful when the button spans a larger width.
+-->
+<button class="button button--left" style="width: 100%;">Left Aligned</button>

package/lib/scss/components/_button.scss

@@ -18,10 +18,8 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} icon-margin [1em] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
-  "icon-margin" : 0.5em,
   "icon-centered-vertical-offset": true
 ) !default;
 
@@ -65,13 +63,9 @@ $config: (
   #{ $prefix }--fit {
     min-width: 0;
   }
-  #{ $prefix }__icon {
-    &:not(:first-child) { 
-      margin-inline-start: get("icon-margin"); 
-    }
-    &:not(:last-child) { 
-      margin-inline-end: get("icon-margin"); 
-    }
+  #{ $prefix }--left {
+    justify-content: flex-start;
+    text-align: left;
   }
   
   @each $size, $values in button.$sizes {
@@ -88,9 +82,6 @@ $config: (
   
   #{ $icon-selector } {
     
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     min-width: 0;
     max-width: none;
     border-radius: button.get("icon-border-radius");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [