@castlabs/ui 7.21.1 → 7.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.21.1",
+  "version": "7.21.2",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,42 +42,42 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.60.2"
+    "@rollup/rollup-linux-x64-gnu": "4.61.0"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
-    "@types/jsdom": "28.0.1",
-    "@types/node": "25.6.0",
-    "@vitejs/plugin-vue": "6.0.6",
-    "@vitest/eslint-plugin": "1.6.16",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "25.9.1",
+    "@vitejs/plugin-vue": "6.0.7",
+    "@vitest/eslint-plugin": "1.6.19",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.7.0",
-    "@vue/test-utils": "2.4.9",
+    "@vue/test-utils": "2.4.10",
     "@vue/tsconfig": "0.9.1",
     "core-js": "3.49.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "17.24.0",
+    "eslint-plugin-n": "18.0.1",
     "eslint-plugin-promise": "7.3.0",
-    "eslint-plugin-vue": "10.9.0",
+    "eslint-plugin-vue": "10.9.1",
     "eslint": "9.39.4",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
     "jsdom": "29.1.1",
     "npm-run-all": "4.1.5",
-    "sass": "1.99.0",
+    "sass": "1.100.0",
     "stylelint-config-sass-guidelines": "13.0.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "40.0.0",
     "stylelint-order": "8.1.1",
-    "stylelint-scss": "7.0.0",
+    "stylelint-scss": "7.1.1",
     "typescript": "6.0.3",
-    "vite": "8.0.10",
-    "vitest": "4.1.5",
-    "vue-tsc": "3.2.7",
-    "vue": "3.5.33"
+    "vite": "8.0.16",
+    "vitest": "4.1.8",
+    "vue-tsc": "3.3.3",
+    "vue": "3.5.35"
   },
   "overrides": {
     "glob": "^13"

package/src/components/ClButton/style.scss

@@ -52,18 +52,21 @@
     background-color: $color-ci-sea;
     border-color: $color-ci-sea;
     color: $color-ci-eggshell;
+    outline-color: var(--cl-color-eggshell) !important;
   }
 
   &.cl-color-secondary {
     background-color: var(--cl-color-text);
     border-color: var(--cl-color-text);
     color: var(--cl-color-text-inverted);
+    outline-color: var(--cl-color-text-inverted) !important;
   }
 
   &.cl-color-tertiary {
     background-color: transparent;
     border-color: var(--cl-color-text);
     color: var(--cl-color-text);
+    outline-color: var(--cl-color-text) !important;
   }
 }
 

package/src/components/form/ClFieldGroup/style.scss

@@ -5,14 +5,11 @@
     align-items: center;
     display: flex;
 
