@castlabs/ui 7.4.1 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.4.1",
+  "version": "7.5.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -39,44 +39,44 @@
   "main": "./dist/castlabs-ui.common.js",
   "dependencies": {
     "bootstrap": "5.3.8",
-    "simplebar": "6.3.0"
+    "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.50.2"
+    "@rollup/rollup-linux-x64-gnu": "4.53.3"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
-    "@tsconfig/node22": "22.0.2",
-    "@types/jsdom": "21.1.7",
-    "@types/node": "24.5.0",
-    "@vitejs/plugin-vue": "6.0.1",
-    "@vitest/eslint-plugin": "1.3.10",
+    "@tsconfig/node22": "22.0.5",
+    "@types/jsdom": "27.0.0",
+    "@types/node": "24.10.1",
+    "@vitejs/plugin-vue": "6.0.2",
+    "@vitest/eslint-plugin": "1.4.3",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.6.0",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.8.1",
-    "core-js": "3.45.1",
+    "core-js": "3.47.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "17.23.0",
+    "eslint-plugin-n": "17.23.1",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.4.0",
-    "eslint": "9.35.0",
+    "eslint-plugin-vue": "10.5.1",
+    "eslint": "9.39.1",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
-    "jsdom": "27.0.0",
+    "jsdom": "27.2.0",
     "npm-run-all": "4.1.5",
-    "sass": "1.92.1",
+    "sass": "1.94.1",
     "stylelint-config-sass-guidelines": "12.1.0",
     "stylelint-config-standard-vue": "1.0.0",
-    "stylelint-config-standard": "39.0.0",
+    "stylelint-config-standard": "39.0.1",
     "stylelint-order": "7.0.0",
     "stylelint-scss": "6.12.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.5",
-    "vitest": "3.2.4",
-    "vue-tsc": "3.0.7",
-    "vue": "3.5.21"
+    "typescript": "5.9.3",
+    "vite": "7.2.2",
+    "vitest": "4.0.10",
+    "vue-tsc": "3.1.4",
+    "vue": "3.5.24"
   }
 }

package/src/components/ClCard/style.variables.scss

@@ -49,7 +49,6 @@ $card-spacing-tight: $spacing-small;
 
   &.cl-color-red-outline:not([class*='cl-color-text-']) {
     #{'--cl-color-text'}: $color-ci-night;
-    #{'--cl-color-accent'}: $color-accent;
   }
 
   a:not(.btn) {

package/src/components/ClScrollbar/style.scss

@@ -5,7 +5,7 @@
 
 // This file adds & customizes the simplebar scrollbar.
 
-@use 'simplebar/dist/simplebar.min';
+@use 'simplebar/dist/simplebar.min.css';
 @use '../../styles/global' as *;
 
 // --- scrollbar ---------------------------------------------------------------

package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss

@@ -117,6 +117,8 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     .cl-nav-icon {
       flex-shrink: 0;
       font-size: px(22);
+      position: relative;
+      top: 0.05em;
     }
   }
 

package/src/components/navigation/ClNavTop/style.scss

@@ -20,6 +20,10 @@ $sidenav-z-index: $layer-z-sidenav;
   background-color: $color-ci-night;
   color: $color-ci-eggshell;
 
+  .row {
+    #{'--bs-gutter-x'}: $grid-spacing;
+  }
+
   a:not(.btn) {
     @include typography-link-invisible;
   }
@@ -48,6 +52,8 @@ $sidenav-z-index: $layer-z-sidenav;
     @extend %cl-p-label;
 
     color: $color-ci-eggshell;
+    flex-grow: 99;
+    letter-spacing: 0;
     margin: 0;
     padding: 0 $spacing-small;
 
@@ -74,6 +80,18 @@ $sidenav-z-index: $layer-z-sidenav;
     display: flex;
     font-size: $header-nav-height * 0.5; // logo scales 2x
 
