@baloise/ds-core 17.3.0 → 17.4.0-snapshot.1609-d2bcc38d3

package/dist/collection/components/docs/bal-doc-app/bal-doc-app.js

@@ -0,0 +1,247 @@
+import { Host, h } from "@stencil/core";
+import * as balIcons from "../../../../../../icons/src/index";
+import { updateBalIcons } from "../../../utils/config";
+import { balBrowser } from "../../../utils/browser";
+import globalScript from "../../../global";
+/**
+ * @internal
+ */
+export class DocApp {
+    constructor() {
+        this.logComponents = '';
+        this.logLifecycle = true;
+        this.logEvents = true;
+        this.logRender = true;
+        this.logCustom = true;
+        this.stickyFooter = false;
+        this.region = undefined;
+        this.language = undefined;
+        this.animated = true;
+    }
+    connectedCallback() {
+        globalScript();
+        updateBalIcons(balIcons);
+    }
+    componentDidRender() {
+        const logConfig = {
+            components: this.logComponents
+                .split(',')
+                .map(c => c.trim())
+                .filter(c => c !== ''),
+            lifecycle: this.logLifecycle,
+            event: this.logEvents,
+            render: this.logRender,
+            custom: this.logCustom,
+        };
+        if (balBrowser.hasWindow) {
+            if (this.logComponents) {
+                ;
+                window.BaloiseDesignSystem.config.logger = logConfig;
+            }
+            if (this.region) {
+                ;
+                window.BaloiseDesignSystem.config.region = this.region;
+            }
+            if (this.language) {
+                ;
+                window.BaloiseDesignSystem.config.language = this.language;
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '4b12119a66b0c5a70e512df42c10a71fe6f91e02' }, h("bal-app", { key: 'e1993ad8d9aad13abff747bbd198b6cf0f83452b', animated: this.animated }, h("div", { key: '065fcd36e50dd584628657b15e171686712819e3', class: { 'has-sticky-footer': this.stickyFooter } }, h("slot", { key: 'bdd49335612ea7960f3dda4f1ca2bbad68a527bf' })))));
+    }
+    static get is() { return "bal-doc-app"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-doc-app.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-doc-app.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logComponents": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-components",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logLifecycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-lifecycle",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-events",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logRender": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-render",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logCustom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "log-custom",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stickyFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sticky-footer",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "region",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "language",
+                "reflect": false
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all animation inside the bal-app. Can be used for simplify e2e testing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "animated",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/utils/aria.js

@@ -1 +1,6 @@
-export const ariaBooleanToString = (bool) => (!!bool ? 'true' : 'false');
+export const ariaBooleanToString = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return !!value ? 'true' : 'false';
+};

package/dist/collection/utils/attributes.js

