🚀 pre-release: v13

.build/data/tags.json

@@ -1 +1 @@
-["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-datepicker","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-navbar","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast"]
+["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-datepicker","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-navbar","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-step-item","bal-steps","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast"]

.build/interfaces.js

@@ -0,0 +1,39 @@
+/**
+ * interfaces
+ * --------------------------------------
+ * Adjust the reference path to the correct file.
+ */
+
+const path = require('path')
+const replace = require('replace-in-file');
+const log = require('./utils/log.js')
+
+const DIRNAME = path.normalize(__dirname);
+const PACKAGE = path.join(DIRNAME, "../packages/components");
+const DIST_PATH = path.join(PACKAGE, 'dist/types')
+
+async function main(){
+  log.title('interfaces')
+
+  adjustInterfacesReference(DIST_PATH + '/**/*interfaces.d.ts')
+}
+
+async function adjustInterfacesReference(files){
+  try {
+    replace.sync({
+      files: files,
+      from: `/// <reference path="../../../../src/interfaces.d.ts" />`,
+      to: `/// <reference path="../../../interfaces.d.ts" />`,
+    })
+    replace.sync({
+      files: files,
+      from: `/// <reference path="../../../src/interfaces.d.ts" />`,
+      to: `/// <reference path="../../interfaces.d.ts" />`,
+    })
+  }
+  catch (error) {
+    log.warn('Could not adjust interface references to dist output', error)
+  }
+}
+
+main()

.build/vue-web-types.js

