@baloise/ds-core 16.3.0-nightly.20240913 → 16.4.0

package/dist/html.html-data.json

@@ -4375,7 +4375,12 @@
         "kind": "markdown",
         "value": ""
       },
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "nav-id",
+          "description": "This is used to connect the flyout to the aria controls"
+        }
+      ],
       "references": [
         {
           "name": "Source code",
@@ -5211,7 +5216,7 @@
       "attributes": [
         {
           "name": "background",
-          "description": "The shape color",
+          "description": "The background color",
           "values": [
             {
               "name": "grey"
@@ -5221,6 +5226,27 @@
             }
           ]
         },
+        {
+          "name": "color",
+          "description": "The progress bar color",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
         {
           "name": "value",
           "description": "The value of the bar in percentage. So min is 0 and 100 would be the max value."
@@ -6471,6 +6497,30 @@
           "name": "clickable",
           "description": "If `true` the tabs or steps can be clicked."
         },
+        {
+          "name": "color",
+          "description": "Defines the color of the steps so it can be placed on colored backgrounds",
+          "values": [
+            {
+              "name": "green"
+            },
+            {
+              "name": "light-blue"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "purple"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
         {
           "name": "debounce",
           "description": "Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
@@ -6522,6 +6572,10 @@
           "name": "label",
           "description": "Label for the tab."
         },
+        {
+          "name": "no-panel",
+          "description": "If `true` the tab does not have a panel"
+        },
         {
           "name": "prevent",
           "description": "Tell's if the linking is done by a router."

package/dist/types/components/bal-close/bal-close.d.ts

@@ -2,7 +2,6 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 import { BalConfigObserver, BalConfigState } from '../../interfaces';
 import { BalLanguage, BalRegion } from '../../utils/config';
 export declare class Close implements ComponentInterface, BalConfigObserver {
-    private inheritedAttributes;
     el: HTMLElement;
     language: BalLanguage;
     region: BalRegion;
@@ -14,7 +13,6 @@ export declare class Close implements ComponentInterface, BalConfigObserver {
      * If `true` it supports dark backgrounds.
      */
     inverted: boolean;
-    componentWillRender(): void;
     /**
      * @internal define config for the component
      */

package/dist/types/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.d.ts

@@ -2,7 +2,6 @@ import { ComponentInterface } from '../../../stencil-public-runtime';
 import { LogInstance, Loggable } from '../../../utils/log';
 import { BalResizeObserver } from '../../../utils/resize';
 export declare class NavMenuFlyout implements ComponentInterface, Loggable, BalResizeObserver {
-    private navMenuFlyoutId;
     private bodyScrollHandler;
     el: HTMLElement;
     isHidden: boolean;
@@ -12,6 +11,10 @@ export declare class NavMenuFlyout implements ComponentInterface, Loggable, BalR
      * PUBLIC PROPERTY API
      * ------------------------------------------------------
      */
+    /**
+     * This is used to connect the flyout to the aria controls
+     * */
+    navId: string;
     /**
      * LIFECYCLE
      * ------------------------------------------------------

package/dist/types/components/bal-nav/models/bal-nav-link-item.d.ts

@@ -22,5 +22,6 @@ export declare class NavLinkItem implements BalProps.BalNavLinkItem {
     }>): any;
     render(_context?: {
         onClick: () => void;
+        flyoutId: string;
     }): any;
 }

package/dist/types/components/bal-nav/models/bal-nav-menu-link-item.d.ts

@@ -15,5 +15,6 @@ export declare class NavMenuLinkItem extends NavLinkItem implements BalProps.Bal
     }>): any;
     render(context?: {
         onClick: () => void;
+        flyoutId: string;
     }): any;
 }

package/dist/types/components/bal-nav/models/bal-nav-meta-link-item.d.ts

@@ -11,5 +11,7 @@ export declare class NavMetaLinkItem extends NavLinkItem implements BalProps.Bal
         activeMetaLinkValue: string;
         activeMenuLinkValue: string;
     }>): any;
-    render(): any;
+    render(context?: {
+        flyoutId: string;
+    }): any;
 }

package/dist/types/components/bal-progress-bar/bal-progress-bar.d.ts

@@ -15,9 +15,13 @@ export declare class ProgressBar implements ComponentInterface, BalConfigObserve
      */
     value: number;
     /**
-     * The shape color
+     * The background color
      */
     background: BalProps.BalProgressBarBackground;
+    /**
+     * The progress bar color
+     */
+    color: BalProps.BalProgressBarColor;
     /**
      * LIFECYCLE
      * ------------------------------------------------------

package/dist/types/components/bal-progress-bar/bal-progress-bar.interfaces.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@baloise/ds-core" />
 declare namespace BalProps {
     type BalProgressBarBackground = 'white' | 'grey';
+    type BalProgressBarColor = 'primary' | 'purple' | 'yellow' | 'red' | 'green';
 }

package/dist/types/components/bal-steps/bal-steps.d.ts

@@ -23,6 +23,10 @@ export declare class Steps implements Loggable, BalMutationObserver, BalBreakpoi
      * If `true` the tabs or steps can be clicked.
      */
     clickable: boolean;
+    /**
+     * Defines the color of the steps so it can be placed on colored backgrounds
+     */
+    color: BalProps.BalStepsColor;
     /**
      * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
      */

package/dist/types/components/bal-steps/bal-steps.interfaces.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="@baloise/ds-core" />
-declare namespace BalProps { }
+declare namespace BalProps {
+    type BalStepsColor = 'primary' | 'light-blue' | 'purple' | 'yellow' | 'red' | 'green';
+}
 declare namespace BalEvents {
     interface BalStepsCustomEvent<T> extends CustomEvent<T> {
         detail: T;

package/dist/types/components/bal-steps/components/step-button.d.ts

@@ -4,6 +4,7 @@ export interface StepButtonProps {
     item: BalStepOption;
     isMobile: boolean;
     clickable: boolean;
+    color: BalProps.BalStepsColor;
     onSelectTab: (ev: MouseEvent, item: BalStepOption) => void;
 }
 export declare const StepButton: FunctionalComponent<StepButtonProps>;

package/dist/types/components/bal-tabs/bal-tab-item/bal-tab-item.d.ts

@@ -47,6 +47,14 @@ export declare class TabItem {
      * Tab icon not available for the steps.
      */
     icon?: string;
+    /**
+     * If `true` the tab does not have a panel
+     */
+    noPanel: boolean;
+    /**
+     * A11y attributes for the native tab element.
+     */
+    aria?: BalProps.BalTabItemAria;
     /**
      * Emitted when the link element has clicked
      */
@@ -75,6 +83,8 @@ export declare class TabItem {
         prevent: boolean;
         navigate: EventEmitter<MouseEvent>;
         trackingData: Attributes;
+        noPanel: boolean;
+        aria: BalProps.BalTabItemAria;
     };
     render(): any;
 }

package/dist/types/components/bal-tabs/bal-tab.type.d.ts

@@ -18,6 +18,8 @@ export interface BalTabOption {
     navigate?: EventEmitter<Event>;
     trackingData?: Attributes;
     hidden?: boolean;
+    noPanel?: boolean;
+    aria?: BalProps.BalTabItemAria;
 }
 export interface TabLineProps {
     context?: BalProps.BalTabsContext;

package/dist/types/components/bal-tabs/bal-tabs.interfaces.d.ts

@@ -5,6 +5,9 @@ declare namespace BalProps {
     type BalTabsVertical = boolean | 'mobile' | 'tablet';
     type BalTabsFloat = 'left' | 'right';
     type BalTabsColSize = 'one-quarter' | 'one-third' | 'half' | 'two-thirds' | 'three-quarters' | 'full';
+    type BalTabItemAria = {
+        controls?: string;
+    };
 }
 declare namespace BalEvents {
     interface BalTabsCustomEvent<T> extends CustomEvent<T> {

package/dist/types/components/bal-tabs/components/tab-button.d.ts

@@ -9,6 +9,7 @@ export interface TabButtonProps {
     isVertical: boolean;
     accordion: boolean;
     isAccordionOpen: boolean;
+    isLinkList: boolean;
     inverted: boolean;
     expanded: boolean;
     spaceless: boolean;

package/dist/types/components.d.ts

@@ -966,20 +966,6 @@ export namespace Components {
          */
         "space": BalProps.BalDividerSpace;
     }
-    interface BalDocApp {
-        /**
-          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
-         */
-        "animated": boolean;
-        "language"?: string;
-        "logComponents": string;
-        "logCustom": boolean;
-        "logEvents": boolean;
-        "logLifecycle": boolean;
-        "logRender": boolean;
-        "region"?: string;
-        "stickyFooter": boolean;
-    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -2037,6 +2023,10 @@ export namespace Components {
         "position": BalProps.BalNavMenuBarPosition;
     }
     interface BalNavMenuFlyout {
+        /**
+          * This is used to connect the flyout to the aria controls
+         */
+        "navId": string;
     }
     interface BalNavMetaBar {
         /**
@@ -2547,9 +2537,13 @@ export namespace Components {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background": BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color": BalProps.BalProgressBarColor;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
@@ -3074,6 +3068,10 @@ export namespace Components {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable": boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color": BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -3100,6 +3098,10 @@ export namespace Components {
           * Tells if this route is active and overrides the bal-tabs value property.
          */
         "active": boolean;
+        /**
+          * A11y attributes for the native tab element.
+         */
+        "aria"?: BalProps.BalTabItemAria;
         /**
           * If `true` a small red bubble is added to the tab.
          */
@@ -3128,6 +3130,10 @@ export namespace Components {
           * Label for the tab.
          */
         "label": string;
+        /**
+          * If `true` the tab does not have a panel
+         */
+        "noPanel": boolean;
         /**
           * Tell's if the linking is done by a router.
          */
@@ -4008,12 +4014,6 @@ declare global {
         prototype: HTMLBalDividerElement;
         new (): HTMLBalDividerElement;
     };
-    interface HTMLBalDocAppElement extends Components.BalDocApp, HTMLStencilElement {
-    }
-    var HTMLBalDocAppElement: {
-        prototype: HTMLBalDocAppElement;
-        new (): HTMLBalDocAppElement;
-    };
     interface HTMLBalDropdownElementEventMap {
         "balChange": BalEvents.BalDropdownChangeDetail;
         "balFocus": BalEvents.BalDropdownFocusDetail;
@@ -4964,7 +4964,6 @@ declare global {
         "bal-date-calendar-cell": HTMLBalDateCalendarCellElement;
         "bal-datepicker": HTMLBalDatepickerElement;
         "bal-divider": HTMLBalDividerElement;
-        "bal-doc-app": HTMLBalDocAppElement;
         "bal-dropdown": HTMLBalDropdownElement;
         "bal-field": HTMLBalFieldElement;
         "bal-field-control": HTMLBalFieldControlElement;
@@ -6020,20 +6019,6 @@ declare namespace LocalJSX {
          */
         "space"?: BalProps.BalDividerSpace;
     }
-    interface BalDocApp {
-        /**
-          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
-         */
-        "animated"?: boolean;
-        "language"?: string;
-        "logComponents"?: string;
-        "logCustom"?: boolean;
-        "logEvents"?: boolean;
-        "logLifecycle"?: boolean;
-        "logRender"?: boolean;
-        "region"?: string;
-        "stickyFooter"?: boolean;
-    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -7109,6 +7094,10 @@ declare namespace LocalJSX {
         "position"?: BalProps.BalNavMenuBarPosition;
     }
     interface BalNavMenuFlyout {
+        /**
+          * This is used to connect the flyout to the aria controls
+         */
+        "navId"?: string;
     }
     interface BalNavMetaBar {
         /**
@@ -7546,9 +7535,13 @@ declare namespace LocalJSX {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background"?: BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color"?: BalProps.BalProgressBarColor;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
          */
@@ -8073,6 +8066,10 @@ declare namespace LocalJSX {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable"?: boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color"?: BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -8095,6 +8092,10 @@ declare namespace LocalJSX {
           * Tells if this route is active and overrides the bal-tabs value property.
          */
         "active"?: boolean;
+        /**
+          * A11y attributes for the native tab element.
+         */
+        "aria"?: BalProps.BalTabItemAria;
         /**
           * If `true` a small red bubble is added to the tab.
          */
@@ -8119,6 +8120,10 @@ declare namespace LocalJSX {
           * Label for the tab.
          */
         "label"?: string;
+        /**
+          * If `true` the tab does not have a panel
+         */
+        "noPanel"?: boolean;
         /**
           * Emitted when the link element has clicked
          */
@@ -8534,7 +8539,6 @@ declare namespace LocalJSX {
         "bal-date-calendar-cell": BalDateCalendarCell;
         "bal-datepicker": BalDatepicker;
         "bal-divider": BalDivider;
-        "bal-doc-app": BalDocApp;
         "bal-dropdown": BalDropdown;
         "bal-field": BalField;
         "bal-field-control": BalFieldControl;
@@ -8656,7 +8660,6 @@ declare module "@stencil/core" {
             "bal-date-calendar-cell": LocalJSX.BalDateCalendarCell & JSXBase.HTMLAttributes<HTMLBalDateCalendarCellElement>;
             "bal-datepicker": LocalJSX.BalDatepicker & JSXBase.HTMLAttributes<HTMLBalDatepickerElement>;
             "bal-divider": LocalJSX.BalDivider & JSXBase.HTMLAttributes<HTMLBalDividerElement>;
-            "bal-doc-app": LocalJSX.BalDocApp & JSXBase.HTMLAttributes<HTMLBalDocAppElement>;
             "bal-dropdown": LocalJSX.BalDropdown & JSXBase.HTMLAttributes<HTMLBalDropdownElement>;
             "bal-field": LocalJSX.BalField & JSXBase.HTMLAttributes<HTMLBalFieldElement>;
             "bal-field-control": LocalJSX.BalFieldControl & JSXBase.HTMLAttributes<HTMLBalFieldControlElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-core",
-  "version": "16.3.0-nightly.20240913",
+  "version": "16.4.0",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@baloise/ds-styles": "16.3.0-nightly.20240913",
-    "@baloise/ds-icons": "16.3.0-nightly.20240913",
+    "@baloise/ds-styles": "16.4.0",
+    "@baloise/ds-icons": "16.4.0",
     "@baloise/web-app-utils": "3.11.2",
     "@floating-ui/dom": "~1.6.3",
     "@popperjs/core": "~2.11.4",
@@ -54,10 +54,10 @@
     "@baloise/output-target-react": "0.0.0",
     "@baloise/output-target-vue": "0.0.0",
     "@baloise/output-target-web": "0.0.0",
-    "@baloise/ds-css": "16.3.0-nightly.20240913",
-    "@baloise/ds-maps": "16.3.0-nightly.20240913",
-    "@baloise/ds-brand-icons": "16.3.0-nightly.20240913",
-    "@baloise/ds-favicons": "16.3.0-nightly.20240913"
+    "@baloise/ds-css": "16.4.0",
+    "@baloise/ds-maps": "16.4.0",
+    "@baloise/ds-brand-icons": "16.4.0",
+    "@baloise/ds-favicons": "16.4.0"
   },
   "sideEffects": false
 }

package/components/bal-app2.js

@@ -1,87 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { h as debounce, k as rIC } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { b as updateBalAnimated } from './config.utils.js';
-
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}";
-const BalAppStyle0 = balAppCss;
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-        this.animated = true;
-        this.ready = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    connectedCallback() {
-        updateBalAnimated(this.animated);
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(async () => {
-            this.ready = true;
-            startFocusVisible();
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", null)));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
-
-export { App as A, defineCustomElement as d };

package/components/bal-doc-app.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalDocApp extends Components.BalDocApp, HTMLElement {}
-export const BalDocApp: {
-    prototype: BalDocApp;
-    new (): BalDocApp;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;