@@ -5,6 +5,7 @@ const trackingAttributes = ['data-tracking-style', 'data-tracking-topic', 'data-
  * the `title` attribute that developers set directly on `bal-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
+ * This function also removes the attribute from the parent when its set on child.
  *
  * This does not need to be reactive as changing attributes on the host element
  * does not trigger a re-render.

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '17.3.0';
+export const VERSION = '17.4.0-snapshot.1609-d2bcc38d3';

package/dist/collection/utils/dropdown/input.js

@@ -2,9 +2,9 @@ import { h } from "@stencil/core";
 import { BEM } from "../bem";
 import { i18nBalDropdown } from "./dropdown.i18n";
 import { ariaBooleanToString } from "../aria";
-export const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
+export const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
     const block = BEM.block('dropdown');
-    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", name: name, autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
+    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
     if (httpFormSubmit) {
         return h(Input, null);
     }

package/dist/collection/utils/form.js

@@ -12,8 +12,8 @@ export const scrollToFirstInvalidField = (options) => {
         }
     }
 };
-export const defaultBalAriaForm = {
+export const defaultBalAriaForm = Object.freeze({
     controlId: undefined,
     labelId: undefined,
     messageId: undefined,
-};
+});

package/dist/collection/utils/overlays/focus-trap.js

@@ -0,0 +1,91 @@
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * Note: We need this distinction because `disabled="false"` is
+ * valid usage for the disabled property on bal-button.
+ */
+export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .bal-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .bal-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+/**
+ * Focuses the first descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusFirstDescendant = (ref, fallbackElement) => {
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusLastDescendant = (ref, fallbackElement) => {
+    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses a particular element in a context. If the element
+ * doesn't have anything focusable associated with it then
+ * a fallback element will be focused.
+ *
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an bal-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of bal-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInContext = (hostToFocus, fallbackElement) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+    }
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
+    }
+    else {
+        // Focus fallback element instead of letting focus escape
+        fallbackElement.focus();
+    }
+};
+export const focusVisibleElement = (el) => {
+    el.focus();
+    /**
+     * When programmatically focusing an element,
+     * the focus-visible utility will not run because
+     * it is expecting a keyboard event to have triggered this;
+     * however, there are times when we need to manually control
+     * this behavior so we call the `setFocus` method on bal-app
+     * which will let us explicitly set the elements to focus.
+     */
+    if (el.classList.contains('bal-focusable')) {
+        const app = el.closest('bal-app');
+        if (app) {
+            app.setFocus([el]);
+        }
+    }
+};

package/dist/collection/utils/overlays/overlays.js

@@ -1,5 +1,6 @@
 import { balBrowser } from "../browser";
 import { addEventListener, removeEventListener } from "../helpers";
+import { focusableQueryString, focusFirstDescendant, focusLastDescendant, focusVisibleElement } from "./focus-trap";
 let lastId = 0;
 export const OVERLAY_BACK_BUTTON_PRIORITY = 100;
 export const MENU_BACK_BUTTON_PRIORITY = 99;
@@ -28,6 +29,9 @@ export const getOverlay = (doc, overlayTag, id) => {
 export const connectListeners = (doc) => {
     if (lastId === 0) {
         lastId = 1;
+        doc.addEventListener('focus', (ev) => {
+            trapKeyboardFocus(ev, doc);
+        }, true);
         // handle ESC to close overlay
         doc.addEventListener('keyup', ev => {
             if (ev.key === 'Escape') {
@@ -39,6 +43,166 @@ export const connectListeners = (doc) => {
         });
     }
 };
+export const getPresentedOverlay = (doc, overlayTag, id) => {
+    const overlays = getPresentedOverlays(doc, overlayTag);
+    return id === undefined ? overlays[overlays.length - 1] : overlays.find(o => o.id === id);
+};
+const getPresentedOverlays = (doc, overlayTag) => {
+    return getOverlays(doc, overlayTag).filter(o => !isOverlayHidden(o));
+};
+const isOverlayHidden = (overlay) => overlay.classList.contains('is-hidden');
+const trapKeyboardFocus = (ev, doc) => {
+    const lastOverlay = getPresentedOverlay(doc, 'bal-modal');
+    const target = ev.target;
+    /**
+     * If no active overlay, ignore this event.
+     *
+     * If this component uses the shadow dom,
+     * this global listener is pointless
+     * since it will not catch the focus
+     * traps as they are inside the shadow root.
+     * We need to add a listener to the shadow root
+     * itself to ensure the focus trap works.
+     */
+    if (!lastOverlay || !target) {
+        return;
+    }
+    const trapScopedFocus = () => {
+        /**
+         * If we are focusing the overlay, clear
+         * the last focused element so that hitting
+         * tab activates the first focusable element
+         * in the overlay wrapper.
+         */
+        if (lastOverlay === target) {
+            lastOverlay.lastFocus = undefined;
+            /**
+             * Toasts can be presented from an overlay.
+             * However, focus should still be returned to
+             * the overlay when clicking a toast. Normally,
+             * focus would be returned to the last focusable
+             * descendant in the overlay which may not always be
+             * the button that the toast was presented from. In this case,
+             * the focus may be returned to an unexpected element.
+             * To account for this, we make sure to return focus to the
+             * last focused element in the overlay if focus is
+             * moved to the toast.
+             */
+        }
+        else {
+            /**
+             * We do not want to focus the traps, so get the overlay
+             * wrapper element as the traps live outside of the wrapper.
+             */
+            const overlayRoot = lastOverlay;
+            const overlayWrapper = overlayRoot.querySelector('.bal-modal__container');
+            if (!overlayWrapper) {
+                return;
+            }
+            /**
+             * If the target is inside the wrapper, let the browser
+             * focus as normal and keep a log of the last focused element.
+             * Additionally, if the backdrop was tapped we should not
+             * move focus back inside the wrapper as that could cause
+             * an interactive elements focus state to activate.
+             */
+            if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('bal-modal__background')) {
+                lastOverlay.lastFocus = target;
+            }
+            else {
+                /**
+                 * Otherwise, we must have focused one of the focus traps.
+                 * We need to wrap the focus to either the first element
+                 * or the last element.
+                 */
+                /**
+                 * Once we call `focusFirstDescendant` and focus the first
+                 * descendant, another focus event will fire which will
+                 * cause `lastOverlay.lastFocus` to be updated before
+                 * we can run the code after that. We will cache the value
+                 * here to avoid that.
+                 */
+                const lastFocus = lastOverlay.lastFocus;
+                // Focus the first element in the overlay wrapper
+                focusFirstDescendant(overlayWrapper, lastOverlay);
+                /**
+                 * If the cached last focused element is the
+                 * same as the active element, then we need
+                 * to wrap focus to the last descendant. This happens
+                 * when the first descendant is focused, and the user
+                 * presses Shift + Tab. The previous line will focus
+                 * the same descendant again (the first one), causing
+                 * last focus to equal the active element.
+                 */
+                if (lastFocus === doc.activeElement) {
+                    focusLastDescendant(overlayWrapper, lastOverlay);
+                }
+                lastOverlay.lastFocus = doc.activeElement;
+            }
+        }
+    };
+    const trapShadowFocus = () => {
+        /**
+         * If the target is inside the wrapper, let the browser
+         * focus as normal and keep a log of the last focused element.
+         */
+        if (lastOverlay.contains(target)) {
+            lastOverlay.lastFocus = target;
+            /**
+             * Toasts can be presented from an overlay.
+             * However, focus should still be returned to
+             * the overlay when clicking a toast. Normally,
+             * focus would be returned to the last focusable
+             * descendant in the overlay which may not always be
+             * the button that the toast was presented from. In this case,
+             * the focus may be returned to an unexpected element.
+             * To account for this, we make sure to return focus to the
+             * last focused element in the overlay if focus is
+             * moved to the toast.
+             */
+        }
+        else if (target.tagName === 'BAL-TOAST') {
+            focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
+        }
+        else {
+            /**
+             * Otherwise, we are about to have focus
+             * go out of the overlay. We need to wrap
+             * the focus to either the first element
+             * or the last element.
+             */
+            /**
+             * Once we call `focusFirstDescendant` and focus the first
+             * descendant, another focus event will fire which will
+             * cause `lastOverlay.lastFocus` to be updated before
+             * we can run the code after that. We will cache the value
+             * here to avoid that.
+             */
+            const lastFocus = lastOverlay.lastFocus;
+            // Focus the first element in the overlay wrapper
+            focusFirstDescendant(lastOverlay);
+            /**
+             * If the cached last focused element is the
+             * same as the active element, then we need
+             * to wrap focus to the last descendant. This happens
+             * when the first descendant is focused, and the user
+             * presses Shift + Tab. The previous line will focus
+             * the same descendant again (the first one), causing
+             * last focus to equal the active element.
+             */
+            if (lastFocus === doc.activeElement) {
+                focusLastDescendant(lastOverlay);
+            }
+            lastOverlay.lastFocus = doc.activeElement;
+        }
+    };
+    if (lastOverlay.shadowRoot) {
+        trapShadowFocus();
+    }
+    else {
+        trapScopedFocus();
+    }
+};
 export const dismiss = async (overlay, data, role, animation) => {
     if (!overlay.presented) {
         return false;
@@ -73,3 +237,32 @@ export const onceEvent = (element, eventName, callback) => {
     };
     addEventListener(element, eventName, handler);
 };
+/**
+ * Focuses a particular element in an overlay. If the element
+ * doesn't have anything focusable associated with it then
+ * the overlay itself will be focused.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an bal-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of bal-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInOverlay = (hostToFocus, overlay) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+    }
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
+    }
+    else {
+        // Focus overlay instead of letting focus escape
+        overlay.focus();
+    }
+};
+export const FOCUS_TRAP_DISABLE_CLASS = 'bal-disable-focus-trap';

package/dist/collection/utils/swiper/swiper.util.js

@@ -15,12 +15,12 @@ export class SwiperUtil {
         this.id = `bal-swiper-${SwiperIds++}`;
         this.containerId = `${this.id}-container`;
         this.index = 0;
-        this.gapSize = 0;
         this.steps = 1;
         this.noNeedForControls = true;
         this.isLastSlideVisible = false;
         this.itemsPerView = 1;
         this.controls = 'none';
+        this.gapSpace = 'none';
         /**
          * EVENTS
          * ------------------------------------------------------
@@ -83,7 +83,7 @@ export class SwiperUtil {
         this.cssBlock = BEM.block('swiper');
         this.cssSwiper = () => (Object.assign({}, this.cssBlock.class(this.active)));
         this.cssInnerSwiper = () => (Object.assign(Object.assign(Object.assign(Object.assign({}, this.cssBlock.element('inner').class(this.active)), this.cssBlock.element('inner').modifier(`items-per-view-${this.itemsPerView}`).class(this.active)), this.cssBlock.element('inner').modifier(`shadow-left`).class(this.hasShadowLeft())), this.cssBlock.element('inner').modifier(`shadow-right`).class(this.hasShadowRight())));
-        this.cssSwiperContainer = () => (Object.assign({}, this.cssBlock.element('container').class(this.active)));
+        this.cssSwiperContainer = () => (Object.assign(Object.assign({}, this.cssBlock.element('container').class(this.active)), this.cssBlock.element('container').modifier(`gap-${this.gapSpace}`).class(this.active)));
         /**
          * PUBLIC METHODS
          * ------------------------------------------------------
@@ -248,7 +248,12 @@ export class SwiperUtil {
         const items = this.component.swiperGetAllChildrenElements();
         const index = slideIndex === undefined ? this.lastIndex() : slideIndex;
         if (items.length > index && index >= 0) {
-            const gapSize = this.gapSize;
+            const gaps = {
+                none: 0,
+                normal: 16,
+                medium: 24,
+            };
+            const gapSize = gaps[this.gapSpace];
             const transformNext = items
                 .filter((_, n) => n < index + 1)
                 .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0);

package/dist/esm/app-globals-c5ea8144.js

@@ -0,0 +1,5 @@
+import { g as globalScript } from './global-181336dc.js';
+
+const globalScripts = globalScript;
+
+export { globalScripts as g };

package/dist/esm/aria-ea150568.js

@@ -0,0 +1,8 @@
+const ariaBooleanToString = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return !!value ? 'true' : 'false';
+};
+
+export { ariaBooleanToString as a };

package/dist/esm/{attributes-4fa7040f.js → attributes-a3e70948.js}

@@ -5,6 +5,7 @@ const trackingAttributes = ['data-tracking-style', 'data-tracking-topic', 'data-
  * the `title` attribute that developers set directly on `bal-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
+ * This function also removes the attribute from the parent when its set on child.
  *
  * This does not need to be reactive as changing attributes on the host element
  * does not trigger a re-render.