@castlabs/ui 7.23.1 → 7.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.23.1",
+  "version": "7.24.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,23 +42,23 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.62.0"
+    "@rollup/rollup-linux-x64-gnu": "4.62.2"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
     "@types/jsdom": "28.0.3",
-    "@types/node": "26.0.0",
+    "@types/node": "26.1.0",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/eslint-plugin": "1.6.20",
+    "@vitest/eslint-plugin": "1.6.21",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/eslint-config-typescript": "14.8.0",
+    "@vue/eslint-config-typescript": "14.9.0",
     "@vue/test-utils": "2.4.11",
     "@vue/tsconfig": "0.9.1",
     "core-js": "3.49.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "18.1.0",
+    "eslint-plugin-n": "18.2.1",
     "eslint-plugin-promise": "7.3.0",
     "eslint-plugin-vue": "10.9.2",
     "eslint": "9.39.4",
@@ -74,10 +74,10 @@
     "stylelint-order": "8.1.1",
     "stylelint-scss": "7.2.0",
     "typescript": "6.0.3",
-    "vite": "8.0.16",
-    "vitest": "4.1.9",
-    "vue-tsc": "3.3.5",
-    "vue": "3.5.38"
+    "vite": "8.1.3",
+    "vitest": "4.1.10",
+    "vue-tsc": "3.3.6",
+    "vue": "3.5.39"
   },
   "overrides": {
     "glob": "^13"

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

@@ -3,7 +3,7 @@
 /// @access public
 ////
 
-// This file defines castlabs' checkboxes and radio buttons
+// This file defines castlabs' checkboxes buttons
 
 $cl-url-prefix: '' !default;
 $cl-url-postfix: '' !default;
@@ -64,28 +64,6 @@ $form-check-background: $color-ci-eggshell;
       }
     }
 
-    &[type='radio'] {
-      background-color: $color-empty;
-      border: $form-field-border;
-      margin-top: 0.2em;
-
-      &:checked {
-        background-color: $color-checked;
-        background-image: none; // remove BS dot
-        border-color: $color-checked;
-
-        &.disabled,
-        &:disabled {
-          border-color: $color-disabled;
-        }
-      }
-
-      &:disabled,
-      &.disabled {
-        background-color: $color-ci-haze;
-      }
-    }
-
     &:focus-visible {
       @include cl-color-focus-outline(var(--cl-color-text), 2px);
     }

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

@@ -0,0 +1,15 @@
+////
+/// @group components
+/// @access public
+////
+
+.cl-field-datetime-companion {
+  border: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 0;
+}

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

@@ -5,30 +5,18 @@
     align-items: center;
     display: flex;
 
-    > :not(.form-control, .input-group-text, :last-child) {
-      margin-right: $spacing-tiny;
-    }
+    > * {
+      margin-left: $spacing-small;
 
-    > :not(.form-control, .input-group-text, :first-child) {
-      margin-left: $spacing-tiny;
+      &:first-child {
+        margin-left: 0;
+      }
     }
 
     > [type='range'] {
       border-radius: $brand-border-radius !important;
       margin-bottom: $spacing-tiny - px(1); // shift a bit to align with -/+ icons
       margin-top: $spacing-tiny + px(1);
-
-      + [type='range'] {
-        margin-left: $spacing-tiny;
-      }
-
-      &:has(+ [type='range']) {
-        margin-right: $spacing-tiny;
-      }
-    }
-
-    > :not(.cl-btn-quickaction) + .cl-btn-quickaction {
-      margin-left: $spacing-small;
     }
 
     > .cl-btn-quickaction {
@@ -121,6 +109,7 @@
             border-bottom-left-radius: 0;
             border-left-width: 0; // trick to share one ][ border between 2 inputs
             border-top-left-radius: 0;
+            margin-left: 0;
           }
 
           &:has(+ .form-control.invalid),
@@ -147,6 +136,7 @@
         flex-direction: column;
 
         > * {
+          margin-left: 0 !important;
           width: 100% !important;
 
           &:not(:first-child) {
@@ -155,7 +145,6 @@
 
           &.btn {
             font-size: 0.75em;
-            margin-left: 0 !important;
           }
         }
       }

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

@@ -0,0 +1,39 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' radio buttons
+
+@use '../../../styles/global' as *;
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
+
+.form-check {
+  .form-check-input {
+    $color-empty: var(--cl-color-input-background);
+    $color-checked: var(--cl-color-text);
+
+    &[type='radio'] {
+      background-color: $color-empty;
+      border: $form-field-border;
+      margin-top: 0.2em;
+
+      &:checked {
+        background-color: $color-checked;
+        background-image: none; // remove BS dot
+        border-color: $color-checked;
+
+        &.disabled,
+        &:disabled {
+          border-color: $color-disabled;
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        background-color: $color-ci-haze;
+      }
+    }
+  }
+}

package/src/styles/layout/meta.scss

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

package/src/styles/ui.scss

@@ -62,9 +62,11 @@ $castlabs-ui-asset-postfix: '' !default;
   $cl-url-prefix: $castlabs-ui-asset-prefix,
   $cl-url-postfix: $castlabs-ui-asset-postfix
 );
+@use '../components/form/ClFieldDateTime/style' as *;
 @use '../components/form/ClFieldFile/style' as *;
 @use '../components/form/ClFieldGroup/style' as *;
 @use '../components/form/ClFieldInput/style' as *;
+@use '../components/form/ClFieldRadio/style' as *;
 @use '../components/form/ClFieldSelect/style' as * with (
   $cl-url-prefix: $castlabs-ui-asset-prefix,
   $cl-url-postfix: $castlabs-ui-asset-postfix

package/types/index.d.ts

@@ -11,7 +11,9 @@ export const ClCookieBanner: DefineComponent
 export const ClDropzone: DefineComponent
 export const ClField: DefineComponent
 export const ClFieldCheck: DefineComponent
+export const ClFieldDateTime: DefineComponent
 export const ClFieldGroup: DefineComponent
+export const ClFieldRadio: DefineComponent
 export const ClIconotron: DefineComponent
 export const ClInfo: DefineComponent
 export const ClMockRouterLink: DefineComponent