@@ -21,7 +21,7 @@ async function main() {
     const slots = []
     const events = []
     const componentName = pascalCase(component.tag)
-    const docUrl = 'https://baloise-design.vercel.app/#/components/' + component.tag + '/readme'
+    const docUrl = 'https://design.baloise.dev/#/components/' + component.tag + '/readme'
 
     for (const prop of component.props || []) {
       attributes.push({

.changeset/cuddly-beans-poke.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': minor
+---
+
+add `border` property to bal-carousel to show a light border at the bottom.

.changeset/eighty-deers-invite.md

@@ -0,0 +1,21 @@
+---
+'@baloise/design-system-components-table': major
+---
+
+upgrade to `AG-Grid` v29. Breaking changes are the theming that changed from SASS variables to CSS variables.
+Moreover, our styles are just an extension to the `AG-Grid` styles. 
+Therefor please import them before the Baloise styles also check out our [documentation](https://design.baloise.dev/?path=/docs/components-table--basic#aggrid)
+
+**before**
+
+```scss
+@import '@baloise/design-system-components-table/scss';
+```
+
+**after**
+
+```scss
+@import 'ag-grid-community/styles/ag-grid';
+@import 'ag-grid-community/styles/ag-theme-alpine';
+@import '@baloise/design-system-components-table/css/design-system-table';
+```

.changeset/gold-ravens-change.md

@@ -0,0 +1,31 @@
+---
+'@baloise/design-system-components': major
+---
+
+scroll handler blocks scrolling now with JS instead of CSS.
+With that we are able to remember the last scroll position of the user.
+
+**before**
+
+```typescript
+const scrollHandler = BodyScrollBlocker()
+this.bodyScrollBlocker.block()
+this.bodyScrollBlocker.allow()
+```
+
+**after**
+
+Rename the handler to `ScrollHandler` and call the `connect` function to
+connect the handler to the target element (Default is document). `block` and `allow` have been
+renamed to `disable` and `enable`. The new function `disconnect` removes all
+the defined event listeners and resets the handler.
+
+```typescript
+const scrollHandler = ScrollHandler()
+
+// can also pass in a custom element instead of using document
+scrollHandler.connect()
+scrollHandler.disable()
+scrollHandler.enable()
+scrollHandler.disconnect()
+```

.changeset/healthy-mugs-admire.md

@@ -0,0 +1,49 @@
+---
+'@baloise/design-system-components': major
+---
+
+The namespaces Props and Events are renamed to BalProps and BalEvents.
+As long as the packages `@baloise/design-system-components` is imported into your project
+you have direct access to the new namespaces.
+
+#### With Props
+
+**before**
+
+```typescript
+import { Props } from '@baloise/design-system-components'
+
+const myColor: Props.BalButtonColor = 'primary'
+```
+
+**after**
+
+```typescript
+const myColor: BalProps.BalButtonColor = 'primary'
+```
+
+#### With Events
+
+**before**
+
+```typescript
+import type { Events } from "@baloise/design-system-components"
+
+const onChange = (event: Events.BalAccordionChange) => {
+  const myAccordion = event.target // type => EventTarget
+  const myDetail = event.detail // type => boolean
+  ...
+}
+```
+
+**after**
+
+```typescript
+const onChange = (event: BalEvents.BalAccordionChange) => {
+  const myAccordion = event.target // type => HTMLBalAccordion
+  const myDetail = event.detail // type => boolean
+  ...
+}
+```
+
+All component types are now located in the component folders `*.interfaces.ts` file.

.changeset/honest-windows-bow.md

@@ -0,0 +1,24 @@
+---
+'@baloise/design-system-components': major
+---
+
+add new `steps` component with options property and overflow solution
+
+**before**
+
+```html
+<bal-tabs interface="o-steps" value="tab-a">
+  <bal-tab-item done value="tab-a" label="Tab A">Content of Tab A</bal-tab-item>
+</bal-tabs>
+```
+
+**after**
+
+The interface of the components are the same as before.
+Only the tag names of the component changed and to pass the `interface` property is not needed anymore.
+
+```html
+<bal-steps value="tab-a">
+  <bal-step-item done value="tab-a" label="Tab A">Content of Tab A</bal-step-item>
+</bal-steps>
+```

.changeset/modern-maps-repair.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': major
+---
+
+update dependency stencil to v3.

.changeset/short-zebras-tell.md

@@ -0,0 +1,16 @@
+---
+'@baloise/design-system-components': major
+---
+
+Remove inverted property from bal-stage, bal-datepicker, bal-input, bal-textarea.
+
+Inverted property is removed because is not supported in our new rebranded style.
+
+Components that are affected are:
+
+| Component        | Property |
+| :--------------- | :------- |
+| `bal-stage`      | inverted |
+| `bal-datepicker` | inverted |
+| `bal-input`      | inverted |
+| `bal-textarea`   | inverted |

.changeset/stale-owls-divide.md

@@ -0,0 +1,17 @@
+---
+'@baloise/design-system-components': major
+---
+
+accordion & popover renamed property `value` to `active`, since they are not considered as a form control component.
+
+**before**
+
+```html
+<bal-accordion value="true">My hidden Content</bal-accordion>
+```
+
+**after**
+
+```html
+<bal-accordion active="true">My hidden Content</bal-accordion>
+```

.changeset/tame-crews-scream.md

@@ -0,0 +1,67 @@
+---
+'@baloise/design-system-components': major
+'@baloise/design-system-css': major
+---
+
+remove deprecated global component styles.
+Component styles will be loaded lazy to optimize the speed of the first render, there for only import the needed CSS files.
+
+#### Global import
+
+The global import of the main styles and his utility classes move to the CSS framework.
+
+**before**
+
+```scss
+@import '@baloise/design-system-components/src/styles/global';
+```
+
+**after**
+
+With the solution we are able to add only what we need.
+
+```scss
+// SASS mixins and variables
+@import '@baloise/design-system-css/sass/mixins';
+
+// Resets CSS for all browser
+@import '@baloise/design-system-css/css/normalize';
+@import '@baloise/design-system-css/css/structure';
+
+// Custom font faces
+@import '@baloise/design-system-css/sass/font';
+
+// Core CSS, always required
+@import '@baloise/design-system-css/css/core';
+
+// Deprecated styles will be removed with the next breaking version (optional)
+@import '@baloise/design-system-css/sass/legacy';
+
+// CSS utilities classes (optional)
+@import '@baloise/design-system-css/css/border';
+@import '@baloise/design-system-css/css/color';
+@import '@baloise/design-system-css/css/display';
+@import '@baloise/design-system-css/css/flex';
+@import '@baloise/design-system-css/css/grid';
+@import '@baloise/design-system-css/css/opacity';
+@import '@baloise/design-system-css/css/radius';
+@import '@baloise/design-system-css/css/shadow';
+@import '@baloise/design-system-css/css/spacing';
+@import '@baloise/design-system-css/css/typography';
+```
+
+#### Component utilities import
+
+The location of the `variable` & `mixins` has changed to `@baloise/design-system-css/sass/mixins`.
+
+**before**
+
+```scss
+@import '@baloise/design-system-components/src/styles/global.utilities';
+```
+
+**after**
+
+```scss
+@import '@baloise/design-system-css/sass/mixins';
+```

.changeset/tasty-deers-marry.md

@@ -0,0 +1,6 @@
+---
+'@baloise/design-system-components': major
+'@baloise/design-system-css': major
+---
+
+.title, bal-heading, bal-text and bal-label inherit default color

.changeset/tender-teachers-sell.md

@@ -0,0 +1,46 @@
+---
+'@baloise/design-system-components-angular': major
+---
+
+Remove Angular component modules, because of Zone.js optimization.
+Tree-shaking is given by Stencil and therefor to have Angular component modules
+does not have any advantages anymore.
+
+**before**
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+import { BalCoreModule, BalHeadingModule, BalButtonModule } from '@baloise/design-system-components-angular'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, BalCoreModule.forRoot(), BalHeadingModule, BalButtonModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+**after**
+
+Import the new module `BaloiseDesignSystemModule`, which adds all the components. 
+After remove all old component modules like `BalButtonModule` from your project.
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, BaloiseDesignSystemModule.forRoot()],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```

.changeset/wet-pans-worry.md

@@ -0,0 +1,30 @@
+---
+'@baloise/design-system-components': major
+'@baloise/design-system-tokens': major
+---
+
+remove deprecated parts
+
+### Design Token Removal
+
+| Component     | Value     | Why                                     |
+| ------------- | --------- | --------------------------------------- |
+| **radius**    | `small`   | Is not supported in the new Style Guide |
+| **radius**    | `x-large` | Is not supported in the new Style Guide |
+| **container** | `is-blog` | Use default container instead           |
+
+### Component Property Renaming
+
+| Component            | Before        | After              |
+| -------------------- | ------------- | ------------------ |
+| **bal-card-actions** | `right`       | `position="right"` |
+| **bal-navbar-brand** | `link-target` | `target`           |
+| **bal-stage**        | `has-shape`   | `shape`            |
+| **bal-radio**        | `is-empty`    | `label-hidden`     |
+
+### Component Property Removal
+
+| Component      | Property       | Why                                                              |
+| -------------- | -------------- | ---------------------------------------------------------------- |
+| **bal-select** | `no-border`    | Left over from the old style guide. Was event not active anymore |
+| **bal-select** | `has-movement` | Left over from the old style guide. Was event not active anymore |