bromcom-ui-next 0.1.26 → 0.1.28

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-B84DzIAh.js';
-export { s as setNonce } from './index-B84DzIAh.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-BuuGCw0z.js';
+export { s as setNonce } from './index-BuuGCw0z.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bcm-avatar",[[257,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}]]],["bcm-pop-confirm",[[257,"bcm-pop-confirm",{"arrowColor":[1,"arrow-color"],"cancelText":[1,"cancel-text"],"confirmText":[1,"confirm-text"],"description":[1],"headerText":[1,"header-text"],"placement":[1],"size":[1],"status":[1],"statusIcon":[4,"status-icon"],"targetId":[1,"target-id"],"isOpen":[32],"currentPlacement":[32],"show":[64],"hide":[64]}]]],["bcm-accordion",[[257,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[257,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[257,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-basic-badge",[[257,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}]]],["bcm-button-group",[[257,"bcm-button-group",{"kind":[1],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"loading":[4],"disabled":[4],"orientation":[513]}]]],["bcm-checkbox",[[257,"bcm-checkbox",{"_id":[513,"id"],"label":[1],"name":[1],"indeterminate":[1028],"size":[1],"checked":[1028],"error":[4],"disabled":[4],"labelPosition":[1,"label-position"],"internalChecked":[32]},null,{"checked":["syncCheckedProp"],"indeterminate":["updateIndeterminateState"],"internalChecked":["updateIndeterminateState"]}]]],["bcm-chip",[[257,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[257,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-popover",[[257,"bcm-popover",{"size":[1],"placement":[1],"trigger":[1],"hoverDelay":[2,"hover-delay"],"open":[1028],"headerText":[1,"header-text"],"message":[1],"openPopup":[64],"closePopup":[64]}]]],["bcm-radio",[[257,"bcm-radio",{"label":[1],"name":[1],"value":[1],"checked":[516],"size":[1],"disabled":[4],"readonly":[4],"labelPosition":[1,"label-position"],"error":[4]}]]],["bcm-radio-group",[[257,"bcm-radio-group",{"name":[1],"value":[1],"disabled":[4],"required":[4],"error":[4],"label":[1],"size":[1],"direction":[1],"captionText":[1,"caption-text"],"setClear":[64],"resetCaption":[64]},[[2,"bcmRadioChange","handleRadioChange"]],{"value":["handleValueChange"]}]]],["bcm-segmented-picker",[[257,"bcm-segmented-picker",{"size":[1],"value":[1537],"disabled":[4],"fullWidth":[516,"full-width"],"options":[32],"indicatorStyles":[32]},[[0,"bcmOptionClick","handleOptionClick"]],{"value":["valueChanged"]}]]],["bcm-segmented-picker-option",[[257,"bcm-segmented-picker-option",{"value":[1],"label":[1],"size":[1],"selected":[1028],"disabled":[4],"getWidth":[64]}]]],["bcm-switch",[[257,"bcm-switch",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"label":[1],"labelPosition":[1,"label-position"],"error":[4],"caption":[1],"size":[1],"readonly":[4],"required":[4]}]]],["bcm-tabs",[[257,"bcm-tabs",{"defaultValue":[513,"default-value"],"size":[513],"variant":[513],"smooth":[516],"activeTab":[32],"previousTab":[32],"disableTab":[64],"enableTab":[64],"disableAllTabs":[64],"enableAllTabs":[64],"getActiveTab":[64],"setActiveTab":[64]},[[9,"resize","handleResize"],[2,"bcmTabSelected","handleTabSelected"]],{"size":["handleSizeChange"],"variant":["handleVariantChange"],"smooth":["handleSmoothChange"]}]]],["bcm-tabs-content",[[257,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list",[[257,"bcm-tabs-list",{"variant":[513],"smooth":[516]}]]],["bcm-tabs-trigger",[[257,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516],"variant":[513],"smooth":[516]}]]],["bcm-textarea",[[257,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-tooltip",[[257,"bcm-tooltip",{"trigger":[1],"placement":[1],"size":[1],"message":[1],"showDelay":[2,"show-delay"],"open":[32],"openTooltip":[64],"closeTooltip":[64]}]]],["bcm-badge",[[257,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]],["bcm-button_8",[[257,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]],[257,"bcm-drawer",{"open":[1540],"size":[1],"position":[1],"fullWidth":[4,"full-width"],"headerText":[1,"header-text"],"noHeader":[4,"no-header"],"show":[64],"hide":[64]},[[8,"keydown","handleKeyDown"]],{"open":["handleOpenChange"]}],[257,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16,"right-icons"],"selected":[516],"error":[516],"disabled":[516]}],[257,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"isPasswordVisible":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}],[257,"bcm-shortcut",{"hotkey":[1],"size":[1]}],[257,"bcm-text",{"text":[1],"variant":[1],"size":[1],"overflow":[4]}],[260,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16,"target-element"],"trigger":[1],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"offset":[2],"arrow":[4],"disabled":[4],"zIndex":[2,"z-index"],"appendToBody":[4,"append-to-body"],"destroyOnHide":[4,"destroy-on-hide"],"isVisible":[32],"isReady":[32],"show":[64],"hide":[64],"toggle":[64],"updatePositioning":[64]},null,{"targetId":["setupTarget"],"targetElement":["setupTarget"],"isVisible":["onVisibilityChange"]}],[257,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"position":[513],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}]]]], options);
+  return bootstrapLazy([["bcm-dropdown",[[257,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-avatar",[[257,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}]]],["bcm-pop-confirm",[[257,"bcm-pop-confirm",{"arrowColor":[1,"arrow-color"],"cancelText":[1,"cancel-text"],"confirmText":[1,"confirm-text"],"description":[1],"headerText":[1,"header-text"],"placement":[1],"size":[1],"status":[1],"statusIcon":[4,"status-icon"],"targetId":[1,"target-id"],"isOpen":[32],"currentPlacement":[32],"show":[64],"hide":[64]}]]],["bcm-accordion",[[257,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[257,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[257,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-basic-badge",[[257,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}]]],["bcm-button-group",[[257,"bcm-button-group",{"kind":[1],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"loading":[4],"disabled":[4],"orientation":[513]}]]],["bcm-checkbox",[[257,"bcm-checkbox",{"_id":[513,"id"],"label":[1],"name":[1],"indeterminate":[1028],"size":[1],"checked":[1028],"error":[4],"disabled":[4],"labelPosition":[1,"label-position"],"internalChecked":[32]},null,{"checked":["syncCheckedProp"],"indeterminate":["updateIndeterminateState"],"internalChecked":["updateIndeterminateState"]}]]],["bcm-divider",[[257,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item",[[257,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16,"right-icons"],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input",[[257,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"isPasswordVisible":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-popover",[[257,"bcm-popover",{"size":[1],"placement":[1],"trigger":[1],"hoverDelay":[2,"hover-delay"],"open":[1028],"headerText":[1,"header-text"],"message":[1],"openPopup":[64],"closePopup":[64]}]]],["bcm-radio",[[257,"bcm-radio",{"label":[1],"name":[1],"value":[1],"checked":[516],"size":[1],"disabled":[4],"readonly":[4],"labelPosition":[1,"label-position"],"error":[4]}]]],["bcm-radio-group",[[257,"bcm-radio-group",{"name":[1],"value":[1],"disabled":[4],"required":[4],"error":[4],"label":[1],"size":[1],"direction":[1],"captionText":[1,"caption-text"],"setClear":[64],"resetCaption":[64]},[[2,"bcmRadioChange","handleRadioChange"]],{"value":["handleValueChange"]}]]],["bcm-segmented-picker",[[257,"bcm-segmented-picker",{"size":[1],"value":[1537],"disabled":[4],"fullWidth":[516,"full-width"],"options":[32],"indicatorStyles":[32]},[[0,"bcmOptionClick","handleOptionClick"]],{"value":["valueChanged"]}]]],["bcm-segmented-picker-option",[[257,"bcm-segmented-picker-option",{"value":[1],"label":[1],"size":[1],"selected":[1028],"disabled":[4],"getWidth":[64]}]]],["bcm-shortcut",[[257,"bcm-shortcut",{"hotkey":[1],"size":[1]}]]],["bcm-switch",[[257,"bcm-switch",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"label":[1],"labelPosition":[1,"label-position"],"error":[4],"caption":[1],"size":[1],"readonly":[4],"required":[4]}]]],["bcm-tabs",[[257,"bcm-tabs",{"defaultValue":[513,"default-value"],"size":[513],"variant":[513],"smooth":[516],"activeTab":[32],"previousTab":[32],"disableTab":[64],"enableTab":[64],"disableAllTabs":[64],"enableAllTabs":[64],"getActiveTab":[64],"setActiveTab":[64]},[[9,"resize","handleResize"],[2,"bcmTabSelected","handleTabSelected"]],{"size":["handleSizeChange"],"variant":["handleVariantChange"],"smooth":["handleSmoothChange"]}]]],["bcm-tabs-content",[[257,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list",[[257,"bcm-tabs-list",{"variant":[513],"smooth":[516]}]]],["bcm-tabs-trigger",[[257,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516],"variant":[513],"smooth":[516]}]]],["bcm-text",[[257,"bcm-text",{"text":[1],"variant":[1],"size":[1],"overflow":[4]}]]],["bcm-textarea",[[257,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-tooltip",[[257,"bcm-tooltip",{"trigger":[1],"placement":[1],"size":[1],"message":[1],"showDelay":[2,"show-delay"],"open":[32],"openTooltip":[64],"closeTooltip":[64]}]]],["bcm-badge",[[257,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]],["bcm-linked",[[260,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16,"target-element"],"trigger":[1],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"offset":[2],"arrow":[4],"disabled":[4],"zIndex":[2,"z-index"],"appendToBody":[4,"append-to-body"],"destroyOnHide":[4,"destroy-on-hide"],"isVisible":[32],"isReady":[32],"show":[64],"hide":[64],"toggle":[64],"updatePositioning":[64]},null,{"targetId":["setupTarget"],"targetElement":["setupTarget"],"isVisible":["onVisibilityChange"]}]]],["bcm-button_4",[[257,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}],[257,"bcm-drawer",{"open":[1540],"size":[1],"position":[1],"fullWidth":[4,"full-width"],"headerText":[1,"header-text"],"noHeader":[4,"no-header"],"show":[64],"hide":[64]},[[8,"keydown","handleKeyDown"]],{"open":["handleOpenChange"]}],[257,"bcm-modal",{"open":[1540],"size":[1],"placement":[1],"backdrop":[8],"fullWidth":[4,"full-width"],"fullScreen":[4,"full-screen"],"headerText":[1,"header-text"],"helperText":[1,"helper-text"],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"closeOnBackdrop":[4,"close-on-backdrop"],"closeOnEscape":[4,"close-on-escape"],"isAnimating":[32],"shake":[32],"show":[64],"hide":[64],"toggle":[64]},[[2,"click","handleClick"],[0,"keydown","handleKeyDown"]],{"open":["handleOpenChange"]}],[257,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"position":[513],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/chip/chip.component.d.ts

@@ -17,7 +17,7 @@ import { ChipKind, ChipSize, ChipStatus } from './types';
  *
  * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
  * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
- * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+ * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
  * @prop {boolean} dismissible - Whether the chip can be dismissed
  * @prop {boolean} disabled - Whether the chip is disabled
  * @prop {string} color - Custom color override for the chip

package/dist/types/components/chip/types.d.ts

@@ -1,9 +1,10 @@
 export type ChipSize = 'small' | 'medium' | 'large';
 export type ChipKind = 'filled' | 'outlined' | 'text';
-export type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';
+export type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary';
 export declare const STATUS_COLORS: {
     readonly info: "blue";
     readonly error: "red";
     readonly warning: "amber";
     readonly success: "green";
+    readonly primary: "primary";
 };

package/dist/types/components/modal/modal.component.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'full';
+export type ModalPlacement = 'center' | 'top';
+export declare class BcmModal {
+    host: HTMLBcmModalElement;
+    private dialogRef?;
+    open: boolean;
+    size: ModalSize;
+    placement: ModalPlacement;
+    backdrop: boolean | 'static';
+    fullWidth: boolean;
+    fullScreen: boolean;
+    headerText?: string;
+    helperText?: string;
+    noHeader: boolean;
+    noFooter: boolean;
+    closeOnBackdrop: boolean;
+    closeOnEscape: boolean;
+    isAnimating: boolean;
+    shake: boolean;
+    bcmOpen: EventEmitter<void>;
+    bcmClose: EventEmitter<void>;
+    bcmBeforeOpen: EventEmitter<void>;
+    bcmBeforeClose: EventEmitter<void>;
+    private modalClass;
+    handleOpenChange(isOpen: boolean): Promise<void>;
+    handleClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toggle(): Promise<void>;
+    private shakeModal;
+    private handleBackdropClick;
+    private handleDialogCancel;
+    private getModalStyle;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -16,6 +16,7 @@ import { InputSize, InputStatus, InputType } from "./components/input/types";
 import { Event } from "./stencil-public-runtime";
 import { TriggerType } from "./components/linked/linked.component";
 import { Placement } from "@floating-ui/dom";
+import { ModalPlacement, ModalSize } from "./components/modal/modal.component";
 import { SegmentedPickerSize } from "./components/segmented-picker/types";
 import { TextSize, TextVariant } from "./components/text/text.types";
 import { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
@@ -30,6 +31,7 @@ export { InputSize, InputStatus, InputType } from "./components/input/types";
 export { Event } from "./stencil-public-runtime";
 export { TriggerType } from "./components/linked/linked.component";
 export { Placement } from "@floating-ui/dom";
+export { ModalPlacement, ModalSize } from "./components/modal/modal.component";
 export { SegmentedPickerSize } from "./components/segmented-picker/types";
 export { TextSize, TextVariant } from "./components/text/text.types";
 export { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
@@ -559,7 +561,7 @@ export namespace Components {
      * </bcm-chip>
      * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
      * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
-     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
      * @prop {boolean} dismissible - Whether the chip can be dismissed
      * @prop {boolean} disabled - Whether the chip is disabled
      * @prop {string} color - Custom color override for the chip
@@ -848,6 +850,53 @@ export namespace Components {
          */
         "zIndex": number;
     }
+    interface BcmModal {
+        /**
+          * @default true
+         */
+        "backdrop": boolean | 'static';
+        /**
+          * @default true
+         */
+        "closeOnBackdrop": boolean;
+        /**
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * @default false
+         */
+        "fullScreen": boolean;
+        /**
+          * @default false
+         */
+        "fullWidth": boolean;
+        "headerText"?: string;
+        "helperText"?: string;
+        "hide": () => Promise<void>;
+        /**
+          * @default false
+         */
+        "noFooter": boolean;
+        /**
+          * @default false
+         */
+        "noHeader": boolean;
+        /**
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * @default 'center'
+         */
+        "placement": ModalPlacement;
+        "show": () => Promise<void>;
+        /**
+          * @default 'medium'
+         */
+        "size": ModalSize;
+        "toggle": () => Promise<void>;
+    }
     /**
      * @component BcmPopConfirm
      * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.
@@ -1621,6 +1670,10 @@ export interface BcmLinkedCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmLinkedElement;
 }
+export interface BcmModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmModalElement;
+}
 export interface BcmPopConfirmCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmPopConfirmElement;
@@ -1920,7 +1973,7 @@ declare global {
      * </bcm-chip>
      * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
      * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
-     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
      * @prop {boolean} dismissible - Whether the chip can be dismissed
      * @prop {boolean} disabled - Whether the chip is disabled
      * @prop {string} color - Custom color override for the chip
@@ -2050,6 +2103,26 @@ declare global {
         prototype: HTMLBcmLinkedElement;
         new (): HTMLBcmLinkedElement;
     };
+    interface HTMLBcmModalElementEventMap {
+        "bcmOpen": void;
+        "bcmClose": void;
+        "bcmBeforeOpen": void;
+        "bcmBeforeClose": void;
+    }
+    interface HTMLBcmModalElement extends Components.BcmModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmModalElementEventMap>(type: K, listener: (this: HTMLBcmModalElement, ev: BcmModalCustomEvent<HTMLBcmModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmModalElementEventMap>(type: K, listener: (this: HTMLBcmModalElement, ev: BcmModalCustomEvent<HTMLBcmModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBcmModalElement: {
+        prototype: HTMLBcmModalElement;
+        new (): HTMLBcmModalElement;
+    };
     interface HTMLBcmPopConfirmElementEventMap {
         "bcmConfirm": void;
         "bcmCancel": void;
@@ -2412,6 +2485,7 @@ declare global {
         "bcm-dropdown-item": HTMLBcmDropdownItemElement;
         "bcm-input": HTMLBcmInputElement;
         "bcm-linked": HTMLBcmLinkedElement;
+        "bcm-modal": HTMLBcmModalElement;
         "bcm-pop-confirm": HTMLBcmPopConfirmElement;
         "bcm-popover": HTMLBcmPopoverElement;
         "bcm-radio": HTMLBcmRadioElement;
@@ -2942,7 +3016,7 @@ declare namespace LocalJSX {
      * </bcm-chip>
      * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
      * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
-     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+     * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
      * @prop {boolean} dismissible - Whether the chip can be dismissed
      * @prop {boolean} disabled - Whether the chip is disabled
      * @prop {string} color - Custom color override for the chip
@@ -3235,6 +3309,54 @@ declare namespace LocalJSX {
          */
         "zIndex"?: number;
     }
+    interface BcmModal {
+        /**
+          * @default true
+         */
+        "backdrop"?: boolean | 'static';
+        /**
+          * @default true
+         */
+        "closeOnBackdrop"?: boolean;
+        /**
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * @default false
+         */
+        "fullScreen"?: boolean;
+        /**
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        "headerText"?: string;
+        "helperText"?: string;
+        /**
+          * @default false
+         */
+        "noFooter"?: boolean;
+        /**
+          * @default false
+         */
+        "noHeader"?: boolean;
+        "onBcmBeforeClose"?: (event: BcmModalCustomEvent<void>) => void;
+        "onBcmBeforeOpen"?: (event: BcmModalCustomEvent<void>) => void;
+        "onBcmClose"?: (event: BcmModalCustomEvent<void>) => void;
+        "onBcmOpen"?: (event: BcmModalCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * @default 'center'
+         */
+        "placement"?: ModalPlacement;
+        /**
+          * @default 'medium'
+         */
+        "size"?: ModalSize;
+    }
     /**
      * @component BcmPopConfirm
      * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.
@@ -3968,6 +4090,7 @@ declare namespace LocalJSX {
         "bcm-dropdown-item": BcmDropdownItem;
         "bcm-input": BcmInput;
         "bcm-linked": BcmLinked;
+        "bcm-modal": BcmModal;
         "bcm-pop-confirm": BcmPopConfirm;
         "bcm-popover": BcmPopover;
         "bcm-radio": BcmRadio;
@@ -4142,7 +4265,7 @@ declare module "@stencil/core" {
              * </bcm-chip>
              * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'
              * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'
-             * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'
+             * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'
              * @prop {boolean} dismissible - Whether the chip can be dismissed
              * @prop {boolean} disabled - Whether the chip is disabled
              * @prop {string} color - Custom color override for the chip
@@ -4163,6 +4286,7 @@ declare module "@stencil/core" {
             "bcm-dropdown-item": LocalJSX.BcmDropdownItem & JSXBase.HTMLAttributes<HTMLBcmDropdownItemElement>;
             "bcm-input": LocalJSX.BcmInput & JSXBase.HTMLAttributes<HTMLBcmInputElement>;
             "bcm-linked": LocalJSX.BcmLinked & JSXBase.HTMLAttributes<HTMLBcmLinkedElement>;
+            "bcm-modal": LocalJSX.BcmModal & JSXBase.HTMLAttributes<HTMLBcmModalElement>;
             /**
              * @component BcmPopConfirm
              * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.

package/dist/types/styles/theme-variables.d.ts

@@ -101,6 +101,31 @@ export declare const themeVariables: {
             DEFAULT: string;
         };
         vivid: {
+            primary: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            info: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            success: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            warning: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            error: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
             slate: {
                 DEFAULT: string;
                 hover: string;
@@ -216,6 +241,18 @@ export declare const themeVariables: {
             primary: {
                 DEFAULT: string;
             };
+            info: {
+                DEFAULT: string;
+            };
+            success: {
+                DEFAULT: string;
+            };
+            warning: {
+                DEFAULT: string;
+            };
+            error: {
+                DEFAULT: string;
+            };
             slate: {
                 DEFAULT: string;
             };
@@ -284,6 +321,31 @@ export declare const themeVariables: {
             };
         };
         palette: {
+            primary: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            info: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            success: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            warning: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
+            error: {
+                DEFAULT: string;
+                hover: string;
+                active: string;
+            };
             slate: {
                 DEFAULT: string;
                 hover: string;
@@ -436,6 +498,11 @@ export declare const themeVariables: {
         warning: string;
         error: string;
         palette: {
+            primary: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
             slate: string;
             gray: string;
             zinc: string;
@@ -478,6 +545,11 @@ export declare const themeVariables: {
         disabled: string;
         visited: string;
         palette: {
+            primary: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
             slate: string;
             gray: string;
             zinc: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bromcom-ui-next",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "A modern UI component library built with StencilJS and Tailwind CSS for Bromcom applications",
   "private": false,
   "author": "Bromcom Computers Plc",