npm - bromcom-ui-next - Versions diffs - 0.1.27 → 0.1.29 - Mend

bromcom-ui-next 0.1.27 → 0.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -1,11 +1,11 @@
 'use strict';
-var index = require('./index-BR4jGTh_.js');
+var index = require('./index-BtiU-G2W.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["bcm-dropdown.cjs",[[257,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-avatar.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert.cjs",[[257,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-basic-badge.cjs",[[257,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}]]],["bcm-button-group.cjs",[[257,"bcm-button-group",{"kind":[1],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"loading":[4],"disabled":[4],"orientation":[513]}]]],["bcm-checkbox.cjs",[[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.cjs",[[257,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider.cjs",[[257,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item.cjs",[[257,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16,"right-icons"],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-segmented-picker-option",{"value":[1],"label":[1],"size":[1],"selected":[1028],"disabled":[4],"getWidth":[64]}]]],["bcm-shortcut.cjs",[[257,"bcm-shortcut",{"hotkey":[1],"size":[1]}]]],["bcm-switch.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list.cjs",[[257,"bcm-tabs-list",{"variant":[513],"smooth":[516]}]]],["bcm-tabs-trigger.cjs",[[257,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516],"variant":[513],"smooth":[516]}]]],["bcm-text.cjs",[[257,"bcm-text",{"text":[1],"variant":[1],"size":[1],"overflow":[4]}]]],["bcm-textarea.cjs",[[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.cjs",[[257,"bcm-tooltip",{"trigger":[1],"placement":[1],"size":[1],"message":[1],"showDelay":[2,"show-delay"],"open":[32],"openTooltip":[64],"closeTooltip":[64]}]]],["bcm-badge.cjs",[[257,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]],["bcm-linked.cjs",[[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_3.cjs",[[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);
+  return index.bootstrapLazy([["bcm-dropdown.cjs",[[257,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-avatar.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert.cjs",[[257,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-basic-badge.cjs",[[257,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}]]],["bcm-button-group.cjs",[[257,"bcm-button-group",{"kind":[1],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"loading":[4],"disabled":[4],"orientation":[513]}]]],["bcm-checkbox.cjs",[[257,"bcm-checkbox",{"_id":[513,"id"],"label":[1],"name":[1],"indeterminate":[1028],"size":[1],"checked":[1028],"error":[4],"disabled":[4],"labelPosition":[1,"label-position"],"fullWidth":[516,"full-width"],"internalChecked":[32]},null,{"checked":["syncCheckedProp"],"indeterminate":["updateIndeterminateState"],"internalChecked":["updateIndeterminateState"]}]]],["bcm-chip.cjs",[[257,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider.cjs",[[257,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item.cjs",[[257,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16,"right-icons"],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-segmented-picker-option",{"value":[1],"label":[1],"size":[1],"selected":[1028],"disabled":[4],"getWidth":[64]}]]],["bcm-shortcut.cjs",[[257,"bcm-shortcut",{"hotkey":[1],"size":[1]}]]],["bcm-switch.cjs",[[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.cjs",[[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.cjs",[[257,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list.cjs",[[257,"bcm-tabs-list",{"variant":[513],"smooth":[516]}]]],["bcm-tabs-trigger.cjs",[[257,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516],"variant":[513],"smooth":[516]}]]],["bcm-text.cjs",[[257,"bcm-text",{"text":[1],"variant":[1],"size":[1],"overflow":[4]}]]],["bcm-textarea.cjs",[[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.cjs",[[257,"bcm-tooltip",{"trigger":[1],"placement":[1],"size":[1],"message":[1],"showDelay":[2,"show-delay"],"open":[32],"openTooltip":[64],"closeTooltip":[64]}]]],["bcm-badge.cjs",[[257,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]],["bcm-linked.cjs",[[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_3.cjs",[[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);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/button/button.css CHANGED Viewed

	@@ -1 +1 @@
1	- .relative{position:relative}:host{display:inline-flex;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-final-border-color\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\[--bcm-final-bg-color\]{background-color:var(--bcm-final-bg-color)}.bg-\[--bcm-ui-color-background-disabled-default\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\[--bcm-final-text-color\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-final-hover-bg-color\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-\[--bcm-final-active-bg-color\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.z-\[9999\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\[--popover-radius\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[--text-color\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}
1	+ .relative{position:relative}:host{display:inline-flex;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-final-border-color\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\[--bcm-final-bg-color\]{background-color:var(--bcm-final-bg-color)}.bg-\[--bcm-ui-color-background-disabled-default\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\[--bcm-final-text-color\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-final-hover-bg-color\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-\[--bcm-final-active-bg-color\]:active{background-color:var(--bcm-final-active-bg-color)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.z-\[9999\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\[--popover-radius\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[--text-color\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}

package/dist/collection/components/checkbox/checkbox.component.js CHANGED Viewed

@@ -37,6 +37,10 @@ export class Checkbox {
          * Controls the position of the label relative to the checkbox
          */
         this.labelPosition = 'right';
+        /**
+         * Full width checkbox
+         */
+        this.fullWidth = false;
         /**
          * Handles change events on the checkbox
          * Updates state and emits the change event
@@ -204,7 +208,7 @@ export class Checkbox {
     render() {
         const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });
         const internalId = this._id + '-internal-checkbox' || this.name;
-        return (h("div", { key: '25776198fcad7f619daf962ce5d99adc227003a4', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, h("div", { key: '1a09fea578b1bf84a6eca33f4b7255d864a5d885', class: "relative inline-flex" }, h("input", { key: '8758f8fa2ef22722d77a068775dad55e20904d19', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), h("div", { key: '4dca8991f31c72208a8e7873ba4fb8d4e059c2f0', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (h("div", { key: '60230e3d61a0298bc2f621c2bf3986dd924a66e8', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'b6ec239a180fc3289a71d8af87b786d64f8f4f93', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (h("div", { key: '08f457fff2cb687a03939e08429552488e2bac30', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'c754446dd072fa50d204fbca84816104cc75fc98', name: "fa-regular fa-minus" }))))), h("label", { key: 'f6141a63244607f5c30a49a8c161e3d49712bdd7', htmlFor: internalId, class: label(), part: "label" }, this.label)));
+        return (h("div", { key: 'dd513dc1f5ca48b40342559f01f5411dce186897', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, h("div", { key: '460500fb60dfedcb24f2da714e64172d230d6808', class: "relative inline-flex" }, h("input", { key: '8744b1bd7dd95d39aca60da8f6d2441177bd3631', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), h("div", { key: 'cbe5fc7b8b3148a48aa9dfb8bdc55729f3b0616c', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (h("div", { key: '595670a42f7d7e1a1f389e7d48ca7d3c2a338aaa', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'def5450ea02a10465ce19dee7ab2aa72742537aa', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (h("div", { key: '0e656d4eadc2e9544377a92ed69a2f9f79794940', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: '474a74b014fb5235d62b334db50d79a0103d392d', name: "fa-regular fa-minus" }))))), h("label", { key: '87a521b4553c08622f0709cbdeeaec60f859a82f', htmlFor: internalId, class: label(), part: "label" }, this.label)));
     }
     static get is() { return "bcm-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -397,6 +401,26 @@ export class Checkbox {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'right'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "attribute": "full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/checkbox/checkbox.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Full width checkbox\n /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/checkbox/checkbox.css CHANGED Viewed

	@@ -1 +1 @@
1	- .relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\[10px\]{height:10px;width:10px}.size-\[18px\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--border-color\]{border-color:var(--border-color)}.bg-\[--unchecked-color\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-\[--border-color\]:hover{border-color:var(--border-color)}.hover\:border-\[--hover-border-color\]:hover{border-color:var(--hover-border-color)}.hover\:bg-\[--unchecked-color\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\:border-\[--checked-color\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\:bg-\[--checked-color\]{background-color:var(--checked-color)}.peer:checked~.hover\:peer-checked\:bg-\[--hover-color\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\:border-\[--checked-color\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\:bg-\[--checked-color\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\:peer-indeterminate\:bg-\[--hover-color\]:hover{background-color:var(--hover-color)}
1	+ .relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\[10px\]{height:10px;width:10px}.size-\[18px\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--border-color\]{border-color:var(--border-color)}.bg-\[--unchecked-color\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-\[--border-color\]:hover{border-color:var(--border-color)}.hover\:border-\[--hover-border-color\]:hover{border-color:var(--hover-border-color)}.hover\:bg-\[--unchecked-color\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\:border-\[--checked-color\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\:bg-\[--checked-color\]{background-color:var(--checked-color)}.peer:checked~.hover\:peer-checked\:bg-\[--hover-color\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\:border-\[--checked-color\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\:bg-\[--checked-color\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\:peer-indeterminate\:bg-\[--hover-color\]:hover{background-color:var(--hover-color)}

package/dist/collection/components/chip/chip.component.js CHANGED Viewed

@@ -18,7 +18,7 @@ import { tv } from "../../utils/tv";
  *
  * @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
@@ -131,7 +131,7 @@ export class BcmChip {
         }
     }
     render() {
-        return (h("div", { key: '8c6ae2805d0b2725e0271b33009d3271ed2d5cbc', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'de4de944330eae718e9240a242f6d05ff9725d80' }), this.dismissible && h("bcm-icon", { key: 'f0e6f89b9e7fb0b193fa6211c5bf9ecfb6c05126', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
+        return (h("div", { key: 'd2692652edd6275d143e7ddffbc789d0b5315027', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '8d3abf8a40a30dc93003077e52edc81062f10424' }), this.dismissible && h("bcm-icon", { key: '9914f1803e5d6feece7221e73b041d46f8237e95', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
     static get is() { return "bcm-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +205,7 @@ export class BcmChip {
                 "mutable": false,
                 "complexType": {
                     "original": "ChipStatus",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {
                         "ChipStatus": {
                             "location": "import",

package/dist/collection/components/chip/chip.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.component.js","sourceRoot":"","sources":["../../../src/components/chip/chip.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chip.component.js","sourceRoot":"","sources":["../../../src/components/chip/chip.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default' \| 'primary'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/chip/types.js CHANGED Viewed

@@ -3,5 +3,6 @@ export const STATUS_COLORS = {
     error: 'red',
     warning: 'amber',
     success: 'green',
+    primary: 'primary',
 };
 //# sourceMappingURL=types.js.map

package/dist/collection/components/chip/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chip/types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;~~CACR~~,CAAC","sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chip/types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,SAAS;CACV,CAAC","sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default' \| 'primary';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n primary: 'primary',\n} as const;\n"]}

package/dist/collection/components/input/input.css CHANGED Viewed

@@ -1,2 +1,2 @@
 .visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}
- /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(92.8% .006 264.531deg);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}input::placeholder,textarea::placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\[--bcm-ui-color-border-default\]{border-color:var(--bcm-ui-color-border-default)}.border-\[--bcm-ui-color-border-error\]{border-color:var(--bcm-ui-color-border-error)}.border-\[--bcm-ui-color-border-info\]{border-color:var(--bcm-ui-color-border-info)}.border-\[--bcm-ui-color-border-success\]{border-color:var(--bcm-ui-color-border-success)}.border-\[--bcm-ui-color-border-warning\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\[--bcm-ui-color-background-base-default\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.leading-6{line-height:1.5rem}.text-\[--bcm-ui-color-text-caption\]{color:var(--bcm-ui-color-text-caption)}.text-\[--bcm-ui-color-text-default\]{color:var(--bcm-ui-color-text-default)}.text-\[--bcm-ui-color-text-disabled\]{color:var(--bcm-ui-color-text-disabled)}.text-\[--bcm-ui-color-text-error\]{color:var(--bcm-ui-color-text-error)}.text-\[--bcm-ui-color-text-info\]{color:var(--bcm-ui-color-text-info)}.text-\[--bcm-ui-color-text-success\]{color:var(--bcm-ui-color-text-success)}.text-\[--bcm-ui-color-text-warning\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\:font-normal::placeholder{font-weight:400}.placeholder\:text-\[--bcm-ui-color-text-placeholder\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\:border-\[--bcm-ui-color-border-error\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\:border-\[--bcm-ui-color-border-info\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\:border-\[--bcm-ui-color-border-primary\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\:border-\[--bcm-ui-color-border-success\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\:border-\[--bcm-ui-color-border-warning\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-error\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-info\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-primary\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-success\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-warning\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}
+ /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(92.8% .006 264.531deg);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}input::placeholder,textarea::placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}:host([full-width]){width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\[--bcm-ui-color-border-default\]{border-color:var(--bcm-ui-color-border-default)}.border-\[--bcm-ui-color-border-error\]{border-color:var(--bcm-ui-color-border-error)}.border-\[--bcm-ui-color-border-info\]{border-color:var(--bcm-ui-color-border-info)}.border-\[--bcm-ui-color-border-success\]{border-color:var(--bcm-ui-color-border-success)}.border-\[--bcm-ui-color-border-warning\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\[--bcm-ui-color-background-base-default\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.leading-6{line-height:1.5rem}.text-\[--bcm-ui-color-text-caption\]{color:var(--bcm-ui-color-text-caption)}.text-\[--bcm-ui-color-text-default\]{color:var(--bcm-ui-color-text-default)}.text-\[--bcm-ui-color-text-disabled\]{color:var(--bcm-ui-color-text-disabled)}.text-\[--bcm-ui-color-text-error\]{color:var(--bcm-ui-color-text-error)}.text-\[--bcm-ui-color-text-info\]{color:var(--bcm-ui-color-text-info)}.text-\[--bcm-ui-color-text-success\]{color:var(--bcm-ui-color-text-success)}.text-\[--bcm-ui-color-text-warning\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\:font-normal::placeholder{font-weight:400}.placeholder\:text-\[--bcm-ui-color-text-placeholder\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\:border-\[--bcm-ui-color-border-error\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\:border-\[--bcm-ui-color-border-info\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\:border-\[--bcm-ui-color-border-primary\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\:border-\[--bcm-ui-color-border-success\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\:border-\[--bcm-ui-color-border-warning\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-error\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-info\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-primary\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-success\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-warning\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}

package/dist/collection/styles/theme-variables.js CHANGED Viewed

@@ -71,6 +71,31 @@ export const themeVariables = {
             DEFAULT: 'var(--bcm-ui-color-background-transparent-default)',
         },
         vivid: {
+            primary: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-primary-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-primary-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-primary-active)',
+            },
+            info: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-info-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-info-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-info-active)',
+            },
+            success: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-success-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-success-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-success-active)',
+            },
+            warning: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-warning-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-warning-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-warning-active)',
+            },
+            error: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-error-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-error-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-error-active)',
+            },
             slate: {
                 DEFAULT: 'var(--bcm-ui-color-background-vivid-slate-default)',
                 hover: 'var(--bcm-ui-color-background-vivid-slate-hover)',
@@ -186,6 +211,18 @@ export const themeVariables = {
             primary: {
                 DEFAULT: 'var(--bcm-ui-color-background-soft-primary-default)',
             },
+            info: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-info-default)',
+            },
+            success: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-success-default)',
+            },
+            warning: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-warning-default)',
+            },
+            error: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-error-default)',
+            },
             slate: {
                 DEFAULT: 'var(--bcm-ui-color-background-soft-slate-default)',
             },
@@ -254,6 +291,31 @@ export const themeVariables = {
             },
         },
         palette: {
+            primary: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-primary-default)',
+                hover: 'var(--bcm-ui-color-background-palette-primary-hover)',
+                active: 'var(--bcm-ui-color-background-palette-primary-active)',
+            },
+            info: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-info-default)',
+                hover: 'var(--bcm-ui-color-background-palette-info-hover)',
+                active: 'var(--bcm-ui-color-background-palette-info-active)',
+            },
+            success: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-success-default)',
+                hover: 'var(--bcm-ui-color-background-palette-success-hover)',
+                active: 'var(--bcm-ui-color-background-palette-success-active)',
+            },
+            warning: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-warning-default)',
+                hover: 'var(--bcm-ui-color-background-palette-warning-hover)',
+                active: 'var(--bcm-ui-color-background-palette-warning-active)',
+            },
+            error: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-error-default)',
+                hover: 'var(--bcm-ui-color-background-palette-error-hover)',
+                active: 'var(--bcm-ui-color-background-palette-error-active)',
+            },
             slate: {
                 DEFAULT: 'var(--bcm-ui-color-background-palette-slate-default)',
                 hover: 'var(--bcm-ui-color-background-palette-slate-hover)',
@@ -406,6 +468,11 @@ export const themeVariables = {
         'warning': 'var(--bcm-ui-color-border-warning)',
         'error': 'var(--bcm-ui-color-border-error)',
         'palette': {
+            primary: 'var(--bcm-ui-color-border-palette-primary)',
+            info: 'var(--bcm-ui-color-border-palette-info)',
+            success: 'var(--bcm-ui-color-border-palette-success)',
+            warning: 'var(--bcm-ui-color-border-palette-warning)',
+            error: 'var(--bcm-ui-color-border-palette-error)',
             slate: 'var(--bcm-ui-color-border-palette-slate)',
             gray: 'var(--bcm-ui-color-border-palette-gray)',
             zinc: 'var(--bcm-ui-color-border-palette-zinc)',
@@ -448,6 +515,11 @@ export const themeVariables = {
         'disabled': 'var(--bcm-ui-color-text-disabled)',
         'visited': 'var(--bcm-ui-color-text-visited)',
         'palette': {
+            primary: 'var(--bcm-ui-color-text-palette-primary)',
+            info: 'var(--bcm-ui-color-text-palette-info)',
+            success: 'var(--bcm-ui-color-text-palette-success)',
+            warning: 'var(--bcm-ui-color-text-palette-warning)',
+            error: 'var(--bcm-ui-color-text-palette-error)',
             slate: 'var(--bcm-ui-color-text-palette-slate)',
             gray: 'var(--bcm-ui-color-text-palette-gray)',
             zinc: 'var(--bcm-ui-color-text-palette-zinc)',