claritas-web-framework 8.0.29 → 8.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "8.0.29",
+  "version": "8.0.31",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {

package/sass/_functions.scss

@@ -2,7 +2,7 @@
 @use "sass:math";
 @use "sass:string";
 
-@use "~/sass/variables" as *;
+@use "./variables" as *;
 
 // Functions
 

package/sass/_helpers.scss

@@ -1,7 +1,7 @@
-@forward "~/sass/helpers/container";
-@forward "~/sass/helpers/embed";
-@forward "~/sass/helpers/grid";
-@forward "~/sass/helpers/image";
-@forward "~/sass/helpers/link";
-@forward "~/sass/helpers/screenReader";
-@forward "~/sass/helpers/wrap";
+@forward "./helpers/container";
+@forward "./helpers/embed";
+@forward "./helpers/grid";
+@forward "./helpers/image";
+@forward "./helpers/link";
+@forward "./helpers/screenReader";
+@forward "./helpers/wrap";

package/sass/_mixins.scss

@@ -1,12 +1,12 @@
-@forward "~/sass/mixins/breakpoints";
-@forward "~/sass/mixins/button";
-@forward "~/sass/mixins/caret";
-@forward "~/sass/mixins/clearfix";
-@forward "~/sass/mixins/colors";
-@forward "~/sass/mixins/container";
-@forward "~/sass/mixins/gradient";
-@forward "~/sass/mixins/grid";
-@forward "~/sass/mixins/group";
-@forward "~/sass/mixins/list";
-@forward "~/sass/mixins/screenReader";
-@forward "~/sass/mixins/wrap";
+@forward "./mixins/breakpoints";
+@forward "./mixins/button";
+@forward "./mixins/caret";
+@forward "./mixins/clearfix";
+@forward "./mixins/colors";
+@forward "./mixins/container";
+@forward "./mixins/gradient";
+@forward "./mixins/grid";
+@forward "./mixins/group";
+@forward "./mixins/list";
+@forward "./mixins/screenReader";
+@forward "./mixins/wrap";

package/sass/_modules.scss

@@ -1,31 +1,31 @@
-@forward "~/sass/modules/alert";
-@forward "~/sass/modules/breadcrumbs";
-@forward "~/sass/modules/button";
-@forward "~/sass/modules/card";
-@forward "~/sass/modules/close";
-@forward "~/sass/modules/details";
-@forward "~/sass/modules/dialog";
-@forward "~/sass/modules/dropdown";
-@forward "~/sass/modules/form";
-@forward "~/sass/modules/form/formFieldGroup";
-@forward "~/sass/modules/form/checkbox";
-@forward "~/sass/modules/form/file";
-@forward "~/sass/modules/form/output";
-@forward "~/sass/modules/form/progress";
-@forward "~/sass/modules/form/radio";
-@forward "~/sass/modules/form/range";
-@forward "~/sass/modules/form/select";
-@forward "~/sass/modules/form/switch";
-@forward "~/sass/modules/form/text";
-@forward "~/sass/modules/form/textarea";
-@forward "~/sass/modules/form/toggle";
-@forward "~/sass/modules/list";
-@forward "~/sass/modules/loader";
-@forward "~/sass/modules/modal";
-@forward "~/sass/modules/nav";
-@forward "~/sass/modules/pill";
-@forward "~/sass/modules/tabs";
-@forward "~/sass/modules/tag";
-@forward "~/sass/modules/tile";
-@forward "~/sass/modules/table";
-@forward "~/sass/modules/tooltip";
+@forward "./modules/alert";
+@forward "./modules/breadcrumbs";
+@forward "./modules/button";
+@forward "./modules/card";
+@forward "./modules/close";
+@forward "./modules/details";
+@forward "./modules/dialog";
+@forward "./modules/dropdown";
+@forward "./modules/form";
+@forward "./modules/form/formFieldGroup";
+@forward "./modules/form/checkbox";
+@forward "./modules/form/file";
+@forward "./modules/form/output";
+@forward "./modules/form/progress";
+@forward "./modules/form/radio";
+@forward "./modules/form/range";
+@forward "./modules/form/select";
+@forward "./modules/form/switch";
+@forward "./modules/form/text";
+@forward "./modules/form/textarea";
+@forward "./modules/form/toggle";
+@forward "./modules/list";
+@forward "./modules/loader";
+@forward "./modules/modal";
+@forward "./modules/nav";
+@forward "./modules/pill";
+@forward "./modules/tabs";
+@forward "./modules/tag";
+@forward "./modules/tile";
+@forward "./modules/table";
+@forward "./modules/tooltip";

package/sass/_reboot.scss

@@ -1,8 +1,8 @@
 @use "sass:color";
 
 @use "~rfs/scss" as *;
-@use "~/sass/variables" as *;
-@use "~/sass/mixins" as *;
+@use "./variables" as *;
+@use "./mixins" as *;
 
 body {
   font-family: var(--font-family-body);

package/sass/_root.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/colors" as *;
+@use "./variables" as *;
+@use "./mixins/colors" as *;
 
 :root {
   @if $font-size-root {

package/sass/_utilities.scss

@@ -1,17 +1,17 @@
-@forward "~/sass/utilities/align";
-@forward "~/sass/utilities/border";
-@forward "~/sass/utilities/colors";
-@forward "~/sass/utilities/display";
-@forward "~/sass/utilities/flex";
-@forward "~/sass/utilities/float";
-@forward "~/sass/utilities/order";
-@forward "~/sass/utilities/overflow";
-@forward "~/sass/utilities/pointerEvents";
-@forward "~/sass/utilities/position";
-@forward "~/sass/utilities/shadow";
-@forward "~/sass/utilities/size";
-@forward "~/sass/utilities/spacing";
-@forward "~/sass/utilities/translate";
-@forward "~/sass/utilities/typography";
-@forward "~/sass/utilities/visibility";
-@forward "~/sass/utilities/zIndex";
+@forward "./utilities/align";
+@forward "./utilities/border";
+@forward "./utilities/colors";
+@forward "./utilities/display";
+@forward "./utilities/flex";
+@forward "./utilities/float";
+@forward "./utilities/order";
+@forward "./utilities/overflow";
+@forward "./utilities/pointerEvents";
+@forward "./utilities/position";
+@forward "./utilities/shadow";
+@forward "./utilities/size";
+@forward "./utilities/spacing";
+@forward "./utilities/translate";
+@forward "./utilities/typography";
+@forward "./utilities/visibility";
+@forward "./utilities/zIndex";

package/sass/helpers/_container.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/container" as *;
+@use "./../variables" as *;
+@use "./../mixins/container" as *;
 
 .container,
 .container--fluid {

package/sass/helpers/_embed.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .embed--32by9,
 .embed--21by9,

package/sass/helpers/_grid.scss

@@ -1,9 +1,9 @@
 @use "sass:map";
 @use "sass:math";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/breakpoints" as *;
-@use "~/sass/mixins/grid" as *;
+@use "./../variables" as *;
+@use "./../mixins/breakpoints" as *;
+@use "./../mixins/grid" as *;
 
 // Row
 // Rows contain your columns.

package/sass/helpers/_screenReader.scss

@@ -1,4 +1,4 @@
-@use "~/sass/mixins/screenReader" as *;
+@use "./../mixins/screenReader" as *;
 
 .screen-reader {
   @include make-screen-reader(false);

package/sass/helpers/_wrap.scss

@@ -1,4 +1,4 @@
-@use "~/sass/mixins/wrap" as *;
+@use "./../mixins/wrap" as *;
 
 .wrap--overflow {
   @include make-wrap-overflow;

package/sass/index.scss

@@ -1,10 +1,10 @@
-@forward "~/sass/variables";
-@forward "~/sass/functions";
-@forward "~/sass/mixins";
-@forward "~/sass/helpers";
-@forward "~/sass/utilities";
-@forward "~/sass/modules";
-@forward "~/sass/reboot";
-@forward "~/sass/root";
+@forward "./variables";
+@forward "./functions";
+@forward "./mixins";
+@forward "./helpers";
+@forward "./utilities";
+@forward "./modules";
+@forward "./reboot";
+@forward "./root";
 
 @import "~modern-normalize/modern-normalize.css";

package/sass/mixins/_breakpoints.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 // Breakpoint viewport sizes and media queries.
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:

package/sass/mixins/_button.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
 
 @mixin button-variant(
   $main,

package/sass/mixins/_caret.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 @mixin make-caret($left: false, $position: calc(var(--spacer) * 0.5)) {
   position: relative;

package/sass/mixins/_colors.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
 
 @mixin define-color-variables($title, $color) {
   --#{$title}-h: #{color.hue($color)};

package/sass/mixins/_container.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/breakpoints" as *;
+@use "./../variables" as *;
+@use "./../mixins/breakpoints" as *;
 
 @mixin make-container() {
   --gutter-x: #{$grid-gutter};

package/sass/mixins/_gradient.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 // Horizontal gradient, from left to right
 // Creates two color stops, start and end, by specifying a color and position for each color stop.

package/sass/mixins/_grid.scss

@@ -2,8 +2,8 @@
 @use "sass:math";
 @use "sass:meta";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/breakpoints" as *;
+@use "./../variables" as *;
+@use "./../mixins/breakpoints" as *;
 
 // Grid system
 // Generate semantic grid columns with these mixins.

package/sass/mixins/_group.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 @mixin make-group() {
   margin: 0;

package/sass/mixins/_list.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/group" as *;
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
 
 @mixin make-list-unstyled() {
   list-style: none;

package/sass/modules/_alert.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .alert {
   --alert-padding-x: var(--spacer);

package/sass/modules/_breadcrumbs.scss

@@ -13,9 +13,9 @@
   display: flex;
   flex-wrap: wrap;
   color: var(--breadcrumb-color);
-  gap: 1em;
 
   & li {
+    padding-right: 1em;
     position: relative;
 
     &:not(:last-child) {

package/sass/modules/_button.scss

@@ -1,7 +1,7 @@
 @use "~rfs/scss" as *;
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins" as *;
+@use "./../variables" as *;
+@use "./../mixins" as *;
 
 .button {
   // Changing

package/sass/modules/_card.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/group" as *;
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
 
 .card {
   --card-background: var(--white);

package/sass/modules/_close.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
 
 .close {
   --close-border-radius: #{$close-border-radius};

package/sass/modules/_details.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/caret" as *;
+@use "./../variables" as *;
+@use "./../mixins/caret" as *;
 
 details {
   @if $enable-margins {

package/sass/modules/_dialog.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .dialog {
   padding: var(--spacer);

package/sass/modules/_dropdown.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/caret" as *;
+@use "./../variables" as *;
+@use "./../mixins/caret" as *;
 
 .dropdown {
   display: inline-flex;

package/sass/modules/_form.scss

@@ -2,9 +2,9 @@
 
 @use "~rfs/scss" as *;
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
-@use "~/sass/mixins/breakpoints" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/breakpoints" as *;
 
 ::placeholder {
   color: var(--gray-3);
@@ -239,6 +239,7 @@ progress,
   text-transform: $label-text-transform;
   font-size: $label-font-size;
   color: $label-color;
+  cursor: pointer;
 }
 
 .form--control {

package/sass/modules/_list.scss

@@ -1,8 +1,8 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
-@use "~/sass/mixins/list" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/list" as *;
 
 .list--unstyled {
   @include make-list-unstyled;

package/sass/modules/_loader.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .loader {
   width: var(--spacer);

package/sass/modules/_modal.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .modal {
   padding: 0;

package/sass/modules/_nav.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/list" as *;
+@use "./../variables" as *;
+@use "./../mixins/list" as *;
 
 .nav,
 .nav > ul {

package/sass/modules/_pill.scss

@@ -2,9 +2,9 @@
 
 @use "~rfs/scss" as *;
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
-@use "~/sass/mixins/group" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/group" as *;
 
 .pill {
   --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);

package/sass/modules/_table.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .table {
   width: 100%;

package/sass/modules/_tabs.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 .tabs--wrapper {
   --tabs-border-width: 1px;

package/sass/modules/_tag.scss

@@ -2,10 +2,10 @@
 
 @use "~rfs/scss" as *;
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
-@use "~/sass/mixins/colors" as *;
-@use "~/sass/mixins/group" as *;
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins/colors" as *;
+@use "./../mixins/group" as *;
 
 .tag {
   --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);

package/sass/modules/_tile.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/group" as *;
+@use "./../variables" as *;
+@use "./../mixins/group" as *;
 
 .tile {
   background-color: var(--white);

package/sass/modules/_tooltip.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../variables" as *;
 
 [data-tooltip] {
   position: relative;

package/sass/modules/form/_checkbox.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/breakpoints" as *;
+@use "./../../variables" as *;
+@use "./../../mixins/breakpoints" as *;
 
 .form--control-checkbox {
   & > * {

package/sass/modules/form/_file.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
+@use "./../../variables" as *;
+@use "./../../functions" as *;
 
 .form--control-fancyfile {
   display: flex;

package/sass/modules/form/_formFieldGroup.scss

@@ -1,4 +1,4 @@
-@use "~/sass/variables" as *;
+@use "./../../variables" as *;
 
 .form--field-group {
   display: flex;

package/sass/modules/form/_output.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../../variables" as *;
 
 output {
   --input-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);

package/sass/modules/form/_progress.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../../variables" as *;
 
 progress {
   --input-padding-x: 1px;

package/sass/modules/form/_radio.scss

@@ -1,8 +1,8 @@
 @use "sass:map";
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins/breakpoints" as *;
+@use "./../../variables" as *;
+@use "./../../mixins/breakpoints" as *;
 
 .form--control-radio {
   & > * {

package/sass/modules/form/_range.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
+@use "./../../variables" as *;
 
 @mixin make-track() {
   background: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / 10%);

package/sass/modules/form/_select.scss

@@ -1,5 +1,5 @@
-@use "~/sass/variables" as *;
-@use "~/sass/functions" as *;
+@use "./../../variables" as *;
+@use "./../../functions" as *;
 
 select {
   padding-right: calc(var(--spacer) * 2);

package/sass/modules/form/_switch.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@use "~/sass/variables" as *;
-@use "~/sass/mixins" as *;
+@use "./../../variables" as *;
+@use "./../../mixins" as *;
 
 .button--switch {
   position: absolute;