@castlabs/ui 7.22.0 → 7.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.22.0",
+  "version": "7.23.1",
   "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.61.0"
+    "@rollup/rollup-linux-x64-gnu": "4.62.0"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
     "@types/jsdom": "28.0.3",
-    "@types/node": "25.9.1",
+    "@types/node": "26.0.0",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/eslint-plugin": "1.6.19",
+    "@vitest/eslint-plugin": "1.6.20",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/eslint-config-typescript": "14.7.0",
-    "@vue/test-utils": "2.4.10",
+    "@vue/eslint-config-typescript": "14.8.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.0.1",
+    "eslint-plugin-n": "18.1.0",
     "eslint-plugin-promise": "7.3.0",
-    "eslint-plugin-vue": "10.9.1",
+    "eslint-plugin-vue": "10.9.2",
     "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.100.0",
+    "sass": "1.101.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.1.1",
+    "stylelint-scss": "7.2.0",
     "typescript": "6.0.3",
     "vite": "8.0.16",
-    "vitest": "4.1.8",
-    "vue-tsc": "3.3.3",
-    "vue": "3.5.35"
+    "vitest": "4.1.9",
+    "vue-tsc": "3.3.5",
+    "vue": "3.5.38"
   },
   "overrides": {
     "glob": "^13"

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

@@ -15,8 +15,8 @@
 
     > [type='range'] {
       border-radius: $brand-border-radius !important;
-      margin-bottom: $spacing-tiny;
-      margin-top: $spacing-tiny;
+      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;
@@ -31,6 +31,19 @@
       margin-left: $spacing-small;
     }
 
+    > .cl-btn-quickaction {
+      &.disabled,
+      &:disabled {
+        opacity: 0.5;
+        visibility: visible; // always visible
+
+        &:hover {
+          color: $color-ci-steel;
+          cursor: not-allowed;
+        }
+      }
+    }
+
     > .btn {
       flex-shrink: 0;
     }

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

@@ -136,5 +136,18 @@
     &:focus-visible {
       @include cl-color-focus-outline(var(--cl-color-focus), 2px);
     }
+
+    &:disabled,
+    &.disabled {
+      background: $color-bar;
+
+      &::-webkit-slider-thumb {
+        background: $color-ci-steel;
+      }
+
+      &::-moz-range-thumb {
+        background: $color-ci-steel;
+      }
+    }
   }
 }

package/src/components/table/ClTable/style.scss

@@ -19,11 +19,15 @@
   text-wrap: nowrap;
   width: fit-content;
 
-  th,
-  td {
+  th {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  td {
+    overflow: hidden;
+    text-overflow: '...';
+  }
 }
 
 .cl-table-data {

package/src/components/table/ClTableCel/Code/style.scss

@@ -12,6 +12,8 @@
       80%
     );
 
+    text-overflow: ellipsis;
+
     @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         width: 100%;

package/src/components/table/ClTableCel/Currency/style.scss

@@ -15,6 +15,7 @@
 
       overflow-wrap: unset;
       text-align: end;
+      text-overflow: ellipsis;
     }
   }
 }

package/src/components/table/ClTableCel/ID/style.scss

@@ -13,6 +13,7 @@
     );
 
     overflow-wrap: unset;
+    text-overflow: ellipsis;
     width: 2.5em;
 
     @include media-breakpoint-down($grid-table-responsive) {

package/src/components/table/ClTableCel/Links/style.scss

@@ -47,3 +47,7 @@
     }
   }
 }
+
+.cl-table-data.cl-table-fixed .cl-td-links {
+  background: var(--cl-color-background-haze);
+}

package/src/components/table/ClTableCel/Time/style.scss

@@ -12,5 +12,7 @@
         0.025em
       );
     }
+
+    text-overflow: ellipsis;
   }
 }

package/src/components/table/ClTableCel/style.variables.scss

@@ -31,11 +31,5 @@
       padding-bottom: $table-padding-vertical * 0.5;
       padding-top: $table-padding-vertical * 0.5;
     }
-
-    td,
-    th {
-      padding-left: $table-padding-horizontal * 0.5;
-      padding-right: $table-padding-horizontal * 0.5;
-    }
   }
 }

package/src/components/text/ClCopy/style.scss

@@ -15,9 +15,7 @@
     font-size: 0.75em;
   }
 
