@castlabs/ui 5.4.4 → 5.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "5.4.4",
+  "version": "5.5.2",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for castLabs.",
@@ -41,26 +41,26 @@
     "simplebar": "6.3.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.40.0"
+    "@rollup/rollup-linux-x64-gnu": "4.40.1"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.1",
     "@types/jsdom": "21.1.7",
-    "@types/node": "22.14.1",
+    "@types/node": "22.15.3",
     "@vitejs/plugin-vue": "5.2.3",
-    "@vitest/eslint-plugin": "1.1.43",
+    "@vitest/eslint-plugin": "1.1.44",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.5.0",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.7.0",
-    "core-js": "3.41.0",
+    "core-js": "3.42.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "17.17.0",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.0.0",
-    "eslint": "9.25.1",
+    "eslint-plugin-vue": "10.1.0",
+    "eslint": "9.26.0",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.0",
@@ -73,7 +73,7 @@
     "stylelint-order": "7.0.0",
     "stylelint-scss": "6.11.1",
     "typescript": "5.8.3",
-    "vite": "6.3.2",
+    "vite": "6.3.4",
     "vitest": "3.1.2",
     "vue-tsc": "2.2.10",
     "vue": "3.5.13"

package/src/components/ClFooter/style.scss

@@ -15,7 +15,8 @@
   color: $footer-text-color;
   margin-top: 0;
 
-  .container {
+  .container,
+  .container-fluid {
     @extend %container-spacing-medium;
 
     padding-bottom: 0;

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

@@ -9,11 +9,13 @@
   // --- basic form layout -----------------------------------------------------
 
   // &.container,
-  .container {
+  .container,
+  .container-fluid {
     @extend %container-spacing-small;
   }
 
-  .container + * {
+  .container + *,
+  .container-fluid + * {
     margin-top: 0; // container already add bottom spacing
   }
 

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

@@ -19,11 +19,13 @@
     @include typography-links-invisible;
   }
 
-  > .container {
+  > .container,
+  > .container-fluid {
     padding: 0;
   }
 
-  > .container > .row > .col-12 {
+  > .container > .row > .col-12,
+  > .container-fluid > .row > .col-12 {
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -82,7 +84,8 @@
 
 .cl-nav-top-large {
   // cl-nav-top variant that as slightly bigger
-  > .container > .row > .col-12 {
+  > .container > .row > .col-12,
+  > .container-fluid > .row > .col-12 {
     height: 4rem;
   }
 

package/src/components/section/ClSectionHeadline/style.scss

@@ -28,6 +28,7 @@
   }
 
   .container,
+  .container-fluid,
   .row {
     min-height: px($height);
   }
@@ -42,6 +43,7 @@
     min-height: px($height);
 
     .container,
+    .container-fluid,
     .row {
       min-height: px($height);
     }

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

@@ -14,10 +14,26 @@
   overflow: auto hidden;
 }
 
+.cl-table-nowrap {
+  text-wrap: nowrap;
+  width: fit-content;
+
+  th,
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .cl-table-data {
   @extend %cl-table-data;
 }
 
+.cl-table-fixed {
+  table-layout: fixed;
+  width: min-content;
+}
+
 .cl-table-data-light {
   @extend %cl-table-data-light;
 }

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

@@ -129,16 +129,6 @@ $table-lineheight: 1.2em;
     top: -1px;
   }
 
-  // --- wrapping long columns -------------------------------------------------
-
-  @for $col from 1 through 16 {
-    &.cl-table-wrap-col#{$col} {
-      td:nth-child(#{$col}) {
-        word-wrap: anywhere;
-      }
-    }
-  }
-
   // --- responsive phone tables -----------------------------------------------
 
   @include media-breakpoint-down($table-responsive) {
@@ -166,6 +156,36 @@ $table-lineheight: 1.2em;
   }
 }
 
+// --- column modifiers --------------------------------------------------------
+
+@for $col from 1 through 32 {
+  .cl-table-wrap-col-#{$col} {
+    // deprecated
+    td:nth-child(#{$col}) {
+      word-wrap: anywhere;
+    }
+  }
+
+  .cl-table-col-#{$col}-wrap {
+    td:nth-child(#{$col}) {
+      word-wrap: anywhere;
+    }
+  }
+
+  .cl-table-col-#{$col}-nowrap {
+    td:nth-child(#{$col}) {
+      word-wrap: nowrap;
+    }
+  }
+
+  .cl-table-col-#{$col}-hide {
+    th:nth-child(#{$col}),
+    td:nth-child(#{$col}) {
+      display: none;
+    }
+  }
+}
+
 %cl-table-data-light {
   tbody {
     tr {
@@ -174,4 +194,12 @@ $table-lineheight: 1.2em;
       }
     }
   }
+
+  tr:nth-child(odd) .cl-td-links {
+    background-color: $color-ci-white;
+  }
+
+  tr:nth-child(even) .cl-td-links {
+    background-color: $color-ci-haze;
+  }
 }

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

@@ -2,7 +2,11 @@
   .cl-th-links {
     @extend %p-tiny;
 
+    background-color: $color-ci-white;
     font-weight: 700;
+    position: sticky;
+    right: 0;
+    text-align: end;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {
@@ -14,6 +18,8 @@
   .cl-td-links {
     @extend %cl-font-condensed;
 
+    position: sticky;
+    right: 0;
     white-space: nowrap;
     word-wrap: unset;
 
@@ -41,4 +47,12 @@
       }
     }
   }
+
+  tr:nth-child(even) .cl-td-links {
+    background-color: $color-ci-white;
+  }
+
+  tr:nth-child(odd) .cl-td-links {
+    background-color: $color-ci-haze;
+  }
 }

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

@@ -23,6 +23,10 @@
       top: -0.1em;
     }
   }
+
+  .fa-cog {
+    cursor: pointer;
+  }
 }
 
 .cl-table-data {

package/src/styles/layout/grid.scss

@@ -10,12 +10,14 @@
 
 // bootstrap uses a narrow container for sm, but we prefer full-width instead
 @include media-breakpoint-only(sm) {
-  .container {
+  .container,
+  .container-fluid {
     max-width: inherit;
   }
 }
 
-.container .container {
+.container .containe,
+.container-fluid .container {
   // nested containers should not limit themselves
   margin-left: 0;
   margin-right: 0;
@@ -57,7 +59,8 @@
 }
 
 // do pull out nested containers or their cel padding will indent them
-.container .container > .row {
+.container .container > .row,
+.container-fluid .container > .row {
   margin-left: -$spacing-tiny;
   margin-right: -$spacing-tiny;
 }

package/src/styles/layout/helper.scss

@@ -34,6 +34,12 @@ h6.cl-faded,
   }
 }
 
+@for $i from 0 through 512 {
+  .cl-width-#{$i * 32} {
+    width: px($i * 32);
+  }
+}
+
 .cl-text-start,
 .text-start {
   text-align: left;