@ulu/frontend 0.1.0-beta.1 → 0.1.0-beta.100

package/scss/components/_tabs.scss

@@ -9,41 +9,80 @@
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
+@use "../layout";
+@use "../typography";
 @use "../element";
 @use "../utils";
 
 // Used for function fallback
 $-fallbacks: (
-  "tablist-border-bottom" : (
+  "tablist-divider" : (
     "function" : meta.get-function("get-rule-style", false, "element"),
     "arguments" : ("light",)
+  ),
+  "tab-font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-semibold"
+  ),
+  "vertical-breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
   )
 );
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} border-radius [8px] The border radius of the tabs.
-/// @prop {Dimension} border-width [0.25em] The width of the tab border.
-/// @prop {Dimension} margin [2rem] The gap between tabs and above and below tabs.
+/// @prop {Dimension} margin [(2rem, 0)] The margin for the tabs container
 /// @prop {Dimension} print-margin [1.5em] Margin between tabs when stacked for print
-/// @prop {CssValue} tablist-border-bottom [true] The bottom border of the tabs. If set to true, will use the element.scss property for "get-rule-style".
+/// @prop {CssValue} tablist-divider [true] The border separating the tabs from the panels. By default (true) will use element rule light style
+/// @prop {Dimension} tablist-divider-width [1px] The width of the divider
 /// @prop {Color} tabpanel-background-color [rgb(245, 245, 245)] The tabpanel background color.
-/// @prop {Color} tab-border-color-selected [currentColor] The border color when selected.
-/// @prop {String} 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 {String} 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 {String} 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.
+/// @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.
+/// @prop {Color} tab-background-color-selected [null] The tab background color when selected
+/// @prop {CssValue} tab-font-weight [true] The font weight for the tab, defaults to typography "font-weight-semibold"
+/// @prop {Dimension} tab-padding [0.75em 0.1em 0.75em 0.1em] Padding for the tab
+/// @prop {Dimension} tab-gap [1em] Gap between tabs
+/// @prop {Dimension} vertical-tablist-width [minmax(15rem, 30%),] The width of the tablist column when tabs are layout is vertical
+/// @prop {Dimension} vertical-tab-padding [(0.25em 0.75em)] Tab padding when vertical
+/// @prop {Dimension} vertical-divider-width [0px] Divider between tabs and panels when vertical
+/// @prop {Dimension} vertical-tab-gap [0.75em] The gap between tabs when vertical
+/// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
+/// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
+/// @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: (
-  "border-radius" : 8px,
-  "border-width" : 0.25em,
-  "margin" : 2rem,
+  "margin" : (2rem 0),
   "print-margin" : 1.5em,
-  "tablist-border-bottom" : true,
-  "tabpanel-background-color" : rgb(245, 245, 245),
-  "tab-border-color-selected" : currentColor,
-  "tab-color" : "link",
-  "tab-color-hover" : "link-hover",
+  "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" : "selected",
   "tab-color-selected" : "selected",
+  "tab-background-color-selected" : null,
+  "tab-font-weight" : true,
+  "tab-padding" : (0.75em),
+  "tab-gap" : 1em,
+  "tabpanel-background-color" : #f6f6f6,
+  "tabpanel-padding" : (2rem),
+  "vertical-tablist-width" : minmax(15rem, 30%),
+  "vertical-tab-padding" : (0.25em 0.75em),
+  "vertical-divider-width" : 0px,
+  "vertical-tab-gap" : 0.75em,
+  "vertical-indicator-left" : true,
+  "vertical-breakpoint" : true,
+  "horizontal-tab-wrap" : false
 ) !default;
 
 /// Change modules $config
