# Change Log

## 0.6.29

- `scss/components/_modal.scss`
  - Add "title-line-height" option, defaulting to typography "line-height-densest"

## 0.6.28

- `scss/components/_counter-list.scss`
  - Add custom property `--ulu-counter-list-start` for specifyng different start points for the list counter (css counters). So for example setting `style="--ulu-counter-list-start: -1"` would start at 0. Or it could be used to start at other arbitrary indexes

## 0.6.27

- `scss/components/_card.scss`
  - When using modifier `card--footer-inline` fix border radius being added to top right of footer when the card has an image

## 0.6.26

- `scss/components/_wysiwyg.scss`
  - Change "unordered-list-marker-color" to "ul-marker-color" to match pre-existing option names
  - Change "ordered-list-marker-color" to "ol-marker-color" to match pre-existing option names
  - Add "ol-excluded-selectors" with default for .counter-list
  
## 0.6.25

- `scss/components/_wysiwyg.scss`
  - Add "unordered-list-marker-color", "ordered-list-marker-color" options to specify how the color for the markers when in wysiwyg

## 0.6.24

- `scss/components/_tabs.scss`
  - Adjust the "sticky-vertical-top" so it only applies when the vertical tabs are laid out vertically (within the vertical breakpoint only)

## 0.6.23

- `scss/components/_tabs.scss`
  - Add sticky modifier and setup demos to show how it works
- Adjust docs site so that header it works with ulu cssvar "sticky-offset-top" and "header-height"

## 0.6.22

- `scss/components/_card.scss`
  - Adjust selector setup for last card change so it's not interpolated modifier, minor just causes issues if outputting the component in wrapping selector

## 0.6.21

- `scss/components/_card.scss`
  - Grid template rows account for no image (so footer is auto not second row 1fr)

## 0.6.20

- `scss/components/_card.scss`
  - Fix footer background-color on card (fix bleed issue)

## 0.6.19

- `scss/_layout.scss`
  - Add options for widths (set-widths maps) for "match-font-size" which when enabled on a width item will set the font-size equal to the width when outputting as helper class (for font based icons)

## 0.6.18

- `scss/component/_graphic-text-group.scss`
  - Add "--auto" modifier for auto width graphic
  - Add config option for "compact-gap" and "--compact modifier"
  - Update demos to show the different variations
  - Add "--align-baseline" modifier to allow for baseline alignment between the pair

## 0.6.17

- `scss/components/_callout.scss`
  - Fix default style for warning background color set to info-background to warning-background
- `scss/component/_graphic-text-group.scss`
  - Have this component set text-align left by default

## 0.6.16

- `scss/components/_popover.scss` | Fix specificity of no-padding modifier so it works with large width presets

## 0.6.15

- `scss/components/_badge_.scss`
  - Add "transition-duration" config option
  - Add other properties (background-color, color and box-shadow) to transitioned properties

## 0.6.14

- `scss/_badge_.scss`
  - Add new optional options (default to null) for "background-color-hover", "color-hover", "box-shadow", "box-shadow-hover"
  - Lighten "background-color" default gray

## 0.6.13

- `scss/_button.scss`
  - Migrate from old inline-block to inline-flex for modern support (no fighting with line-height, etc)
  - Add new option for "gap" which will control space between things in button (like icons)
- `scss/components/_button.scss`
  - Remove config option "icon-margin" (use gap in core "button" module, see above change)
  - Add modifier for `button--left` modifier for buttons that are maybe full width or a static width

## 0.6.12

- `scss/component/_menu-stack.scss`
  - Add new options for stacked style, and adjust defaults for the new style

## 0.6.11

- `scss/_layout.scss` 
  - Add new maps for $width and $max-widths which will also be output as utility classes in the new `scss/helpers/_layout.scss` 
- `scss/_element_.scss` 
  - Add rule style "large" by default (default rule color at 3px wide), normally needed can be overwritten
- `scss/component/_graphic-text-group.scss` (New)
  - Add new component for graphic + text lockup/layout
- `scss/component/_menu-stack.scss`
  - Add modifier for "stacked" which will stack icon over the text for small compact sidebar menus (think app icon sidebar)
  - Add options to configure this style of the menu

## 0.6.10

- `scss/base/_root.scss`
  - Correct default properties (that used cssvar add/subtract) to properly prefix the ulu internal properties
- `scss/components/_modal.scss`
  - Change defaults for "close-color", "close-color-hover", "close-background-color", and "close-background-color-hover" to null so they don't compete with .button styles which is the default for modal-builder 

## 0.6.9

- `scss/components/_card.scss`
  - Cards horizontal support any image aspect ratio correctly now. This fixed an issue with browser using the image's intrinsic height when calculating the row height of the card (card is grid layout) when the horizontal modifier is being used.
- `package.json`
  - Add "sass" entry to exports for use with sass importer
    - So you can do `@use "pkg:@ulu/frontend/scss" as ulu;`
    - [See](https://sass-lang.com/documentation/at-rules/use/)

## 0.6.8

- `scss/components/_button.scss`
  - Adjust the `.button__icon` css for spacing to use not instead (so we account for only-child). So if a `button__icon` is the only child it won't have spacing margins.
  - Add `button--fit` modifier that tells button to not have min-width so it "fits" it's content

## 0.6.7

- `scss/components/_input-group.scss`
  - Add new component (based on search-form layout but setup to be reusable)
- `scss/_utils.scss`
  - Add new `get-border-info()` (extracts border information from shorthand list)
  - Corrected bug in `get-spacing()` and added tests for all combinations
- `scss/components/_form-theme.scss`
  - Adjust input border radius (default to 3px)

## 0.6.6

- `scss/components/_form-theme.scss`
  - Make default layout for form item align top and setup default form item styles for drupal version of stylesheet
    - Add modifier for form item center in addition to the top that previously existed

## 0.6.5

- `scss/components/_menu-stack.scss` | 
  - Add "compact-link-margin" (default to 0.2em)
  - Change "compact-border-radius" to match other config option so "compact-link-border-radius"
    - set to null instead by default so it inherits from button module defaults

## 0.6.4

- `scss/components/_menu-stack.scss`
  - Change link padding x to custom property
    - This simplifies the CSS slightly
    - Menu stack hanging works with compact and default now and can be easily updated to work for custom styling situations
  - Add "compact-border-radius" option default to 3px
  - Adjust default styles (spacing related changes)

## 0.6.3

- `scss/components/_menu-stack.scss` | Fix indentation applying to first level list when using --columns and --columns-fluid modifiers

## 0.6.2

- `scss/components/_menu-stack.scss`
  - Add "title-color" for title modifier 
  - Title - fix if statement for separator option preventing font-weight config from applying

## 0.6.1

- `scss/components/_menu-stack.scss`
  - Add hanging styles for columns and columns-fluid modifiers

## 0.6.0

**Breaking changes renaming of some ulu custom properties listed below**

- `scss/components/_menu-stack.scss`
  - Setup demo and styling for menu stacks (multi column) in popovers
  - Remove "menu-stack--plain" modifier and related config options as it's not something needed currently
    - If this is needed in the future we will add it along with demos and make sure it works with the full menu layout system
  - Remove $styles (was setup for modifiers but not resolved)
- `scss/components/_popover.scss`
  - Add custom properties for "--ulu-popover-width" and "--ulu-popover-max-width"
  - Add modifier "popover--fit" which will adjust it's width the content's width
    - Max width can be controlled by passing --ulu-popover-max-width
  - Adjust all modifiers that changed width/max-width to pull from custom properties
- `scss/_cssvar.scss`
  - Add "name-ulu", "use-ulu", and "declare-ulu" (mixin/functions) as convenience methods for setting "ulu" prefixed custom properties (mostly for internal use)
  - Update `cssvar.join` method to pass through anythings that starts with var( or calc( to allow custom properties other than users prefixed (for ulu prefixed core properties or other vendor properties)
    - Also allow passthrough of raw values (number only) so they can be easily added to add/subtract
- `scss/base/_root`
  - Rename custom property "sticky-top-offset" and "sticky-bottom-offset" to "sticky-offset-top" and "sticky-offset-bottom"
  - Add "sticky-margin"
  - Update defaults for root config
  - Add scroll-padding-top which uses sticky-offset-top
- `scss/components/_data-grid.scss`
  - Update custom properties for sticky to the updated names (ie --ulu-sticky-offset-top/bottom)
- `scss/components/_definition-list.scss`
  - Add config option for "term-color" (default to null)

## 0.5.6

- `scss/components/_card.scss` | Add "line-height" option

## 0.5.5

- `scss/components/_menu-stack.scss`
  - Adjust "menu-stack--multi-column" grid (to template areas auto-fit)
  - Add config option for "multi-column-min-width" (default 12rem)

## 0.5.4

- `scss/base/_themes.scss` | Add parameter to styles() mixin $root-selector, so it can be changed for edge scenarios where the root selector is something other than ":root". Such as containing the theme properties to a ckeditor element (scoping, used for creating editor stylesheet).

## 0.5.3

- `scss/components/_form-theme.scss` | Actions (footer of forms) add flex-wrap 

## 0.5.2

- `scss/components/_card.scss` | Add "box-shadow-interactive-only" config option
- `scss/components/_button-verbose.scss` | Add focus selector to hover state

## 0.5.1

- `scss/base/_normalize.scss` | Add html/body min-height 100% (remove from projects as it's always useful)
- `scss/_utils.scss` | Add "list-merge" which mirrors API for map-merge (used for configuration of styles output modules) (ie. components/index, base/index)), so user can either merge or overwrite. Used in style output modules update below.
- Update all style output modules `set-includes` mixins to allow either (overwrite or merge) defaulting to the current behavior overwrite. So in order to just add additional includes pass "merge" to $merge-mode argument
  - Used in `scss/base/_index`, `scss/components/_index`, `scss/helpers/_index` 

## 0.5.0

- `scss/components/_inline-rule.scss` **Breaking**
  - Rename from incorrect "horizontal-rule" (can use selector module to keep old name but it's not correct, this is for divider/separators between things using the default "rule"
  - Add "color" and "width" options

## 0.4.11

- `js/utils/pause-youtube-video.js` | Adjust `prepVideos()` to only apply url queries for js API if not already present, this way if called multiple times on the same video it will only update the src once (so it doesn't reset the video each time it's called)

## 0.4.10

- `js/utils/pause-youtube-video.js` | Change command for youtube API to pauseVideo instead of stopVideo. Now dialogs with pauseVideos will pause instead of stop for youtube videos (and native videos). May consider adding stopVideos option in the future for both types

## 0.4.9

- `js/ui/breakpoints.js` | Remove default option for element and assign to default document.documentElement in constructor instead if not passed 

## 0.4.8

- `js/utils/class-logger.js` | Remove hasConsole check (isn't needed anymore (modern browser, node has console, etc) and breaks SSR in vue/etc)

## 0.4.7

- `scss/_cssvar`
  - Allow cssvar-declare to accept maps (like declare all) so that values can contain breakpoints
- `scss/base/_root`
  - Add new ulu custom properties that can be configured and will be used in components that have static values for 100vh
    - `--ulu-header-height` [default to 0]
    - `--ulu-fullscreen-height` [default to 100dvh - header-height ]
    - `--ulu-fullscreen-height-sticky` [default to calc(100dvh - var(--ulu-sticky-top-offset) - var(--ulu-sticky-bottom-offset))])

## 0.4.6

- Fix `base/_themes.scss` order (to bottom of base stylesheet) so color overrides properly override body/etc for color
- Include `base/_print.scss` was not output earlier (just has common properties for some elements and standard page margin)

## 0.4.5

- `scss/base/_root.scss`
  - Add mixin `@include ulu.base-root-declare()` for outputting all custom-properties (cssvars), in situations where you need to apply them not to :root selector (which the `@include ulu.base-root-styles()` does by default)
- `scss/base/_themes.scss`
  - Add options for "token-color", "token-background-color" to set theses CSS properties on the themes (normally we want to only set the base color, so it looks for token "color-type" by default).
  - Fixed fake-dark-color was white needed to be black
  - Add warnings if the token isn't found to prevent unexpected results
  - **Breaking** but probably wasn't used removed class for theme-fake-dark and added a system to create .theme-fake-invert instead so it works for either scenario (light / dark)
  
## 0.4.4

- `scss/component/_tabs.scss` | Add new optional config for "full-width-[tablist/tabpanel]-background-color"

## 0.4.3

- `scss/_color.scss` | Darken default rule colors (changed in 0.4.0)
- `scss/cssvar.scss`
  - Allow breakpoints in declare all maps (example below) following API from other breakpoint maps in various components
  - Also adds this capability to `ulu.base-root-set-cssvars()` so you can have adaptive values

**Example of cssvars with adaptive breakpoints map**

```scss
@include ulu.cssvar-declare-all((
  "base-color" : red,
  "responsive-color" : (
    "value" : blue,
    "breakpoints" : (
      "medium" : (
        "direction" : "up",
        "value" : green
      )
    )
  )
));
``` 

## 0.4.2

- `lib/js/ui/overflow-scroller-pager.js`
  - Fixed a scroll target calculation in overflow-scroller-pager that caused backward navigation to fail on ultra-wide screens. The logic was corrected to properly subtract the CSS scroll padding when calculating the snap position, rather than adding it. Additionally, the viewport boundary checks were updated to account for sub-pixel rounding and the padded viewport, ensuring the slider reliably snaps to the correct previous slide. 
- `scss/base/_root` 
  - This module adds the --ulu root custom properties and is now extended to allow setting site specific custom properties which will be output in root and declared with the cssvar module (respecting prefix). use 
    - `@include ulu.base-root-set-cssvars($map-of-cssvars);`
  - Add $config with ability to change default system vars (sticky top, etc that are used internally)
- `scss/themes` (New Module)
  - Introduce a dedicated `themes` module for orchestrating custom property variations (e.g., light/dark modes).
  - Uses a property-centric map structure for developer-friendly theme definitions.
  - Supports contextual inversion (`inverses` config) to allow static themes to intelligently flip their variables when their container theme changes.
  - Generates `:root` variables, `.theme-[name]` modifier classes, and a `.theme-[name]-fake` utility class using CSS filters.
- `scss/cssvar`
  - **DEPRECATED**: `cssvar.declare-theme-values()` has been deprecated. It has been moved to the new themes module as `themes.declare-values()`. Please update your implementations, as the old mixin will be removed in a future version.

## 0.4.1
 
- `scss/color` | Tweak box-shadow colors (darker)

## 0.4.0

Breaking changes for progress bar/circle (standardized modifier names to success/warning/danger instead of positive/negative/complete/incomplete). And then mostly just default color changes (which were initially loud/ugly/default intentionally, but are now moving towards colors that would work out of the box). 

Planning to further adjust these once there's more time to focus on the defaults relating to style/color. Once the theme module is added and multiple colors can be associated for a given theme. So defaults may change in the future updates.

Details:

- `scss/typography.scss`
  - Add config options for headline-margin-top to be used if using the default sizes
    - If you provide your own sizes this isn't used for anything (currently just for defaults sizes)
- `scss/components/flipcard`
  - Fix incorrect selector from plugin to Flipcard__control-button from flipcard__control-button (was breaking focus indicator)
  - Change default colors to use semantic system palette colors.
  - Refactored `border` and `control-button-border-focus` config options into separate width and color properties to allow dynamic color resolution.
- `scss/components/slider`
  - Change default colors
- `scss/components/nav-strip`
  - Change default colors
- `scss/components/tabs`
  - Change default colors
- `scss/color`
  - Removed palette option for `indicator`.
  - Replaced placeholder default palette colors with a more modern and cohesive set of default colors.
  - Adjusted `control` base, hover, and active colors to be more distinct.
  - Adjusted `selected` colors to use a blue theme instead of green.
- `scss/components/progress-bar`
  - Changed default `bar-color` from `indicator` to `accent`.
  - **BREAKING**: Replaced non-standard `positive` and `negative` style modifiers with standard semantic names `success`, `warning`, and `danger`.
- `scss/components/progress-circle`
  - Changed default `color-progress` from `indicator` to `accent`.
  - **BREAKING**: Replaced non-standard status colors map keys (`low`, `incomplete`, `complete`) with standard semantic names (`danger`, `warning`, `success`).
- `site/src/templates/shortcodes/progressCircle.js`
  - Updated to output standard semantic modifier classes (`progress-circle--danger`, `progress-circle--warning`, `progress-circle--success`) based on percentage.

## 0.3.8

- `scss/components/menu-stack` | Add flex rules to icon (to prevent expand/shrink)

## 0.3.7

- `scss/components/menu-stack` | Add "link-icon-font-size" optional config 

## 0.3.6

- `scss/components/progress-bar.scss`
  - Add "rounded" modifier
  - REmove track-margin and margin on loader style (can be applied by utility or override depending on where/how it's being used)
  - If track doesn't have element before or after it, will remove margins top/bottom accordingly

## 0.3.5

- `scss/components/_progress-bar.scss`
  - Add options for styles for margin and track-margin

## 0.3.4

- `scss/components/_accordion.scss`
  - Fix border radius on summary when margin = 0
  - Add config for "summary-font-weight"

## 0.3.3

- `js/ui/slider.js` | Add attributes linking controls and nav to track/slide. Add aria-polite control and carousal related roles
- `scss/base/elements.scss` | Make picture element default to block

## 0.3.2

- Add missing export for util `observeDialogToggle` in js bundle

## 0.3.1

- Add missing export for util `getSoleIframeLayout` in js bundle

## 0.3.0

- **Docs**
  - Start working on a clearer guide section
  - Add demos for any components/systems related to the updates below
  - Enhance some demos that had unrealistic placeholder content to be more real-world scenarios of use cases
  - Overall styling adjustments
  - Setup better previews with code examples properly indented
    - Will be considering more systematic approach to component documentation soon and will be grouping components into categories so it's easier to grasp what's available. Also will consider making docs site compile live sass so we can adjust configs in docs site to see there affect 
- **SCSS**
  - `element` 
    - Add `optional-border()` function to reduce border creation logic internally
  - `utils/normalize-aspect-ratio()` 
    - New function accepts numbers and strings and returns unquoted aspect ratio 
    - If an aspect ratio value is a percentage this will resolve it to the aspect ratio for legacy aspect ratios based on padding percentages (padding hack for responsive iframes/etc)
  - `base/elements` 
    - Add cursor pointer to summary elements by default
    - Set picture to display block by default
  - `helpers/utilities` 
    - Add grid/flexbox utility classes that we didn't have
  - `components/accordion` 
    - Remove summary active border (that shows up between content and summary when open) since this is meant to be borderless
  - `components/card` 
    - Fix issue with last major card update (overlay hover styles when not overlay modifier)
  - `components/badge` 
    - Adjust defaults (small from 5rem to 4rem)
  - `components/ratio-box` 
    - Refactor to use modern aspect ratio (phase out padding hack), but still support legacy percentage values for aspect ratios
    - This is becoming less needed with modern CSS, supporting it because it's tiny and legacy sites may be using this for iframes/etc
  - `components/card` 
    - Remove flex-grow on `.card__main` (keep for horizontal) so that cards aside stacks vertically naturally under it vs aligned at the bottom of the card in cards in a grid
  - `components/card-grid` 
    - Simplify to use implicit grid. Remove config options that were related to explicit grid creation (which was going to require adaptive breakpoints and custom properties to work in different situations). 
      - Options removed: template-columns, compact-template-columns
      - New Options: min-width, compact-min-width
  - `components/button-group` 
    - Add option for "gap-joined" if you have solid buttons (no border) and want a gap
  - `components/modal` 
    - Fill in all flex properties that were shorthand on header/footer/body
      - To avoid layout issues with safari using shorthand (Safari miscalculates the intrinsic content
  size of flex items with a 0% basis)
      - Also add min-height: 0 to body so it can collapse if needed (if the body is larger than the max height of parent 100vh)
    - Add config for "min-width" (previously hard-coded)
    - Add dvh units so that the bottom of modals doesn't change as URL bars adjust (ios, etc)
    - Add new modifier that overrides the different layouts (eg left, right) to be fullscreen at mobile (modal--fullscreen-mobile)
    - Update demos to have test for each
    - Add new modifier for iframes (modal--iframe-fill, modal--iframe-ratio) which when applied will change the layout of the modal so that iframes cause the layout to fill the height of the modal
      - Note iframe ratio will require user to add aspect-ratio to iframe (unless using modal-builder where it now automatically adds this if an iframe is the sole content of the dialog)
  - `components/data-list` 
    - Add new component for self-explanatory lists that display similar to tables on desktop
    - Add demo of different presets and ways it might be used
  - `components/table-scroller`  (New component)
    - Add new simple wrapper component for making tables that overflow (not related to sticky table plugins)
- ***JS**
  - `ui/modal-builder.js`
    - Add option for "fullscreenMobile"
    - Add options for "autoIframe"
      - This will apply logic to work with the new modal modifiers for iframe (listed above)
      - Has to be enabled, disabled by default
  - `ui/dialog.js`
    - Move away from using "toggle" event for dialog behaviors (prevent scroll, etc). Older safari only has close event and doesn't support toggle. Replace with mutation observer on open attribute
  - `utils/iframe.js`
    - Add new utility module
    - Add new function for use in determining if an iframe is sole content of an element and if so will return data about the iframe (whether its an aspect ratio type iframe [videos, etc] or a embedded page who's height is dynamic [normally filling])
  - `utils/dialog.js`
    - Add `observeDialogToggle` to be used as a workaround for lack of toggle event support in older Safari (ie. before 2024)
      - This way this module can be removed in the future when this is

## 0.2.1

- **SCSS**
  - **Native SASS if()**
    - Adjust `if()` usage internally throughout library to keep inline with future sass breaking changes, [See](https://sass-lang.com/documentation/breaking-changes/if-function/)
    - Added `utils.when()` which has same signature as old sass if but doesn't work the same (no lazy evaluation)
    - Any code that required lazy evaluation has been converted to @if/@else
    - Did not use new syntax (CSS if() as it throws intellisense lint errors and syntax highlighting breaks), May consider moving to it in the future when it's integrated
      - Also this would require new sass version to compile the library, doing it this way will allow the library to work in older versions of sass
  - `components/tabs.scss`
    - Add new properties for styling focus `tab-color-focus, tab-background-color-focus, tab-hide-native-focus`  (outline is hidden by default and relies on tab-background-color to indicate focus), you can enable native focus ring setting `tab-hide-native-focus` to false
  - `color.scss` Add "selected-background" color to default palette (for selected background color with selected color on top)
- **JS**
  - Add **new** minimal `TabManager` class to replace dependency (aria-tablist) for managing tab interfaces (aria)
    - Can be used independently
  - Updated `tabs.js` init to use new `TabManager` class
- **Docs / Project**
  - Docs source files reorganized (under /site/) and updated with a modern workflow
  - Resources directory has been moved to reference as it wasn't maintained (had old Drupal macros)
  - Simplified repo organization (reduce directories, simplify)
- **package.json**
  - Remove "-beta" tag from version, this was to indicate that things we're still being thoroughly tested but since NPM now enforces tags (was always the latest not actually pre-release) we are removing it as the 0 major version already implies that 

## 0.2.0-beta.12

- **scss/components/tagged**
  - New component adding relative/ absolute styling and positioning to `tag` elements and their related elements. See API docs for configuration and demos for usage examples.
- **scss/color**
  - updated default `type-tertiary` to an accessible shade (From `rgb(125, 125, 125) to rgb(110, 110, 110)`).

## 0.2.0-beta.11

- Update `@ulu/utils` dependency

## 0.2.0-beta.10

- `ui/slider.js`
  - Remove `ally.js` (maintain) dependency, as it's outdated and no longer maintained. Switching to the inert HTML attribute since browser support is widely available now

## 0.2.0-beta.9

- Add missing export for `ui/programmatic-modal.js` 

## 0.2.0-beta.8

- Bundle config: Adjust "sideEffects" to point at dist files instead of lib

## 0.2.0-beta.7

- **Bundle Update**
  - The bundle that this package exposes (for javascript use) has been been updated to `preserveModules`
    - This is to allow viewing specific modules included in your bundle when using something like rollup bundle analyzer  
    - Add better tree shaking capabilities
    - Dist directory is now split into two bundles ES and UMD (full package for testing in browser, etc. Not for bundling/Vite/Webpack usage)
    - Exports are mapped to the new structure and old imports will work the same (no code updates needed on user side) 
    - Remove all side effects in JS modules
      - Only core/events has required side effects and can't be dropped when tree-shaking
      - Slider, BreakpointManager have been refactored to only attach handlers if there inner classes are actually used
      - All module (except core/events) can be dropped by bundler if unused
- **scss/elements** 
  - Remove `icon-vert-translate` mixin as it was unneeded
    - Apply property/CSS manually in each component using it
  - Add mixin `summary-remove-marker` for removing default summary marker styles.    
    - Applied mixin to `accordion` and `menu-stack` components.
- **scss/components/card** | Remove old flexbox properties on card children (body, footer) which aren't used in the new grid layout
- **scss/components/button** | Remove first and last child margins in button--icon children since those only have one child.
- **scss/components/modal** 
  - `modal__close` Removed styling that duplicated button styling. See `modal-builder` updates below for more information
  - `config.close-border-color` New Option. Changes border color when using the button styles on the `modal__close` element. Fallback to `config.close-background-color`.
  - `config.close-border-color-hover` New Option. Changes hover border color when using the button styles on the `modal__close` element. Fallback to `config.close-background-color-hover`.
  - `config.close-box-shadow` New Option. Allows box shadow styling of the `modal__close` element. By default, this option overrides the `button` class box-shadow if using button styling.
  - removed unused options: `config.close-font-size`, `config.close-font-size`
- **js/ui/modal-builder** 
  - **MINOR BREAKING CHANGE:** This version adds to the `button`, `button--icon`, and `button__icon` by default to the modal close element and its child. This may change affect the styling of the modal close element and can be disabled by updating the below config options
  - `config.classClose` New config option that allows user-customized classes on the modal__close element. By default, has `button button--small` classes.
  - `config.classCloseIcon` Updated default to include the `button__icon` class.

## 0.2.0-beta.6

- **scss/components/form-theme** | Remove checkbox border radius config fallback to `input-border-radius`. Doesn't work correctly, `checkbox-input-border-radius` needs to be set specifically

## 0.2.0-beta.5

- **scss/components/card** | Add grid-template-rows, change default footer padding

## 0.2.0-beta.4

- **scss/components/card** | Change $config `footer-background-color` to null (unset) 

## 0.2.0-beta.3

- `js/ui/breakpoints.js` Adjust module so it doesn't access window unless in browser environment

## 0.2.0-beta.2

- Update package config and tsconfig to fix types for main entry, and add correct peerDependencies

## 0.2.0-beta.1

- **BREAKING CHANGE: JavaScript Entry Points Unified**
  - To improve reliability and reduce your final bundle size, all JavaScript modules are now exposed through a single, tree-shakable API at the main `@ulu/frontend` entry point.
  - Please see the [Javascript API Introduction](https://jscherbe.github.io/frontend/javascript/) which has full list of exports and goes over how to import. Alternatively you can view the list in the repo at `lib/js/exports.md`.
  - **How to Update Your Code**
    - You will need to update your import paths from deep file paths to the main entry point. Function names have been prefixed to ensure they are unique.
    - **Before (v0.1.x):**
      ```javascript
      // Old way, importing from specific files
      import { init as dialogInit } from '@ulu/frontend/lib/js/ui/dialog.js';
      import { init as tabsInit } from '@ulu/frontend/lib/js/ui/tabs.js';
      ```
    - **After (v0.2.0):**
      ```javascript
      // New way, importing from the main entry point
      import { dialogInit, tabsInit } from '@ulu/frontend';
      ```
  - **Why We Made This Change**
    - This was a necessary step to modernize the library and ensure it works reliably in all environments. The benefits include:
      - **Increased Reliability:** Prevents bugs in modern dev servers (like Vite) where multiple copies of the library's settings could be created, causing unpredictable behavior.
      - **Smaller Production Bundles:** The new structure allows your application's bundler to more effectively remove unused code ("tree-shaking").
      - **A Simpler, More Discoverable API:** You now have one single place to import from, making it easier to discover and use all the features the library has to offer.
  - **Events System Changes**
    - For advanced use cases, the names have been adjusted to differentiate between core events and component/unique events
    - `dispatchCoreEvent(name)`: Manually triggers a core library event (e.g., 'pageModified').
    - `getCoreEventName(name)`: Safely gets the full name of a core event, preventing typos when adding listeners.
    - `createUluEvent(name, data)`: A helper for creating your own custom, ULU-namespaced events.
    - `getUluEventName(name)`: A helper to get a ULU-namespaced event name string.
  - Internal Notes
    - `settings.js, events.js, and utils/system.js (ComponentInitializer)` moved to form new `core/` internally. Internal imports are all updated
    - The library now only exposes Vite bundled versions of it's JS modules, vs the last version which allowed you to import the js modules directly
- **ComponentInitializer class** - Change config prop `events` to `coreEvents` for clarity 
- **js/ui/breakpoints.js**
  - **BREAKING:** There was a mistake in the script that made it's API not match the scss breakpoint API, these have been corrected 
    - Reversed the min/max methods (not corresponding with SCSS breakpoints min/max)
    - SCSS was on the lower edge of a breakpoint while javascript was using the top edge
      - For example scss breakpoint-max("small") would be below small and breakpoint-min("small") would be from small and up. While in JS .max("small") would be from the small breakpoint and below which is incorrect. These now match, but if you are using this you likely have your breakpoints offset in the javascript side (so that it worked correctly) and will need to adjust to the correct breakpoint (which should match how you use breakpoints in SCSS)
    - This is corrected now but if you are using this you should double check the breakpoints are working correctly
  - Fix mistake in Breakpoint.remove method that was preventing it from working correctly
- **scss/color.scss**
  - Removed default palette entry "background-gray", which was used in basic-hero
- **scss/components/basic-hero.scss**
  - Changed config value for "background-color" from "background-gray" (removed palette entry) and added the gray background color (static) instead. Only affects you if you were using the removed color palette entry "background-gray"
- **scss/components/card.scss**
  - **BREAKING:** This is updated version has some changes which are minor but you should double check the areas that use card to make sure it looks correct.
  - Overall added styles to make card more flexible (via modifiers)
    - New CSS is larger now, options have been added to omit code for larger modifiers if not needed
      - While CSS is larger (old 6kb, new 9kb, it's designed to be gzipped, gzip size is identical to original CSS 2kb for all layouts)
  - Config properties have been renamed/removed/added
  - New layout system (still same markup/structure)
  - Demo is updated with new options
  - Tries to avoid creating layer stack context (so children in body can be  positioned above it)
  - New modifiers for horizontal card to persist (not to goto vertical on breakpoint like original)
  - Simplified overlay layout
  - New Footer Modifiers
    - New "footer-inline" modifier that moves the footer to the right of the content
    - Setup to work on all layouts
    - Add alignment modifiers for footer to override your default (start, center, end)
  - Remove config "header-margin" and related selectors, this isn't standard part of card markup but was used in some sites that had specific card main element styles (main is divided into header/content siblings)
  - **BREAKING** You need to enable special layouts (modifier classes) as needed using new $config properties ("horizontal-enabled", "horizontal-persist-enabled", "overlay-enabled")
- **scss/components/menu-stack** added allowance for parent links to have matching or specific stylings
  - created two new classes
    - "menu-stack__parent" with stylings to match the left margin of "menu-stack__list"
    - "menu-stack__link--parent" matches stylings of "menu-stack__link" but is able to be uniquely styled separately from the other links
    - add "menu-stack__toggle" to compact styles when using modifier
    - add "menu-stack--plain" for when the list will appear as links rather than pseudo-buttons
    - add new config options for plain modifier and parent 
- **scss/element** add base option to vertically offset close icon to properly center font awesome icons
- **scss/components/button** add option to vertically offset close icon to properly center font awesome icons with fallback to element
- **scss/components/modal** add option to vertically offset close icon to properly center font awesome icons with fallback to element

## 0.1.0-beta.123

- **scss/components/card** Adjust z-index's of elements so that
  - Content is on top of pseudo hover/focus border so that it's not on top of positioned elements within the card (ie. popover)
    - This should be ok as the card content doesn't bleed to the edge (except image which is below the hover pseudo border)
    - The exception is `.card--overlay` which will move the content above the hover pseudo border, since popovers aren't normally something needed with that style/modifier. This allows the gradient to sit below the hover pseudo border

## 0.1.0-beta.122

- **scss/components/card-grid** Add modifier `card-grid--rows-fit` for auto row height (based on each rows columns height vs the default equal height)

## 0.1.0-beta.121

- **scss/components/card-grid** Add one-column modifier, adjust defaults for gap to be slightly smaller

## 0.1.0-beta.120

- **scss/components/card** Add option for "footer-justify"
  
## 0.1.0-beta.119

- **scss/components/card** Remove overflow hidden (not needed and gets in the way)
  - Example popovers inside cards need no overflow hidden for absolute strategy

## 0.1.0-beta.118

- **scss/components/definition-list** Remove margin on first element (unless it has separator)

## 0.1.0-beta.117

- **scss/components/definition-list** Come up with better solution for whitespace when inline and using separators

## 0.1.0-beta.116

- **scss/components/definition-list** Added new definition list component with modifiers for (inline, inline-all, table, compact, separated, separated-first, separated-last)

## 0.1.0-beta.115

- **scss/components/accordion** Make sure transparent modifier doesn't allow background color when open, Change transparent content padding default (increased top/bottom)

## 0.1.0-beta.114

- `scss/helpers/_utilities.scss` - add flex-wrap (use with layout-flex, etc), and no-min-width (when needed for buttons)

## 0.1.0-beta.113

- **scss/components/menu-stack** 
  - Make sure `.menu-stack__selectable` is included in `.menu-stack--compact` modifier
  - Adjust and add new props for better control since this is base on typography and what form styling your using 
    - Config changes/additions: compact-selectable-input-width, compact-selectable-input-top, compact-selectable-input-font-size, selectable-input-width, selectable-input-top, selectable-input-font-size

## 0.1.0-beta.112

- **scss/components/progress-bar** - Add demo for using value in header, adjust styles slightly for this

## 0.1.0-beta.111

- **scss/components/accordion** 
  - Add back in summary width 100% (for button usage)
  - adjust how the border for summary open works so it doesn't affect animations
- **scss/components/card.scss** 
  - Remove horizontal-body-max-width config option
  - Add horizontal-main-max-width config option
  - Add horizontal-aside-width config option
  - styles using new config options to keep horizontal cards aside element at a specified size and alignment.

## 0.1.0-beta.110

- **scss/typography** 
  - Add `optional-size` mixin
- **scss/components/accordion** 
  - Refactored to not work for plain details elements. The component used to allow no container around the content. Content container is now required
  - Does not support default details marker anymore (when icon is omitted), you must supply a icon in the correct structure
  - Config, `margin` now is list form, configuration defaults adjusted slightly (from rem to em), remove transparent-padding- properties, add transparent-content-padding
  - General refactor to remove things that are unnecessary, reduce code

## 0.1.0-beta.109

- **scss/components/accordion** - Adjusted selectors from & + & to print out selectors incase this mixin is called when scoped .accordion + .accordion vs .scope .accordion + .scope .accordion which is incorrect
  
## 0.1.0-beta.108

- **scss/components/progress-bar** - Remove max-width option from new component

## 0.1.0-beta.107

- **scss/components/progress-circle** - Added progress pie/donut component and demo

## 0.1.0-beta.106

- **scss/components/progress-bar** - Added progress bar component and examples 

## 0.1.0-beta.105

- **scss/components/menu-stack** 
  - Reduced active selector list to what is applicable per child type (link vs toggle vs selectable)
  - Add hide-inputs option
  - Style selectable active state based on inner checked input

## 0.1.0-beta.104

- **scss/components/breadcrumb** - Change child selector `.breadcrumb__text` to `.breadcrumb__current` for clarity

## 0.1.0-beta.103

- **scss/components/breadcrumb** - Add new breadcrumb layout component

## 0.1.0-beta.102

- **scss/helpers/utilities** - Add utility for making faux spacing like text (for icons inline, etc) called `.flow-inline`

## 0.1.0-beta.101

- **scss/components/tag (Minor Breaking Config Change)**
  - $styles (set by set-styles() mixin) will now not include props (padding, type-size, line-height)
  - New $sizes (set by set-sizes() mixin) can be used to setup different sizes of tags with props (padding, type-size, line-height)

## 0.1.0-beta.100

- **scss/components/skeleton** - Made selectors for skeleton all build off one base class "skeleton" so "skeleton__text or skeleton-text" went to "skeleton--text"

## 0.1.0-beta.99

- **scss/components/skeleton** - Fix some selectors from last change (background)

## 0.1.0-beta.98

- **scss/components/skeleton** - Make all child components (ie. .skeleton__text) to independent related components (.skeleton-text)

## 0.1.0-beta.97

- **scss/components/skeleton** - Tweak how selectors are formed (no change really)

## 0.1.0-beta.96

- **scss/components/skeleton** - Change alt background color default

## 0.1.0-beta.95

- **scss/components/skeleton** - Add new skeleton component and demo page (`docs-src/content/demos/skeleton.html`)

## 0.1.0-beta.94

- **scss/component/rail** - Add "rail--rule" modifier (adds rule below rail)

## 0.1.0-beta.93

- **scss/component/card** - Change default $config "color" from null to "type" as it should always have a color set so that when used as a link this color is used vs link color

## 0.1.0-beta.92

- **scss/component/badge** - Add button/a in selector list for clickable styles (still includes badge--clickable modifier but if using button/a these styles will be used also)
- **scss/component/badge-stack** - Add new component for badge lists

## 0.1.0-beta.91

- Fix mistake in $includes in base scss module

## 0.1.0-beta.90

- Fix missing file-header comments in base scss modules

## 0.1.0-beta.89

- **scss/base/elements** - Remove old breakpoints.embed-for-scripts (puts active breakpoint on body hidden pseudo)
- **scss/base/root** - Add cssvar.declare-breakpoint() so that site's using base will have breakpoints by default

## 0.1.0-beta.88

- **scss/base/_keyframes.scss** - Add UluWiggle (used in toast frontend-vue)

## 0.1.0-beta.87

- Remove **scss/components/table-sticky.scss** from components
  - This stylesheet/module will be available in the "frontend-vue" library with it's dedicated Vue component. This library will be released/ready in the near future.

## 0.1.0-beta.86

- **scss/components/wysiwyg.scss**
  - Add option for "exclude-selector" (.wysiwyg__exclude), that is applied to all selectors now
    - Remove it from "ul-excluded-selectors" and "img-excluded-selectors" as it will always included by "exclude-selector" now
  - Move margins for <ul>/<ol> will apply only if not excluded (so if excluded it will not have any styles applied)

## 0.1.0-beta.85

- **scss/components/table-sticky.scss**
  - New component module for vue table sticky component (not output by default when calling components-styles)

## 0.1.0-beta.84

- **scss/components/rail.scss**
  - Add new component for common strip-rail layouts
- **scss/components/button-group.scss**
  - Add new component for grouping buttons and joining them
- **scss/components/headline-label.scss**
  - Add new component "headline-label" for small label above headlines
- **scss/components/panel.scss**
  - Add new panel component, this is to replace custom callout layouts/etc
  - A panel is a box with child rows (such as header, body, footer) or anything like that (think structured callouts, sidebar menus, anything that needs this type of layout)
  - User defines how it looks and what modifiers are present (unless using defaults)
- **scss/element.scss**
  - Add new function `get-optional-rule-style($value)` which will test the input passed, if it's a string and not 'none'/none it will return a rule-style, if it's another type of value (null, css border value, etc) it will pass it through. So that we easily have config values in components etc, that can leverage rule styles but allow user values if that's not what's desired
- **scss/utils.scss**
  - Add utils.default() for inline defaults to handle pattern similiar to function-fallback works, for local values (not for configuration fallbacks)
  - Use like `color: ulu.utils-default($user-value, red)` (if user value is anything other than `true`) return it, else return default value (like how all config defaults work)
  - Designed mainly for internal library use


## 0.1.0-beta.83

- **js/ui/resizer.js**
  - Add keyboard events
  - Add selfManagedEvents and selfManagedAriaLabel
    - So we can use this in other libraries/etc
- **js/ui/modal-builder.js**
  - Update default modal template option to have a button for resizer to work with updated resizer script

## 0.1.0-beta.82

- **js/ui/dialog.js**
  - Remove native resize detection (resizeObserver, etc) since all resizing is done by resizer now
    - Backed up this idea to reference/ideas/removed-idea-on-how-to-detect-native-resizing-has-no-event.js incase it's needed in the future
  - Add flag internally to ensure that click outside is prevented if the pointer event originated from a resizer event

## 0.1.0-beta.81

- **scss/components/css-icons.scss** 
  - Add icon for `.css-icon--drag-both`
- **scss/components/modal.scss** 
  - Remove 'resize' native resizing for 'center' position, and use new resizer for both axes
- **js/ui/modal-builder.js**
  - Update resizer to create resizer handle for "center" so we can remove CSS resize in modals.scss
- **js/ui/resizer.js**
  - Refactor API to be fromX, and fromY (instead of fromLeft) to support both axes 
  - Add events dispatched from resizer's container for user 
  - Make all events pointer events instead of mouse
- **js/utils/class-logger.js**
  - Add check in allow() for class instance options.debug property

## 0.1.0-beta.80

- Update @ulu/utils

## 0.1.0-beta.79

- **js/ui/dialog.js**
  - Move preventScroll logic to utils library, refactor (no api changes)

## 0.1.0-beta.78

- **js/ui/modal-builder.js**
  - Fix unused documented config property `titleId`
  - Document `labeledby`and `describedby``
  - Code cleanup

## 0.1.0-beta.77

- **js** 
  - Move dom utils that were reusable to utils library
- **docs** 
  - Fix popover fixed demo for fixed strategy

## 0.1.0-beta.76

- **scss/components/modal.scss** 
  - Add `.modal__footer` element and configuration for styling it
  - Fix modal animations temporarily setting display block instead of flex 
- **js/ui/modal-builder.js**
  - Add options for `footerElement` which will select the element and move it into the modal on creation (when working in DOM with data-attributes)
    - Add option for `footerHtml` which will insert the markup provided into the footer
  - Output footer element if either setting is set

## 0.1.0-beta.75

- **scss/components/modal.scss** | Remove unused selector `.modal__content`

## 0.1.0-beta.74

- **js/ui/modal-builder.js**
  - Add options for `labelledby`, `describedby` (pass id's)
    - `labelledby` will be filled in automatically if using title option
    - `describedby` is to mark optional description element

## 0.1.0-beta.73

- **js/ui/modal-builder.js** | Fix missing end tag in options.template 

## 0.1.0-beta.72

- **scss/element** | Change new mixin name "focus-ring-required-only"

## 0.1.0-beta.71

- **scss/element**
  - Add mixin "hide-focus-ring" which implements hidden focus ring unless it's needed (via :focus-visible)
- **scss/components/tabs**
  - Hide focus ring on tabs when clicking

## 0.1.0-beta.70

- **scss/components/accordion**
  - Change defaults (add background color to summary) so that demo shows how no-border modifier is used
  - Add borderless-margin-between 
  - Change modifier "no-border" to "borderless"
- **scss/components/tabs**
  - Tweak defaults so that tab color hover matches "selected" color
  - Add transitions to the indicator bar, and add setting to adjust it

## 0.1.0-beta.69

- **scss/components/accordion**
  - Set width on .accordion__summary so it works when using button element (when not details)
  - Fixed minor things (missing selectors, etc)

## 0.1.0-beta.68

- **scss/components/badge**
  - Fix default config (so that default size is smaller than large)
  - Add default sizes (small and large)
  - Add font family option

## 0.1.0-beta.67

- **scss/components/counter-list**
  - Add extra-selector option to allow class wrapper which styles all ol's inside container.

## 0.1.0-beta.66

- **scss/components/data-grid**
  - Add missing row gutter breakpoint modifiers (so row gutters use breakpoint sizes)
  - Add missing row gutter at breakpoint work with extra scales 

## 0.1.0-beta.65

- **scss/element**
  - Add backdrop-filter-blur mixin
  
## 0.1.0-beta.64

- **scss/components/counter-list**
  - Fix mistake in "item-margin" property default value 
    - (should be space separated list or single number was comma separated)

## 0.1.0-beta.63

- **js/ui/scrollpoints** 
  - Fixed error using for syncedElements option (Missing getElement, was moved to utils)


## Versions 0.1.0-beta.59, 0.1.0-beta.60, 0.1.0-beta.61, 0.1.0-beta.62

- Update @ulu/utils dependency to latest

## Version 0.1.0-beta.58

- **js/ui/slider**
  - Change slider swipe to be on slides
  - Add options for swipeOptions to configure ["swipe-listener"](https://www.npmjs.com/package/swipe-listener) library (see it's documentation for options)
    - Adding preventScroll by default

## Version 0.1.0-beta.57

- **js/ui/slider**
  - Setup swipe listener and add option for swipeEnabled (true by default)

## Version 0.1.0-beta.56

- **scss/components/counter-list**
  - Add counter (font-family, font-weight)

## Version 0.1.0-beta.55

- **scss/components/counter-list**
  - Fix selector (was nested if using .counter-list__item), Updates for API for $config

## Version 0.1.0-beta.54

- **js/ui/modal-builder**
  - Add option for titleClass
  - Fill in jsdoc documentation for defaults 

## Version 0.1.0-beta.53

- **scss/components/slider**
  - Remove "button-height" option not setup in styles
  - Change "button-icon-offset-x/y" to "button-offset-x/y" since it only controls the button offsets not related to an icon

## Version 0.1.0-beta.52

- **scss/components/slider**
  - Remove "button-size" option (was never hooked up)
  - Change "dot-" prefixed options to "nav-" so it's not describing it visually
  - Change "margin-bottom" and "margin-top" to singular margin rule

## Version 0.1.0-beta.51

- **scss/components/slider**
  - Add "dot-gap" and "nav-margin" options

## Version 0.1.0-beta.50

- **scss/components/slider**
  - Remove "dot-border-color-hover" option not setup in styles

## Version 0.1.0-beta.49

- **scss/color**
  - Allow color.get() to passthrough colors that are "color-mix()"
  
## Version 0.1.0-beta.48

- **scss/color**
  - **css-tint, css-shade** Make sure colors (base white/black) use color.get()

## Version 0.1.0-beta.47

- **scss/components/card**
  - Add card--fill modifier (expands to fit whatever element it's within). This was intended for use with data-grid but could be used this way for many layouts.

## Version 0.1.0-beta.46

- **scss/color**
  - **css-tint, css-shade** Add two new functions for tinting/shading in the browser (to support custom properties). In the future these may replace sass only tint/shade functions once they are more widely supported.

## Version 0.1.0-beta.45

- **scss/units > set()**
  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)
- **scss/element > set-rule-margins()**
  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)

## Version 0.1.0-beta.44

- **scss/components/card**
  - Fix card body from shrinking when max-width is larger than body content
  - Add card--horizontal-center modifier to center body of card

## Version 0.1.0-beta.43

- **scss/components/card**
  - Document all new aside configuration properties change toggle-aside-rule to aside-rule

## Version 0.1.0-beta.42

- **scss/components/card**
  - Adjusted defaults for new aside element (rule and background color) to match standard defaults (initial testing values were there before)

## Version 0.1.0-beta.41

- **js/utils/dom**
  - **addScrollbarProperty** - Change arguments to object, Add argument for "propertyElement" and make this function add property to html element by default (so it can be used with other custom properties in CSS :root selector)
- **scss/components/card.scss**
  - card aside defaults changed ("aside-background-color" : transparent, "aside-rule-color": "rule",)

## Version 0.1.0-beta.40

- **scss/components/counter-list**
  - Add counter-list component and demo page
- **js/ui/dialog**
  - Add option for triggers (preventScrollShift) which will add padding to the body when dialog with preventScroll is opened (so layout doesn't shift). Note this will not fix fixed position elements relative to the viewport jumping.

## Version 0.1.0-beta.39

- **js/ui/scrollpoint.js**
  - Fix attribute name for state to have ulu prefix (ie. data-scrollpoint-state is now data-ulu-scrollpoint-state)
  
## Version 0.1.0-beta.38

- **scss/**
  - **helpers/display**
    - remove clearfix class styling
  - **helpers/utilities, helpers/print, helpers/display**
    - Add selector class replacing and prefixing

## Version 0.1.0-beta.37

- **js/ui/slider.js**
  - Implement classAccessiblyHidden option to allow users to customize its styling. Will still default to "hidden-visually." 

## Version 0.1.0-beta.36

- **scss/**
  - **components/button-verbose**
    - Add "border-width" and "border-color" options with ability to fallback to button defaults for each. No borders are added by default. Options descriptions added to sass api docs.
  - **components/modal**
    - Add fullscreen size modifier 
  - **components/data-grid**
    - Create option "rule-fade-duration" which when enabled (can be disabled by passing false) will hide the rules for the grid until the grid's initialization script has finished (which gives positioning information about the column arrangement so the appropriate rules can be shown per column/row). 
- **js**
  - **settings**
    - Update "wrapSettingString" function to have second argument for "transform" allowing default settings strings that can also be transformed. This was used in breakpoint module so user can match "cssvarPrefix" to create a default value of "--PREFIX-breakpoint" for example, where PREFIX is dynamic at time of string is used
    - Add "cssvarPrefix" to match scss cssvar module's prefix value
  - **ui/breakpoint**
    - Fix all typos (options and methods) of "psuedo" to "pseudo" (valueFromPseudo, pseudoSelector)
    - Bring in new setting (from settings.js) for "cssvarPrefix" for the breakpoint customProperty default value
    - Create test for this in demos
  - **ui/collapsibles**
    - Fix bug with "focusoutCloses" check collapsible content for focus before closing (so only close if focusout led outside the content) which is the intended behavior. Note this is mechanism used to control popover's so it fixes the bug there as well
  - **ui/modal-builder**
    - Update all templates options (templateCloseIcon, templateResizerIcon, template) to include new option for "baseClass" so that base BEM selector can easily be changed (ie. .namespace-modal for example)
  - **utils/css.js**
    - Add new module to hold utility functions related to CSS, currently just new function getCustomProperty which is used in ui/breakpoints module

## Version 0.1.0-beta.35

- **scss/**
  - **components/card**
    - add *card__aside* styling to enable sidebars
      - added *card__main* wrapper to *card__title* and *card__content* to separate it from the *card__aside*
      - added config options for *card__aside*
        - toggle-aside-rule : toggles rule separating aside from main,
        - aside-rule-width
        - aside-background-color
        - aside-rule-color
    - remove padding from *card__image--icon*
      - This was adding additional space on bottom of horizontal card. Most noticeably when using an aside background color and no footer.
  - **elements/rule**
    - Added "display: inline-block;" to short rule
      - Note: user can use the old style by adding utility class "display-block"
- **js/**
  - ui/scroll-slider
    - Fix typo that introduced error in last update controls-context to control-context

## Version 0.1.0-beta.34

- **scss/**
  - **element**
    - Add mixins for element.cap() and element.cap-appearance() which are used internally but can be used by users to add end caps to an element
  - **utils**
    - Add ensure-map(), units-match(), is-end(), is-side() functions
  - **components/callout**
    - Minor visual breaking change for those using cap
    - Update how left-cap works (all properties have changed) now accepts common cap settings (see config)
    - Caps can be set on any side now
    - Callout styles map (for variations/modifiers of callout) will no longer output "border" configuration
      - Use "border-width" or "border-color" to affect border appearance
  - **components/button-verbose**
    - Minor visual breaking change for those using cap
    - left cap has changed to cap and accepts common cap options (see config)
  - **components/accordion**
    - remove static margin-bottom added to "--no-borders" modifier (was 4rem)
    - Fix calc for accordion + accordion to be based on border-width setting (was static 1px)
  - **components/slider**
    - remove unused config options "button-background-color" and "button-background-color-hover"
  - **components/accordion**
    - Remove margin-bottom
  - **components/data-table**
    - Add config option "footer-color" to enable users to customize footer text color. Footer still defaults to "color" config option.
- **js/**
  - **ui** (remove setup functions, using component initializer class now)
  - **ui/slider**
    - update createNavButton function to pass whole slide rather than just slide number. Update getNavContent to still print slide number as accessibility text by default.
  - **ui/dialog**
    - Added option preventScroll (defaults to true), used only for modal dialogs (ignored if nonModal)
  - **ui/tooltip**
    - Fix missing init attribute
  - **ui/flipcard**
    - Fix typo in method name "setVisiblity" to "setVisibility"
  - **ui/tabs**
    - Fix issue with initial click of a tab when using "openWithUrlHash" option
      - Equal height checking was setting hidden attribute but aria-tablist library explicitly checks for hidden="hidden"

## Version 0.1.0-beta.33

- scss
  - Add layout.absolute-fill throughout components/styles so that CSS is printed the same way for compression
  - Add layout.absolute-fill throughout components/styles so that CSS is printed the same way for compression
- scss/components/callout
- scss/components/button-verbose
  - Add left-cap-match-radius to have the left cap style match the border radius of the parent container
  - 
## Version 0.1.0-beta.32

- scss/components/button-verbose
  - Add left-cap-match-radius to have the left cap style match the border radius of the parent container

## Version 0.1.0-beta.31

- scss/components/button-verbose
  - Change left-cap default to false off (like it was before the change in 0.1.0-beta.29)

## Version 0.1.0-beta.30

- scss/components/button-verbose
  - Add button-verbose__body element
  - Allow title-margin to work if body is before title
- scss/component/popover
  - Change new config property "arrow-mask" to "arrow-box-shadow", remove "arrow-mask-" properties as they are no longer needed. When "arrow-box-shadow" is enabled the popovers box-shadow will be used on the arrow along with a mask that has an overlap based on the box-shadow's size.
- scss/utils
  - Add (is-list, is-map, is-number, is-string, is-color) functions to reduce logic based on type (ie. `if(utils.is-list($value), $something, $something-else))`
  - Add is-even, and is-odd functions

## Version 0.1.0-beta.29

- scss/components/button-verbose
  - Setup optional selector changing (class base name)
  - Add end cap option
  - Adjust default options
  - Make inline modifier remove margin right if last child
- scss/components/card
  - Add cursor pointer to card__title-link and move default title hover styles from card__title to card__title-link
  - Change default size of icon image max-width (from 30rem to 8rem)
  - Remove transparent on card__image--icon (will have normal default background for image area now)
- scss/components/form-theme
  - Add "description-line-height" option defaulting to typography line-height dense

## Version 0.1.0-beta.28

- scss/components/popover
  - Remove options (footer-box-shadow, footer-box-shadow-color) as it interferes with main popover box shadow and arrow box shadow. 
  - Added "footer-border-top" to separate footer from content (useful for showing overflow)

## Version 0.1.0-beta.27

- scss/components/popover
  - Add popover's content box-shadow to arrow (using the other pseudo to mask the shadow)
- scss/components/utils
  - Fix number-info function, and add errors option
  - Add function add-unit() to add unit to a number
  - Add function hypotenuse() which returns hypotenuse of triangle

## Version 0.1.0-beta.26

- scss/components/card
  - Make modifier card--no-image, which is used to inform layout in the card when it doesn't have an image, now hides the image as well (with CSS)
  
## Version 0.1.0-beta.25

- scss/components/accordion
  - Make normal summary (when used without icon) flexbox for older browser support (uses :has() selector)
- scss/components/card
  - Change how horizontal cards display when in horizontal
    - Body and footer stack to the side of image
    - Image fills height
  - add card--image-fit modifier to all images to properly be contained in cards regardless of card size

## Version 0.1.0-beta.24

- Minor, remove debug statement

## Version 0.1.0-beta.23

- scss/component/sticky-list.scss
  - Adjusts to new component (property name changes)

## Version 0.1.0-beta.22

- scss/component/sticky-list.scss **new**
  - Added basic CSS sticky list component

## Version 0.1.0-beta.21

- scss/components/tabs.scss
  - Minor: fix margin output (space separated list vs comma)
  - Remove scrollbar in tablist

## Version 0.1.0-beta.20

- scss/components/basic-hero **new**
  - Added component for handling simple hero or header styling with text and media in container
- js/ui/theme-toggle.js (refactored to allow)
  - Inverted the default icons so that the icon reflects the theme it will trigger
  - Multiple instances of theme toggles
  - Remote theme toggles (other toggles buttons that follow/match main toggle)
    - If the toggle button is used in more than one place in UI
    - Toggle and remote linked via 'group' option
  - Allow targeting multiple containers to toggle theme on
  - New options/API structure
    - Now accepts themes object with settings on what it should toggle
  - Allow callback for customizing behavior when changing state
  - Add demo/tests
- js/utils/dom.js
  - Add getElements() (matches getElement) but for multiple elements
  - Add resolveClasses() to allow class options to be string or array form
    - So that scripts using can easily resolve classes to consistent type for use in element.classList, etc
- js/ui/details-group.js
  - Fix error in event pageModified (caused by passing event object to setup)

## Version 0.1.0-beta.19

- js/ui/details-group.js
  - Added new module to manage groups of details (just one open at time right now)

## Version 0.1.0-beta.18

- scss/components/_button-verbose.scss
  - Add text align left
  
## Version 0.1.0-beta.17

- js/ui/programmatic-modal.js 
  - Add "classes" option to createAndOpen, to match legacy module's API

## Version 0.1.0-beta.16

- js/ui/programmatic-modal.js 
  - Change createAndOpen config option "selector" to ambiguous name "element" to allow passing both selector or element (using getElement())

## Version 0.1.0-beta.15

- JS
  - Settings.js 
    - Setup new shared setting module (currently holds icon string settings)
    - Setup common methods for dealing with settings
    - Setup wrapped string get method for use in configuring defaults for other modules
      - So we don't need to refactor for after runtime settings changes
  - utils/font-awesome.js - Includes helper method for setting font-awesome icons (configureIcons)
  - ui/modal-builder.js - Adjust to use settings to get icon defaults
  - ui/overflow-scroller.js and js/ui/slider.js
    - Change `iconClassesPrevious` and `iconClassesNext` to non array settings `iconClassPrevious` and iconClassNext
    - Change the above defaults to pull from settings.js
  - js/ui/slider.js
    - Fix selector .Slider__control-icon was on .Slider__control-button is now moved to icon
- SCSS
  - components/_slider.scss
    - Fix incorrect selector .Slider__control-icon which was actually targeting the control-button

## Version 0.1.0-beta.14

- SCSS > Components > Nav Strip
  - Add remove-scrollbar() CSS to nav strip list

## Version 0.1.0-beta.13

- SCSS > Components > Menu Stack
  - Add options for line-height for link and label
  - Change rule color to light by default

## Version 0.1.0-beta.12

- SCSS > Components > Menu Stack
  - Refactor menu-stack__checkbox selector to menu-stack__selectable so it works for both radio/checkbox layouts
  - Added other selectors if needed menu-stack__selectable-[input/label], but it still works with native element selectors (ie. [type="checkbox"])
  - Change config (checkbox-area-width to selectable-input-width)

## Version 0.1.0-beta.11

- SCSS
  - Components
    - Card
      - Set config options for settings that were hardcoded in
    - Form Theme: 
      - Change config item "input-margin-y" to "item-margin-y" since that's what it affects. 
      - Add config options to hardcoded options in fieldset
      - Remove fieldset span styling
      - Replaced config defaults using color.get("error") to now use color.get("danger")
    - Menu Stack
      - Remove padding on container when set to hanging (incorrect)
    - Data Table
      - Add header-color option for thead th
    - Callout
      - Adjustments to left cap styling
        - Left-cap height and horizontal positioning now include the border-width
        - Left-cap mixin is now a private mixin
      - **replaced "border" config option with "border-color" and "border-width"**
  - Color
    - New color options and adjusted colors error and warning.

## Version 0.1.0-beta.10

- "scss/component/modal" - Add "width-left-right" for sidebar style width setting
- "scss/component/css-icons" - Add "drag-gap-multiplier" to adjust the gap between strokes
- "js/ui/modal-builder" - Fix css-icon class for resizer (to css-icon--drag-x)

## Version 0.1.0-beta.9

- Updates to "scss/component/card" - Fix card overlay border-radius (body and footer), fix card border being conditional on interactive (proxy-click)

## Version 0.1.0-beta.8

- Update "scss/components/data-table" to have border and no margin on caption by default, add caption config properties (caption-text-align, caption-background-color)

## Version 0.1.0-beta.7

- Add "scss/components/list-inline" component
- Update "scss/components/list-lines" component to have adjustable base selector

## Version 0.1.0-beta.6

- Add "title-font-family" to scss/components/modal

## Version 0.1.0-beta.5

- scss/components/nav-strip - Adjust rule style so the rule is not a border on parent (so child can overlap if desired), Adjust all colors to run through color.get(), Convert to gap instead of margins

## Version 0.1.0-beta.3 - 0.1.0-beta.4

- scss/components/tabs - Add breakpoint to vertical tabs (to go to horizontal)

## Version 0.1.0-beta.2

- scss
  - color
    - Add "currentColor" as passthrough for color.get()
  - tabs
    - Add vertical orientation styling
    - Rework configuration properties to be orientation-less (requires remapping if you have setting set)
- js/ui/tabs
  - Fix equalHeights option (fix images that are already loaded or load error preventing heights script, check hidden tabs height and test that it works for vertical tabs)

## Version 0.1.0-beta.0

- Minor release keeps most of the current API for SASS the same but adds new functions/mixins and components. JS has been slightly reorganized and outdated modules have been replaced
- Remove calculate module and move the functions to utils (responsive property and pixel-to-em)
- Add other components modules 
- Update documentation and API documentation
- Update all sass to work with new/future sass version 
- Add root styles for ulu specific custom properties
- Add transitions to buttons
- JS remove mini collapsible and rely on floating ui library for tooltip/popovers
- JS move to native dialog element instead of micro-modal
- JS add new collapsible class for popovers or other accessible collapsible containers
- JS reorganize utils and helpers
- Create new docs website with api docs and component examples
- Full build (ie. /dist/) is bundled by Vite 

## Version 0.0.23

- Fix mistake introduced in 0.0.22, that broke container css

## Version 0.0.22

- Add in other common component modules
  - Users using these modules locally will need to remove and update configuration to pull modules from library instead. Or alternatively they will need to not output/use these new component modules
  - List of component modules added:
    - badge
    - fill-context
- Add .crop-margins to helpers/utilities

## Version 0.0.21

- Core/button Remove 'background-clip: padding-box' on buttons, affects buttons with borders (rendering between bg and border)

## Version 0.0.18

- Fix docs issue with JS broken from Markdown Attrs
- Fix missing arguments in typography module sassdocs comments

## Version 0.0.17

### SCSS

- Add !important to all utilities meant to display none, since they should always override

## Version 0.0.10

### JS

- Update css-breakpoints helper to get breakpoint value with custom property, and make the psuedo element a legacy option that can be enabled

## Version 0.0.6

### SCSS

- Added utils.map-merge($map, $changes, $mode)
  - This is a **breaking change**
    - Update all mixins with merge arguments (button > set-styles, typography > set-sizes, etc), to use a single string argument if a merge strategy is needed. If $deep and $over-write are set you need to choose one, if they are unset or false just remove them, this will use the default map.merge.
  - This will allow expansion if needed and is simpler for modules to implement
  - This is to replace utils.map-merge-or-overwrite which is deprecated now
- Removed IE "*zoom" clearfix property as we don't support it and it causes errors in CSS minifiers since it's not standard CSS

### JS

- Add js docs
- Add specific exports for JS (ie. package "exports")
- All utils are moved to new independent module @ulu/utils and are implemented as submodules
  - Since these can be used outside of frontend workflow
  - Update imports to point to new module
- Move old waypoints code to deprecated, no longer needed with intersectionObserver