@ulu/frontend 0.6.10 → 0.6.11

package/lib/scss/_element.scss

@@ -80,6 +80,7 @@ $config: (
 
 $rule-styles: (
   "default": 1px solid color.get("rule"),
+  "large": 2px solid color.get("rule"),
   "light":   1px solid color.get("rule-light"),
 ) !default;
 

package/lib/scss/_layout.scss

@@ -41,10 +41,91 @@ $config: (
   @return utils.require-map-get($config, $name, "layout [config]");
 }
 
+/// System widths
+/// @type Map
+/// @prop {Map} [name] The width definition
+/// @prop {String|Number} [name].value The base width value
+/// @prop {Boolean} [name].helper-class Output a helper class for this width
+/// @prop {Map} [name].breakpoints Responsive breakpoints (optional)
+
+$widths: (
+  "small-x": (
+    "value": 6rem,
+    "helper-class": true
+  ),
+  "small": (
+    "value": 8rem,
+    "helper-class": true
+  ),
+  "medium": (
+    "value": 16rem,
+    "helper-class": true
+  ),
+  "large": (
+    "value": 32rem,
+    "helper-class": true
+  )
+) !default;
+
+/// Change widths config
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-widths($changes, $merge-mode: null) {
+  $widths: utils.map-merge($widths, $changes, $merge-mode) !global;
+}
+
+/// Get a width config by name
+/// @param {String} $name Name of width
+/// @return {Map} The width configuration object
+
+@function get-width($name) {
+  @return utils.require-map-get($widths, $name, "layout [widths]");
+}
+
+/// System max-widths
+/// @type Map
+/// @prop {Map} [name] The max-width definition
+/// @prop {String|Number} [name].value The base max-width value
+/// @prop {Boolean} [name].helper-class Output a helper class for this max-width
+/// @prop {Map} [name].breakpoints Responsive breakpoints (optional)
+
+$max-widths: (
+  "small": (
+    "value": 20rem,
+    "helper-class": true
+  ),
+  "medium": (
+    "value": 40rem,
+    "helper-class": true
+  ),
+  "large": (
+    "value": 60rem,
+    "helper-class": true
+  )
+) !default;
+
+/// Change max-widths config
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-max-widths($changes, $merge-mode: null) {
+  $max-widths: utils.map-merge($max-widths, $changes, $merge-mode) !global;
+}
+
+/// Get a max-width config by name
+/// @param {String} $name Name of max-width
+/// @return {Map} The max-width configuration object
+
+@function get-max-width($name) {
+  @return utils.require-map-get($max-widths, $name, "layout [max-widths]");
+}
+
 /// Containers Lookup (use set-containers)
 /// @type Map
 /// @ignore This needs to be below the methods it uses!
 
+
 $containers: (
   "container" : (
     "width" : 100%,

package/lib/scss/base/_root.scss

@@ -7,6 +7,7 @@
 
 @use "../utils";
 @use "../cssvar";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -102,4 +103,12 @@ $cssvars: () !default;
   // This may need to be adjusted if config is used for something else
   @include cssvar.declare-all($config, $prefix);
   @include cssvar.declare("scrollbar-width", 0px, $prefix); // Set by JS
+
+  @each $name, $props in layout.$widths {
+    @include cssvar.declare("width-#{ $name }", $props, $prefix);
+  }
+
+  @each $name, $props in layout.$max-widths {
+    @include cssvar.declare("max-width-#{ $name }", $props, $prefix);
+  }
 }

package/lib/scss/components/_graphic-text-group.scss

@@ -0,0 +1,182 @@
+////
+/// @group graphic-text-group
+/// Graphic Text Group layout component
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../element";
+@use "../breakpoint";
+
+// Used for function fallback
+$-fallbacks: (
+  "rule-border": (
+    "function": meta.get-function("get-rule-style", false, "element"),
+    "arguments": ("large",)
+  ),
+  "separator-border": (
+    "function": meta.get-function("get-rule-style", false, "element"),
+    "arguments": ("light",)
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssUnit} gap [1rem] The gap between graphic and text.
+/// @prop {List} margin [2em 0] Margin applied to the group.
+/// @prop {CssUnit} graphic-width [3.5rem] The default safe width for the graphic.
+/// @prop {Border} rule-border [true] The border style for the rules.
+/// @prop {CssUnit} rule-padding [1rem] The padding applied when using rules.
+/// @prop {String} wrap-breakpoint ["small"] The breakpoint name at which the layout wraps to a column.
+/// @prop {Border} separator-border [true] The border style for the separator between graphic and text.
+/// @prop {CssUnit} separator-gap [0.5rem] The gap when the separator modifier is used (typically smaller since there are two gaps around the separator).
+
+$config: (
+  "gap" : 1rem,
+  "margin" : (2em 0),
+  "graphic-width" : 3.5rem,
+  "rule-border" : true,
+  "rule-padding" : 1rem,
+  "wrap-breakpoint" : "small",
+  "separator-border" : true,
+  "separator-gap" : 0.8rem,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-graphic-text-group-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-graphic-text-group-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "graphic-text-group [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo graphic-text-group
+/// @example scss
+///  @include ulu.component-graphic-text-group-styles();
+
+@mixin styles {
+  $prefix: selector.class("graphic-text-group");
+
+  #{ $prefix } {
+    display: flex;
+    align-items: center;
+    gap: get("gap");
+    margin: get("margin");
+  }
+
+  #{ $prefix }__graphic {
+    flex-shrink: 0;
+    width: get("graphic-width");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 1;
+
+    img, svg {
+      margin: 0;
+    }
+  }
+
+  #{ $prefix }__text {
+    flex-grow: 1;
+    min-width: 0;
+    order: 3;
+  }
+
+  // Separator Modifier
+  #{ $prefix }--separator {
+    gap: get("separator-gap");
+    &::before {
+      content: "";
+      display: block;
+      order: 2;
+      align-self: stretch;
+      border-left: get("separator-border");
+    }
+    &#{ $prefix }--top,
+    &#{ $prefix }--bottom {
+      &::before {
+        border-left: none;
+        border-bottom: get("separator-border");
+      }
+    }
+  }
+
+  // Responsive Modifiers
+  #{ $prefix }--wrap {
+    @include breakpoint.max(get("wrap-breakpoint")) {
+      flex-direction: column;
+      align-items: flex-start;
+      &#{ $prefix }--separator::before {
+        border-left: none;
+        border-bottom: get("separator-border");
+      }
+    }
+  }
+
+  // Alignment Modifiers
+  #{ $prefix }--align-start {
+    align-items: flex-start;
+  }
+
+  #{ $prefix }--align-end {
+    align-items: flex-end;
+  }
+
+  // Position Modifiers
+  #{ $prefix }--right {
+    > #{ $prefix }__graphic {
+      order: 3;
+    }
+    > #{ $prefix }__text {
+      order: 1;
+    }
+  }
+
+  #{ $prefix }--top {
+    flex-direction: column;
+  }
+
+  #{ $prefix }--bottom {
+    flex-direction: column;
+    > #{ $prefix }__graphic {
+      order: 3;
+    }
+    > #{ $prefix }__text {
+      order: 1;
+    }
+  }
+
+  #{ $prefix }--center {
+    align-items: center;
+    text-align: center;
+  }
+
+  // Rule Modifiers
+  #{ $prefix }--rule-top {
+    border-top: get("rule-border");
+    padding-top: get("rule-padding");
+  }
+
+  #{ $prefix }--rule-bottom {
+    border-bottom: get("rule-border");
+    padding-bottom: get("rule-padding");
+  }
+}
+

package/lib/scss/components/_index.scss

@@ -25,6 +25,7 @@
 @forward "flipcard" as flipcard-*;
 @forward "flipcard-grid" as flipcard-grid-*;
 @forward "form-theme" as form-theme-*;
+@forward "graphic-text-group" as graphic-text-group-*;
 @forward "headline-label" as headline-label-*;
 @forward "input-group" as input-group-*;
 @forward "rule-inline" as rule-inline-*;
@@ -91,6 +92,7 @@
 @use "flipcard";
 @use "flipcard-grid";
 @use "form-theme";
+@use "graphic-text-group";
 @use "headline-label";
 @use "input-group";
 @use "rule-inline";
@@ -158,6 +160,7 @@ $all-includes: (
   "flipcard",
   "flipcard-grid",
   "form-theme",
+  "graphic-text-group",
   "headline-label",
   "input-group",
   "rule-inline",
@@ -309,6 +312,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "form-theme")) {
     @include form-theme.styles;
   }
+  @if (list.index($includes, "graphic-text-group")) {
+    @include graphic-text-group.styles;
+  }
   @if (list.index($includes, "headline-label")) {
     @include headline-label.styles;
   }

package/lib/scss/components/_menu-stack.scss

@@ -28,6 +28,10 @@ $-fallbacks: (
   "link-line-height" : (
     "function" : meta.get-function("get", false, "typography"),
     "property" : "line-height-dense"
+  ),
+  "stacked-link-border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius-small"
   )
 );
     
@@ -46,6 +50,9 @@ $-fallbacks: (
 /// @prop {Dimension} compact-selectable-input-width [2em] The width of the checkbox/radio input (when compact modifier)
 /// @prop {Dimension} compact-selectable-input-font-size [null] Optional compact input font-size
 /// @prop {Dimension} compact-selectable-input-top [null] Optional y/top for input
+/// @prop {Dimension} stacked-link-padding-x [0.4em] The links horizontal padding when using the stacked option.
+/// @prop {Dimension} stacked-link-padding-y [0.4em] The links vertical padding when using the stacked option.
+/// @prop {Dimension} stacked-link-icon-margin [0.35em] Margin between icon and text when stacked.
 /// @prop {Color} label-color [null] The type color of the label.
 /// @prop {Dimension} label-margin [0.5em] The margin of the label.
 /// @prop {CssValue} label-text-transform [uppercase] Transforms the label text.
@@ -121,6 +128,10 @@ $config: (
   "compact-selectable-input-width": 2.2em,
   "compact-selectable-input-top" : 0.5em,
   "compact-selectable-input-font-size": 0.8em,
+  "stacked-link-padding-x": 0.4em,
+  "stacked-link-padding-y": 0.4em,
+  "stacked-link-icon-margin": 0.35em,
+  "stacked-link-border-radius": true,
   "selectable-input-width" : 3em,
   "selectable-input-top" : 0.73em,
   "selectable-input-font-size" : null,
@@ -372,6 +383,28 @@ $config: (
     }
   }
 
+  #{ $prefix }--stacked {
+    @include cssvar.declare-ulu("menu-stack-link-padding-x", get("stacked-link-padding-x"));
+
+    #{ $prefix }__link,
+    #{ $prefix }__toggle {
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      border-radius: get("stacked-link-border-radius");
+      padding-top: get("stacked-link-padding-y");
+      padding-bottom: get("stacked-link-padding-y");
+    }
+    #{ $prefix }__link-icon {
+      margin-right: 0;
+      margin-bottom: get("stacked-link-icon-margin");
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   #{ $prefix }--columns {
     > #{ $prefix }__list {
       display: grid;

package/lib/scss/helpers/_index.scss

@@ -9,6 +9,7 @@
 @forward "print"  as print-*;
 @forward "units"  as units-*;
 @forward "color"  as color-*;
+@forward "layout"  as layout-*;
 
 @use "sass:list";
 
@@ -19,6 +20,7 @@
 @use "units";
 @use "print";
 @use "color";
+@use "layout";
 
 /// Default includes, all modules
 /// @type List
@@ -29,7 +31,8 @@ $all-includes: (
   "display",
   "utilities", 
   "print",
-  "color"
+  "color",
+  "layout"
 );
 
 /// Current included modules (for output when using styles), defaults to all
@@ -71,6 +74,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "units")) {
     @include units.styles;
   }
+  @if (list.index($includes, "layout")) {
+    @include layout.styles;
+  }
   @if (list.index($includes, "display")) {
     @include display.styles;
   }
@@ -89,3 +95,4 @@ $current-includes: $all-includes;
 
 
 
+

package/lib/scss/helpers/_layout.scss

@@ -0,0 +1,36 @@
+////
+/// @group layout
+/// Output layout helper classes (widths, max-widths, etc)
+////
+
+@use "sass:map";
+
+@use "../layout";
+@use "../selector";
+@use "../utils";
+@use "../cssvar";
+
+/// Output Layout Helper Styles
+
+@mixin styles {
+  @include utils.file-header('helpers', 'layout');
+
+  $prefix-width: selector.class("width");
+  @each $name, $props in layout.$widths {
+    @if map.get($props, "helper-class") {
+      #{ $prefix-width }-#{ $name } {
+        width: cssvar.use-ulu("width-#{ $name }");
+        max-width: 100%;
+      }
+    }
+  }
+
+  $prefix-max-width: selector.class("max-width");
+  @each $name, $props in layout.$max-widths {
+    @if map.get($props, "helper-class") {
+      #{ $prefix-max-width }-#{ $name } {
+        max-width: cssvar.use-ulu("max-width-#{ $name }");
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "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": [
@@ -12,7 +12,7 @@
   "types": "./dist/es/index.d.ts",
   "exports": {
     ".": {
-      "sass" : "./lib/scss/index.scss",
+      "sass": "./lib/scss/index.scss",
       "types": "./dist/es/index.d.ts",
       "import": "./dist/es/index.js",
       "require": "./dist/umd/ulu-frontend.umd.js"
@@ -99,6 +99,7 @@
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@ulu/eleventy-plugin-nav-tree": "^0.0.1",
     "@ulu/markdown-output-utils": "^0.0.6",
+    "@ulu/mcp-context-server": "^0.0.3",
     "@ulu/sassdoc-to-markdown": "^0.0.16",
     "@ulu/utils": "^0.0.34",
     "@ulu/vite-plugin-eleventy": "^0.0.1",