@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.81

package/scss/components/_sticky-list.scss

@@ -0,0 +1,206 @@
+
+////
+/// @group sticky-list
+////
+/// Sticky first column, sticky elements inside adjacent columns to first. (Sticky list with header)
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:color" as sassColor;
+
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+@use "../typography";
+@use "../utils";
+@use "../selector";
+
+// Used for function fallback
+$-fallbacks: (
+  "margin" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "margin"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [transparent] Background color for the entire slider section.
+/// @prop {Number} margin [true] Margin on ends of component (defaults to element margin)
+/// @prop {Number} mask-offset-bottom [55vh] The offset for the mask (on bottom)
+/// @prop {Number} mask-offset-top [5rem] The offset for the mask (on top)
+/// @prop {Number} sticky-top [45vh] When to stick
+/// @prop {String} breakpoint ["medium"] The upward breakpoint that this is allowed to be sticky 
+/// @prop {String} type-size ["medium"] The typography size to use for title
+/// @prop {Number} title-width [40%] The width of the title when this is displayed in columns
+/// @prop {Number} title-min-width [8em] The min width for title when displayed in columns
+/// @prop {CssValue} title-text-align [right] Text alignment for title when displayed in columns
+/// @prop {Number} item-padding-x [0] Optional padding on the left/right for items
+/// @prop {Number} gap [2rem] The gap between title and items when displayed in columns
+/// @prop {Color} background-color [white] The background color used for the mask
+/// @prop {List} background-contexts Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])  
+
+$config: (
+  "margin" : true,
+  "mask-offset-bottom" : 55vh,
+  "mask-offset-top" : 5rem,
+  "sticky-top" : 45vh,
+  "breakpoint" : "medium",
+  "type-size" : "large",
+  "title-width" : 40%,
+  "title-min-width" : 8em,
+  "title-text-align" : right,
+  "item-padding-x" : 0,
+  "gap" : 2rem,
+  "background-color" : white,
+  "background-contexts" : (
+    (
+      "selector" : ".background-dark",
+      "background-color" : black,
+      "item-padding-x" : 1em
+    ),
+  )
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-sticky-list-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-sticky-list-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "sticky-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo sticky-list
+/// @example scss
+///   @include ulu.component-sticky-list-styles();
+/// @example html {preview}
+/// <div class="sticky-list">
+///   <strong class="sticky-list__title">Example:</strong>
+///   <ul class="sticky-list__list">
+///     <li class="sticky-list__item">
+///       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec nisl magna
+///     </li>
+///     <li class="sticky-list__item">
+///       Aenean sollicitudin mauris lectus, blandit suscipit lectus fringilla sed
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///   </ul>
+/// </div>
+
+@mixin styles {
+  $prefix: selector.class("sticky-list");
+  $mask-offset-top: get("mask-offset-top");
+  $mask-offset-bottom: get("mask-offset-bottom");
+  $type-size: get("type-size");
+  $sticky-top: get("sticky-top");
+
+  #{ $prefix } {
+    padding: get("margin") 0;
+  }
+  @include breakpoint.min(get("breakpoint")) {
+    #{ $prefix } {
+      display: flex;
+      align-items: flex-start;
+      gap: get("gap");
+      position: relative;
+      @if ($type-size and typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      } @else if ($type-size) {
+        @warn "Unable to find '#{$type-size}' typography size for title";
+      }
+    }
+    #{ $prefix }__title,
+    #{ $prefix } > :not(ul) {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      flex-basis: get("title-width");
+      min-width: get("title-min-width");
+      padding-top: $mask-offset-top;
+      padding-bottom: $mask-offset-bottom;
+      text-align: get("title-text-align");
+    }
+    #{ $prefix }__list,
+    #{ $prefix } > ul {
+      list-style: none;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-self: stretch;
+    }
+    #{ $prefix }__item,
+    #{ $prefix } > ul > li {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      margin: 0 !important; // If in editor (to complicated for :not())
+      padding: $mask-offset-top get("item-padding-x") $mask-offset-bottom get("item-padding-x");
+      @include set-background(get("background-color"));
+    }
+    #{ $prefix }__item:first-child,
+    #{ $prefix } > ul > li:first-child {
+      margin-top: 0;
+    }
+    #{ $prefix }__item:last-child,
+    #{ $prefix } > ul > li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Print out any contextual background styles
+  @each $props in get("background-contexts") {
+    $selector: map.get($props, "selector");
+    $item-padding-x: map.get($props, "item-padding-x");
+    @include breakpoint.min(get("breakpoint")) {
+      #{ $selector } {
+        #{ $prefix }__item,
+        #{ $prefix } > ul > li {
+          @if ($item-padding-x) {
+            padding-left: $item-padding-x;
+            padding-right: $item-padding-x;
+          }
+          @include set-background(map.get($props, "background-color"));
+        }
+      }
+    }
+  }
+}
+
+/// Outputs background color mask CSS (gradient from transparent to original color)
+/// @param {Color} $color The color to create the CSS for
+
+@mixin set-background($color) {
+  $color: color.get($color);
+  $color-transparent: sassColor.change($color, $alpha: 0);
+  background-color: $color;
+  background: linear-gradient(180deg, $color-transparent 0%, $color get("mask-offset-top"));
+}

