bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

package/dist/components/bcm-result-footer.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './popover.style.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import './bcm.js';
+import { r as resultStyle } from './result.style.js';
+
+const BcmResultFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    const { footer } = resultStyle();
+    return (h(Host, { class: footer() }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-result-footer", {
+    "_id": [513, "id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-result-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-result-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmResultFooter$1);
+      }
+      break;
+  } });
+}
+
+const BcmResultFooter = BcmResultFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmResultFooter, defineCustomElement };

package/dist/components/bcm-result.js

@@ -3,89 +3,48 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const statuses = {
-  success: {
-    icon: 'far fa-check-circle',
-    color: 'green-6'
-  },
-  info: {
-    icon: 'far fa-info-circle',
-    color: 'blue-6'
-  },
-  warning: {
-    icon: 'far fa-warning',
-    color: 'warmyellow-6'
-  },
-  error: {
-    icon: 'far fa-times-circle',
-    color: 'grey-10'
-  }
-};
-
-const resultCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}:host(.hidden){display:none}.result{display:flex;flex-direction:column;align-items:center;padding:32px 24px}.result .content{margin-top:24px}.result .content .heading{margin-bottom:8px}.result .content .heading,.result .content .desc{display:block;text-align:center}.result .content .extra{background-color:#F5F5F5;padding:24px 24px;margin:32px 0}@media screen and (min-width: 576px){.result .content .extra{padding:24px 40px}}.result .content .buttons{display:flex;justify-content:center;grid-gap:8px;flex-wrap:wrap}";
+import { a as Bcm } from './bcm.js';
+import { r as resultStyle } from './result.style.js';
 
 const BcmResult$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
-    this.status = null;
+    this.icon = undefined;
     this.heading = undefined;
     this.description = undefined;
-    this.hidden = false;
-    this.footerArea = undefined;
-    this.footerHtml = undefined;
-  }
-  getIcon() {
-    if (this.status != null) {
-      const icon = statuses[this.status].icon;
-      return (h("div", { class: "icon" }, h("bcm-icon", { icon: icon })));
-    }
-  }
-  componentDidRender() {
-    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-result-footer') {
-        el.slot = 'footer';
-        this.footerArea = true;
-        this.footerHtml = el.innerHTML;
-        el.innerHTML = "";
-      }
-    });
+    this.status = Bcm.Status.default;
   }
   render() {
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: "result" }, this.getIcon(), h("div", { class: "content" }, h("span", { class: "heading size-5 weight-semibold" }, this.heading), h("span", { class: "desc size-2" }, this.description), h("div", { class: "extra" }, h("slot", null)), (this.footerArea && (h("div", { class: "buttons", innerHTML: this.footerHtml })))))));
+    const { icon, heading, description, status } = this;
+    const { host, iconStyle, headingStyle, descriptionStyle } = resultStyle({ status });
+    const statusIcon = {
+      default: icon || "",
+      info: "fa-regular fa-circle-info",
+      success: "fa-regular fa-circle-check",
+      warning: "fa-regular fa-triangle-exclamation",
+      error: "fa-regular fa-xmark-circle",
+    }[status];
+    return (h(Host, { class: host() }, h("div", { class: iconStyle() }, statusIcon && h("i", { class: statusIcon })), h("div", { class: headingStyle() }, heading), h("div", { class: descriptionStyle() }, description), h("slot", null), h("slot", { name: "footer" })));
   }
   get el() { return this; }
-  static get style() { return resultCss; }
-}, [1, "bcm-result", {
-    "status": [1025],
-    "heading": [1025],
-    "description": [1025],
-    "hidden": [1028],
-    "footerArea": [32],
-    "footerHtml": [32]
+}, [4, "bcm-result", {
+    "icon": [1],
+    "heading": [1],
+    "description": [1],
+    "status": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-result", "bcm-icon"];
+  const components = ["bcm-result"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-result":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmResult$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
   } });
 }
 

package/dist/components/bcm-segment-picker-item.d.ts

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

package/dist/components/bcm-segment-picker-item.js

