@castlabs/ui 4.24.2 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "4.24.2",
+  "version": "5.1.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for castLabs.",
@@ -8,18 +8,23 @@
     "npm": ">=8.0.0"
   },
   "scripts": {
-    "build-lib": "vue-cli-service build --target lib --name castlabs-ui src/index.ts && npm run gulp dist",
+    "build-lib": "vite build && npm run gulp dist",
+    "build-only": "vite build",
+    "package": "vite build && npm run gulp dist && npm pack",
+
+    "test": "vitest run --environment jsdom --root tests/unit/",
+    "test:unit": "vitest run --no-color --environment jsdom --root tests/unit/",
+
     "lint": "npm-run-all lint:stylelint lint:eslint",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint \"**/*.{css,scss}\" --ignore-path .gitignore",
+
     "fix": "npm-run-all fix:stylelint fix:prettier fix:eslint",
     "fix:eslint": "eslint . --fix",
     "fix:prettier": "prettier --write src/ tests/",
     "fix:stylelint": "stylelint \"**/*.{css,scss}\" --fix --ignore-path .gitignore",
-    "test": "vitest run --environment jsdom --root tests/unit/",
-    "test:unit": "vitest run --no-color --environment jsdom --root tests/unit/",
-    "gulp": "gulp",
-    "package": "vue-cli-service build --target lib --name castlabs-ui src/index.ts && npm run gulp dist && npm pack"
+
+    "gulp": "gulp"
   },
   "files": [
     "src/**/*.scss",
@@ -37,36 +42,37 @@
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
+    "@tsconfig/node22": "22.0.0",
+    "@types/jsdom": "21.1.7",
+    "@types/node": "22.13.9",
     "@vitejs/plugin-vue": "5.2.1",
-    "@vitest/eslint-plugin": "1.1.31",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-typescript": "5.0.8",
-    "@vue/cli-plugin-unit-jest": "5.0.8",
-    "@vue/cli-service": "5.0.8",
+    "@vitest/eslint-plugin": "1.1.36",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/eslint-config-typescript": "14.4.0",
+    "@vue/eslint-config-typescript": "14.5.0",
     "@vue/test-utils": "2.4.6",
-    "core-js": "3.40.0",
+    "@vue/tsconfig": "0.7.0",
+    "core-js": "3.41.0",
     "dree": "5.1.5",
-    "eslint": "9.20.1",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-n": "17.15.1",
+    "eslint-plugin-n": "17.16.2",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "9.32.0",
-    "gulp": "5.0.0",
+    "eslint-plugin-vue": "10.0.0",
+    "eslint": "9.21.0",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
+    "gulp": "5.0.0",
+    "jsdom": "26.0.0",
     "npm-run-all": "4.1.5",
-    "prettier": "3.5.0",
-    "sass": "1.84.0",
-    "sass-loader": "16.0.4",
-    "stylelint-config-standard": "37.0.0",
-    "stylelint-config-standard-vue": "1.0.0",
+    "sass": "1.85.1",
     "stylelint-config-sass-guidelines": "12.1.0",
+    "stylelint-config-standard-vue": "1.0.0",
+    "stylelint-config-standard": "37.0.0",
     "stylelint-order": "6.0.4",
-    "stylelint-scss": "6.11.0",
-    "typescript": "5.7.3",
-    "vitest": "3.0.5",
+    "stylelint-scss": "6.11.1",
+    "typescript": "5.8.2",
+    "vite": "6.2.1",
+    "vitest": "3.0.8",
+    "vue-tsc": "2.2.8",
     "vue": "3.5.13"
   }
 }

package/src/components/ClDropdown/style.scss

@@ -38,7 +38,6 @@ $dropdown-line-height: 1.25em;
       padding: $spacing-small - $dropdown-border $spacing-small - $dropdown-border;
       padding-right: $spacing-small * 3; // for chevron
       position: relative;
-      white-space: preserve;
     }
 
     &::after {
@@ -59,6 +58,11 @@ $dropdown-line-height: 1.25em;
       }
     }
 
