@castlabs/ui 7.13.0 → 7.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.13.0",
+  "version": "7.15.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,41 +42,41 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.57.0"
+    "@rollup/rollup-linux-x64-gnu": "4.59.0"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
-    "@types/jsdom": "27.0.0",
-    "@types/node": "24.10.1",
-    "@vitejs/plugin-vue": "6.0.3",
-    "@vitest/eslint-plugin": "1.6.6",
+    "@types/jsdom": "28.0.0",
+    "@types/node": "25.3.0",
+    "@vitejs/plugin-vue": "6.0.4",
+    "@vitest/eslint-plugin": "1.6.9",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/eslint-config-typescript": "14.6.0",
+    "@vue/eslint-config-typescript": "14.7.0",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.8.1",
     "core-js": "3.48.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "17.23.2",
+    "eslint-plugin-n": "17.24.0",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.7.0",
+    "eslint-plugin-vue": "10.8.0",
     "eslint": "9.39.2",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
-    "jsdom": "27.4.0",
+    "jsdom": "28.1.0",
     "npm-run-all": "4.1.5",
     "sass": "1.97.3",
-    "stylelint-config-sass-guidelines": "12.1.0",
+    "stylelint-config-sass-guidelines": "13.0.0",
     "stylelint-config-standard-vue": "1.0.0",
-    "stylelint-config-standard": "39.0.1",
+    "stylelint-config-standard": "40.0.0",
     "stylelint-order": "7.0.1",
     "stylelint-scss": "7.0.0",
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.18",
-    "vue-tsc": "3.2.4",
-    "vue": "3.5.27"
+    "vue-tsc": "3.2.5",
+    "vue": "3.5.29"
   }
 }

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

@@ -7,6 +7,12 @@
 
 @use '../../styles/global' as *;
 
+%cl-list-tight {
+  li {
+    margin-top: $spacing-tiny;
+  }
+}
+
 %cl-list {
   @include cl-accent;
 
@@ -32,6 +38,10 @@
     }
   }
 
+  &.cl-tight {
+    @extend %cl-list-tight;
+  }
+
   &.cl-list-none {
     margin-left: 0;
 

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

@@ -410,6 +410,12 @@ $sidenav-color-text-minor: $color-ci-ash;
       padding: $spacing-tiny $spacing-small;
       position: relative;
 
+      @include media-breakpoint-up(md) {
+        // reduce nav item heigt a bit on larger screens
+        padding-bottom: $spacing-tiny - px(1);
+        padding-top: $spacing-tiny - px(1);
+      }
+
       &::after {
         // we use a block item, not a border, so content does not jump
         background-color: $color-ci-red;
@@ -430,6 +436,13 @@ $sidenav-color-text-minor: $color-ci-ash;
     }
   }
 
+  @for $depth from 1 through 5 {
+    .cl-nav-item-level-#{$depth},
+    .cl-nav-item-level-#{$depth}.active {
+      padding-left: $spacing-small * $depth;
+    }
+  }
+
   .cl-dropdown {
     // service drawer
     #{'--cl-color-text'}: $color-ci-eggshell;

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

@@ -66,7 +66,8 @@ $sidenav-z-index: $layer-z-sidenav;
     span {
       &:not(:first-child) {
         &::before {
-          content: ' › ';
+          color: $color-ci-clay;
+          content: ' / ';
         }
 
         @include media-breakpoint-down(sm) {

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

@@ -0,0 +1,10 @@
+@use '../../../styles/global' as *;
+
+.cl-section-details {
+  #{'--cl-color-code'}: $color-ci-steel;
+  #{'--cl-color-text'}: $color-ci-steel;
+
+  .col-12 {
+    margin-top: 0 !important;
+  }
+}

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

@@ -1,10 +1,13 @@
 @use '../../../../styles/global' as *;
 
 .cl-table-data {
+  $bg-color: var(--cl-color-background);
+  $bg: linear-gradient(90deg, transparent 0, $bg-color $spacing-tiny, $bg-color 100%);
+
   .cl-th-links {
     @extend %cl-p-label;
 
-    background-color: transparent;
+    background: $bg;
     position: sticky;
     right: 0;
     text-align: end;
@@ -17,15 +20,12 @@
   }
 
   .cl-td-links {
+    background: $bg;
     overflow-wrap: unset;
     position: sticky;
     right: 0;
     white-space: nowrap;
 
-    // a {
-    //   @extend %cl-a-text;
-    // }
-
     :not(:first-child) {
       margin-left: $spacing-tiny;
 

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

@@ -25,4 +25,17 @@
   td:not(:last-child) {
     border-right: $brand-line-width dotted var(--cl-color-line);
   }
+
+  &.cl-tight {
+    td {
+      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/widget/ClCookieBanner/style.scss

@@ -1,7 +1,7 @@
 @use '../../../styles/global' as *;
 
 .cl-cookie-banner {
-  bottom: $spacing-large;
+  bottom: $spacing-large + $spacing-small;
   // box-shadow: 1px 1px 2px 1px $color-black-25a;
   left: 50%;
   opacity: 1;

package/src/components/widget/ClPage/style.scss

@@ -11,3 +11,58 @@
     margin: 0;
   }
 }
+
+// --- .cl-page-fullscreen variant ---------------------------------------------
+
+.cl-page-fullscreen {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - $header-nav-height);
+  overflow: hidden; // no scrolling
+
+  main:has(&) + footer {
+    // hide footer in .cl-page-fullscreen pages (but footer sits outside main)
+    display: none;
+  }
+
+  section:first-child {
+    flex: 0 0 auto;
+    margin-top: 0;
+  }
+
+  section:not(:first-child) {
+    flex: 1 1 auto;
+    margin-top: 0;
+    overflow-y: scroll;
+  }
+}
+
+.cl-section-fullscreen {
+  height: 100%;
+
+  .container,
+  .container-fluid,
+  .row,
+  .col-12,
+  .cl-table-scroll {
+    height: 100%;
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  table {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: scroll auto;
+  }
+
+  th {
+    background: $color-ci-haze !important;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}

package/src/styles/abstracts/color.scss

@@ -210,6 +210,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-night;
+  #{'--cl-color-code'}: $color-ci-petrol;
   #{'--cl-color-disabled-background'}: $color-disabled;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-ci-eggshell;
@@ -244,6 +245,7 @@ $color-opacity-active: 0.8;
 %cl-color-text-light {
   // for backgrounds that require 'white' text
   #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-code'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
   #{'--cl-color-icon'}: $color-ci-eggshell;
   #{'--cl-color-input-background'}: transparent;
@@ -256,6 +258,7 @@ $color-opacity-active: 0.8;
 %cl-color-text-dark {
   // for backgrounds that require 'black' text
   #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-code'}: $color-ci-petrol;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-icon'}: $color-ci-night;
   #{'--cl-color-input-background'}: transparent;

package/src/styles/abstracts/responsive.scss

@@ -22,12 +22,20 @@ $grid-table-responsive: sm;
 
 @function breakpoint-min($breakpoint) {
   $min: map.get($grid-breakpoints, $breakpoint);
-  @return if($min != 0, $min, null);
+  @if $min != 0 {
+    @return $min;
+  } @else {
+    @return null;
+  }
 }
 
 @function breakpoint-max($breakpoint) {
   $max: map.get($grid-breakpoints, $breakpoint);
-  @return if($max and $max > 0, $max - 0.02, null);
+  @if max and $max > 0 {
+    @return $max - 0.02;
+  } @else {
+    @return null;
+  }
 }
 
 @function breakpoint-next($breakpoint, $breakpoint-names: map.keys($grid-breakpoints)) {
@@ -35,7 +43,11 @@ $grid-table-responsive: sm;
   @if not $n {
     @error 'breakpoint `#{$breakpoint}` not found in `#{$grid-breakpoints}`';
   }
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+  @if $n < length($breakpoint-names) {
+    @return nth($breakpoint-names, $n + 1);
+  } @else {
+    @return null;
+  }
 }
 
 @mixin media-breakpoint-up($breakpoint) {

package/src/styles/abstracts/typography.scss

@@ -487,14 +487,13 @@ $typography-responsive-scale: 0.8;
 %cl-p-pre-box {
   @extend %cl-p-pre;
 
-  border: $brand-line-width solid var(--cl-color-text);
+  background-color: $color-ci-haze;
   border-radius: $brand-border-radius;
-  clip-path: inset(-1px round 22px);
+  clip-path: inset(0 round $brand-border-radius);
   font-size: px(15);
   line-height: 1.4;
   margin-top: $spacing-small;
   padding: $spacing-small;
-  padding-bottom: 0.95rem; // fix for overlapping scrollbar/clip
 }
 
 %cl-p-tag {

package/src/styles/assets/logo.scss

@@ -16,9 +16,6 @@ $cl-url-postfix: '' !default;
   background-size: contain;
   display: inline-block;
   height: 1em * 2;
-  margin-bottom: -1em;
-  position: relative;
-  top: -0.4em;
   width: 2.95em * 2;
 }
 
@@ -29,9 +26,6 @@ $cl-url-postfix: '' !default;
   background-size: contain;
   display: inline-block;
   height: 1em * 2;
-  margin-bottom: -1em;
-  position: relative;
-  top: -0.4em;
   width: 2.95em * 2;
 }
 

package/src/styles/layout/meta.scss

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

package/src/styles/layout/typography.scss

@@ -193,7 +193,6 @@ main {
   // --- code & monospace --------------------------------------------------------
 
   kbd,
-  code,
   samp {
     @extend %cl-p-pre;
 
@@ -201,14 +200,24 @@ main {
   }
 
   code {
+    @extend %cl-p-pre;
+
+    color: var(--cl-color-text);
     margin-left: 0.1em;
     margin-right: 0.1em;
   }
 
+  p code,
+  li code {
+    color: var(--cl-color-code);
+  }
+
   pre {
     @extend %cl-p-pre-box;
     @include cl-color-focus-outline;
 
+    color: var(--cl-color-text);
+
     code {
       padding: 0;
     }

package/src/styles/ui.scss

@@ -75,6 +75,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/navigation/ClNavSide/ClNavSideMenu/style' as *;
 @use '../components/navigation/ClNavSide/style' as *;
 @use '../components/navigation/ClNavTop/style' as *;
+@use '../components/section/ClSectionDetails/style' as *;
 @use '../components/section/ClSectionForm/style' as *;
 @use '../components/section/ClSectionHeadline/style' as *;
 @use '../components/section/ClSectionMainSide/style' as *;

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

@@ -25,6 +25,7 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   export function clFormatDate (date: Date): string
   export function clFormatTimeUTC (date: Date): string
   export function clFormatDateTimeUTC (date: Date, seconds?: boolean): string
+  export function clFormatDateTimeTabularUTC (date: Date, year?:boolean, month?:boolean, day?:boolean, time?:boolean, seconds?:boolean): string
   export function clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
   export function clFormatPeriod (date: Date): string
   export function clFormatNumber (amount: number, decimalPlaces?: number): string

package/types/index.d.ts

@@ -1,8 +1,5 @@
 import type { App, DefineComponent } from 'vue'
 
-import * as CONST from '../src/utils/const'
-import * as CS from '../src/utils/cs'
-
 declare function install (Vue: App): void
 export default install
 
@@ -26,6 +23,7 @@ export const ClNavSide: DefineComponent
 export const ClNavTop: DefineComponent
 export const ClPage: DefineComponent
 export const ClPagination: DefineComponent
+export const ClSectionDetails: DefineComponent
 export const ClSectionForm: DefineComponent
 export const ClSectionHeadline: DefineComponent
 export const ClSectionMain: DefineComponent
@@ -85,6 +83,7 @@ export function clFormatFilesize (bytes: number): string
 export function clFormatDate (date: Date): string
 export function clFormatTimeUTC (date: Date): string
 export function clFormatDateTimeUTC (date: Date, seconds?: boolean): string
+export function clFormatDateTimeTabularUTC (date: Date, year?:boolean, month?:boolean, day?:boolean, time?:boolean, seconds?:boolean): string
 export function clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
 export function clFormatPeriod (date: Date): string
 export function clFormatNumber (amount: number, decimalPlaces?: number): string
@@ -253,7 +252,45 @@ export function csGetNav (
 export function csFilterMemberships (memberships: CsMembership[], rid?: string, sid?: string): CsMembership[]
 export function csGetAccountUrl(env: string): string
 
-// --- consts ----------------------------------------------------------------
+// --- utils/const.js ----------------------------------------------------------------
+
+export const CONST: {
+  COLOR: Record<string, string>
+  SPACING: Record<string, string>
+}
+
+// --- utils/cs.js ----------------------------------------------------------------
+
+type CsApp = {
+  id: string
+  subtitle: string
+  title: string
+  services: string[]
+  roles: string[]
+  urlManage: (env: string, oid: string) => string
+  urlPlan: (env: string, oid: string) => string
+  sidenav: boolean
+}
+
+type CsNavEntry = {
+  id: string
+  title: string
+  subtitle: string
+  url: string
+  locked: boolean,
+  disabled: boolean,
+  badge: string | undefined
+}
+
+export const CS: {
+  SERVICE: Record<string, string>
+  ROLE: Record<string, string>
+  STATE: Record<string, number | null>
+  LICENSE_STATE: Record<string, number | null>
+  PLAN: Record<string, number | null>
+  APPS: Record<string, CsApp>
+}
 
-export const CONST
-export const CS
+export function csGetNav (memberships: CsMembership[], oid: string, env: string): CsNavEntry[]
+export function csFilterMemberships (memberships: CsMembership[], rid: string, sid: string): CsMembership[]
+export function csGetAccountUrl (env: string): string