@ulu/frontend 0.1.0-beta.67 → 0.1.0-beta.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.67",
-  "description": "Modular Sass Theming Library",
+  "version": "0.1.0-beta.69",
+  "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",
   "exports": {
@@ -49,7 +49,15 @@
     "mixin",
     "components",
     "HTML",
-    "frontend framework"
+    "frontend framework",
+    "css",
+    "utilities",
+    "design system",
+    "toolkit",
+    "accessibility",
+    "ui",
+    "user interface",
+    "responsive design"
   ],
   "authors": {
     "name": "Joe Scherben, Informatics Studio",

package/scss/README.md

@@ -41,6 +41,10 @@
 - Should be written from the user's point of view
   - Use prefixes @see "Module Prefixes" in member names. This will avoid confusion about normal use case. For advanced user importing specific parts would already be familiar with this pattern. 
 
+#### Workaround for syntax highlighting bug
+
+If the syntax highlighting isn't working properly after an example, add an empty line with `///` to workaround that bug
+
 ### Ideas
 
 - How to solve the inability to use standard vars (avoid with)

package/scss/components/_accordion.scss

@@ -3,6 +3,8 @@
 /// Outputs accordion component stylesheet, which can be used with <details> or custom disclosure components
 ////
 
+// Internal note: We don't require the content to be wrapped, this is so that this can be used on details elements outside of our control. So we use negative margins
+
 @use "sass:map";
 @use "sass:math";
 
@@ -95,15 +97,16 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("accordion");
-
+  $padding-x: get("padding-x");
+  $padding-x-double: get("padding-x") * 2;
   $border: get("border-width") solid color.get(get("border-color"));
 
   // When not one of our custom classed details components
   #{ $prefix } {
     position: relative; // For active border
     border-radius: 0;
-    padding-left: get("padding-x");
-    padding-right: get("padding-x");
+    padding-left: $padding-x;
+    padding-right: $padding-x;
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
@@ -138,16 +141,18 @@ $config: (
   #{ $prefix }__summary {
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
-    margin-left: -(get("padding-x"));
-    margin-right: -(get("padding-x"));
+    margin-left: -($padding-x);
+    margin-right: -($padding-x);
     line-height: get("summary-line-height");
-    padding: get("summary-padding-y") get("padding-x");
+    padding: get("summary-padding-y") $padding-x;
     vertical-align: top;
     font-weight: bold;
     cursor: pointer;
-    display: flex; // For icon
     align-items: center;
+    width: calc(100% + $padding-x-double); // To fix if using <button>
+ 
     &:has(#{ $prefix }__icon) {
+      display: flex;
       list-style: none; // Remove the default arrow (old safari?)
       &::-webkit-details-marker,
       &::marker {
@@ -193,6 +198,7 @@ $config: (
     > #{ $prefix }__summary {
       margin-left: -(get("transparent-padding-x"));
       margin-right: -(get("transparent-padding-x"));
+      width: 100%;
       padding: get("transparent-padding-y") get("transparent-padding-x");
       background-color: transparent;
       border: none;
@@ -208,8 +214,11 @@ $config: (
   }
   #{ $prefix }--no-borders {
     border: none;
-    &[open] > .accordion__summary {
-      border-bottom: none;
+    &[open],
+    &.is-active {
+      & > .accordion__summary {
+        border-bottom: none;
+      }
     }
   }
 }

package/scss/components/_badge.scss

@@ -3,11 +3,21 @@
 /// Outputs badge component stylesheet
 ////
 
+@use "sass:meta";
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../typography";
 @use "../color";
 
+// Used for function fallback
+$-fallbacks: (
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  )
+);
+
 /// Module Settings
 /// @type Map
 /// @prop {Number} background-color [gray] Background color (if no image)
@@ -15,6 +25,7 @@
 /// @prop {Number} color [black] Type color
 /// @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 {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 /// @prop {Number} width [10rem] Width of badge (default size)
 
@@ -22,13 +33,18 @@ $config: (
   "background-color":    gray,
   "border-radius":       50%,
   "color":               black,
-  "font-size":           1.3rem,
+  "font-size":           1.5rem,
   "font-weight":         bold,
-  "width":               10rem,
+  "font-family":         true,
+  "width":               7rem,
   "sizes" : (
+    "small" : (
+      "font-size" : 1.2rem,
+      "width" :  5rem
+    ),
     "large" : (
       "font-size" : 2.75rem,
-      "width" :  6rem
+      "width" :  9rem
     )
   )
 ) !default;
@@ -48,7 +64,8 @@ $config: (
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "badge [config]");
+  $value: utils.require-map-get($config, $name, "badge [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output badge component styles
@@ -77,6 +94,7 @@ $config: (
     flex: 0 0 get("width");
     font-size: get("font-size");
     font-weight: get("font-weight");
+    font-family: get("font-family");
   }
   #{ $prefix }__inner {
     display: block;
@@ -118,6 +136,7 @@ $config: (
     width: 100%;
     height: 100%;
     object-fit: cover;
+    margin: 0 !important;
   }
 
   @each $name, $props in get("sizes") {

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_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_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_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map