bromcom-ui 2.7.38-rc.0 → 2.7.38-rc.10

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

@@ -0,0 +1,72 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { HexColorPicker } from "react-colorful";
+import { debounce } from "lodash";
+// https://github.com/omgovich/react-colorful
+export class BcmColorful {
+  constructor() {
+    this.color = "#3b82f6";
+  }
+  handleChange(e) {
+    this.bcmChange.emit(e);
+  }
+  componentDidRender() {
+    const { color } = this;
+    ReactDOM.render(React.createElement(HexColorPicker, {
+      color,
+      onChange: debounce(this.handleChange.bind(this), 150),
+    }), this.el);
+  }
+  static get is() { return "bcm-colorful"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["colorful.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["colorful.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"#3b82f6\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmChange",
+        "name": "bcmChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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

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

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

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

package/dist/collection/components/molecules/error-layout/error-layout.css

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

package/dist/collection/components/molecules/expansion-panel/expansion-panel.css

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

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

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1065,7 +1071,7 @@
   cursor: not-allowed;
 }
 .bcm-input__container.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-300);
+  color: var(--bcm-new-ds-color-slate-500);
 }
 .bcm-input__container.readonly {
   background-color: var(--bcm-new-ds-color-slate-50);
@@ -1165,6 +1171,7 @@
 }
 .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) {
@@ -1172,11 +1179,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

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

@@ -304,6 +304,32 @@ export class BcmInput {
     }
     return val;
   }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      console.log("color: ", color.sRGBHex);
+      this.setValue(color.sRGBHex);
+    })
+      .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        console.log("Permission to access sensor was denied.");
+      }
+      else if (error.name === "NotSupportedError") {
+        console.log("Sensor not supported.");
+      }
+    });
+  }
+  isEyeDropperSupported() {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  }
+  toggleLinked() {
+    const linkedElement = document.getElementById(`${this._id}-linked`);
+    if (linkedElement) {
+      linkedElement.toggle();
+    }
+  }
   render() {
     const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
     const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
@@ -312,7 +338,8 @@ export class BcmInput {
       // 'no-margin': noMargin,
       'full-width': fullWidth
     });