@@ -0,0 +1,51 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as Bcm } from './bcm.js';
+import { s as segmentPickerStyle } from './segment-picker.style.js';
+
+const BcmSegmentPickerItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.click = createEvent(this, "bcm-click", 7);
+    this.size = Bcm.Size.medium;
+    this.text = "";
+    this.color = "--bcm-ui-color-background-primary-info-default";
+    this.value = "";
+    this.disabled = false;
+    this.active = false;
+  }
+  render() {
+    const { text, disabled, active, size } = this;
+    const { item } = segmentPickerStyle({ size, disabled, active });
+    return (h(Host, { class: item(), onClick: () => this.click.emit() }, h("slot", null, text)));
+  }
+}, [4, "bcm-segment-picker-item", {
+    "size": [1],
+    "text": [1],
+    "color": [513],
+    "value": [1],
+    "disabled": [4],
+    "active": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-segment-picker-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-segment-picker-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmSegmentPickerItem$1);
+      }
+      break;
+  } });
+}
+
+const BcmSegmentPickerItem = BcmSegmentPickerItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSegmentPickerItem, defineCustomElement };

package/dist/components/bcm-segment-picker.d.ts

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

package/dist/components/bcm-segment-picker.js

@@ -0,0 +1,87 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as Bcm } from './bcm.js';
+import { s as segmentPickerStyle } from './segment-picker.style.js';
+
+const BcmSegmentPicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.change = createEvent(this, "bcm-change", 7);
+    this.changeSegment = createEvent(this, "bcm-segment-picker:change", 7);
+    this.handleChange = (event) => {
+      event.preventDefault();
+      const target = event.target;
+      this.change.emit(target.value);
+      this.changeSegment.emit(target.value);
+      this.setSegmentItemActive(target.value);
+    };
+    this.setSegmentItemActive = (value) => {
+      const segmentItems = this.el.querySelectorAll("bcm-segment-picker-item");
+      segmentItems.forEach((item) => {
+        if (item.value == value) {
+          item.active = true;
+          this.value = value;
+          const color = item.getAttribute("color");
+          const { offsetWidth, offsetLeft } = item;
+          const { style } = this.el;
+          style.setProperty("--highlight-width", `${offsetWidth}px`);
+          style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
+          style.setProperty("--highlight-color", `var(${color})`);
+        }
+        else {
+          item.active = false;
+        }
+      });
+    };
+    this.size = Bcm.Size.medium;
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.block = false;
+    this.data = [];
+  }
+  componentDidLoad() {
+    const { defaultValue } = this;
+    if (defaultValue) {
+      this.setSegmentItemActive(defaultValue);
+    }
+  }
+  render() {
+    const { base } = segmentPickerStyle({ size: this.size });
+    return (h(Host, { class: base(), "onbcm-click": this.handleChange }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-segment-picker", {
+    "size": [1],
+    "name": [1],
+    "value": [1],
+    "defaultValue": [1, "default-value"],
+    "disabled": [4],
+    "fullWidth": [4, "full-width"],
+    "block": [4],
+    "data": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-segment-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-segment-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmSegmentPicker$1);
+      }
+      break;
+  } });
+}
+
+const BcmSegmentPicker = BcmSegmentPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSegmentPicker, defineCustomElement };

package/dist/components/bcm-select.js

@@ -6,10 +6,9 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { S as StringHelper } from './string-helper.js';
 import { a as dropInComponent } from './utils.js';
-import { d as defineCustomElement$l } from './avatar.js';
-import { d as defineCustomElement$k } from './badge.js';
-import { d as defineCustomElement$j } from './checkbox.js';
-import { d as defineCustomElement$i } from './checkbox-lite.js';
+import { d as defineCustomElement$k } from './avatar.js';
+import { d as defineCustomElement$j } from './badge.js';
+import { d as defineCustomElement$i } from './checkbox.js';
 import { d as defineCustomElement$h } from './divider.js';
 import { d as defineCustomElement$g } from './empty.js';
 import { d as defineCustomElement$f } from './icon.js';