-  &:hover,
-  &:hover::after,
-  &:hover * {
+  &:hover::after {
     color: $color-hover;
     text-decoration-color: $color-hover;
     text-decoration-thickness: px(1);

package/src/styles/layout/helper.scss

@@ -20,13 +20,14 @@
   visibility: hidden !important;
 }
 
-.cl-cursor-pointer,
 .cl-cursor-link {
   cursor: pointer !important;
 }
 
-.cl-cursor-not-allowed {
-  cursor: not-allowed !important;
+@each $cursor in pointer, default, text, not-allowed, none {
+  .cl-cursor-#{$cursor} {
+    cursor: $cursor !important;
+  }
 }
 
 @each $transform in uppercase, lowercase, capitalize {

package/src/styles/layout/meta.scss

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

package/src/styles/themes/dark.scss

@@ -78,6 +78,17 @@ $cl-url-postfix: '' !default;
 
   .cl-form [type='range'] {
     background: $color-ci-steel;
+
+    &:disabled,
+    &.disabled {
+      &::-webkit-slider-thumb {
+        background: $color-ci-clay;
+      }
+
+      &::-moz-range-thumb {
+        background: $color-ci-clay;
+      }
+    }
   }
 
   .cl-form [type='checkbox'],

package/types/castlabs-ui.module.d.ts

@@ -17,9 +17,9 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
 
   export function clFormReset (id: string, fields?: any[]): void
   export function clFormFieldReset (ref: any, oldValue: any): void
-  export function clFormIsValid (id: string): boolean
-  export function clFormIsValidAsync (id: string): Promise<boolean>
-  export function clFormFieldFocusFirstInvalid (id: string): void
+  export function clFormIsValid (id: string, moreSelectors?: string[], triggerSelectors?: string[]): boolean
+  export function clFormIsValidAsync (id: string, moreSelectors?: string[], triggerSelectors?: string[]): Promise<boolean>
+  export function clFormFieldFocusFirstInvalid (id: string, moreSelectors?: string[]): void
   export function clFormAutofocus (id: string): void
 
   export function clFormatFilesize (bytes: number): string
@@ -43,20 +43,21 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
     order?: string,
     caseSensitive?: boolean
   ): object[]
-  export function clTableSorter (
+  export type ClTableSorter<Type> = {
+    col: number
+    order: 'ASC' | 'DESC' | 'NONE'
+    set: (col: number, order: string) => void
+    get: (col: number) => string
+    sorted: Type[]
+    sorter: () => any
+    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
+  }
+  export function clTableSorter<Type> (
     sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
     initialCol?: number,
     initialOrder?: string
-  ): any
-  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
-    col: number,
-    order: 'ASC' | 'DESC' | 'NONE',
-    set: (col: number, order: string) => void,
-    get: (col: number) => string,
-    sorted: Type[],
-    sorter: () => any,
-    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
-  }
+  ): ClTableSorter<Type>
+  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): ClTableSorter<Type>
   export function clDebounce (callback: any, ms?: number, key?: string): void
   export function clSanitizeId (id: string): string
 

package/types/index.d.ts

@@ -76,9 +76,9 @@ export function clFocus (selector?: string): void
 
 export function clFormReset (id: string, fields?: (typeof ClField | typeof ClFieldGroup)[]): void
 export function clFormFieldReset (ref: any, oldValue: any): void
-export function clFormIsValid (id: string): boolean
-export function clFormIsValidAsync (id: string): Promise<boolean>
-export function clFormFieldFocusFirstInvalid (id: string): void
+export function clFormIsValid (id: string, moreSelectors?: string[], triggerSelectors?: string[]): boolean
+export function clFormIsValidAsync (id: string, moreSelectors?: string[], triggerSelectors?: string[]): Promise<boolean>
+export function clFormFieldFocusFirstInvalid (id: string, moreSelectors?: string[]): void
 export function clFormAutofocus (id: string): void
 
 export function clFormatFilesize (bytes: number): string
@@ -102,20 +102,26 @@ export function clSort (
   order?: string,
   caseSensitive?: boolean
 ): object[]
-export function clTableSorter (
-  sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
-  initialCol?: number,
-  initialOrder?: string
-): any
-export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
+export type ClTableSorter<Type> = {
   col: number
   order: 'ASC' | 'DESC' | 'NONE'
   set: (col: number, order: string) => void
   get: (col: number) => string
   sorted: Type[]
-  sorter: () => any
+  sorter: (col: number, order: string) => {
+    sorted: Type[]
+    sortOrder: 'ASC' | 'DESC' | 'NONE'
+  }
   sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
 }
+
+export function clTableSorter<Type> (
+  sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
+  initialCol?: number,
+  initialOrder?: string
+): ClTableSorter<Type>
+
+export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): ClTableSorter<Type>
 export function clDebounce (callback: any, ms?: number, key?: string): void
 export function clSanitizeId (id: string): string
 

package/dist/select-disabled-dark.1065ea4c.svg

@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>