@castlabs/ui 7.24.2 → 8.0.0

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.24.2",
-  "repository": "https://github.com/castlabs/ui-styleguide",
+  "version": "8.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/castlabs/ui-styleguide.git"
+  },
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
   "engines": {
-    "npm": ">=8.0.0"
+    "npm": ">=8.0.0",
+    "node": "^22.18.0 || >=24.12.0"
   },
   "scripts": {
     "build-lib": "vite build && npm run gulp dist",
     "build-only": "vite build",
     "package": "vite build && npm run gulp dist && npm pack",
-
     "test": "vitest run --environment jsdom --root tests/unit/",
     "test:unit": "vitest run --no-color --environment jsdom --root tests/unit/",
-
     "lint": "npm-run-all lint:stylelint lint:eslint lint:type-check",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint \"**/*.{css,scss}\" --ignore-path .gitignore",
     "lint:type-check": "vue-tsc --noEmit -p tsconfig.types.json",
-
     "fix": "npm-run-all fix:stylelint fix:prettier fix:eslint",
     "fix:eslint": "eslint . --fix",
     "fix:prettier": "prettier --write src/ tests/",
     "fix:stylelint": "stylelint \"**/*.{css,scss}\" --fix --ignore-path .gitignore",
-
     "gulp": "gulp"
   },
   "files": [
@@ -42,42 +42,43 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.62.2"
+    "@rollup/rollup-linux-x64-gnu": "4.62.3"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
-    "@tsconfig/node22": "22.0.5",
+    "@tsconfig/node24": "24.0.4",
     "@types/jsdom": "28.0.3",
-    "@types/node": "26.1.0",
-    "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/eslint-plugin": "1.6.21",
+    "@types/node": "26.1.2",
+    "@vitejs/plugin-vue": "6.0.8",
+    "@vitest/eslint-plugin": "1.6.24",
     "@vue/eslint-config-prettier": "10.2.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.2.1",
-    "eslint-plugin-promise": "7.3.0",
-    "eslint-plugin-vue": "10.9.2",
-    "eslint": "9.39.4",
+    "eslint": "10.8.0",
+    "eslint-plugin-n": "18.2.2",
+    "eslint-plugin-promise": "^7.3.0",
+    "eslint-plugin-vue": "10.10.0",
+    "gulp": "5.0.1",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
-    "gulp": "5.0.1",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.1",
     "npm-run-all": "4.1.5",
-    "sass": "1.101.0",
+    "prettier": "3.9.6",
+    "sass": "1.102.0",
     "stylelint-config-sass-guidelines": "13.0.0",
-    "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "40.0.0",
+    "stylelint-config-standard-vue": "1.0.0",
     "stylelint-order": "8.1.1",
     "stylelint-scss": "7.2.0",
     "typescript": "6.0.3",
-    "vite": "8.1.3",
+    "vite": "8.1.5",
     "vitest": "4.1.10",
-    "vue-tsc": "3.3.6",
-    "vue": "3.5.39"
+    "vue": "3.5.40",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "3.3.8"
   },
   "overrides": {
     "glob": "^13"

package/src/components/ClPagination/style.scss

@@ -45,7 +45,7 @@
       margin-left: $spacing-small;
     }
 
-    &.active {
+    &.active .page-link {
       @extend %cl-color-red;
 
       pointer-events: none;

package/src/components/ClToggle/style.scss

@@ -41,7 +41,7 @@
   }
 
   &:not(:checked) + .cl-badge {
-    background-color: transparent;
+    background-color: transparent !important;
     color: var(--cl-color-background);
     #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 

package/src/styles/abstracts/color.scss

@@ -217,20 +217,6 @@ $color-opacity-active: 0.8;
   }
 }
 
-/* @mixin cl-colors-named {
-  &.cl-color-primary {
-    @extend %cl-color-sea;
-  }
-
-  &.cl-color-secondary {
-    @extend %cl-color-night;
-  }
-
-  &.cl-color-tertiary {
-    @extend %cl-color-transparent;
-  }
-} */
-
 %cl-color-root {
   // default colors = outline-night
   #{'--cl-color-accent'}: $color-accent;
@@ -286,6 +272,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-text'}: $color-ci-eggshell;
   #{'--cl-color-text-inverted'}: $color-ci-night;
+  background-color: var(--cl-color-background);
 }
 
 %cl-color-text-dark {
@@ -300,6 +287,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-link'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-text-inverted'}: $color-ci-eggshell;
+  background-color: var(--cl-color-background);
 }
 
 %cl-color-red {

package/src/styles/layout/color.scss

@@ -92,76 +92,68 @@ div {
   }
 }
 
+@mixin cl-color-text($color) {
+  #{'--cl-color-text'}: $color !important;
+  #{'--cl-color-link'}: $color !important;
+  color: var(--cl-color-text) !important;
+}
+
 .cl-color-text-red {
-  #{'--cl-color-text'}: $color-ci-red !important;
-  #{'--cl-color-link'}: $color-ci-red !important;
+  @include cl-color-text($color-ci-red);
 }
 
 .cl-color-text-sky {
-  #{'--cl-color-text'}: $color-ci-sky !important;
-  #{'--cl-color-link'}: $color-ci-sky !important;
+  @include cl-color-text($color-ci-sky);
 }
 
 .cl-color-text-night {
-  #{'--cl-color-text'}: $color-ci-night !important;
-  #{'--cl-color-link'}: $color-ci-night !important;
+  @include cl-color-text($color-ci-night);
 }
 
 .cl-color-text-eggshell {
-  #{'--cl-color-text'}: $color-ci-eggshell !important;
-  #{'--cl-color-link'}: $color-ci-eggshell !important;
+  @include cl-color-text($color-ci-eggshell);
 }
 
 .cl-color-text-clay {
-  #{'--cl-color-text'}: $color-ci-clay !important;
+  @include cl-color-text($color-ci-clay);
 }
 
 .cl-color-text-ash {
-  #{'--cl-color-text'}: $color-ci-ash !important;
-  #{'--cl-color-link'}: $color-ci-ash !important;
+  @include cl-color-text($color-ci-ash);
 }
 
 .cl-color-text-petrol {
-  #{'--cl-color-text'}: $color-ci-petrol !important;
-  #{'--cl-color-link'}: $color-ci-petrol !important;
+  @include cl-color-text($color-ci-petrol);
 }
 
 .cl-color-text-berry {
-  #{'--cl-color-text'}: $color-ci-berry !important;
-  #{'--cl-color-link'}: $color-ci-berry !important;
+  @include cl-color-text($color-ci-berry);
 }
 
 .cl-color-text-none {
-  #{'--cl-color-text'}: transparent !important;
-  #{'--cl-color-link'}: transparent !important;
+  @include cl-color-text(transparent);
 }
 
 .cl-color-text-brick {
-  #{'--cl-color-text'}: $color-ci-brick !important;
-  #{'--cl-color-link'}: $color-ci-brick !important;
+  @include cl-color-text($color-ci-brick);
 }
 
 .cl-color-text-honey {
-  #{'--cl-color-text'}: $color-ci-honey !important;
-  #{'--cl-color-link'}: $color-ci-honey !important;
+  @include cl-color-text($color-ci-honey);
 }
 
 .cl-color-text-leaf {
-  #{'--cl-color-text'}: $color-ci-leaf !important;
-  #{'--cl-color-link'}: $color-ci-leaf !important;
+  @include cl-color-text($color-ci-leaf);
 }
 
 .cl-color-text-sea {
-  #{'--cl-color-text'}: $color-ci-sea !important;
-  #{'--cl-color-link'}: $color-ci-sea !important;
+  @include cl-color-text($color-ci-sea);
 }
 
 .cl-color-text-orchid {
-  #{'--cl-color-text'}: $color-ci-orchid !important;
-  #{'--cl-color-link'}: $color-ci-orchid !important;
+  @include cl-color-text($color-ci-orchid);
 }
 
 .cl-color-text-steel {
-  #{'--cl-color-text'}: $color-ci-steel !important;
-  #{'--cl-color-link'}: $color-ci-steel !important;
+  @include cl-color-text($color-ci-steel);
 }

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.24.2';
+  #{'--cl-version'}: 'v8.0.0';
 }

package/src/styles/ui.scss

@@ -104,7 +104,6 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/text/ClPlan/style' as *;
 @use '../components/text/ClRole/style' as *;
 @use '../components/widget/ClBackCancelOk/style' as *;
-@use '../components/widget/ClCookieBanner/style' as *;
 @use '../components/widget/ClPage/style' as *;
 
 @use 'themes/dark' as * with (

package/types/index.d.ts

@@ -7,7 +7,6 @@ export function clUi (Vue: App): void
 
 export const ClAlert: DefineComponent
 export const ClBackCancelOk: DefineComponent
-export const ClCookieBanner: DefineComponent
 export const ClDropzone: DefineComponent
 export const ClField: DefineComponent
 export const ClFieldCheck: DefineComponent

package/plugins/matomo/README.md

@@ -1,5 +0,0 @@
-# Matomo Integration
-
-This standalone plugin is based on [vue-matomo](https://github.com/AmazingDreams/vue-matomo) (MIT license).
-
-It is not used by @castlabs/ui itself, but provided for Vue child projects to use.

package/plugins/matomo/index.ts

@@ -1,93 +0,0 @@
-/**
- * Provide matomo integration without dependency to external package.
- */
-
-import VueMatomo from 'vue-matomo'
-import type { App } from 'vue'
-import type { Router, RouteLocationNormalized } from 'vue-router'
-
-export function setCookie (name: string, value: string, days = 365, path = '/') {
-  document.cookie = `${name}=${value}; max-age=${60 * 60 * 24 * days}; path=${path}; SameSite=Lax;`
-}
-
-export function getCookie (cname: string): string {
-  for (const cookie of document?.cookie?.split(/; */) ?? []) {
-    const [name, value] = cookie.split('=')
-    if (name === cname) return value ?? ''
-  }
-  return ''
-}
-
-function getPaq () {
-  // cast potentialy non-exsisting _paq for typescript
-  return (window as unknown as { _paq: (string | number)[][] })?._paq ?? []
-}
-
-export function hasCookieConsent (what: string): boolean {
-  const value = getCookie('cl_banner_nok')
-  for (const token of value.split('|')) {
-    if (token === `+${what}`) return true
-  }
-  return false
-}
-
-export function enableMatomo (record = false, env = 'PROD') {
-  // Enable detailed matomo tracking if user gave consent.
-  const _paq = getPaq()
-  if (hasCookieConsent('mtm') && getCookie('mtm_cookie_consent') === '') {
-    // make Matomo create cookie 'mtm_cookie_consent' to remember consent. ~13 months=9480 hours.
-    _paq.push(['rememberCookieConsentGiven', 9480])
-  }
-  if (record) trackPage(document?.title, window?.location?.pathname, env)
-}
-
-export function trackPage (title: string, path: string, env: string) {
-  // Instruct Matomo to do the actual page tracking.
-
-  let prettyPath = path
-  const urnRegexp = /urn:[a-zA-Z]+:[a-zA-Z]+:[a-fA-F0-9]{32}/g
-  const foundUrns = [...prettyPath.matchAll(urnRegexp)]
-  foundUrns.forEach(elem => {
-    prettyPath = prettyPath.replace(elem.toString(), (elem[0].split(':')[2] ?? '').toUpperCase())
-  })
-
-  const prettyTitle = `${window?.location?.hostname} / ${title.replace(/ *\|[^|]*$/, '')}${env === 'PROD' ? '' : env}`
-
-  const _paq = getPaq()
-  _paq.push(['setDocumentTitle', prettyTitle])
-  _paq.push(['setCustomUrl', prettyPath])
-  _paq.push(['trackPageView'])
-  _paq.push(['enableLinkTracking'])
-}
-
-function trackViaMatomo (to: RouteLocationNormalized, env: string) {
-  if (!to.meta.analyticsIgnore) {
-    // matomo settings
-    enableMatomo()
-    trackPage(to.meta.title as string, to.fullPath, env)
-  }
-}
-
-export default {
-  install: (app: App, router: Router, env = 'PROD', siteId = 1) => {
-    console.log('setup matomo', env, siteId)
-    app.use(VueMatomo, {
-      host: 'https://castlabs.matomo.cloud',
-      siteId: siteId,
-      enableLinkTracking: false,
-      requireConsent: false,
-      trackInitialView: false,
-      disableCookies: false,
-      requireCookieConsent: true,
-      enableHeartBeatTimer: true,
-      heartBeatTimerInterval: 15,
-      trackerFileName: 'matomo',
-      cookieDomain: '*.castlabs.com',
-      domains: ['*.castlabs.com']
-    })
-
-    router.afterEach((to: RouteLocationNormalized) => {
-      trackViaMatomo(to, env)
-    })
-  }
-}

package/plugins/matomo/vue-matomo.d.ts

@@ -1 +0,0 @@
-declare module 'vue-matomo'

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

@@ -1,48 +0,0 @@
-@use '../../../styles/global' as *;
-
-.cl-cookie-banner {
-  bottom: $spacing-large + $spacing-small;
-  // box-shadow: 1px 1px 2px 1px $color-black-25a;
-  left: 50%;
-  opacity: 1;
-  position: fixed;
-  transform: translate(-50%);
-  z-index: $layer-z-sidenav;
-
-  .btn {
-    display: inline !important; // sass-lint:disable-line no-important
-    width: 8rem !important; // sass-lint:disable-line no-important
-  }
-
-  .card-body {
-    padding: $spacing-small;
-  }
-
-  @include media-breakpoint-up(md) {
-    width: 640px;
-  }
-
-  @include media-breakpoint-down(md) {
-    width: calc(100% - $spacing-small);
-
-    .card-body {
-      padding-left: $spacing-small;
-      padding-right: $spacing-small;
-
-      .cl-spacing-box.text-center {
-        > * {
-          margin-left: $spacing-tiny;
-          margin-right: $spacing-tiny;
-        }
-      }
-    }
-  }
-
-  &.cl-fade-away {
-    opacity: 0;
-    transform: translate(-50%, $spacing-large);
-    transition:
-      transform 0.4s,
-      opacity 0.4s;
-  }
-}