-    > .btn:not(:last-child) {
+    > :not(.form-control, .input-group-text, :last-child) {
       margin-right: $spacing-tiny;
     }
 
-    input + .btn,
-    select + .btn,
-    .invalid-feedback + .btn,
-    .valid-feedback + .btn {
+    > :not(.form-control, .input-group-text, :first-child) {
       margin-left: $spacing-tiny;
     }
 
@@ -31,19 +28,6 @@
       &:focus {
         z-index: 1; // needed so the focused element's border is always on top
       }
-
-      @include media-breakpoint-up(sm) {
-        &:not(.btn) + * {
-          // trick to share one ][ border between 2 inputs
-          &:not(.btn) {
-            border-left-width: 0;
-          }
-
-          &:not(:focus, :focus-visible).invalid {
-            box-shadow: -$brand-line-width 0 0 $color-error !important; // sass-lint:disable-line no-important
-          }
-        }
-      }
     }
 
     .invalid-feedback,
@@ -104,53 +88,42 @@
     }
 
     @include media-breakpoint-up(sm) {
-      > .input-group-text,
-      > .form-control {
-        border-radius: 0;
-
-        &:first-of-type {
-          border-bottom-left-radius: $brand-border-radius;
-          border-top-left-radius: $brand-border-radius;
+      > .form-control,
+      > .input-group-text {
+        &:has(+ .form-control),
+        &:has(+ p + .form-control),
+        &:has(+ p + p + .form-control),
+        &:has(+ .input-group-text) {
+          border-bottom-right-radius: 0;
+          border-right-color: $color-ci-clay;
+          border-top-right-radius: 0;
         }
 
-        &:last-of-type {
-          border-bottom-right-radius: $brand-border-radius;
-          border-top-right-radius: $brand-border-radius;
+        + .input-group-text,
+        + p + .form-control,
+        + p + p + .form-control,
+        + .form-control {
+          border-bottom-left-radius: 0;
+          border-left-width: 0; // trick to share one ][ border between 2 inputs
+          border-top-left-radius: 0;
         }
-      }
-
-      .input-group-text + .form-control,
-      .form-control + .form-control,
-      .form-control + p + .form-control,
-      .form-control + p + p + .form-control {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-      }
 
-      .input-group-text:has(+ .form-control),
-      .form-control:has(+ .form-control),
-      .form-control:has(+ p + .form-control),
-      .form-control:has(+ p + p + .form-control) {
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-
-        &:not(.btn) {
-          border-right-color: $color-ci-clay;
+        &:has(+ .form-control.invalid),
+        &:has(+ .form-control[invalid]),
+        &:has(+ p + .form-control.invalid),
+        &:has(+ p + .form-control[invalid]),
+        &:has(+ p + p + .form-control.invalid),
+        &:has(+ p + p + .form-control[invalid]) {
+          border-right-color: $color-error;
+        }
 
-          &:has(+ :focus),
-          &:has(+ :focus-visible),
-          &:has(+ p + :focus),
-          &:has(+ p + :focus-visible),
-          &:has(+ p + p + :focus),
-          &:has(+ p + p + :focus-visible),
-          &:has(+ .invalid:focus),
-          &:has(+ [invalid]:focus-visible),
-          &:has(+ p + .invalid:focus),
-          &:has(+ p + [invalid]:focus-visible),
-          &:has(+ p + p + .invalid:focus),
-          &:has(+ p + p + [invalid]:focus-visible) {
-            border-right-color: $color-focus !important;
-          }
+        &:has(+ .form-control:focus),
+        &:has(+ .form-control:focus-visible),
+        &:has(+ p + .form-control:focus),
+        &:has(+ p + .form-control:focus-visible),
+        &:has(+ p + p + .form-control:focus),
+        &:has(+ p + p + .form-control:focus-visible) {
+          border-right-color: $color-focus !important;
         }
       }
     }

package/src/styles/abstracts/button.scss

@@ -55,33 +55,8 @@
     color: var(--cl-color-text);
   }
 
-  // our focus (tab'ed) buttons look the same but are outlined
-  .btn-check:focus-visible + &,
-  &:focus-visible {
-    background-color: var(--cl-color-background);
-    border-color: var(--cl-color-border);
-    color: var(--cl-color-text);
-  }
-
-  // our active (mouse-down) buttons invert background & text color
-  &:active,
-  &.active,
-  .show > &.dropdown-toggle {
-    // .dropdown-toggle is for topnav
-    background-color: var(--cl-color-background) !important;
-    border-color: var(--cl-color-border) !important;
-    color: var(--cl-color-text) !important;
-    outline: 0 !important;
-
-    &.cl-color-transparent {
-      background-color: $color-ci-eggshell;
-      border-color: $color-ci-eggshell;
-      color: $color-ci-night;
-    }
-  }
-
   &:hover:active {
-    opacity: var(--cl-opacity-active) !important;
+    opacity: var(--cl-opacity-active);
   }
 
   @if $defaultColors == true {

package/src/styles/abstracts/color.scss

@@ -58,14 +58,14 @@ $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different co
 $color-line: $color-ci-clay;
 $color-opacity-active: 0.8;
 
-@mixin cl-color-focus-outline-raw($color: var(--cl-color-focus), $offset: -3px) {
+@mixin cl-color-focus-outline-raw($color: var(--cl-color-text), $offset: -3px) {
   box-shadow: none; // disable BS outlines
   outline: 1px dashed $color;
   outline-offset: $offset;
   z-index: 100;
 }
 
-@mixin cl-color-focus-outline($color: var(--cl-color-focus), $offset: -3px) {
+@mixin cl-color-focus-outline($color: var(--cl-color-text), $offset: -3px) {
   &:focus-visible {
     @include cl-color-focus-outline-raw($color, $offset);
   }

package/src/styles/abstracts/typography.scss

@@ -118,9 +118,10 @@ $typography-monospace-line-height: 1.375;
 @mixin cl-btn-a($line-height-px) {
   // button styled as regular link
   @extend %cl-a;
+  @include cl-color-focus-outline(var(--cl-color-text), 2px);
 
   #{'--cl-color-text'}: inherit !important;
-  background-color: transparent;
+  background-color: transparent !important;
   background-position: left bottom 0.25em; // depends on underline
   background-repeat: no-repeat;
   background-size: 100% 1px;
@@ -133,29 +134,27 @@ $typography-monospace-line-height: 1.375;
   margin: 0;
   min-width: inherit;
   outline: inherit;
-  outline-offset: -2px;
+  outline-offset: 2px !important;
   padding: 0;
   text-align: inherit;
   vertical-align: inherit;
 
   &:focus-visible {
-    color: var(--cl-color-link);
+    color: var(--cl-color-text);
   }
 
   &:hover {
-    background-color: transparent;
     color: var(--cl-color-hover);
     opacity: inherit;
   }
 
   &:active {
-    background-color: transparent;
-    color: var(--cl-color-hover);
+    background-color: transparent !important;
+    color: var(--cl-color-hover) !important;
   }
 
   &.disabled,
   &:disabled {
-    background-color: transparent;
     color: var(--cl-color-text);
     cursor: text;
     text-decoration: none;

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.21.1';
+  #{'--cl-version'}: 'v7.21.2';
 }

package/src/styles/vendors/bootstrap.scss

@@ -15,7 +15,6 @@ p {
 }
 
 @import 'bootstrap/scss/bootstrap-grid';
-@import 'bootstrap/scss/buttons';
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/forms/form-check';
 @import 'bootstrap/scss/forms/form-select';