bromcom-ui 2.8.0-rc.10-d → 2.8.0-rc.10-e

package/dist/collection/components/molecules/radio/radio.js

@@ -2,49 +2,100 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h, Host } from "@stencil/core";
-import { Bcm } from "@bcm/model";
-import { Generate } from "@bcm/helpers";
 import cs from 'classnames';
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { ColorHelper } from "../../../helper/color-helper";
+import { Generate } from "../../../helper/generate";
+import Bcm from "../../../models/bcm";
+import { SlotTemplate } from "../../../templates/slot-template";
 export class BcmRadio {
   constructor() {
     this._id = Generate.UID();
     this.checked = undefined;
     this.value = undefined;
-    this.disabled = false;
+    this.disabled = undefined;
     this.size = Bcm.Size.medium;
-    this.color = undefined;
+    this.hidden = false;
+    this.required = false;
+    this.color = "blue";
+  }
+  setColor(color = this.color) {
+    if (!color)
+      return;
+    const prefix = `--bcm-checkbox`;
+    return {
+      [`${prefix}-primary-color-default`]: ColorHelper.dsColor(color + '-500'),
+      [`${prefix}-primary-color-hover`]: ColorHelper.dsColor(color + '-600'),
+      [`${prefix}-primary-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
+      [`${prefix}-primary-color-active`]: ColorHelper.dsColor(color + '-700'),
+      // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
+      [`${prefix}-secondary-color-default`]: ColorHelper.dsColor('white'),
+      [`${prefix}-secondary-color-hover`]: ColorHelper.dsColor('slate-50'),
+      [`${prefix}-secondary-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
+      [`${prefix}-secondary-color-active`]: ColorHelper.dsColor('slate-50'),
+      // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
+    };
   }
   render() {
-    const { value, size, disabled, checked, _id, color } = this;
-    return (h(Host, { class: cs("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
-        "tw-cursor-pointer tw-text-slate-600": !disabled,
-        "tw-cursor-not-allowed tw-text-slate-400": disabled,
-        "tw-text-1": size === Bcm.Size.small,
-        "tw-text-2.5": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
-        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
-        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
-        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
-      }, "focus:tw-outline-none focus:tw-shadow-outline", 
-      // default
-      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
-      // disabled
-      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && cs(
-      // hover
-      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
-      // focus-visible 
-      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
-      // active
-      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
+    const { checked, value, disabled, size, hidden, required } = this;
+    // const defaultClasses = cs(
+    //     'radio-container',
+    //     'size-2',
+    //     {
+    //         'checked': checked,
+    //         'disabled': disabled
+    //     }
+    // )
+    // const buttonClasses = cs(
+    //     'radio-button',
+    //     buttonStyle,
+    //     size,
+    //     {
+    //         'size-2': size === 'small' || size === 'medium',
+    //         'size-3': size === 'large',
+    //         'checked': checked,
+    //         'disabled': disabled,
+    //     }
+    // )
+    const bcmRadioHostClasses = cs('bcm-checkbox', `bcm-checkbox-size-${size}`, {
+      hidden,
+      checked,
+      disabled,
+      required
+    });
+    const bcmRadioLabelClass = cs('bcm-checkbox__label');
+    const bcmCheckboxInputClass = cs('bcm-checkbox__input');
+    return (h(Host, { class: bcmRadioHostClasses, onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit(), style: this.setColor(this.color) }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmCheckboxInputClass }, h("label", { class: bcmRadioLabelClass }, h("input", { type: "radio", value: value, checked: checked, disabled: disabled }), h("span", { class: cs("bcm-checkbox__label-icon", "bcm-radio__icon", {
+        'bcm-checkbox__label-icon-checked': checked,
+      }) }, h("span", { class: 'bcm-radio__icon-inner' })), h(SlotTemplate, { className: "slot" })))));
   }
   static get is() { return "bcm-radio"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio.css"]
+    };
+  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -54,7 +105,7 @@ export class BcmRadio {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Props *"
         },
         "attribute": "id",
         "reflect": true,
@@ -62,7 +113,7 @@ export class BcmRadio {
       },
       "checked": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -79,7 +130,7 @@ export class BcmRadio {
       },
       "value": {
         "type": "any",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string | number",
           "resolved": "number | string",
@@ -96,7 +147,7 @@ export class BcmRadio {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -109,19 +160,18 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
+        "reflect": false
       },
       "size": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },
@@ -135,12 +185,48 @@ export class BcmRadio {
         "reflect": false,
         "defaultValue": "Bcm.Size.medium"
       },
+      "hidden": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "color": {
-        "type": "any",
-        "mutable": false,
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -150,14 +236,15 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"blue\""
       }
     };
   }
   static get events() {
     return [{
-        "method": "radioChange",
-        "name": "bcm-radio-change",
+        "method": "change",
+        "name": "bcm-change",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -204,3 +291,6 @@ export class BcmRadio {
   }
   static get elementRef() { return "el"; }
 }
+__decorate([
+  IsLoad()
+], BcmRadio.prototype, "el", void 0);

package/dist/collection/components/molecules/radio/types.js

@@ -0,0 +1,30 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+/**
+ * 'color' prop predefined values
+ */
+export var ColorProps;
+(function (ColorProps) {
+  ColorProps["black"] = "black";
+  ColorProps["white"] = "white";
+  ColorProps["prime-blue"] = "prime-blue";
+  ColorProps["grey"] = "grey";
+  ColorProps["blue"] = "blue";
+  ColorProps["warmyellow"] = "warmyellow";
+  ColorProps["yellow"] = "yellow";
+  ColorProps["limegreen"] = "limegreen";
+  ColorProps["red"] = "red";
+  ColorProps["darkorange"] = "darkorange";
+  ColorProps["orange"] = "orange";
+  ColorProps["green"] = "green";
+  ColorProps["turquosie"] = "turquosie";
+  ColorProps["cobaltblue"] = "cobaltblue";
+  ColorProps["magenta"] = "magenta";
+  ColorProps["purple"] = "purple";
+  ColorProps["bc-red"] = "bc-red";
+  ColorProps["bc-blue"] = "bc-blue";
+  ColorProps["bc-green"] = "bc-green";
+  ColorProps["bc-orange"] = "bc-orange";
+})(ColorProps || (ColorProps = {}));

package/dist/collection/components/molecules/range/range.css

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/molecules/search/search.css

@@ -125,9 +125,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -430,9 +428,7 @@
   min-height: calc(14px + 8px);
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -780,9 +776,7 @@
   margin: 0;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1171,7 +1165,6 @@
 }
 .bcm-input__container .input-suffix:not(:empty) {
   min-width: 24px;
-  padding-right: 4px;
 }
 .bcm-input__container .input-prefix:not(:empty),
 .bcm-input__container .input-suffix:not(:empty) {
@@ -1179,11 +1172,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: #64748a;
+  color: var(--bcm-color-grey-8);
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: #64748a;
+  color: var(--bcm-color-grey-8);
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

package/dist/collection/components/molecules/search/search.js

@@ -33,7 +33,6 @@ export class BcmSearch {
     this.size = Bcm.Size.medium;
     this.limit = 10;
     this.searchIsOnlyChilds = false;
-    this.minSearchLength = 2;
     this.data = [];
     this.tick = {};
     this.isActiveClearable = false;
@@ -49,7 +48,7 @@ export class BcmSearch {
   }
   async initState() {
     await searchState.setValue({
-      id: this._id + "-input",
+      id: this._id,
       dataSource: this.data,
       searchIsOnlyChilds: this.searchIsOnlyChilds,
     });
@@ -88,7 +87,7 @@ export class BcmSearch {
   }
   onSearchValue(event, instance) {
     const { value, id } = event.target;
-    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
+    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= 2 ? searchState.searchData(id, value, null) : null;
     const { bcmOnSearch, inputElement } = instance;
     bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
   }
@@ -258,24 +257,6 @@ export class BcmSearch {
         "reflect": false,
         "defaultValue": "false"
       },
-      "minSearchLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min-search-length",
-        "reflect": false,
-        "defaultValue": "2"
-      },
       "data": {
         "type": "any",
         "mutable": true,

package/dist/collection/components/molecules/skeleton/skeleton.js

@@ -12,9 +12,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from "@stencil/core";
-import { IsLoad } from "../../../decorators/is-load-decorator";
-import { Generate } from "../../../helper/generate";
+import { h } from '@stencil/core';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
 export class BcmSkeleton {
   constructor() {
     this._id = Generate.UID();
@@ -24,9 +24,9 @@ export class BcmSkeleton {
     var _a;
     const parentElement = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement;
     if (parentElement) {
-      const hidden = document.createElement("span");
-      hidden.setAttribute("id", `${this._id}-span`);
-      hidden.classList.add("tw-hidden");
+      const hidden = document.createElement('span');
+      hidden.setAttribute('id', `${this._id}-span`);
+      hidden.classList.add('tw-hidden');
       hidden.innerHTML = `<slot />`;
       parentElement.appendChild(hidden);
       if (parentElement.isConnected) {
@@ -37,9 +37,9 @@ export class BcmSkeleton {
   }
   render() {
     const SkeletonAnimate = () => {
-      return (h("div", { class: "tw-mx-auto tw-w-full tw-max-w-sm tw-rounded-md tw-border tw-border-blue-300 tw-p-4 tw-shadow" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-flex tw-animate-pulse tw-space-x-4" }, h("div", { class: "tw-h-10 tw-w-10 tw-rounded-full tw-bg-slate-200" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-col-span-2 tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-col-span-1 tw-h-2 tw-rounded tw-bg-slate-200" })), h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }))))));
+      return (h("div", { class: "tw-border tw-border-blue-300 tw-shadow tw-rounded-md tw-p-4 tw-max-w-sm tw-w-full tw-mx-auto" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-animate-pulse tw-flex tw-space-x-4" }, h("div", { class: "tw-rounded-full tw-bg-slate-200 tw-h-10 tw-w-10" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-2" }), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-1" })), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }))))));
     };
-    return this.loading ? h(SkeletonAnimate, null) : h("slot", null);
+    return (this.loading ? h(SkeletonAnimate, null) : h("slot", null));
   }
   static get is() { return "bcm-skeleton"; }
   static get properties() {

package/dist/collection/components/molecules/states/radio-group.states.js

@@ -0,0 +1,107 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { createStore } from '@stencil/store';
+import snq from 'snq';
+import { Generate } from '../../../helper/generate';
+import { StringHelper } from '../../../helper/string-helper';
+const { state, onChange } = createStore({
+  group: new Map(),
+  onChange: {},
+});
+const setValue = async ({ fullWidth, optionType, buttonStyle, size, disabled, defaultCheckedItems, el, id, label, required, captionType, hidden, direction, childs, gap, name, noCaption, }) => {
+  if (el) {
+    state.group.set(id, {
+      fullWidth,
+      optionType,
+      buttonStyle,
+      size,
+      disabled,
+      defaultCheckedItems,
+      label,
+      required,
+      captionType,
+      hidden,
+      direction,
+      gap,
+      noCaption,
+      name,
+      childs: await childs.map(child => {
+        fullWidth && (child.style.flex = fullWidth == 'flex' ? 'auto' : '100%');
+        optionType && (child.optionType = optionType);
+        buttonStyle && (child.buttonStyle = buttonStyle);
+        size && (child.size = size);
+        defaultCheckedItems && defaultCheckedItems.find(e => e === child.name) && (child.checked = true);
+        child.noCaption = noCaption;
+        return {
+          id: child.id || Generate.UID(),
+          checked: child.checked,
+          name: name,
+          value: child.value,
+          size: child.size,
+          buttonStyle: child.buttonStyle,
+          optionType: child.optionType,
+          style: child.style,
+          noCaption: child.noCaption,
+          color: child.color,
+          disabled: child.disabled,
+          label: child.label || child.name,
+          slot: child.slot || child.textContent,
+          required,
+          captionType,
+          hidden: child.hidden
+        };
+      }),
+    });
+  }
+};
+const getProperty = id => {
+  return snq(() => state.group.get(id), {});
+};
+const getValue = id => {
+  const group = getProperty(id);
+  let value = null;
+  group.childs.map(child => {
+    child.checked == true && (value = child.value || child.slot);
+  });
+  return value && StringHelper.trim(value);
+};
+const setClear = id => {
+  getProperty(id).childs.forEach(child => {
+    child.checked = false;
+  });
+};
+const setCheckedItem = (id, itemId, checked) => {
+  const childs = getProperty(id).childs;
+  if (childs && childs.length > 0) {
+    childs.forEach(child => {
+      child.checked = child.id == itemId || child.value == itemId ? checked : false;
+    });
+  }
+};
+const resetCaption = id => {
+  const noCaption = getProperty(id).noCaption;
+  getProperty(id).childs.forEach(child => {
+    child.resetCaption();
+    child.noCaption = noCaption;
+  });
+};
+const removeState = id => {
+  return Promise.resolve(state.group.delete(id));
+};
+onChange('onChange', (obj) => {
+  getProperty(obj.id).childs.map(child => {
+    child.checked = child.id === obj.childId;
+  });
+});
+export default {
+  setValue,
+  getValue,
+  setCheckedItem,
+  getProperty,
+  setClear,
+  removeState,
+  resetCaption,
+  state,
+};

package/dist/collection/components/molecules/states/search.states.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { createStore } from "@stencil/store";
-import snq from "snq";
-import { Generate } from "../../../helper/generate";
-import { StringHelper } from "../../../helper/string-helper";
+import { createStore } from '@stencil/store';
+import snq from 'snq';
+import { Generate } from '../../../helper/generate';
+import { StringHelper } from '../../../helper/string-helper';
 const { state } = createStore({
   value: new Map(),
 });
@@ -83,12 +83,7 @@ const searchData = (id, searchText, items) => {
     //     }
     // })
   }
-  return {
-    result: snq(() => Generate.flatArray(results[0].result), []),
-    matching: snq(() => results[0].matching, []),
-    parentIndex: snq(() => results[0].parentIndex, []),
-    nestedResult: snq(() => results[0].nestedResult, []),
-  };
+  return { result: Generate.flatArray(results[0].result), matching: results[0].matching, parentIndex: results[0].parentIndex, nestedResult: results[0].nestedResult };
 };
 const nestedSearch = (id, items, searchText) => {
   let matching = [];
@@ -99,8 +94,8 @@ const nestedSearch = (id, items, searchText) => {
   if (items && items.length > 0) {
     items.forEach(child => {
       let isChild = searchIsOnlyChilds && child.parentId !== null;
-      let isMatching = StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1 ||
-        (child.keywords && StringHelper.slugify(child.keywords).indexOf(StringHelper.slugify(searchText)) > -1);
+      let isMatching = StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1
+        || (child.keywords && StringHelper.slugify(child.keywords).indexOf(StringHelper.slugify(searchText)) > -1);
       if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
         result.push(child.id);
         matching.push(child.id);

package/dist/collection/components/molecules/stepper/stepper.css

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -431,8 +429,7 @@
   border: 2px solid var(--bcm-color-prime-blue-6);
   border-color: transparent;
   position: absolute;
-  z-index: 0;
-  user-select: none;
+  z-index: -1;
   top: -6px;
   left: -6px;
 }