🚀 v18

.changeset/chilly-feet-chew.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**angular**: explicitly set `standalone: true` for all components to improve modularity and compatibility

.changeset/fluffy-deer-fly.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': major
+---
+
+**testing**: removed deprecated `legacy` mixins.

.changeset/fluffy-moose-fly.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': major
+---
+
+**angular**: removed `ds-angular-legacy` to enable better tree-shaking support.

.changeset/great-deers-sin.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': major
+---
+
+**angular**: Replaced Observables for `BalBreakpointsService`, `BalOrientationService`, and `BalConfigService` with a reactive Signals-based solution. This improves simplicity, reduces maintenance effort, and enhances usability for developers.

.changeset/moody-colts-press.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': major
+---
+
+**vue**: dropped direct support for Vue due to low usage within the company

.changeset/neat-laws-matter.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**angular**: added support for Angular v19

.changeset/pretty-dots-refuse.md

@@ -0,0 +1,8 @@
+---
+'@baloise/ds-core': major
+---
+
+**css**: removed the deprecated `@baloise/ds-css` package. Please migrate to `@baloise/ds-styles`.
+
+Please check out the more detailed [Upgrade Guide to v18](https://design.baloise.dev/?path=/docs/development-upgrade-guides-updating-to-v18--documentation).
+

.changeset/rotten-bears-play.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**styles**: add compact style for native lists

.eslintrc.base.json

@@ -4,7 +4,7 @@
   "plugins": ["@nx"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
         "@nx/enforce-module-boundaries": [
           "error",

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -10,7 +10,7 @@ body:
 
         > The core team will screen the issues every thursday.
         > If it is a urgent(users in prod are blocked and there are no workarounds) bug needs to be checked before thursday,
-        > then please contact the Teams channel `Web, Frontend - Angular, React, Vue.js, HTML, CSS`.
+        > then please contact the Teams channel `Web, Frontend - Angular, React, HTML, CSS`.
   - type: textarea
     id: current-behavior
     attributes:

.github/workflows/actions/angular-setup/action.yml

@@ -52,12 +52,6 @@ runs:
         path: ./packages/angular/src
         filename: Angular.zip
 
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: angular-legacy
-        path: ./packages/angular-legacy/src
-        filename: AngularLegacy.zip
-
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: angular-module

.github/workflows/actions/build/action.yml

@@ -99,13 +99,6 @@ runs:
         output: packages/angular-module/src/AngularModule.zip
         paths: packages/angular-module/src/generated
 
-    - uses: ./.github/workflows/actions/upload-archive
-      if: inputs.build == 'true'
-      with:
-        name: angular-legacy
-        output: packages/angular-legacy/src/AngularLegacy.zip
-        paths: packages/angular-legacy/src/generated
-
     - uses: ./.github/workflows/actions/upload-archive
       if: inputs.build == 'true'
       with:

.github/workflows/continuous.yml

@@ -69,7 +69,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [v16, v17, v18]
+        apps: [v17, v18, v19]
     needs: [build]
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -44,6 +44,7 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.nx/workspace-data
 .stencil
 
 packages/core/icons
@@ -71,7 +72,6 @@ packages/devkit/src/**/*.d.ts
 
 libs/output-targets-angular/CHANGELOG.md
 libs/output-targets-react/CHANGELOG.md
-libs/output-targets-vue/CHANGELOG.md
 
 e2e/generated
 e2e/downloads
@@ -110,12 +110,10 @@ test/angular/*
 packages/brand-icons/CHANGELOG.md
 packages/devkit/CHANGELOG.md
 packages/angular-common/CHANGELOG.md
-packages/angular-legacy/CHANGELOG.md
 packages/angular-module/CHANGELOG.md
 packages/angular/CHANGELOG.md
 packages/react/CHANGELOG.md
 packages/table/CHANGELOG.md
-packages/vue/CHANGELOG.md
 packages/css/CHANGELOG.md
 packages/styles/CHANGELOG.md
 packages/favicons/CHANGELOG.md
@@ -127,20 +125,17 @@ packages/tokens/CHANGELOG.md
 libs/nx/CHANGELOG.md
 libs/output-targets-angular/CHANGELOG.md
 libs/output-targets-react/CHANGELOG.md
-libs/output-targets-vue/CHANGELOG.md
 docs/CHANGELOG.md
 e2e/CHANGELOG.md
 
 packages/core/README.md
 packages/brand-icons/README.md
 packages/devkit/README.md
 packages/angular-common/README.md
-packages/angular-legacy/README.md
 packages/angular-module/README.md
 packages/angular/README.md
 packages/react/README.md
 packages/table/README.md
-packages/vue/README.md
 packages/css/README.md
 packages/styles/README.md
 packages/favicons/README.md
@@ -152,20 +147,17 @@ packages/tokens/README.md
 libs/nx/README.md
 libs/output-targets-angular/README.md
 libs/output-targets-react/README.md
-libs/output-targets-vue/README.md
 docs/README.md
 e2e/README.md
 
 packages/core/LICENSE
 packages/brand-icons/LICENSE
 packages/devkit/LICENSE
 packages/angular-common/LICENSE
-packages/angular-legacy/LICENSE
 packages/angular-module/LICENSE
 packages/angular/LICENSE
 packages/react/LICENSE
 packages/table/LICENSE
-packages/vue/LICENSE
 packages/css/LICENSE
 packages/styles/LICENSE
 packages/favicons/LICENSE
@@ -177,6 +169,8 @@ packages/tokens/LICENSE
 libs/nx/LICENSE
 libs/output-targets-angular/LICENSE
 libs/output-targets-react/LICENSE
-libs/output-targets-vue/LICENSE
 docs/LICENSE
 e2e/LICENSE
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*

.prettierignore

@@ -35,3 +35,5 @@ e2e/cypress/downloads
 
 package-lock.json
 *.svg
+
+/.nx/workspace-data

CHANGELOG.md

@@ -162,6 +162,8 @@
 
 - Removed deprecated component `bal-datepicker` for performance reasons ( [#1514](/~https://github.com/baloise/design-system/pull/1514))
 
+Please check out the more detailed [Upgrade Guide to v17](https://design.baloise.dev/?path=/docs/development-upgrade-guides-updating-to-v17--documentation).
+
 ### Minor Changes
 
 - **list**: new bullet icon arrow down ( [#1515](/~https://github.com/baloise/design-system/pull/1515))

docs/.eslintrc.json

@@ -22,7 +22,6 @@
             "ignoredDependencies": [
               "@baloise/ds-brand-icons",
               "@baloise/ds-icons",
-              "@baloise/ds-css",
               "@baloise/ds-tokens",
               "react-dom",
               "js-beautify",

docs/.storybook/addons/framework/register.js

@@ -19,10 +19,6 @@ const AngularSVG = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/200
 </g>
 </svg>
 `
-
-const VueSVG = `<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
-`
-
 const ReactSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
   <title>React Logo</title>
   <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
@@ -41,18 +37,16 @@ const JavaScriptSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630
 const SvgIcons = {
   angular: AngularSVG,
   react: ReactSVG,
-  vue: VueSVG,
   html: JavaScriptSVG,
 }
 
 const labels = {
   angular: 'Angular',
   html: 'HTML & JS',
   react: 'React',
-  vue: 'Vue.js',
 }
 
-const frameworks = ['angular', 'html', 'react', 'vue']
+const frameworks = ['angular', 'html', 'react']
 
 const LOCAL_STORE_ID = 'bal-docs-framework'
 
@@ -154,14 +148,6 @@ addons.register('my/framework', () => {
                     <div className="my-framework__button__icon" dangerouslySetInnerHTML={{ __html: ReactSVG }}></div>
                     React
                   </a>
-                  <a
-                    id="vue"
-                    className={`my-framework__tooltip__item${isActive('vue')}`}
-                    onClick={() => handleItemClick('vue')}
-                  >
-                    <div className="my-framework__button__icon" dangerouslySetInnerHTML={{ __html: VueSVG }}></div>
-                    Vue
-                  </a>
                 </div>
               )
             }}

docs/.storybook/blocks/CodeSandbox.tsx

@@ -41,7 +41,7 @@ export const CodeSandbox = ({ of }) => {
 
   const label = template === '' ? 'Try Online' : `Code Sandbox`
 
-  if (framework === 'vue' || (of && framework !== 'angular')) {
+  if (of && framework !== 'angular') {
     return ''
   }
 

docs/.storybook/blocks/Framework.tsx

@@ -31,16 +31,6 @@ export const ReactFramework = ({ children }) => {
   return null
 }
 
-export const VueFramework = ({ children }) => {
-  const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework
-
-  if (globalFramework === 'vue') {
-    return <div className="sbdocs-content">{children}</div>
-  }
-
-  return null
-}
-
 export const HTMLFramework = ({ children }) => {
   const globalFramework = global['__STORYBOOK_PREVIEW__'].storyStore.globals.globals.framework
 

docs/.storybook/blocks/PackageTable.tsx

@@ -76,12 +76,6 @@ export const PackageTable = ({ children }) => {
           </td>
           <td>React component proxies based on the the core package.</td>
         </tr>
-        <tr>
-          <td>
-            <strong>Vue</strong>
-          </td>
-          <td>Vue component proxies based on the the core package.</td>
-        </tr>
         <tr>
           <td>
             <strong>Table</strong>

docs/.storybook/blocks/utils/code-sandbox.util.ts

@@ -1,4 +1,4 @@
-export type Frameworks = 'angular' | 'react' | 'html' | 'vue'
+export type Frameworks = 'angular' | 'react' | 'html'
 
 export const parseMarkdown = (content: string) => {
   if (content.startsWith('```')) {
@@ -18,7 +18,7 @@ export const getFramework = (): Frameworks => {
   const urlSearchParams = new URLSearchParams(window.location.search)
   const params = Object.fromEntries(urlSearchParams.entries())
   let paramFramework: string | undefined = params.globals?.replace('framework:', '')
-  const frameworks = ['angular', 'html', 'react', 'vue']
+  const frameworks = ['angular', 'html', 'react']
   paramFramework = frameworks.includes(paramFramework) ? paramFramework : undefined
   if (paramFramework !== undefined) {
     localStorage.setItem('bal-docs-framework', JSON.stringify(paramFramework))

docs/.storybook/blocks/welcome/WelcomeGuide.tsx

@@ -18,7 +18,7 @@ export const WelcomeGuide = ({ children }) => {
         <LinkCard
           pageTitle={'Development/Getting Started'}
           label={'Development'}
-          description={'Getting Started with HTML, Angular, React or Vue.js'}
+          description={'Getting Started with HTML, Angular or React'}
         />
         <LinkCard pageTitle={'Changelog'} description={"What's new?"} />
         <LinkCard pageTitle={'Support'} description={'Ask a question, report a bug or request a feature'} />

docs/package.json

@@ -6,7 +6,6 @@
     "@baloise/ds-brand-icons": "17.4.1",
     "@baloise/ds-core": "17.4.1",
     "@baloise/ds-styles": "17.4.1",
-    "@baloise/ds-css": "17.4.1",
     "@baloise/ds-icons": "17.4.1",
     "@baloise/ds-tokens": "17.4.1",
     "@storybook/addon-essentials": "~7.6.10",
@@ -18,8 +17,8 @@
     "codesandbox": "~2.2.3",
     "lodash.kebabcase": "~4.1.1",
     "js-beautify": "~1.14.11",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "react-syntax-highlighter": "~15.5.0",
     "storybook": "~7.6.10"
   },

docs/public/assets/code/angular/src/styles.scss

@@ -1,12 +1,12 @@
 // Resets CSS for all browser
-@import '@baloise/ds-styles/css/normalize';
-@import '@baloise/ds-styles/css/structure';
+@forward '@baloise/ds-styles/css/normalize';
+@forward '@baloise/ds-styles/css/structure';
 
 // Custom font faces
-@import '@baloise/ds-styles/css/font';
+@forward '@baloise/ds-styles/css/font';
 
 // Core CSS, always required
-@import '@baloise/ds-styles/css/core';
+@forward '@baloise/ds-styles/css/core';
 
 // CSS utilities classes (optional)
-@import '@baloise/ds-styles/css/utilities/all';
+@forward '@baloise/ds-styles/css/utilities/all';

docs/stories/changelog.stories.mdx

@@ -43,7 +43,7 @@ a separate changelog file.
     <LinkCard
       pageTitle={'Development/Getting Started'}
       label={'Development'}
-      description={'Getting Started with HTML, Angular, React or Vue.js'}
+      description={'Getting Started with HTML, Angular or React'}
     />
     <LinkCard
       label={'Contributing'}