-    return (h(Host, { tabindex: "-1", onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+    return (h(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+      h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
   }
   static get is() { return "bcm-input"; }
   static get originalStyleUrls() {
@@ -566,7 +593,7 @@ export class BcmInput {
         "mutable": true,
         "complexType": {
           "original": "InputTypes",
-          "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolved": "\"color\" | \"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {
             "InputTypes": {
               "location": "import",

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

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

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

@@ -12,20 +12,20 @@ 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 { Host, h } from '@stencil/core';
-import { Bcm } from '@bcm/model';
-import { delay, FloatingUI } from '@bcm/utils';
-import { Generate } from '@bcm/helpers';
-import { IsLoad } from '@bcm/decorator';
+import { Host, h } from "@stencil/core";
+import { Bcm } from "@bcm/model";
+import { delay, FloatingUI } from "@bcm/utils";
+import { Generate } from "@bcm/helpers";
+import { IsLoad } from "@bcm/decorator";
 export class BcmLinked {
   constructor() {
     this._id = Generate.UID();
-    this.placement = Bcm.Placement['bottom-start'];
+    this.placement = Bcm.Placement["bottom-start"];
     this.trigger = Bcm.TriggerType.click;
-    this.targetId = '';
+    this.targetId = "";
     this.height = undefined;
     this.maxHeight = undefined;
-    this.minHeight = '50px';
+    this.minHeight = "50px";
     this.isOpen = false;
   }
   target() {
@@ -41,15 +41,15 @@ export class BcmLinked {
     }
   }
   dismissEvent() {
-    document.dispatchEvent(new CustomEvent('linked-data-dismiss', { detail: { id: this._id } }));
+    document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
   }
   checkDataDismiss(e) {
-    Generate.findEventPathHasAttribute(e, 'data-dismiss') && this.dismissEvent();
+    Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
   }
   hideChildLinked() {
-    this.el.querySelectorAll('[is-linked][linked-is-open]').forEach(item => {
+    this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
       var _a;
-      (_a = document.querySelector(`#${item.getAttribute('is-linked')}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
+      (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
     });
   }
   calculatePosition() {
@@ -61,7 +61,7 @@ export class BcmLinked {
           floating: el,
           placement: this.placement,
           offset: 4,
-          autoHidden: el.getAttribute('main-linked') === 'true' ? false : true,
+          autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
           autoSize: true,
           style: {
             height: this.height,
@@ -71,20 +71,20 @@ export class BcmLinked {
         });
       }
       else {
-        el.style.visibility = 'hidden';
-        el.style.opacity = '0';
+        el.style.visibility = "hidden";
+        el.style.opacity = "0";
       }
     }
   }
   init() {
     const target = this.target();
     if (target) {
-      target.setAttribute('is-linked', this.el.id);
-      if (!Generate.getAncestor(target, 'bcm-linked')) {
-        this.el.setAttribute('main-linked', 'true');
+      target.setAttribute("is-linked", this.el.id);
+      if (!Generate.getAncestor(target, "bcm-linked")) {
+        this.el.setAttribute("main-linked", "true");
       }
       else {
-        this.el.removeAttribute('main-linked');
+        this.el.removeAttribute("main-linked");
       }
     }
   }
@@ -106,7 +106,7 @@ export class BcmLinked {
     const target = this.target();
     if (target) {
       document.body.appendChild(this.el);
-      target.setAttribute('linked-is-open', 'true');
+      target.setAttribute("linked-is-open", "true");
       this.isOpen = true;
       this.calculatePosition();
     }
@@ -119,7 +119,7 @@ export class BcmLinked {
     wait && (await delay(50));
     const target = this.target();
     if (target) {
-      target.removeAttribute('linked-is-open');
+      target.removeAttribute("linked-is-open");
       this.hideChildLinked();
       this.isOpen = false;
     }
@@ -133,16 +133,16 @@ export class BcmLinked {
       return;
     const isTarget = Generate.findEventPath(e, this.target());
     const isSelf = Generate.findEventPath(e, this.el);
-    const isLinked = Generate.findEventPathWithNodeName(e, 'BCM-LINKED');
+    const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
     if (!isTarget && !isSelf && !isLinked) {
-      this.isOpen = false;
+      this.hide();
       this.bcmOpen.emit(this.isOpen);
       return;
     }
     if (this.isOpen) {
       isTarget && this.hide(false);
       isSelf && this.checkDataDismiss(e);
-      if (this.el.getAttribute('main-linked') === 'true' && !isTarget && !isSelf && !isLinked) {
+      if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
         this.dismissEvent();
       }
     }
@@ -163,8 +163,8 @@ export class BcmLinked {
     this.bcmOpen.emit(this.isOpen);
   }
   render() {
-    const openStyle = this.isOpen ? { visibility: 'visible', opacity: '1' } : { visibility: 'hidden', opacity: '0' };
-    return (h(Host, { class: "tw-block tw-opacity-0 tw-invisible tw-top-0 tw-left-0  tw-rounded tw-bg-white  tw-z-tooltip tw-transition-opacity tw-duration-100  tw-shadow tw-overscroll-contain tw-scroll-smooth tw-absolute", style: Object.assign(Object.assign({}, openStyle), { overflow: 'auto' }) }, h("slot", null)));
+    const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
+    return (h(Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
   }
   static get is() { return "bcm-linked"; }
   static get properties() {
@@ -208,7 +208,7 @@ export class BcmLinked {
         },
         "attribute": "placement",
         "reflect": false,
-        "defaultValue": "Bcm.Placement['bottom-start']"
+        "defaultValue": "Bcm.Placement[\"bottom-start\"]"
       },
       "trigger": {
         "type": "string",
@@ -249,7 +249,7 @@ export class BcmLinked {
         },
         "attribute": "target-id",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "height": {
         "type": "string",
@@ -301,7 +301,7 @@ export class BcmLinked {
         },
         "attribute": "min-height",
         "reflect": false,
-        "defaultValue": "'50px'"
+        "defaultValue": "\"50px\""
       },
       "isOpen": {
         "type": "boolean",

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

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

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

@@ -98,7 +98,7 @@ export class BcmMenu {
           'bcm-menu__item-submenu--open': item.isOpen,
         }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
     };
-    return (h(Host, { class: hostClasses, tabindex: "-1", disabled: this.disabled }, h("div", { class: "bcm-menu__container" }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
+    return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container" }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
         'bcm-menu__collapse-button--collapsed': collapse,
       }), onClick: () => {
         this.collapse = !collapse;

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

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

package/dist/collection/components/molecules/popconfirm/popconfirm-box.css

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

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

@@ -89,7 +89,7 @@ export class BcmPopconfirm {
   }
   render() {
     const popconfirmClasses = cs('bcm-popconfirm');
-    return (h(Host, { class: popconfirmClasses, onclick: () => this.listenTrigger('click'), tabindex: 0 }, h("slot", null)));
+    return (h(Host, { class: popconfirmClasses, onclick: () => this.listenTrigger('click') }, h("slot", null)));
   }
   static get is() { return "bcm-popconfirm"; }
   static get originalStyleUrls() {

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

@@ -12,19 +12,19 @@ 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 { IsLoad } from '@bcm/decorator';
-import { Generate, Popover } from '@bcm/helpers';
-import { Bcm } from '@bcm/model';
-import { Host, h } from '@stencil/core';
+import { IsLoad } from "@bcm/decorator";
+import { Generate, Popover } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
 export class BcmPopover {
   constructor() {
     this._id = Generate.UID();
-    this.message = '';
-    this.content = '';
+    this.message = "";
+    this.content = "";
     this.placement = Bcm.Placement.top;
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
-    this.color = 'white';
+    this.color = "white";
     this.popover = new Popover({
       targetId: this._id,
       content: this.content,
@@ -56,7 +56,7 @@ export class BcmPopover {
     this.popover.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-w-fit tw-h-fit" }, h("slot", null)));
+    return (h(Host, { "aria-describedby": "popover", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
   }
   static get is() { return "bcm-popover"; }
   static get properties() {
@@ -95,7 +95,7 @@ export class BcmPopover {
         },
         "attribute": "message",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "content": {
         "type": "string",
@@ -113,7 +113,7 @@ export class BcmPopover {
         },
         "attribute": "content",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "placement": {
         "type": "string",
@@ -195,7 +195,7 @@ export class BcmPopover {
         },
         "attribute": "color",
         "reflect": false,
-        "defaultValue": "'white'"
+        "defaultValue": "\"white\""
       }
     };
   }

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

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

package/dist/collection/components/molecules/radio/group.css

@@ -124,7 +124,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -427,7 +429,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

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

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1061,6 +1067,7 @@
   appearance: none;
   background-color: #fff;
   margin: 0;
+  display: none;
 }
 .bcm-checkbox__input {
   display: flex;

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

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