+    > span,
+    > div {
+      white-space: preserve-breaks;
+    }
+
     > [class^='cl-badge'] {
       position: absolute;
       right: $spacing-small;
@@ -188,7 +192,6 @@ div.cl-dropdown summary {
     margin-right: 0;
     padding: $spacing-tiny + $spacing-micro $spacing-small;
     position: relative;
-    white-space: preserve;
     width: 100%;
   }
 
@@ -204,6 +207,11 @@ div.cl-dropdown summary {
     opacity: $color-hover-opacity;
   }
 
+  > span,
+  > div {
+    white-space: preserve-breaks;
+  }
+
   > [class^='cl-badge'] {
     position: absolute;
     right: $spacing-small;

package/src/components/ClHighlight/style.scss

@@ -0,0 +1,21 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines .cl-highlight modifiers for various components
+
+$highlight-background: $color-ci-sand;
+
+.cl-highlight {
+  background-color: $highlight-background;
+}
+
+.card-body,
+.card-footer,
+td,
+tr {
+  &.cl-highlight {
+    background-color: $highlight-background !important; // sass-lint:disable-line no-important
+  }
+}

package/src/fonts/FontAwesome5/FontAwesome5.scss

@@ -6085,7 +6085,8 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-brands-400.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-brands-400.woff2?no-inline')
+    format('woff2');
 }
 
 .fab {
@@ -6098,7 +6099,8 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-regular-400.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-regular-400.woff2?no-inline')
+    format('woff2');
 }
 
 .far {
@@ -6111,7 +6113,8 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-solid-900.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/FontAwesome5/fa-solid-900.woff2?no-inline')
+    format('woff2');
 }
 
 .fa,

package/src/fonts/NotoSansMono/NotoSansMono.scss

@@ -6,7 +6,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCLwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCLwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
@@ -17,7 +17,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCCwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCCwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -28,7 +28,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCKwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCKwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range: U+1F00-1FFF;
 }
@@ -39,7 +39,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCFwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCFwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range: U+0370-03FF;
 }
@@ -50,7 +50,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCJwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCJwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
@@ -63,7 +63,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCIwR26eg.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCIwR26eg.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
@@ -76,7 +76,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 100 900;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCGwR0.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NotoSansMono/BngRUXNETWXI6LwhGYvaxZikqbCGwR0.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,

package/src/fonts/OpenSansVariable/OpenSansVariable.scss

@@ -6,7 +6,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Udc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Udc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
@@ -17,7 +17,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0ddc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0ddc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -28,7 +28,7 @@
 //   font-style: italic;
 //   font-weight: 300 800;
 //   font-stretch: 80% 100%;
-//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Vdc1UAw.woff2') format('woff2');
+//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Vdc1UAw.woff2?no-inline') format('woff2');
 //   unicode-range: U+1F00-1FFF;
 // }
 
@@ -38,7 +38,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0adc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0adc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range: U+0370-03FF;
 }
@@ -49,7 +49,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0bdc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0bdc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
 }
@@ -60,7 +60,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Wdc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Wdc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
@@ -73,7 +73,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
@@ -86,7 +86,7 @@
   font-stretch: 80% 100%;
   font-style: italic;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
@@ -99,7 +99,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWJ0bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWJ0bbck.woff2?no-inline')
     format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
@@ -110,7 +110,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFUZ0bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFUZ0bbck.woff2?no-inline')
     format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -121,7 +121,7 @@
 //   font-style: normal;
 //   font-weight: 300 800;
 //   font-stretch: 80% 100%;
-//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWZ0bbck.woff2') format('woff2');
+//   src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWZ0bbck.woff2?no-inline') format('woff2');
 //   unicode-range: U+1F00-1FFF;
 // }
 
@@ -131,7 +131,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVp0bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVp0bbck.woff2?no-inline')
     format('woff2');
   unicode-range: U+0370-03FF;
 }
@@ -142,7 +142,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFV50bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFV50bbck.woff2?no-inline')
     format('woff2');
   unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
 }
@@ -153,7 +153,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWp0bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFWp0bbck.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
@@ -166,7 +166,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFW50bbck.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFW50bbck.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
@@ -179,7 +179,7 @@
   font-stretch: 80% 100%;
   font-style: normal;
   font-weight: 300 800;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVZ0b.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/OpenSansVariable/mem8YaGs126MiZpBA-UFVZ0b.woff2?no-inline')
     format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,

package/src/styles/components/button.variables.scss

@@ -1,5 +1,5 @@
 ////
-/// @group layout
+/// @group components
 /// @access public
 ////
 

package/src/styles/components/form.variables.scss

@@ -1,5 +1,5 @@
 ////
-/// @group layout
+/// @group components
 /// @access public
 ////
 

package/src/styles/ui.scss

@@ -29,6 +29,7 @@ $castlabs-ui-asset-prefix: '..' !default;
 @import '../components/ClDropdown/style';
 @import '../components/ClDropzone/style';
 @import '../components/ClFooter/style';
+@import '../components/ClHighlight/style';
 @import '../components/ClIcon/style';
 @import '../components/ClIconotron/style';
 @import '../components/ClList/style';