@@ -1266,7 +1265,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-select", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-checkbox-lite", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-old-tag", "bcm-select-box", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
+  const components = ["bcm-select", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-old-tag", "bcm-select-box", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-select":
       if (!customElements.get(tagName)) {
@@ -1274,21 +1273,16 @@ function defineCustomElement$1() {
       }
       break;
     case "bcm-avatar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$k();
       }
       break;
-    case "bcm-checkbox":
+    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$j();
       }
       break;
-    case "bcm-checkbox-lite":
+    case "bcm-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }

package/dist/components/bcm-shortcut.js

@@ -4,13 +4,47 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
+
+const shortcutStyle = ce({
+  slots: {
+    host: [
+      "bcm-shortcut",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-block tw-h-fit tw-w-fit tw-rounded-md tw-border tw-border-solid tw-px-1",
+      "tw-border-[--bcm-shortcut-border] tw-bg-[--bcm-shortcut-bg] tw-text-[--bcm-shortcut-text]",
+      "tw-text-center tw-font-medium tw-capitalize",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: [
+          "tw-text-size-3",
+        ],
+      },
+      medium: {
+        host: [
+          "tw-text-size-4",
+        ],
+      },
+      large: {
+        host: [
+          "tw-text-size-5",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
 
 const osKeys = {
   ctrl: "⌘",
@@ -45,11 +79,17 @@ const BcmShortcut$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const { size, color, hotkey } = this;
-    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-default-300 tw-bg-default-100 tw-text-default-700", "tw-text-center tw-font-medium tw-capitalize", {
-        "tw-text-2": size === Bcm.Size.small,
-        "tw-text-3": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: Object.assign({}, Generate.getTwColor({ color })) }, this.getHotkey(hotkey)));
+    const { host } = shortcutStyle({ size });
+    const style = Generate.getTwColor({
+      color: color,
+      tones: {
+        100: ["bg"],
+        300: ["border"],
+        700: ["text"],
+      },
+      variable: "--bcm-shortcut",
+    });
+    return (h(Host, { class: host(), style: style }, this.getHotkey(hotkey)));
   }
 }, [0, "bcm-shortcut", {
     "hotkey": [1],

package/dist/components/bcm-stepper.js

@@ -4,14 +4,15 @@
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate, s as snq } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { g as getChildElements } from './utils.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
+import './checkbox.style.js';
 import './types.js';
 import './types2.js';
 import { s as stepperStates, d as defineCustomElement$2 } from './step.js';
@@ -37,7 +38,7 @@ const StepperHeaderTemplate = ({ _title, description, status, valid, index, load
       h("div", { class: "bcm-stepper__header-item-description size-1 tw-text-center", innerHTML: description }))));
 };
 
-const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:150px}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-new-ds-color-blue-600);color:var(--bcm-new-ds-color-slate-700);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-new-ds-color-blue-600);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-700)}.bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-600)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-new-ds-color-blue-600);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0;border-radius:3px 0 0 3px}.bcm-stepper__header-item::before{left:0;border-radius:0 3px 3px 0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-new-ds-color-blue-600);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-700)}.bcm-stepper__header-line--success{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-700)}.bcm-stepper__header-line--error{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-700)}.bcm-stepper__header-line--default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--loading{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
+const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:150px;text-align:center}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-new-ds-color-blue-600);color:var(--bcm-ui-color-text-disabled);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-new-ds-color-blue-600);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:600}.bcm-stepper__header-item-description{color:var(--bcm-ui-color-text-caption);font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4);font-weight:400}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title{color:var(--bcm-ui-color-text-disabled)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description{color:var(--bcm-ui-color-text-disabled)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-hover)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-ui-color-background-primary-info-default);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0;border-radius:3px 0 0 3px}.bcm-stepper__header-item::before{left:0;border-radius:0 3px 3px 0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-new-ds-color-blue-600);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-700)}.bcm-stepper__header-line--success{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-success-default)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-success-hover)}.bcm-stepper__header-line--error{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-700)}.bcm-stepper__header-line--default{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-primary-info-default)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-primary-info-hover)}.bcm-stepper__header-line--loading{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:var(--bcm-ui-color-text-base)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-ui-color-background-disabled-disable)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
 
 const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {