@castlabs/ui 7.9.4 → 7.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.9.4",
+  "version": "7.11.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.53.3"
+    "@rollup/rollup-linux-x64-gnu": "4.57.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.2",
-    "@vitest/eslint-plugin": "1.4.3",
+    "@vitejs/plugin-vue": "6.0.3",
+    "@vitest/eslint-plugin": "1.6.6",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.6.0",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.8.1",
-    "core-js": "3.47.0",
+    "core-js": "3.48.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "17.23.1",
+    "eslint-plugin-n": "17.23.2",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.5.1",
-    "eslint": "9.39.1",
+    "eslint-plugin-vue": "10.7.0",
+    "eslint": "9.39.2",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
-    "jsdom": "27.2.0",
+    "jsdom": "27.4.0",
     "npm-run-all": "4.1.5",
-    "sass": "1.94.2",
+    "sass": "1.97.3",
     "stylelint-config-sass-guidelines": "12.1.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "39.0.1",
-    "stylelint-order": "7.0.0",
-    "stylelint-scss": "6.12.1",
+    "stylelint-order": "7.0.1",
+    "stylelint-scss": "7.0.0",
     "typescript": "5.9.3",
-    "vite": "7.2.4",
-    "vitest": "4.0.12",
-    "vue-tsc": "3.1.4",
-    "vue": "3.5.24"
+    "vite": "7.3.1",
+    "vitest": "4.0.18",
+    "vue-tsc": "3.2.4",
+    "vue": "3.5.27"
   }
 }

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

@@ -14,10 +14,6 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
   @include cl-colors-admin;
   @extend %cl-p-tag;
 
-  #{'--cl-color-background'}: $color-ci-steel;
-  #{'--cl-color-border'}: $color-ci-steel;
-  #{'--cl-color-text'}: $color-ci-eggshell;
-  #{'--cl-color-accent'}: $color-ci-eggshell;
   background-color: var(--cl-color-background);
   border: $brand-line-width solid var(--cl-color-border);
   border-radius: $brand-border-radius;
@@ -37,6 +33,20 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
     line-height: 0.75;
     margin-right: $spacing-micro;
   }
+
+  &.cl-color-transparent {
+    background-color: transparent;
+    border-color: var(--cl-color-text);
+    color: var(--cl-color-text);
+  }
+
+  &:not([class*='cl-color-']) {
+    // default badge color
+    #{'--cl-color-background'}: $color-ci-steel;
+    #{'--cl-color-border'}: $color-ci-steel;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-accent'}: $color-ci-eggshell;
+  }
 }
 
 %cl-badge-derived {

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

@@ -62,6 +62,30 @@
       width: auto;
     }
 
+    &:disabled,
+    &.disabled {
+      #{'--cl-color-text'}: $color-disabled;
+      #{'--cl-color-input-border'}: $color-disabled;
+      color: $color-disabled;
+
+      .form-label,
+      .valid-feedback,
+      + .valid-feedback,
+      + * + .valid-feedback,
+      .invalid-feedback,
+      + .invalid-feedback,
+      + * + .invalid-feedback {
+        color: $color-disabled;
+      }
+
+      textarea,
+      input,
+      select {
+        color: $color-disabled;
+        cursor: not-allowed;
+      }
+    }
+
     @include media-breakpoint-down(sm) {
       flex-direction: column;
 

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

@@ -17,37 +17,21 @@
 
     &:disabled,
     &.disabled {
-      opacity: 0.5;
-
-      // reset disabled element properties so fieldset-opacity does not disable twice
-      [type='text'],
-      [type='password'],
-      [type='url'],
-      [type='date'],
-      [type='email'],
-      [type='number'],
-      [type='date'],
-      [type='time'],
-      [type='datetime-local'],
-      textarea,
-      select {
-        @extend %form-field-box;
-        @extend %form-field-typography-sans;
-
-        cursor: not-allowed;
-      }
+      #{'--cl-color-input-border'}: $color-disabled;
+      #{'--cl-color-text'}: $color-disabled;
+      color: $color-disabled;
 
       .form-label,
       .valid-feedback,
-      .form-check .form-check-input:disabled ~ .form-check-label {
-        color: $color-text;
+      .invalid-feedback {
+        color: $color-disabled;
       }
 
-      [type='checkbox'],
-      [type='radio'] {
-        + label {
-          opacity: 0.5 !important;
-        }
+      textarea,
+      input,
+      select {
+        color: $color-disabled;
+        cursor: not-allowed;
       }
     }
   }

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

@@ -68,7 +68,80 @@ $sidenav-color-text-minor: $color-ci-ash;
     }
   }
 