+    &:first-child {
+      // move logo as logo's shape has 'padding' within the image bounds
+      left: -0.5em;
+      position: relative;
+    }
+
+    &:not(:first-child) {
+      // move logo as logo's shape has 'padding' within the image bounds
+      left: 0.5em;
+      position: relative;
+    }
+
     span {
       @extend %cl-p-label;
 
@@ -198,10 +216,10 @@ $navbar-item-spacing: $spacing-medium;
   }
 
   .navbar-brand {
-    font-size: px(16);
+    font-size: $header-nav-height * 0.5; // logo scales 2x
     line-height: 1;
     margin: 0;
-    padding: 0.5em 0;
+    padding: 0;
   }
 
   .nav-link {

package/src/styles/abstracts/color.scss

@@ -117,6 +117,21 @@ $color-line: $color-ci-clay;
     #{'--cl-color-accent'}: $color-ci-berry;
   }
 
+  &.cl-accent-brick,
+  .cl-accent-brick {
+    #{'--cl-color-accent'}: $color-ci-brick;
+  }
+
+  &.cl-accent-honey,
+  .cl-accent-honey {
+    #{'--cl-color-accent'}: $color-ci-honey;
+  }
+
+  &.cl-accent-leaf,
+  .cl-accent-leaf {
+    #{'--cl-color-accent'}: $color-ci-leaf;
+  }
+
   &.cl-accent-none,
   .cl-accent-none,
   &.cl-accent-transparent,
@@ -174,7 +189,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
@@ -242,21 +257,16 @@ $color-line: $color-ci-clay;
   #{'--cl-color-border'}: $color-ci-eggshell;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
-%cl-color-eggshell-alternate {
+%cl-color-haze {
+  @extend %cl-color-night-outline;
+
   #{'--cl-color-background'}: $color-ci-haze;
-  #{'--cl-color-border'}: $color-ci-haze;
-  #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-ci-night;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: inherit;
-  #{'--cl-color-focus'}: $color-ci-night;
 }
 
 %cl-color-clay {
@@ -351,7 +361,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: $color-ci-ash;
   #{'--cl-color-text'}: $color-ci-ash;
-  #{'--cl-color-line'}: $color-ci-ash;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-ash;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: inherit;

package/src/styles/abstracts/spacing.scss

@@ -18,7 +18,7 @@ $spacing-huge: px(48);
 
 $spacing-indent: $spacing-large; // uniform indent for lists, blockquotes, ...
 
-$header-nav-height: px(40);
+$header-nav-height: px(48);
 
 @mixin spacing-before-auto($value) {
   margin-bottom: 0;

package/src/styles/layout/color.scss

@@ -78,15 +78,23 @@
   @extend %cl-color-faded;
 }
 
+.cl-color-haze {
+  @extend %cl-color-haze;
+}
+
 .cl-color-none {
   @extend %cl-color-none;
 }
 
 // ----------------------------------------------
 
-span[class*='cl-color-text-'],
-div[class*='cl-color-text-'] {
-  color: var(--cl-color-text);
+a,
+span,
+div {
+  &[class*='cl-color-text-'] {
+    color: var(--cl-color-text);
+    text-decoration-color: var(--cl-color-text);
+  }
 }
 
 .cl-color-text-red {

package/src/styles/layout/helper.scss

@@ -9,24 +9,36 @@
 @use 'sass:math';
 
 .cl-nowrap {
-  text-wrap: nowrap;
+  text-wrap: nowrap !important;
 }
 
 .cl-rounded {
-  border-radius: $brand-border-radius;
+  border-radius: $brand-border-radius !important;
 }
 
 .cl-hidden {
-  visibility: hidden;
+  visibility: hidden !important;
 }
 
 .cl-cursor-pointer,
 .cl-cursor-link {
-  cursor: pointer;
+  cursor: pointer !important;
 }
 
 .cl-cursor-not-allowed {
-  cursor: not-allowed;
+  cursor: not-allowed !important;
+}
+
+@each $transform in uppercase, lowercase, capitalize {
+  .cl-#{$transform} {
+    text-transform: $transform !important;
+  }
+}
+
+@each $transform in uppercase, lowercase, capitalize {
+  .cl-#{$transform} {
+    text-transform: $transform;
+  }
 }
 
 .cl-faded {

package/src/styles/layout/section.scss

@@ -71,12 +71,10 @@
 .cl-section-light,
 .cl-section-alternate {
   @extend %section-padding;
-  @extend %cl-color-eggshell-alternate;
+  @extend %cl-color-haze;
 
   background-color: var(--cl-color-background);
   color: var(--cl-color-text);
-  // border-bottom: $brand-line-width solid $color-ci-clay;
-  // border-top: $brand-line-width solid $color-ci-clay;
 }
 
 main {