package/scss/components/_tabs.scss

@@ -9,6 +9,7 @@
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
+@use "../layout";
 @use "../typography";
 @use "../element";
 @use "../utils";
@@ -39,6 +40,8 @@ $-fallbacks: (
 /// @prop {Dimension} tabpanel-padding [(2rem,)] Padding for the tabpanel
 /// @prop {Dimension} indicator-size [0.25em] The size of the tab's active border/indicator
 /// @prop {Color} indicator-color [currentColor] The color of the indicator
+/// @prop {Color} indicator-transition-duration [200ms] The transition duration for indicator
+/// @prop {Color} indicator-scale-start [0] The starting scale for the indicator (set to 1 to disable expanding on click)
 /// @prop {Color} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
@@ -55,14 +58,17 @@ $-fallbacks: (
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
 
 $config: (
-  "margin" : (2rem, 0),
+  "margin" : (2rem 0),
   "print-margin" : 1.5em,
   "tablist-divider" : true,
   "tablist-divider-width" : 1px,
   "indicator-size" : 3px,
   "indicator-color" : currentColor,
+  "indicator-transition-duration" : 200ms,
+  "indicator-transition-timing" : ease-out,
+  "indicator-scale-start" : 0,
   "tab-color" : "type-tertiary",
-  "tab-color-hover" : "link-hover",
+  "tab-color-hover" : "selected",
   "tab-color-selected" : "selected",
   "tab-background-color-selected" : null,
   "tab-font-weight" : true,
@@ -118,6 +124,7 @@ $config: (
       overflow-x: auto;
       border-bottom: get("tablist-divider");
       border-bottom-width: get("tablist-divider-width");
+      @include layout.remove-scrollbar();
     }
     [role="tab"] {
       display: block;
@@ -140,17 +147,28 @@ $config: (
         left: 0;
         right: 0;
         height: get("indicator-size");
+        transition-property: opacity, background-color, transform;
+        transition-duration: get("indicator-transition-duration");
+        transition-timing-function: get("indicator-transition-timing");
+        transform: scaleX(get("indicator-scale-start"));
+        transform-origin: center;
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
       }
+      // Add focus so as user clicks item it starts the active state styling
+      &:focus,
       &[aria-selected="true"] {
-        color: color.get(get("tab-color-selected"));
-        background-color: color.get(get("tab-background-color-selected"));
+        outline: none; // We are providing focus styling
         &::after {
           opacity: 1;
+          transform: scaleX(1);
         }
       }
+      &[aria-selected="true"] {
+        color: color.get(get("tab-color-selected"));
+        background-color: color.get(get("tab-background-color-selected"));
+      }
     }
     [role="tabpanel"] {
       position: relative;

package/scss/components/_vignette.scss

@@ -8,10 +8,12 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(0,0,0)] Color used for the fade-in of the vignette. Must be actual color not color module palette name
+/// @prop {CssValue} image-filter [saturate(85%)] Filter value placed over image.
 
 $config: (
   "background-color" : rgb(0,0,0),
@@ -48,11 +50,7 @@ $config: (
     &::after {
       content: "";
       display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      @include layout.absolute-fill();
       background: linear-gradient(0deg,color.change(get("background-color"), $alpha: 0.8),color.change(get("background-color"), $alpha: 0) 45%);
       pointer-events: none;
     }

package/scss/helpers/_display.scss

@@ -20,53 +20,50 @@
 
   @include utils.file-header('helpers', 'display');
 
-  $hiddenVisuallyPrefix: selector.class("hidden-visually");
+  $prefix-hidden-visually: selector.class("hidden-visually");
+  $prefix-display: selector.class("display");
+  $prefix-hidden: selector.class("hidden");
 
-  #{ $hiddenVisuallyPrefix } {
+  #{ $prefix-hidden-visually } {
     @include element.hidden-visually();
   }
-  #{ $hiddenVisuallyPrefix }-focusable {
+  #{ $prefix-hidden-visually }-focusable {
     &:not(:active):not(:focus) {
       @include element.hidden-visually();
     }
   }
-  // Consider removing
-  .clearfix,
-  .cf { 
-    @include layout.clearfix();
-  }
-  .display-block {
+  #{ $prefix-display }-block {
     display: block;
   }
-  .display-flex {
+  #{ $prefix-display }-flex {
     display: flex;
   }
-  .display-inline-flex {
+  #{ $prefix-display }-inline-flex {
     display: inline-flex;
   }
-  .display-inline {
+  #{ $prefix-display }-inline {
     display: inline;
   }
-  .display-inline-all * {
+  #{ $prefix-display }-inline-all * {
     display: inline;
   }
-  .display-inline-block {
+  #{ $prefix-display }-inline-block {
     display: inline-block;
   }
-  .hidden,
-  .display-none {
+  #{ $prefix-hidden },
+  #{ $prefix-display }-none {
     display: none !important;
   }
 
   // Display none per breakpoint
   @each $name in map.keys(breakpoint.$sizes) {
     @include breakpoint.min($name) {
-      .hidden-min-#{ $name } {
+      #{ $prefix-hidden }-min-#{ $name } {
         display: none !important;
       }
     }
     @include breakpoint.max($name) {
-      .hidden-max-#{ $name } {
+      #{ $prefix-hidden }-max-#{ $name } {
         display: none !important;
       }
     }

package/scss/helpers/_print.scss

@@ -8,18 +8,23 @@
 /// @example scss
 ///  @include ulu.helper-print-styles();
 
+@use "../selector";
+
 @mixin styles {
+  $prefix-print: selector.class("print");
+  $prefix-no-print: selector.class("no-print");
   
-  .print-exact {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  .no-print {
+  #{ $prefix-no-print } {
     @media print {
       display: none !important;
     }
   }
-  .print-only {
+
+  #{ $prefix-print }-exact {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+  #{ $prefix-print }-only {
     @media screen {
       display: none !important;
     }
@@ -27,7 +32,7 @@
   // Utility for making dark backgrounds print "ok"
   // - Grayscale added because colors are flipped
   // - Rotating colors doesn't really work
-  .print-invert {
+  #{ $prefix-print }-invert {
     @media print {
       filter: invert(1) saturate(0);
     }

package/scss/helpers/_utilities.scss

@@ -5,6 +5,7 @@
 
 @use "../utils";
 @use "../layout";
+@use "../selector";
 
 /// Print utilities helper styles
 /// - Includes classes like (.crop-margins, .no-scroll-y, .image-full-width, etc)
@@ -13,99 +14,108 @@
 
 @mixin styles {
 
+  $prefix-no-scroll: selector.class("no-scroll");
+  $prefix-image: selector.class("image");
+  $prefix-margin: selector.class("margin");
+  $prefix-no-margin: selector.class("no-margin");
+  $prefix-crop-margins: selector.class("crop-margins");
+  $prefix-no-padding: selector.class("no-padding");
+  $prefix-align-self: selector.class("align-self");
+
+
   @include utils.file-header('helpers', 'utilities');
   
   // Consider removing
-  .no-scroll-y { 
+  #{ $prefix-no-scroll }-y { 
     overflow-y: hidden; 
   }
-  .no-scroll-x { 
+  #{ $prefix-no-scroll }-x { 
     overflow-x: hidden; 
   }
-  .full-height {
+  #{ selector.class("full-height") } {
     height: 100%;
   }
-  .full-width {
+  #{ selector.class("full-width") } {
     width: 100%;
   }
-  .flex-basis-full {
+  #{ selector.class("flex-basis-full") } {
     flex-basis: 100%;
   }
-  .full-min-height {
+  #{ selector.class("full-min-height") } {
     min-height: 100%;
   }
-  .image-fill {
+  #{ $prefix-image }-fill {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-  .image-full-width img,
-  .image-full-width {
+  #{ $prefix-image }-full-width img,
+  #{ $prefix-image }-full-width {
     width: 100%;
     height: auto;
   }
-  .margin-auto,
-  .center {
+  #{ $prefix-margin }-auto,
+  #{ selector.class("center") } {
     margin-left: auto;
     margin-right: auto;
   }
-  .margin-left-auto {
-    margin-left: auto;
+  #{ $prefix-margin }-left-auto {
+        margin-left: auto;
   }
-  .margin-right-auto {
+  #{ $prefix-margin }-right-auto {
     margin-right: auto;
   }
-  .no-margin {
+  #{ $prefix-no-margin } {
     margin: 0;
   }
-  .no-margin-top {
+  #{ $prefix-no-margin }-top {
     margin-top: 0;
   }
-  .no-margin-bottom {
+  #{ $prefix-no-margin }-bottom {
     margin-bottom: 0;
   }
-  .no-margin-left {
+  #{ $prefix-no-margin }-left {
     margin-left: 0;
   }
-  .no-margin-right {
+  #{ $prefix-no-margin }-right {
     margin-right: 0;
   }
-  .crop-margins {
-    &:not(.crop-margins--last) >:first-child {
+  #{ $prefix-crop-margins } {
+    &:not( #{ $prefix-crop-margins }--last) >:first-child {
       margin-top: 0;
     }
-    &:not(.crop-margins--first) >:last-child {
+    &:not( #{ $prefix-crop-margins }--first) >:last-child {
       margin-bottom: 0;
     }
   }
-  .no-padding {
+  #{ $prefix-no-padding } {
     padding: 0;
   }
-  .no-padding-top {
+  #{ $prefix-no-padding }-top {
     padding-top: 0;
   }
-  .no-padding-bottom {
+  #{ $prefix-no-padding }-bottom {
     padding-bottom: 0;
   }
-  .no-padding-left {
+  #{ $prefix-no-padding }-left {
     padding-left: 0;
   }
-  .no-padding-right {
+  #{ $prefix-no-padding }-right {
     padding-right: 0;
   }
-  .align-self-start {
+  #{ $prefix-align-self }-start {
     align-self: start;
   }
-  .align-self-center {
+  #{ $prefix-align-self }-center {
     align-self: center;
   }
-  .align-self-end {
+  #{ $prefix-align-self }-end {
     align-self: end;
   }
-  .align-self-baseline {
+  #{ $prefix-align-self }-baseline {
     align-self: baseline;
   }
-  .overflow-hidden {
+  #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }
   // .justify-self-center {

package/types/events/index.d.ts

@@ -1,5 +1,6 @@
 /**
- * Triggers one of our custom events
+ * Triggers one of our custom events (page/document level events)
+ * - UI components may dispatch their own events, this is just used for system wide events
  * @param {String} type Type of event to dispatch
  * @param {Node} context Element to trigger the event from
  * @example
@@ -10,8 +11,16 @@
 export function dispatch(type: string, context: Node): void;
 /**
  * Namespaced event
+ * - Should be used for all ulu script/component events
  * @param {String} type Type of event to get the actual event name for
  * @returns {String}
  */
 export function getName(type: string): string;
+/**
+ * Create ulu namespaced custom event
+ * @param {String} type Event base name (not prefixed)
+ * @param {any} data Custom data to pass with the event (will be available as `event.detail`)
+ * @param {Object} options CustomEvent options default `{ bubbles: true }`. If `detail` is also provided, it will be merged with this options object and will override the 'data' argument for this function
+ */
+export function createEvent(type: string, data?: any, options?: any): CustomEvent<any>;
 //# sourceMappingURL=index.d.ts.map

package/types/events/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;AACH,gDANW,IAAI,QAYd;AAED;;;;GAIG;AACH,8CAEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;;GASG;AACH,gDANW,IAAI,QAYd;AAED;;;;;GAKG;AACH,8CAEC;AAED;;;;;GAKG;AACH,iDAHW,GAAG,mCAKb"}

package/types/index.d.ts

@@ -1,3 +1,4 @@
+export * as settings from "./settings.js";
 export * as events from "./events/index.js";
 export * as ui from "./ui/index.js";
 export * as utils from "./utils/index.js";

package/types/settings.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings(): object;
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes: object): void;
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object.
+ */
+export function getSettings(): object;
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key: string): any;
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key: string, value: any): void;
+/**
+ * Creates a wrapped string representation of a configuration setting.
+ * This function returns an object with a `toString()` method that, when called,
+ * retrieves the current value of the specified setting. This allows the setting
+ * to be used as a string literal, dynamically retrieving its value.
+ *
+ * @param {String} key The key of the setting to wrap.
+ * @param {Function} transform Optional function to transform the setting's
+ * value when its string representation is requested.
+ * @returns {Object} An object with a `toString()` method that returns the
+ * (optionally transformed) setting value as a string.
+ */
+export function wrapSettingString(key: string, transform: Function): any;
+/**
+ * Default settings
+ */
+export type Defaults = {
+    /**
+     * - The CSS class string for the close icon
+     */
+    iconClassClose: string;
+    /**
+     * - The CSS class string for the drag X icon
+     */
+    iconClassDragX: string;
+    /**
+     * - The CSS class string for the dragging in both directions
+     */
+    iconClassDragBoth: string;
+    /**
+     * - The CSS class string for the previous icon
+     */
+    iconClassPrevious: string;
+    /**
+     * - The CSS class string for the next icon
+     */
+    iconClassNext: string;
+    /**
+     * - The prefix to use for CSS custom properties
+     */
+    cssvarPrefix: string;
+};
+//# sourceMappingURL=settings.d.ts.map

package/types/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;;;;GAWG;AACH,yEAOC;;;;;;;;oBAxFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}