bromcom-ui 2.12.0-test.0 → 2.12.0

package/dist/collection/components/atoms/avatar/avatar.js

@@ -56,7 +56,7 @@ export class BcmAvatar {
         }
       }
       else if (this.image) {
-        return h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt });
+        return h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || "Avatar" });
       }
       else if (this.name) {
         return this.getFirstLetters(this.name);

package/dist/collection/components/atoms/badge/badge.js

@@ -24,7 +24,7 @@ export class BcmBadge {
   render() {
     const { blink, value, size, color, status } = this;
     const _color = this.statusColors[status] || color;
-    const { tone, colorName } = ColorHelper.parseColor(_color);
+    const { tone, colorName } = ColorHelper.parseColor(_color, 700);
     const dc = Generate.getTwColor({
       color: colorName,
       tones: {

package/dist/collection/components/atoms/badge/badge.style.js

@@ -7,7 +7,7 @@ export const badgeStyle = tv({
   slots: {
     host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
     base: [
-      "bcm-badge__dot",
+      "bcm-badge__dot tw-z-10",
       "tw-flex tw-items-center tw-justify-center tw-flex-row",
       "tw-rounded-full tw-text-center",
       "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",

package/dist/collection/components/atoms/button/button.css

@@ -132,36 +132,36 @@
   width: fit-content;
   height: fit-content;
   --bcm-button-solid-color-default: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-default: var(--bcm-new-ds-color-blue-500);
-  --bcm-button-solid-border-default: var(--bcm-new-ds-color-blue-500);
+  --bcm-button-solid-background-color-default: var(--bcm-new-ds-color-blue-700);
+  --bcm-button-solid-border-default: var(--bcm-new-ds-color-blue-700);
   --bcm-button-solid-color-hover: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-hover: var(--bcm-new-ds-color-blue-600);
-  --bcm-button-solid-border-hover: var(--bcm-new-ds-color-blue-600);
+  --bcm-button-solid-background-color-hover: var(--bcm-new-ds-color-blue-800);
+  --bcm-button-solid-border-hover: var(--bcm-new-ds-color-blue-800);
   --bcm-button-solid-color-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-focus-visible: var(--bcm-new-ds-color-blue-800);
-  --bcm-button-solid-border-focus-visible: var(--bcm-new-ds-color-blue-800);
+  --bcm-button-solid-background-color-focus-visible: var(--bcm-new-ds-color-blue-900);
+  --bcm-button-solid-border-focus-visible: var(--bcm-new-ds-color-blue-900);
   --bcm-button-solid-color-active: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-active: var(--bcm-new-ds-color-blue-700);
-  --bcm-button-solid-border-active: var(--bcm-new-ds-color-blue-700);
+  --bcm-button-solid-background-color-active: var(--bcm-new-ds-color-blue-900);
+  --bcm-button-solid-border-active: var(--bcm-new-ds-color-blue-900);
   --bcm-button-solid-color-disabled: var(--bcm-new-ds-color-white);
   --bcm-button-solid-background-color-disabled: var(--bcm-new-ds-color-slate-400);
   --bcm-button-solid-border-disabled: var(--bcm-new-ds-color-slate-400);
-  --bcm-button-ghost-color-default: var(--bcm-new-ds-color-slate-600);
+  --bcm-button-ghost-color-default: var(--bcm-new-ds-color-slate-700);
   --bcm-button-ghost-background-color-default: var(--bcm-new-ds-color-slate-100);
   --bcm-button-ghost-border-default: var(--bcm-new-ds-color-slate-300);
-  --bcm-button-ghost-color-hover: var(--bcm-new-ds-color-slate-600);
+  --bcm-button-ghost-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-button-ghost-background-color-hover: var(--bcm-new-ds-color-slate-200);
   --bcm-button-ghost-border-hover: var(--bcm-new-ds-color-slate-400);
-  --bcm-button-ghost-color-focus-visible: var(--bcm-new-ds-color-slate-600);
+  --bcm-button-ghost-color-focus-visible: var(--bcm-new-ds-color-slate-700);
   --bcm-button-ghost-background-color-focus-visible: var(--bcm-new-ds-color-slate-400);
   --bcm-button-ghost-border-focus-visible: var(--bcm-new-ds-color-slate-600);
-  --bcm-button-ghost-color-active: var(--bcm-new-ds-color-slate-600);
+  --bcm-button-ghost-color-active: var(--bcm-new-ds-color-slate-700);
   --bcm-button-ghost-background-color-active: var(--bcm-new-ds-color-slate-300);
   --bcm-button-ghost-border-active: var(--bcm-new-ds-color-slate-500);
   --bcm-button-ghost-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-button-ghost-background-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-button-ghost-border-disabled: var(--bcm-new-ds-color-slate-200);
-  --bcm-button-link-color-default: var(--bcm-new-ds-color-blue-500);
+  --bcm-button-link-color-default: var(--bcm-new-ds-color-blue-700);
   --bcm-button-link-background-color-default: var(--bcm-new-ds-color-transparent);
   --bcm-button-link-border-default: var(--bcm-new-ds-color-transparent);
   --bcm-button-link-color-hover: var(--bcm-new-ds-color-blue-600);

package/dist/collection/components/atoms/button/button.js

@@ -77,24 +77,24 @@ export class BcmButton {
         [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
         [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-900'),
         [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-900'),
         [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
       };
     }
     else if (kind == 'link') {
       return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-900'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
         [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
         [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
@@ -110,8 +110,8 @@ export class BcmButton {
     }
     else if (kind == 'ghost') {
       return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
         [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
         [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),

package/dist/collection/components/atoms/chip/chip.css

@@ -128,13 +128,13 @@
 }
 
 .bcm-chip {
-  --bcm-chip-color: var(--bcm-new-ds-color-slate-500);
-  --bcm-chip-color-hover: var(--bcm-new-ds-color-slate-500);
+  --bcm-chip-color: var(--bcm-new-ds-color-slate-700);
+  --bcm-chip-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-chip-color-focus: var(--bcm-new-ds-color-slate-700);
   --bcm-chip-color-active: var(--bcm-new-ds-color-slate-700);
   --bcm-chip-color-disabled: var(--bcm-new-ds-color-slate-300);
-  --bcm-chip-background-color: var(--bcm-new-ds-color-slate-200);
-  --bcm-chip-background-color-hover: var(--bcm-new-ds-color-slate-300);
+  --bcm-chip-background-color: var(--bcm-new-ds-color-slate-100);
+  --bcm-chip-background-color-hover: var(--bcm-new-ds-color-slate-200);
   --bcm-chip-background-color-focus: var(--bcm-new-ds-color-slate-300);
   --bcm-chip-background-color-active: var(--bcm-new-ds-color-slate-400);
   --bcm-chip-background-color-disabled: var(--bcm-new-ds-color-slate-100);

package/dist/collection/components/atoms/chip/chip.js

@@ -25,9 +25,9 @@ export class BcmChip {
       return;
     const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
     return {
-      "--bcm-chip-color": ColorHelper.dsColor(color + "-500"),
-      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-500"),
-      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-600"),
+      "--bcm-chip-color": ColorHelper.dsColor(color + "-700"),
+      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-700"),
+      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-700"),
       "--bcm-chip-color-active": ColorHelper.dsColor(color + "-700"),
       "--bcm-chip-color-disabled": ColorHelper.dsColor("slate" + "-300"),
       "--bcm-chip-background-color": ColorHelper.dsColor(color + "-100"),

package/dist/collection/components/atoms/link/link.css

@@ -133,21 +133,24 @@
   line-height: calc(14px + 8px);
   font-weight: 400;
   display: inline;
-  color: var(--bcm-new-ds-color-blue-500);
+  color: #1D4ED8;
 }
 .bcm-link.hidden {
   display: none;
 }
 .bcm-link.disabled {
   pointer-events: none;
-  opacity: 0.5;
   cursor: not-allowed;
 }
+.bcm-link.disabled .bcm-link__anchor {
+  color: #6B7280;
+}
 .bcm-link__anchor {
   display: inline-flex;
   align-items: baseline;
   font-size: inherit;
   color: inherit;
+  text-decoration: none;
 }
 .bcm-link__anchor.prefix .prefix-icon {
   margin-right: 4px;
@@ -159,11 +162,14 @@
   outline: none;
 }
 .bcm-link__anchor:hover {
-  color: var(--bcm-new-ds-color-blue-600);
+  text-decoration: underline;
 }
 .bcm-link__anchor:active {
   color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-link__anchor:focus-visible {
   color: var(--bcm-new-ds-color-blue-800);
+}
+.bcm-link__anchor:visited {
+  color: #7E22CE;
 }

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

@@ -150,7 +150,7 @@
   gap: unset;
 }
 .bcm-checkbox-group__container.indeterminate {
-  padding-top: 16px;
-  margin-top: 16px;
+  padding-top: 8px;
+  margin-top: 8px;
   border-top: 1px solid #efefef;
 }

package/dist/collection/components/molecules/checkbox/group.js

@@ -190,7 +190,7 @@ export class BcmCheckboxGroup {
     });
     return (h(Host, { class: bcmChechboxGroup }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), h("div", { class: "bcm-checkbox-group__label" }, label &&
       h("div", null, h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
   }
   static get is() { return "bcm-checkbox-group"; }
   static get originalStyleUrls() {

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

@@ -49,7 +49,7 @@ export class BcmColorInput {
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e) }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
+    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
         backgroundColor: this.value,
       } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }

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

@@ -8,7 +8,7 @@ export class BcmEmpty {
     this.icon = undefined;
   }
   render() {
-    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-400 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-400 tw-text-2" }, h("slot", null))));
+    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, h("slot", null))));
   }
   static get is() { return "bcm-empty"; }
   static get properties() {

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

@@ -43,7 +43,7 @@ export class BcmErrorLayout {
     const { itemsProp } = this;
     const classes = cs('error-layout', this.size);
     const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, this.itemsProp.map((item) => h("li", null, h("span", null, item)))))));
+    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, h("ul", null, this.itemsProp.map((item) => h("li", null, h("span", null, item))))))));
   }
   static get is() { return "bcm-error-layout"; }
   static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class BcmExpansionPanel {
       'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
       hidden,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
+    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
   }
   static get is() { return "bcm-expansion-panel"; }
   static get originalStyleUrls() {

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

@@ -376,7 +376,7 @@ export class BcmInput {
       // 'no-margin': noMargin,
       'full-width': fullWidth
     });
-    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 &&
+    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, id: _id + "-label" }), 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"; }

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

@@ -196,7 +196,7 @@ export class BcmInputDropdown {
     };
     const CommentTemplate = () => {
       var _a, _b, _c;
-      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { role: "button", "aria-labelledby": "button", "aria-label": "button", icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { role: "button", "aria-labelledby": "button", "aria-label": "button", icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
     };
     return (h(Host, { class: base() }, label && h("bcm-label", { htmlFor: _id + "-dropdown-input", size: size, value: label, required: required }), h("div", { class: content() }, h("div", { class: inputArea() }, h("input", { id: _id + "-dropdown-input", class: input(), style: { color: (_a = this.value) === null || _a === void 0 ? void 0 : _a.color }, type: "text", tabIndex: -1, placeholder: placeholder, value: (_b = this.value) === null || _b === void 0 ? void 0 : _b.key, disabled: disabled, required: required, autoComplete: "off", readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el) }), h("button", { disabled: disabled, id: `i-dropdown-button-${_id}`, class: button(), onClick: () => (this.isOpenMenu = true) }, h("i", { class: "fas fa-chevron-down" })), h("bcm-linked", { "onBcm-open": ({ detail }) => { var _a; return detail && ((_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide()); }, class: "tw-mt-1", id: `i-dropdown-menu-${_id}`, "target-id": `i-dropdown-button-${_id}`, placement: "bottom-start" }, h(MenuTemplates, null)), h("bcm-linked", { id: `i-dropdown-comment-${_id}`, "target-id": _id, trigger: "custom", placement: "left" }, h(CommentTemplate, null))), !this.hideComment ? (h("span", { onClick: () => {
         var _a, _b;

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

@@ -135,7 +135,7 @@
   --bcm-menu-background-color-hover: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active: var(--bcm-color-primary-500);
+  --bcm-menu-background-color-active: var(--bcm-color-primary-600);
   --bcm-menu-icon-color-active: var(--bcm-new-ds-color-white);
   --bcm-menu-color-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-background-color-focus-visible: var(--bcm-color-primary-600);
@@ -147,13 +147,13 @@
   --bcm-menu-background-color-dropdownDisabled: var(--bcm-new-ds-color-transparent);
   --bcm-menu-icon-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
   --bcm-menu-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-400);
+  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-700);
   --bcm-menu-icon-color-active-hover: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-700);
+  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-800);
   --bcm-menu-icon-color-active-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-active: var(--bcm-color-primary-800);
+  --bcm-menu-background-color-active-active: var(--bcm-color-primary-900);
   --bcm-menu-icon-color-active-active: var(--bcm-new-ds-color-white);
   font-family: "Inter", sans-serif;
   font-size: 14px;

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

@@ -260,7 +260,7 @@
   display: block;
   width: 100%;
   height: 4px;
-  background-color: var(--bcm-color-primary-400);
+  background-color: var(--bcm-color-primary-500);
   position: absolute;
   top: -4px;
   left: 0;

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

@@ -80,7 +80,7 @@ export class NumberInput {
     this.decimalSeparator = undefined;
     this.decimalScale = undefined;
     this.fixedDecimalScale = false;
-    this.allowNegative = false;
+    this.allowNegative = true;
     this.allowLeadingZeros = false;
     this.unitPrefix = undefined;
     this.unitSuffix = undefined;
@@ -672,7 +672,7 @@ export class NumberInput {
         },
         "attribute": "allow-negative",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
       "allowLeadingZeros": {
         "type": "boolean",

package/dist/collection/components/molecules/number-input/react-input.js

@@ -76,7 +76,7 @@ export class BcmReactNumber {
         "mutable": true,
         "complexType": {
           "original": "ExtendedNumericPropsType",
-          "resolved": "InternalNumberFormatBase & { thousandSeparator?: string | boolean; decimalSeparator?: string; allowedDecimalSeparators?: string[]; thousandsGroupStyle?: \"none\" | \"thousand\" | \"lakh\" | \"wan\"; decimalScale?: number; fixedDecimalScale?: boolean; allowNegative?: boolean; allowLeadingZeros?: boolean; suffix?: string; prefix?: string; } & Omit<InputAttributes, \"prefix\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"pattern\" | \"color\" | \"dir\" | \"width\" | \"height\" | \"name\" | \"id\" | \"hidden\" | \"size\" | \"className\" | \"type\" | \"disabled\" | \"autoFocus\" | \"formAction\" | \"formEncType\" | \"formMethod\" | \"formNoValidate\" | \"formTarget\" | \"maxLength\" | \"onClick\" | \"checked\" | \"required\" | \"multiple\" | \"placeholder\" | \"accept\" | \"alt\" | \"onSelect\" | \"accessKey\" | \"role\" | \"aria-label\" | \"aria-hidden\" | \"aria-live\" | \"readOnly\" | \"onFocus\" | \"onBlur\" | \"minLength\" | \"min\" | \"max\" | \"step\" | \"autoComplete\" | \"capture\" | \"crossOrigin\" | \"enterKeyHint\" | \"list\" | \"src\" | \"onChange\" | \"defaultChecked\" | \"suppressContentEditableWarning\" | \"suppressHydrationWarning\" | \"contentEditable\" | \"contextMenu\" | \"draggable\" | \"lang\" | \"nonce\" | \"spellCheck\" | \"tabIndex\" | \"translate\" | \"radioGroup\" | \"about\" | \"datatype\" | \"inlist\" | \"property\" | \"resource\" | \"typeof\" | \"vocab\" | \"autoCapitalize\" | \"autoCorrect\" | \"autoSave\" | \"itemProp\" | \"itemScope\" | \"itemType\" | \"itemID\" | \"itemRef\" | \"results\" | \"security\" | \"unselectable\" | \"inputMode\" | \"is\" | \"aria-activedescendant\" | \"aria-atomic\" | \"aria-autocomplete\" | \"aria-busy\" | \"aria-checked\" | \"aria-colcount\" | \"aria-colindex\" | \"aria-colspan\" | \"aria-controls\" | \"aria-current\" | \"aria-describedby\" | \"aria-details\" | \"aria-disabled\" | \"aria-dropeffect\" | \"aria-errormessage\" | \"aria-expanded\" | \"aria-flowto\" | \"aria-grabbed\" | \"aria-haspopup\" | \"aria-invalid\" | \"aria-keyshortcuts\" | \"aria-labelledby\" | \"aria-level\" | \"aria-modal\" | \"aria-multiline\" | \"aria-multiselectable\" | \"aria-orientation\" | \"aria-owns\" | \"aria-placeholder\" | \"aria-posinset\" | \"aria-pressed\" | \"aria-readonly\" | \"aria-relevant\" | \"aria-required\" | \"aria-roledescription\" | \"aria-rowcount\" | \"aria-rowindex\" | \"aria-rowspan\" | \"aria-selected\" | \"aria-setsize\" | \"aria-sort\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"aria-valuetext\" | \"dangerouslySetInnerHTML\" | \"onCopy\" | \"onCopyCapture\" | \"onCut\" | \"onCutCapture\" | \"onPaste\" | \"onPasteCapture\" | \"onCompositionEnd\" | \"onCompositionEndCapture\" | \"onCompositionStart\" | \"onCompositionStartCapture\" | \"onCompositionUpdate\" | \"onCompositionUpdateCapture\" | \"onFocusCapture\" | \"onBlurCapture\" | \"onChangeCapture\" | \"onBeforeInput\" | \"onBeforeInputCapture\" | \"onInput\" | \"onInputCapture\" | \"onReset\" | \"onResetCapture\" | \"onSubmit\" | \"onSubmitCapture\" | \"onInvalid\" | \"onInvalidCapture\" | \"onLoad\" | \"onLoadCapture\" | \"onError\" | \"onErrorCapture\" | \"onKeyDown\" | \"onKeyDownCapture\" | \"onKeyPress\" | \"onKeyPressCapture\" | \"onKeyUp\" | \"onKeyUpCapture\" | \"onAbort\" | \"onAbortCapture\" | \"onCanPlay\" | \"onCanPlayCapture\" | \"onCanPlayThrough\" | \"onCanPlayThroughCapture\" | \"onDurationChange\" | \"onDurationChangeCapture\" | \"onEmptied\" | \"onEmptiedCapture\" | \"onEncrypted\" | \"onEncryptedCapture\" | \"onEnded\" | \"onEndedCapture\" | \"onLoadedData\" | \"onLoadedDataCapture\" | \"onLoadedMetadata\" | \"onLoadedMetadataCapture\" | \"onLoadStart\" | \"onLoadStartCapture\" | \"onPause\" | \"onPauseCapture\" | \"onPlay\" | \"onPlayCapture\" | \"onPlaying\" | \"onPlayingCapture\" | \"onProgress\" | \"onProgressCapture\" | \"onRateChange\" | \"onRateChangeCapture\" | \"onResize\" | \"onResizeCapture\" | \"onSeeked\" | \"onSeekedCapture\" | \"onSeeking\" | \"onSeekingCapture\" | \"onStalled\" | \"onStalledCapture\" | \"onSuspend\" | \"onSuspendCapture\" | \"onTimeUpdate\" | \"onTimeUpdateCapture\" | \"onVolumeChange\" | \"onVolumeChangeCapture\" | \"onWaiting\" | \"onWaitingCapture\" | \"onAuxClick\" | \"onAuxClickCapture\" | \"onClickCapture\" | \"onContextMenu\" | \"onContextMenuCapture\" | \"onDoubleClick\" | \"onDoubleClickCapture\" | \"onDrag\" | \"onDragCapture\" | \"onDragEnd\" | \"onDragEndCapture\" | \"onDragEnter\" | \"onDragEnterCapture\" | \"onDragExit\" | \"onDragExitCapture\" | \"onDragLeave\" | \"onDragLeaveCapture\" | \"onDragOver\" | \"onDragOverCapture\" | \"onDragStart\" | \"onDragStartCapture\" | \"onDrop\" | \"onDropCapture\" | \"onMouseDown\" | \"onMouseDownCapture\" | \"onMouseEnter\" | \"onMouseLeave\" | \"onMouseMove\" | \"onMouseMoveCapture\" | \"onMouseOut\" | \"onMouseOutCapture\" | \"onMouseOver\" | \"onMouseOverCapture\" | \"onMouseUp\" | \"onMouseUpCapture\" | \"onSelectCapture\" | \"onTouchCancel\" | \"onTouchCancelCapture\" | \"onTouchEnd\" | \"onTouchEndCapture\" | \"onTouchMove\" | \"onTouchMoveCapture\" | \"onTouchStart\" | \"onTouchStartCapture\" | \"onPointerDown\" | \"onPointerDownCapture\" | \"onPointerMove\" | \"onPointerMoveCapture\" | \"onPointerUp\" | \"onPointerUpCapture\" | \"onPointerCancel\" | \"onPointerCancelCapture\" | \"onPointerEnter\" | \"onPointerEnterCapture\" | \"onPointerLeave\" | \"onPointerLeaveCapture\" | \"onPointerOver\" | \"onPointerOverCapture\" | \"onPointerOut\" | \"onPointerOutCapture\" | \"onGotPointerCapture\" | \"onGotPointerCaptureCapture\" | \"onLostPointerCapture\" | \"onLostPointerCaptureCapture\" | \"onScroll\" | \"onScrollCapture\" | \"onWheel\" | \"onWheelCapture\" | \"onAnimationStart\" | \"onAnimationStartCapture\" | \"onAnimationEnd\" | \"onAnimationEndCapture\" | \"onAnimationIteration\" | \"onAnimationIterationCapture\" | \"onTransitionEnd\" | \"onTransitionEndCapture\"> & Omit<InputAttributes, \"prefix\" | \"suffix\" | \"ref\" | \"value\" | \"type\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"thousandSeparator\" | \"decimalSeparator\" | \"decimalScale\" | \"fixedDecimalScale\" | \"allowNegative\" | \"allowLeadingZeros\" | \"onChange\" | \"inputMode\" | \"onKeyDown\" | \"onMouseUp\" | \"displayType\" | \"renderText\" | \"getInputRef\" | \"valueIsNumericString\" | \"onValueChange\" | \"isAllowed\" | \"isCharacterSame\" | \"allowedDecimalSeparators\" | \"thousandsGroupStyle\"> & { customInput?: ComponentType<InputAttributes>; } & { mode: \"strict\" | \"none\"; onValueChange?: (e: NumberFormatValues) => void; }",
+          "resolved": "InternalNumberFormatBase & { thousandSeparator?: string | boolean; decimalSeparator?: string; allowedDecimalSeparators?: string[]; thousandsGroupStyle?: \"none\" | \"thousand\" | \"lakh\" | \"wan\"; decimalScale?: number; fixedDecimalScale?: boolean; allowNegative?: boolean; allowLeadingZeros?: boolean; suffix?: string; prefix?: string; } & Omit<InputAttributes, \"prefix\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"pattern\" | \"color\" | \"dir\" | \"width\" | \"height\" | \"name\" | \"id\" | \"hidden\" | \"size\" | \"className\" | \"type\" | \"disabled\" | \"autoFocus\" | \"formAction\" | \"formEncType\" | \"formMethod\" | \"formNoValidate\" | \"formTarget\" | \"aria-label\" | \"maxLength\" | \"onClick\" | \"checked\" | \"required\" | \"multiple\" | \"placeholder\" | \"accept\" | \"alt\" | \"aria-labelledby\" | \"aria-hidden\" | \"onSelect\" | \"accessKey\" | \"role\" | \"aria-live\" | \"readOnly\" | \"onFocus\" | \"onBlur\" | \"minLength\" | \"min\" | \"max\" | \"step\" | \"autoComplete\" | \"capture\" | \"crossOrigin\" | \"enterKeyHint\" | \"list\" | \"src\" | \"onChange\" | \"defaultChecked\" | \"suppressContentEditableWarning\" | \"suppressHydrationWarning\" | \"contentEditable\" | \"contextMenu\" | \"draggable\" | \"lang\" | \"nonce\" | \"spellCheck\" | \"tabIndex\" | \"translate\" | \"radioGroup\" | \"about\" | \"datatype\" | \"inlist\" | \"property\" | \"resource\" | \"typeof\" | \"vocab\" | \"autoCapitalize\" | \"autoCorrect\" | \"autoSave\" | \"itemProp\" | \"itemScope\" | \"itemType\" | \"itemID\" | \"itemRef\" | \"results\" | \"security\" | \"unselectable\" | \"inputMode\" | \"is\" | \"aria-activedescendant\" | \"aria-atomic\" | \"aria-autocomplete\" | \"aria-busy\" | \"aria-checked\" | \"aria-colcount\" | \"aria-colindex\" | \"aria-colspan\" | \"aria-controls\" | \"aria-current\" | \"aria-describedby\" | \"aria-details\" | \"aria-disabled\" | \"aria-dropeffect\" | \"aria-errormessage\" | \"aria-expanded\" | \"aria-flowto\" | \"aria-grabbed\" | \"aria-haspopup\" | \"aria-invalid\" | \"aria-keyshortcuts\" | \"aria-level\" | \"aria-modal\" | \"aria-multiline\" | \"aria-multiselectable\" | \"aria-orientation\" | \"aria-owns\" | \"aria-placeholder\" | \"aria-posinset\" | \"aria-pressed\" | \"aria-readonly\" | \"aria-relevant\" | \"aria-required\" | \"aria-roledescription\" | \"aria-rowcount\" | \"aria-rowindex\" | \"aria-rowspan\" | \"aria-selected\" | \"aria-setsize\" | \"aria-sort\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"aria-valuetext\" | \"dangerouslySetInnerHTML\" | \"onCopy\" | \"onCopyCapture\" | \"onCut\" | \"onCutCapture\" | \"onPaste\" | \"onPasteCapture\" | \"onCompositionEnd\" | \"onCompositionEndCapture\" | \"onCompositionStart\" | \"onCompositionStartCapture\" | \"onCompositionUpdate\" | \"onCompositionUpdateCapture\" | \"onFocusCapture\" | \"onBlurCapture\" | \"onChangeCapture\" | \"onBeforeInput\" | \"onBeforeInputCapture\" | \"onInput\" | \"onInputCapture\" | \"onReset\" | \"onResetCapture\" | \"onSubmit\" | \"onSubmitCapture\" | \"onInvalid\" | \"onInvalidCapture\" | \"onLoad\" | \"onLoadCapture\" | \"onError\" | \"onErrorCapture\" | \"onKeyDown\" | \"onKeyDownCapture\" | \"onKeyPress\" | \"onKeyPressCapture\" | \"onKeyUp\" | \"onKeyUpCapture\" | \"onAbort\" | \"onAbortCapture\" | \"onCanPlay\" | \"onCanPlayCapture\" | \"onCanPlayThrough\" | \"onCanPlayThroughCapture\" | \"onDurationChange\" | \"onDurationChangeCapture\" | \"onEmptied\" | \"onEmptiedCapture\" | \"onEncrypted\" | \"onEncryptedCapture\" | \"onEnded\" | \"onEndedCapture\" | \"onLoadedData\" | \"onLoadedDataCapture\" | \"onLoadedMetadata\" | \"onLoadedMetadataCapture\" | \"onLoadStart\" | \"onLoadStartCapture\" | \"onPause\" | \"onPauseCapture\" | \"onPlay\" | \"onPlayCapture\" | \"onPlaying\" | \"onPlayingCapture\" | \"onProgress\" | \"onProgressCapture\" | \"onRateChange\" | \"onRateChangeCapture\" | \"onResize\" | \"onResizeCapture\" | \"onSeeked\" | \"onSeekedCapture\" | \"onSeeking\" | \"onSeekingCapture\" | \"onStalled\" | \"onStalledCapture\" | \"onSuspend\" | \"onSuspendCapture\" | \"onTimeUpdate\" | \"onTimeUpdateCapture\" | \"onVolumeChange\" | \"onVolumeChangeCapture\" | \"onWaiting\" | \"onWaitingCapture\" | \"onAuxClick\" | \"onAuxClickCapture\" | \"onClickCapture\" | \"onContextMenu\" | \"onContextMenuCapture\" | \"onDoubleClick\" | \"onDoubleClickCapture\" | \"onDrag\" | \"onDragCapture\" | \"onDragEnd\" | \"onDragEndCapture\" | \"onDragEnter\" | \"onDragEnterCapture\" | \"onDragExit\" | \"onDragExitCapture\" | \"onDragLeave\" | \"onDragLeaveCapture\" | \"onDragOver\" | \"onDragOverCapture\" | \"onDragStart\" | \"onDragStartCapture\" | \"onDrop\" | \"onDropCapture\" | \"onMouseDown\" | \"onMouseDownCapture\" | \"onMouseEnter\" | \"onMouseLeave\" | \"onMouseMove\" | \"onMouseMoveCapture\" | \"onMouseOut\" | \"onMouseOutCapture\" | \"onMouseOver\" | \"onMouseOverCapture\" | \"onMouseUp\" | \"onMouseUpCapture\" | \"onSelectCapture\" | \"onTouchCancel\" | \"onTouchCancelCapture\" | \"onTouchEnd\" | \"onTouchEndCapture\" | \"onTouchMove\" | \"onTouchMoveCapture\" | \"onTouchStart\" | \"onTouchStartCapture\" | \"onPointerDown\" | \"onPointerDownCapture\" | \"onPointerMove\" | \"onPointerMoveCapture\" | \"onPointerUp\" | \"onPointerUpCapture\" | \"onPointerCancel\" | \"onPointerCancelCapture\" | \"onPointerEnter\" | \"onPointerEnterCapture\" | \"onPointerLeave\" | \"onPointerLeaveCapture\" | \"onPointerOver\" | \"onPointerOverCapture\" | \"onPointerOut\" | \"onPointerOutCapture\" | \"onGotPointerCapture\" | \"onGotPointerCaptureCapture\" | \"onLostPointerCapture\" | \"onLostPointerCaptureCapture\" | \"onScroll\" | \"onScrollCapture\" | \"onWheel\" | \"onWheelCapture\" | \"onAnimationStart\" | \"onAnimationStartCapture\" | \"onAnimationEnd\" | \"onAnimationEndCapture\" | \"onAnimationIteration\" | \"onAnimationIterationCapture\" | \"onTransitionEnd\" | \"onTransitionEndCapture\"> & Omit<InputAttributes, \"prefix\" | \"suffix\" | \"ref\" | \"value\" | \"type\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"thousandSeparator\" | \"decimalSeparator\" | \"decimalScale\" | \"fixedDecimalScale\" | \"allowNegative\" | \"allowLeadingZeros\" | \"onChange\" | \"inputMode\" | \"onKeyDown\" | \"onMouseUp\" | \"displayType\" | \"renderText\" | \"getInputRef\" | \"valueIsNumericString\" | \"onValueChange\" | \"isAllowed\" | \"isCharacterSame\" | \"allowedDecimalSeparators\" | \"thousandsGroupStyle\"> & { customInput?: ComponentType<InputAttributes>; } & { mode: \"strict\" | \"none\"; onValueChange?: (e: NumberFormatValues) => void; }",
           "references": {
             "ExtendedNumericPropsType": {
               "location": "global"

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

@@ -126,7 +126,7 @@ export class BcmRadioGroup {
   render() {
     var _a, _b;
     const { direction, fullWidth, gap, label, size, required, disabled, caption, captionError, captionType, noCaption } = this;
-    return (h(Host, { role: "radio-group", class: "tw-mb-2 tw-flex tw-flex-col" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: cs("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+    return (h(Host, { class: "tw-mb-2 tw-flex tw-flex-col", role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: cs("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
       ((_b = this.Items) === null || _b === void 0 ? void 0 : _b.map(item => (h("bcm-radio", { id: item.id, value: item.value, disabled: disabled || item.disabled, checked: item.checked, color: item.color, size: size }, item.label))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-radio-group"; }

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

@@ -23,7 +23,7 @@ export class BcmRadio {
         "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-border-solid 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", {
+      }), 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", { role: "radio", "aria-label": "radio", 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-border-solid 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,

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

@@ -162,7 +162,7 @@ export class BcmRange {
       height: '100%',
       width: height,
     };
-    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
+    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", role: "slider", "aria-label": "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, role: "slider", "aria-label": "range", min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
   }
   static get is() { return "bcm-range"; }
   static get originalStyleUrls() {

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

@@ -267,11 +267,11 @@
   margin: 0;
 }
 .bcm-switch__label .active-text {
-  color: var(--bcm-new-ds-color-blue-500);
+  color: var(--bcm-new-ds-color-blue-700);
   margin: 0 0 0 4px;
 }
 .bcm-switch__label .inactive-text {
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-new-ds-color-slate-700);
   margin: 0 4px 0 0;
 }
 .bcm-switch__toggle {

package/dist/collection/components/molecules/tab-group/tab-group.js

@@ -180,9 +180,9 @@ export class BcmTabGroup {
     const { color } = this;
     const dc = Generate.getTwColor({
       color: color,
-      tones: [500]
+      tones: [700]
     });
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {

package/dist/collection/components/molecules/tab-group/tab-item-header.js

@@ -23,18 +23,18 @@ export class BcmTabItemHeader {
   }
   render() {
     const { color, size, active, disabled } = this;
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
+    const disabledClass = "tw-cursor-not-allowed tw-text-gray-500 tw-opacity-50";
     const dc = Generate.getTwColor({
       color: color,
-      tones: [500, 600, 700, 800]
+      tones: [700, 800, 900]
     });
-    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-focus:outline-none`, {
+    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-700  tw-transition-font tw-focus:outline-none`, {
         "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
         "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
         "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
       }, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-default-500 enabled:hover:tw-text-default-600 enabled:active:tw-text-default-700 enabled:focus-visible:tw-text-default-800`
-        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), style: dc }));
+        ? `tw-text-default-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
+        : "tw-text-slate-700 enabled:hover:tw-text-slate-800 enabled:focus-visible:tw-text-slate-900 enabled:active:tw-text-slate-900"), style: dc }));
   }
   static get is() { return "bcm-tab-item-header"; }
   static get properties() {

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

@@ -68,7 +68,7 @@ export class BcmTooltip {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h("slot", null)));
   }
   static get is() { return "bcm-tooltip"; }
   static get properties() {

package/dist/collection/components/organism/list/list.css

@@ -629,7 +629,7 @@
   overflow: hidden;
 }
 .bcm-list__input-container.value-empty {
-  color: var(--bcm-color-grey-6);
+  color: #6B7280;
 }
 .bcm-list__input-container.type-single, .bcm-list__input-container.value-empty {
   white-space: nowrap;
@@ -637,7 +637,7 @@
   text-overflow: ellipsis;
 }
 .bcm-list__input-placeholder {
-  color: var(--bcm-color-grey-6);
+  color: #6B7280;
 }
 .bcm-list__input-tag-container {
   height: 100%;

package/dist/collection/components/organism/list/list.js

@@ -90,7 +90,7 @@ export class BcmList {
     };
     this.tagContainerWidth = 0;
     this.selectAllItem = {
-      id: "select-all",
+      id: "select-all-" + this._id,
       text: "Select All",
       value: "select-all",
       checked: false,
@@ -670,7 +670,7 @@ export class BcmList {
     return Promise.resolve(this.value);
   }
   async checkedItem(itemId) {
-    const isCheckSelectAll = itemId === "select-all";
+    const isCheckSelectAll = itemId === "select-all-" + this._id;
     if (!isCheckSelectAll) {
       listState.checkedItem(this._id, itemId);
     }
@@ -802,7 +802,7 @@ export class BcmList {
         "--min-height": openedType ? "inherit" : this.minHeight,
       } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {

package/dist/collection/components/other/attendance/attendance.js

@@ -14,7 +14,7 @@ export class BcmAttendance {
     const classPrefix = 'bcm-attendance';
     return (h(Host, { class: classPrefix }, h("span", { hidden: true }, h("slot", null)), data.map(item => {
       var _a, _b;
-      return h("div", { class: `${classPrefix}__item` }, h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM` }, h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM` }, h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
+      return h("div", { class: `${classPrefix}__item` }, h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM`, "aria-label": `${item.weekday || null} / AM` }, h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM`, "aria-label": `${item.weekday || null} / PM` }, h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
     })));
   }
   static get is() { return "bcm-attendance"; }