+  .cl-nav-account {
+    #{'--cl-color-background'}: $color-ci-night;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
+    display: flex;
+    flex-direction: column;
+    font-size: px(16);
+    justify-content: center;
+    line-height: 1;
+    min-height: $header-nav-height;
+    overflow: hidden;
+    padding: $spacing-micro 0 $spacing-micro $spacing-small + $spacing-medium + $spacing-micro;
+    position: relative;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &::after {
+      // fade-out gradient
+      $bg: var(--cl-color-background);
+
+      background-image: linear-gradient(to right, transparent, $bg, $bg);
+      content: '';
+      display: block;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1rem;
+    }
+
+    &::before {
+      @include cl-fontawesome('\f2bd');
+
+      color: var(--cl-color-text);
+      font-size: px(22);
+      left: $spacing-small;
+      line-height: 1;
+      position: absolute;
+      top: px(12);
+    }
+
+    p {
+      font-weight: 500;
+      margin-top: 0.1em;
+    }
+
+    .cl-p-small {
+      color: $color-ci-clay;
+      letter-spacing: 0;
+      margin-top: -0.05em;
+      overflow-wrap: normal;
+      padding-left: 0.025em;
+      transform: scaleX(0.85);
+      transform-origin: left;
+    }
+
+    i {
+      #{'--cl-color-text'}: $color-ci-clay;
+      background-color: var(--cl-color-background);
+      box-shadow: 0 0 2px 6px var(--cl-color-background);
+      color: var(--cl-color-text);
+      font-size: 22px;
+      padding-right: $spacing-tiny;
+      position: absolute;
+      right: $spacing-tiny;
+      z-index: 1;
+    }
+  }
+
   .cl-nav-user {
+    // DEPRECATED
+
     // ------------------------------------------------------------
     @extend %cl-p-nav;
 
@@ -404,7 +477,8 @@ $sidenav-color-text-minor: $color-ci-ash;
 }
 
 .cl-nav-item-lock,
-.cl-nav-item-locked {
+.cl-nav-item-locked,
+.cl-nav-item-disabled {
   span:first-of-type::after {
     @include cl-fontawesome('\f023');
 
@@ -414,7 +488,8 @@ $sidenav-color-text-minor: $color-ci-ash;
   }
 }
 
-.cl-nav-item-locked {
+.cl-nav-item-locked, // legacy class
+.cl-nav-item-disabled {
   opacity: 0.5;
 
   &:hover {

package/src/styles/assets/logo.scss

@@ -18,7 +18,7 @@ $cl-url-postfix: '' !default;
   height: 1em * 2;
   margin-bottom: -1em;
   position: relative;
-  top: -0.5em;
+  top: -0.4em;
   width: 2.95em * 2;
 }
 
@@ -31,7 +31,7 @@ $cl-url-postfix: '' !default;
   height: 1em * 2;
   margin-bottom: -1em;
   position: relative;
-  top: -0.5em;
+  top: -0.4em;
   width: 2.95em * 2;
 }
 

package/src/styles/layout/color.scss

@@ -131,75 +131,75 @@ div {
 }
 
 .cl-color-text-red {
-  #{'--cl-color-text'}: $color-ci-red;
-  #{'--cl-color-link'}: $color-ci-red;
+  #{'--cl-color-text'}: $color-ci-red !important;
+  #{'--cl-color-link'}: $color-ci-red !important;
 }
 
 .cl-color-text-sky {
-  #{'--cl-color-text'}: $color-ci-sky;
-  #{'--cl-color-link'}: $color-ci-sky;
+  #{'--cl-color-text'}: $color-ci-sky !important;
+  #{'--cl-color-link'}: $color-ci-sky !important;
 }
 
 .cl-color-text-night {
-  #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-night !important;
+  #{'--cl-color-link'}: $color-ci-night !important;
 }
 
 .cl-color-text-eggshell {
-  #{'--cl-color-text'}: $color-ci-eggshell;
-  #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-text'}: $color-ci-eggshell !important;
+  #{'--cl-color-link'}: $color-ci-eggshell !important;
 }
 
 .cl-color-text-clay {
-  #{'--cl-color-text'}: $color-ci-clay;
+  #{'--cl-color-text'}: $color-ci-clay !important;
 }
 
 .cl-color-text-ash {
-  #{'--cl-color-text'}: $color-ci-ash;
-  #{'--cl-color-link'}: $color-ci-ash;
+  #{'--cl-color-text'}: $color-ci-ash !important;
+  #{'--cl-color-link'}: $color-ci-ash !important;
 }
 
 .cl-color-text-petrol {
-  #{'--cl-color-text'}: $color-ci-petrol;
-  #{'--cl-color-link'}: $color-ci-petrol;
+  #{'--cl-color-text'}: $color-ci-petrol !important;
+  #{'--cl-color-link'}: $color-ci-petrol !important;
 }
 
 .cl-color-text-berry {
-  #{'--cl-color-text'}: $color-ci-berry;
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-text'}: $color-ci-berry !important;
+  #{'--cl-color-link'}: $color-ci-berry !important;
 }
 
 .cl-color-text-none {
-  #{'--cl-color-text'}: transparent;
-  #{'--cl-color-link'}: transparent;
+  #{'--cl-color-text'}: transparent !important;
+  #{'--cl-color-link'}: transparent !important;
 }
 
 .cl-color-text-brick {
-  #{'--cl-color-text'}: $color-ci-brick;
-  #{'--cl-color-link'}: $color-ci-brick;
+  #{'--cl-color-text'}: $color-ci-brick !important;
+  #{'--cl-color-link'}: $color-ci-brick !important;
 }
 
 .cl-color-text-honey {
-  #{'--cl-color-text'}: $color-ci-honey;
-  #{'--cl-color-link'}: $color-ci-honey;
+  #{'--cl-color-text'}: $color-ci-honey !important;
+  #{'--cl-color-link'}: $color-ci-honey !important;
 }
 
 .cl-color-text-leaf {
-  #{'--cl-color-text'}: $color-ci-leaf;
-  #{'--cl-color-link'}: $color-ci-leaf;
+  #{'--cl-color-text'}: $color-ci-leaf !important;
+  #{'--cl-color-link'}: $color-ci-leaf !important;
 }
 
 .cl-color-text-sea {
-  #{'--cl-color-text'}: $color-ci-sea;
-  #{'--cl-color-link'}: $color-ci-sea;
+  #{'--cl-color-text'}: $color-ci-sea !important;
+  #{'--cl-color-link'}: $color-ci-sea !important;
 }
 
 .cl-color-text-orchid {
-  #{'--cl-color-text'}: $color-ci-orchid;
-  #{'--cl-color-link'}: $color-ci-orchid;
+  #{'--cl-color-text'}: $color-ci-orchid !important;
+  #{'--cl-color-link'}: $color-ci-orchid !important;
 }
 
 .cl-color-text-steel {
-  #{'--cl-color-text'}: $color-ci-steel;
-  #{'--cl-color-link'}: $color-ci-steel;
+  #{'--cl-color-text'}: $color-ci-steel !important;
+  #{'--cl-color-link'}: $color-ci-steel !important;
 }

package/src/styles/layout/meta.scss

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

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

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+// this contains general non-vue types
+
 declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   export function clScrollToId (id: string, smooth?: boolean): void
 
@@ -18,9 +20,6 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   export function clFormIsValidAsync (id: string): Promise<boolean>
   export function clFormFieldFocusFirstInvalid (id: string): void
   export function clFormAutofocus (id: string): void
-  export function clRefClField (ref: unknown): any
-  export function clRefClFieldGroup (ref: unknown): any
-  export function clRefHTMLElement (ref: unknown): HTMLElement
 
   export function clFormatFilesize (bytes: number): string
   export function clFormatDate (date: Date): string

package/types/index.d.ts

@@ -1,5 +1,8 @@
 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
 
@@ -77,9 +80,6 @@ export function clFormIsValid (id: string): boolean
 export function clFormIsValidAsync (id: string): Promise<boolean>
 export function clFormFieldFocusFirstInvalid (id: string): void
 export function clFormAutofocus (id: string): void
-export function clRefClField (ref: unknown): typeof ClField
-export function clRefClFieldGroup (ref: unknown): typeof ClFieldGroup
-export function clRefHTMLElement (ref: unknown): HTMLElement
 
 export function clFormatFilesize (bytes: number): string
 export function clFormatDate (date: Date): string
@@ -135,6 +135,13 @@ export function clReloadStore (component: any, forced?: any[], optional?: any[],
 
 export function clMatch (string: string, expression?: string, caseSensitive?: boolean): boolean
 
+// --- utils/vue ---------------------------------------------------------------
+
+export function clRefClField (ref: unknown): typeof ClField
+export function clRefClFieldGroup (ref: unknown): typeof ClFieldGroup
+export function clRefFocus (ref: unknown): void
+export function clRefHTMLElement (ref: unknown): HTMLElement
+
 // --- utils/vitest ------------------------------------------------------------
 
 export const FLECTIONS: RegExp[]
@@ -150,6 +157,7 @@ export type ClService = {
   subtitle: string
   title: string
   urlManage: (env?: string, oid?: string) => string
+  urlPlan: (env?: string, oid?: string) => string
   sidenav: boolean
 }
 export function clGetServices (): ClService[]
@@ -165,9 +173,87 @@ export const NAV: {
   VTK: ClService
 }
 
-// --- utils/const ----------------------------------------------------------------
+// --- Central Services -----------------------------------------------------------
+
+export type CsLicense = {
+  approval_date: string | null
+  created: string // ISO date
+  display_name: string
+  expires: string | null // ISO date
+  license_urn: string
+  plan: number | null
+  service: string
+  status: number
+  updated: string // ISO date
+  // attachments: object // not typed yet
+}
 
-export const CONST: {
-  COLOR: Record<string, string>
-  SPACING: Record<string, string>
+export type CsRole = {
+  display_name: string
+  role_urn: string
+  // attachments: object // not typed yet
+  // organization: not typed yet
 }
+
+export type CsOrganization = {
+  display_name: string
+  legacy_name?: string
+  licenses: CsLicense[]
+  members_count?: number
+  organization_urn: string
+  parent: string | null // urn
+  parent_display_name: string | null
+  suborgs_count?: number
+}
+
+export type CsMembership = {
+  display_name: string
+  membership_urn: string
+  organization: CsOrganization
+  roles: CsRole[]
+  status: number
+  // user_urn: string // not typed/used as duplicate
+}
+
+export type CsUserDetail = {
+  company: string
+  email: string
+  hubspot_contact_id?: string
+  machine_account?: boolean
+  name: string
+}
+
+export type CsUserinfo = {
+  active: boolean
+  email_verified: boolean
+  groups: string[]
+  memberships: CsMembership[]
+  mfa_enabled: boolean | null
+  profile: CsUserDetail
+  user_urn: string
+  // user_data: object | null // not typed yet
+}
+
+type ClSidenavEntry = {
+  id: string
+  title: string
+  subtitle: string | undefined
+  badge: string | undefined
+  url: string | undefined
+  locked: boolean
+  disabled: boolean
+}
+
+export function csGetNav (
+  memberships: CsMembership[],
+  oid: string,
+  env: string
+): ClSidenavEntry[]
+
+export function csFilterMemberships (memberships: CsMembership[], rid?: string, sid?: string): CsMembership[]
+export function csGetAccountUrl(env: string): string
+
+// --- consts ----------------------------------------------------------------
+
+export const CONST
+export const CS