@@ -73,75 +112,120 @@ $config: (
   @include utils.file-header("component", "tabs");
 
   $prefix: selector.class("tabs");
+  $tabpanel-spacing: utils.get-spacing(get("tabpanel-padding"));
 
   #{ $prefix } {
-    margin-bottom: get("margin");
-    margin-top: get("margin");
+    margin: get("margin");
     [role="tablist"] {
       position: relative;
       z-index: 2;
       display: flex; 
+      gap: get("tab-gap");
       overflow-x: auto;
-      margin-bottom: -1px;
-      border-bottom: get("tablist-border-bottom");
+      border-bottom: get("tablist-divider");
+      border-bottom-width: get("tablist-divider-width");
+      @include layout.remove-scrollbar();
     }
     [role="tab"] {
       display: block;
       position: relative; 
       cursor: pointer;
-      padding: 0.75em 0.1em 0.75em 0.1em;
-      color: color.get(get("tab-color"));
-      font-weight: bold;
-      border-bottom: get("border-width") solid transparent;
       text-align: center;
-      white-space: nowrap;
-      &:not(:first-child) {
-        margin-left: 1.25em;
-        @include breakpoint.min("small") {
-          margin-left: 2em;
-        }
+      padding: get("tab-padding");
+      color: color.get(get("tab-color"));
+      font-weight: get("tab-font-weight");
+      @if (not get("horizontal-tab-wrap")) {
+        white-space: nowrap;
+      }
+      // Indicator
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: color.get(get("indicator-color"));
+        opacity: 0;
+        bottom: 0;
+        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"));
       }
-      &:hover,
+      // Add focus so as user clicks item it starts the active state styling
       &:focus,
       &[aria-selected="true"] {
-        border-bottom-color: currentColor;
+        outline: none; // We are providing focus styling
+        &::after {
+          opacity: 1;
+          transform: scaleX(1);
+        }
       }
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
-        border-bottom-color: get("tab-border-color-selected");
-        opacity: 1;
+        background-color: color.get(get("tab-background-color-selected"));
       }
     }
     [role="tabpanel"] {
       position: relative;
       z-index: 1;
-      padding: 2rem get("margin");
-      margin-bottom: -1px;
+      padding: get("tabpanel-padding");
       overflow: hidden;
+      background-color: color.get(get("tabpanel-background-color"));
+    }
+  }
+  // For images, etc that should fill tabpanel
+  #{ $prefix }__tabpanel-content-fill {
+    margin-left: -(map.get($tabpanel-spacing, "left"));
+    margin-right: -(map.get($tabpanel-spacing, "right"));
+    width: calc(100% + #{ map.get($tabpanel-spacing, "left") + map.get($tabpanel-spacing, "right") });
+    max-width: none;
+    &:first-child {
+      margin-top: -(map.get($tabpanel-spacing, "top"));
+    }
+    &:last-child {
+      margin-bottom: -(map.get($tabpanel-spacing, "bottom"));
+    }
+  }
 
-      background-color: get("tabpanel-background-color");
-      [class*="video-embed"],
-      .full-width-image {
-        margin-left: -(get("margin"));
-        margin-right: -(get("margin"));
-        width: calc(100% + #{ get("margin")  * 2 });
-        max-width: none;
-        &:first-child {
-          margin-top: -2rem;
-        }
-        &:last-child {
-          margin-bottom: -2rem;
+  @include breakpoint.min(get("vertical-breakpoint")) {
+    #{ $prefix }--vertical {
+      display: grid;
+      grid-template-columns: get("vertical-tablist-width") auto; 
+      [role="tablist"] {
+        flex-direction: column;
+        gap: get("vertical-tab-gap");
+        border-right: get("tablist-divider");
+        border-right-width: get("vertical-divider-width");
+        border-bottom: none;
+        grid-column: 1;
+      }
+      [role="tab"] {
+        padding: get("vertical-tab-padding");
+        white-space: normal;
+        text-align: left;
+        &::after {
+          left: if(get("vertical-indicator-left"), 0, auto);
+          right: if(not get("vertical-indicator-left"), 0, auto);;
+          bottom: 0;
+          top: 0;
+          width: get("indicator-size");
+          height: auto;
         }
       }
+      [role="tabpanel"] {
+        grid-column: 2; // needed for equalHeights in vertical
+      }
     }
   }
+
   #{ $prefix }--transparent {
     [role="tablist"] {
       background-color: transparent;
-      box-shadow: none;
       padding-left: 0;
       padding-right: 0;
     }
@@ -155,13 +239,13 @@ $config: (
   #{ $prefix }--full-width {
     > [role="tablist"] {
       justify-content: safe center;
-      box-shadow: 0 4px 4px rgba(0,0,0,0.2);
     }
     >[role="tabpanel"] {
       background-color: transparent;
       padding: 0;
     }
   }
+
   // Display all tabs during print
   #{ $prefix }--print {
     @media print {

package/scss/components/_tag.scss

@@ -28,8 +28,8 @@ $-fallbacks: (
 /// @prop {CssValue} box-shadow [none] Box shadow for the tag.
 /// @prop {Dimension} padding [(0.4em 0.75em)] Inner padding for the tag.
 /// @prop {CssValue} vertical-align [baseline] Vertical alignment of tag text.
-/// @prop {Dimension} margin-between [0.5em] Margin between tags.
-/// @prop {Dimension} margin-between-tags [0] @joe-check 
+/// @prop {Dimension} margin-between [0.5em] Margin between tag and other elements.
+/// @prop {Dimension} margin-between-tags [0] Margin between tag and other tags.
 /// @prop {Number} line-height [1] Line height for the tag text.
 /// @prop {String} type-size ["small"] Font size for the tag text.
 /// @prop {Color} background-color [#eaeaea] Background color of the tag.
@@ -144,7 +144,7 @@ $styles: (
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
       border-color: color.get(map.get($style, "border-color")); 
-      border-width: color.get(map.get($style, "border-width")); 
+      border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding");  
       @if (typography.has-size($type-size)) {

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/components/_wysiwyg.scss

@@ -13,13 +13,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} img-excluded-selectors [(".wysiwyg__exclude",)]
-/// @prop {List} ul-excluded-selectors [(".list-lines", ".wysiwyg__exclude")]
-/// @prop {Map} headline-sizes [Map]
+/// @prop {String} exclude-selector [".wysiwyg__exclude"] Applied to all selectors
+/// @prop {List} img-excluded-selectors [()] Extra selectors to prevent <img> styling
+/// @prop {List} ul-excluded-selectors [(".list-lines",)] Extra selectors to prevent <ul> styling
+/// @prop {List} link-excluded-selectors [("[class]",)] Extra selectors to prevent <a> styling
+/// @prop {Map} headline-sizes [Map] Headlines from typography sizes (ElementName : TypographySizeName, ...)
 
 $config: (
-  "img-excluded-selectors" : (".wysiwyg__exclude",),
-  "ul-excluded-selectors" : (".list-lines", ".wysiwyg__exclude"),
+  "exclude-selector" : ".wysiwyg__exclude",
+  "img-excluded-selectors" : (),
+  "ul-excluded-selectors" : (".list-lines",),
+  "link-excluded-selectors" : ("[class]",),
   "headline-sizes" : (
     "h2" : "h2",
     "h3" : "h3",
@@ -66,24 +70,28 @@ $config: (
 
 // Internal mixin
 @mixin _styles() {
-  $ul-excludes: list.join(get("ul-excluded-selectors"), (), $separator: comma);
-  $img-excludes: list.join(get("img-excluded-selectors"), (), $separator: comma);
+  $exclude-selector: get("exclude-selector");
+  $ul-excludes: list.join(get("ul-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $img-excludes: list.join(get("img-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $link-excludes: list.join(get("link-excluded-selectors"), ($exclude-selector), $separator: comma);
 
-  a:not([class]) {
+  a:not(#{ $link-excludes }) {
     @include element.link($visited: true, $active: true);
   }
   ul:not(#{ $ul-excludes }) {
     @include element.styles-unordered-list();
+    margin-bottom: element.get("margin");
   }
-  ol {
+  ol:not(#{ $exclude-selector }) {
     @include element.styles-ordered-list(inherit);
-  }
-  ul,
-  ol {
     margin-bottom: element.get("margin");
   }
+  // ul,
+  // ol {
+  //   margin-bottom: element.get("margin");
+  // }
   @each $element, $size in get("headline-sizes") {
-    #{ $element } {
+    #{ $element }:not(#{ $exclude-selector }) {
       @include typography.size($size);
     }
   }

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 {
+  #{ $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";