npm - bromcom-ui-next - Versions diffs - 0.1.23 → 0.1.25 - Mend

bromcom-ui-next 0.1.23 → 0.1.25

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 (246) hide show

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

@@ -1,11 +1,11 @@
 'use strict';
-var index = require('./index-DFpZVb11.js');
+var index = require('./index-DHDrXFLM.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["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-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-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],"activeTab":[32],"previousTab":[32],"disableTab":[64],"enableTab":[64],"disableAllTabs":[64],"enableAllTabs":[64],"getActiveTab":[64],"setActiveTab":[64]},[[9,"resize","handleResize"],[2,"bcmTabSelected","handleTabSelected"]],{"size":["handleSizeChange"]}]]],["bcm-tabs-content.cjs",[[257,"bcm-tabs-content",{"value":[513]}]]],["bcm-tabs-list.cjs",[[257,"bcm-tabs-list"]]],["bcm-tabs-trigger.cjs",[[257,"bcm-tabs-trigger",{"value":[513],"active":[516],"size":[513],"disabled":[516]}]]],["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-button_8.cjs",[[257,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]],[257,"bcm-drawer",{"open":[1540],"size":[1],"position":[1],"fullWidth":[4,"full-width"],"headerText":[1,"header-text"],"noHeader":[4,"no-header"],"show":[64],"hide":[64]},[[8,"keydown","handleKeyDown"]],{"open":["handleOpenChange"]}],[257,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16,"right-icons"],"selected":[516],"error":[516],"disabled":[516]}],[257,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"isPasswordVisible":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}],[257,"bcm-shortcut",{"hotkey":[1],"size":[1]}],[257,"bcm-text",{"text":[1],"variant":[1],"size":[1],"overflow":[4]}],[260,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16,"target-element"],"trigger":[1],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"offset":[2],"arrow":[4],"disabled":[4],"zIndex":[2,"z-index"],"appendToBody":[4,"append-to-body"],"destroyOnHide":[4,"destroy-on-hide"],"isVisible":[32],"isReady":[32],"show":[64],"hide":[64],"toggle":[64],"updatePositioning":[64]},null,{"targetId":["setupTarget"],"targetElement":["setupTarget"],"isVisible":["onVisibilityChange"]}],[257,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"position":[513],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}]]]], options);
+  return 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-drawer.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"]}]]],["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.cjs",[[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}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.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{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.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)}.outline{outline-style:solid}.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%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.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-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-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)}.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}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.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}.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)}.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)}

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

@@ -92,7 +92,7 @@ export class BcmSwitch {
                         base: 'gap-0.5',
                     },
                     medium: {
-                        dotContainer: 'w-9 h-[18px]',
+                        dotContainer: 'w-9 h-[1.125rem]',
                         dot: 'size-3.5',
                         label: 'text-size-5',
                         caption: 'text-size-4',
@@ -147,21 +147,21 @@ export class BcmSwitch {
                     size: 'small',
                     checked: true,
                     class: {
-                        dot: 'left-[18px]',
+                        dot: 'left-[1.125rem]',
                     },
                 },
                 {
                     size: 'medium',
                     checked: true,
                     class: {
-                        dot: 'left-[20px]',
+                        dot: 'left-[1.25rem]',
                     },
                 },
                 {
                     size: 'large',
                     checked: true,
                     class: {
-                        dot: 'left-[22px]',
+                        dot: 'left-[1.375rem]',
                     },
                 },
                 {
@@ -190,12 +190,12 @@ export class BcmSwitch {
         });
         const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (h("div", { key: '6073bf409136e2470b9dbb4086b275bbae37e0cf', class: base() }, h("label", { key: '2f4aabe9e2faa9e6427722923b7b671fdde63d0d', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '790195d6a1e03f81d2c3c0582e35053fdcbf88de', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: '696ed4067822d9cb2c6c259ddc7e89add1e84550', class: label() }, h("slot", { key: '9ee1058077e3e26e90fc662756964504f6f8449c' }, this.label))), h("label", Object.assign({ key: '7fbc66b8357a5af8200279fd9b2c705f0d73530b', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: 'd3a267192ccecc212952b3140e15579868669559', class: base() }, h("label", { key: 'a0ed52d113eb5da56a56ec71bde2c2cae17603b9', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'd5f3041f00a7689244a8799d58d90281b6e44ddc', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: '2c19141b32811c2237f272f0194677b5e85911d8', class: label() }, h("slot", { key: 'b0725f609b318d99ccc7eb9abb0f742754323710' }, this.label))), h("label", Object.assign({ key: 'a9a4a95627dbe7e5ce60fdfe2188feba7ed34da3', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: '0ee2aca9dddfcd1c4cd52dd60d6f1964e6dcdd28', class: dot() }))), this.error && this.caption && h("span", { key: '80000e73d4f695d5620ed3347350ed049a247bf9', class: caption() }, this.caption), h("slot", { key: '6bfa76d6062426e21c6c41474fb102177d304a1f', name: "caption" })));
+            } }), h("div", { key: 'c123c5b1037558e44b30256b2b86f9c894edf75d', class: dot() }))), this.error && this.caption && h("span", { key: 'f7a50c32b5868facac9c7627237c6f3542b26bf3', class: caption() }, this.caption), h("slot", { key: 'ed4d82b698202070324d645f358b2058c3583d28', name: "caption" })));
     }
     static get is() { return "bcm-switch"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && (\n <span class={label()}>\n <slot>{this.label}</slot>\n </span>\n )}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[1.125rem]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[1.125rem]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[1.25rem]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[1.375rem]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && (\n <span class={label()}>\n <slot>{this.label}</slot>\n </span>\n )}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- :host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\.5{left:.125rem}.left-\[~~18px~~\]{left:~~18px~~}.left-\[~~20px~~\]{left:~~20px~~}.left-\[~~22px~~\]{left:~~22px~~}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\[~~18px~~\]{height:~~18px~~}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--switch-bg\]{background-color:var(--switch-bg)}.bg-\[--switch-dot-bg\]{background-color:var(--switch-dot-bg)}.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}.font-normal{font-weight:400}.\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\:bg-\[--switch-bg-hover\],.hover\:bg-\[--switch-bg-hover\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\:ring-2{--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)}.peer:focus-visible~.peer-focus-visible\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}
1	+ :host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\.5{left:.125rem}.left-\[1\.125rem\]{left:1.125rem}.left-\[1\.25rem\]{left:1.25rem}.left-\[1\.375rem\]{left:1.375rem}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\[1\.125rem\]{height:1.125rem}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--switch-bg\]{background-color:var(--switch-bg)}.bg-\[--switch-dot-bg\]{background-color:var(--switch-dot-bg)}.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}.font-normal{font-weight:400}.\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\:bg-\[--switch-bg-hover\],.hover\:bg-\[--switch-bg-hover\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\:ring-2{--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)}.peer:focus-visible~.peer-focus-visible\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}

package/dist/collection/components/tabs/bcm-tabs.css CHANGED Viewed

	@@ -1 +1 @@
1	- .relative{position:relative}.block{display:block}:host{display:block;position:relative;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}.flex{display:flex}.contents{display:contents}.w-full{width:100%}.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}.flex-col{flex-direction:column}.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)}
1	+ .relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.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}.flex{display:flex}.contents{display:contents}.w-auto{width:auto}.w-full{width:100%}.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}.flex-col{flex-direction:column}.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{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}

package/dist/collection/components/tabs/tabs-list.component.js CHANGED Viewed

@@ -6,6 +6,14 @@ import { tv } from "../../utils/tv";
  */
 export class BcmTabsList {
     constructor() {
+        /**
+         * Tab variant - controls width behavior
+         */
+        this.variant = 'full-width';
+        /**
+         * Whether to enable smooth animations for inkbar and transitions
+         */
+        this.smooth = true;
         /**
          * Tailwind variants configuration for styling the tabs list container and inkbar
          */
@@ -14,21 +22,56 @@ export class BcmTabsList {
                 /**
                  * Main container that holds both the tablist and inkbar
                  */
-                container: 'flex flex-row items-center w-full relative',
+                container: 'flex flex-row items-center relative',
                 /**
                  * The sliding indicator that appears under the active tab
                  */
-                inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',
+                inkbar: 'inkbar absolute bottom-0 left-0 h-0.5 bg-[--bcm-ui-color-text-primary] z-10 opacity-0',
                 /**
                  * The container for tab trigger elements
                  */
-                tabList: 'tabs-list flex flex-row items-center w-full relative',
+                tabList: 'tabs-list flex flex-row items-center relative',
+                /**
+                 * Background line for auto-width variant
+                 */
+                backgroundLine: 'absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-placeholder]',
+            },
+            variants: {
+                variant: {
+                    'full-width': {
+                        container: 'w-full',
+                        tabList: 'w-full',
+                        inkbar: 'right-0',
+                        backgroundLine: 'hidden',
+                    },
+                    'auto-width': {
+                        container: 'w-auto',
+                        tabList: 'w-auto',
+                        inkbar: 'right-0',
+                        backgroundLine: 'block',
+                    },
+                },
+                smooth: {
+                    true: {
+                        inkbar: 'transition-all duration-200 ease-in-out',
+                    },
+                    false: {
+                        inkbar: '',
+                    },
+                },
+            },
+            defaultVariants: {
+                variant: 'full-width',
+                smooth: true,
             },
         });
     }
     render() {
-        const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: '9752a4024488845eda6a6701818364dab7fe96f2', class: container(), slot: "tabs-list" }, h("div", { key: 'c97ec0649dc5054b1dc374e5dd47d37eaaf0001a', class: inkbar() }), h("div", { key: 'f0da62c82904ad4bc90cf02ec19c3da48118471c', class: tabList(), role: "tablist" }, h("slot", { key: 'c4f7086fac00127505adfc74032bc4a2cd8fbb11' }))));
+        const { container, inkbar, tabList, backgroundLine } = this.class({
+            variant: this.variant,
+            smooth: this.smooth,
+        });
+        return (h("div", { key: '024191da887d16461269660cb7c97d896848bef0', class: container(), slot: "tabs-list" }, h("div", { key: '5be00109388015401723b94881bed240594cd722', class: backgroundLine() }), h("div", { key: '83c291950deaa88f32950fa84ced38f22a971dc7', class: inkbar() }), h("div", { key: 'f160a54fa4b3c82b63114e169d0ff36bf4c6d014', class: tabList(), role: "tablist" }, h("slot", { key: 'fbedd8dae37e259778d44294237616abfc1ea2dd' }))));
     }
     static get is() { return "bcm-tabs-list"; }
     static get encapsulation() { return "shadow"; }
@@ -42,5 +85,49 @@ export class BcmTabsList {
             "$": ["tabs-list.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full-width' | 'auto-width'",
+                    "resolved": "\"auto-width\" | \"full-width\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab variant - controls width behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'full-width'"
+            },
+            "smooth": {
+                "type": "boolean",
+                "attribute": "smooth",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable smooth animations for inkbar and transitions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
 }
 //# sourceMappingURL=tabs-list.component.js.map

package/dist/collection/components/tabs/tabs-list.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;~~AACjE~~,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACL;;mBAEG;gBACH,SAAS,EAAE,~~4CAA4C~~;~~gBAEvD~~;;mBAEG;gBACH,MAAM,EAAE,~~uIAAuI~~;gBAE/I;;mBAEG;gBACH,OAAO,EAAE,~~sDAAsD~~;~~aAChE~~;SACF,CAAC,CAAC;~~KAaJ~~;~~IAXC~~,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;~~QACpD~~,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;YACvC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;gBACnC,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n /\n@Component({\n tag: 'bcm-tabs-list',\n styleUrl: 'tabs-list.css',\n shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n /\n Tailwind variants configuration for styling the tabs list container and inkbar\n /\n private class = tv({\n slots: {\n /\n Main container that holds both the tablist and inkbar\n /\n container: 'flex flex-row items-center ~~w-full~~ relative',\n\n /\n The sliding indicator that appears under the active tab\n /\n inkbar: 'inkbar absolute bottom-0 left-0 ~~right-0~~ h-0.5 bg-[--bcm-ui-color-text-primary] ~~transition-all duration-200 ease-in-out~~ z-10 opacity-0',\n\n /\n The container for tab trigger elements\n */\n tabList: 'tabs-list flex flex-row items-center w-full ~~relative~~',\n },\n });\n\n render() {\n const { container, inkbar, tabList } = this.class();\n return (\n <div class={container()} slot=\"tabs-list\">\n <div class={inkbar()}></div>\n <div class={tabList()} role=\"tablist\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;WAEG;QAEH,YAAO,GAAgC,YAAY,CAAC;QAEpD;;WAEG;QAEH,WAAM,GAAY,IAAI,CAAC;QACvB;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACL;;mBAEG;gBACH,SAAS,EAAE,qCAAqC;gBAEhD;;mBAEG;gBACH,MAAM,EAAE,uFAAuF;gBAE/F;;mBAEG;gBACH,OAAO,EAAE,+CAA+C;gBAExD;;mBAEG;gBACH,cAAc,EAAE,6EAA6E;aAC9F;YACD,QAAQ,EAAE;gBACR,OAAO,EAAE;oBACP,YAAY,EAAE;wBACZ,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,QAAQ;wBACjB,MAAM,EAAE,SAAS;wBACjB,cAAc,EAAE,QAAQ;qBACzB;oBACD,YAAY,EAAE;wBACZ,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,QAAQ;wBACjB,MAAM,EAAE,SAAS;wBACjB,cAAc,EAAE,OAAO;qBACxB;iBACF;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,MAAM,EAAE,yCAAyC;qBAClD;oBACD,KAAK,EAAE;wBACL,MAAM,EAAE,EAAE;qBACX;iBACF;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,YAAY;gBACrB,MAAM,EAAE,IAAI;aACb;SACF,CAAC,CAAC;KAiBJ;IAfC,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAChE,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;QACH,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;YACvC,4DAAK,KAAK,EAAE,cAAc,EAAE,GAAQ;YACpC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;gBACnC,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n /\n@Component({\n tag: 'bcm-tabs-list',\n styleUrl: 'tabs-list.css',\n shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n /\n Tab variant - controls width behavior\n /\n @Prop({ reflect: true })\n variant: 'full-width' \| 'auto-width' = 'full-width';\n\n /\n Whether to enable smooth animations for inkbar and transitions\n /\n @Prop({ reflect: true })\n smooth: boolean = true;\n /\n Tailwind variants configuration for styling the tabs list container and inkbar\n /\n private class = tv({\n slots: {\n /\n Main container that holds both the tablist and inkbar\n /\n container: 'flex flex-row items-center relative',\n\n /\n The sliding indicator that appears under the active tab\n /\n inkbar: 'inkbar absolute bottom-0 left-0 h-0.5 bg-[--bcm-ui-color-text-primary] z-10 opacity-0',\n\n /\n The container for tab trigger elements\n /\n tabList: 'tabs-list flex flex-row items-center relative',\n\n /\n Background line for auto-width variant\n */\n backgroundLine: 'absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-placeholder]',\n },\n variants: {\n variant: {\n 'full-width': {\n container: 'w-full',\n tabList: 'w-full',\n inkbar: 'right-0',\n backgroundLine: 'hidden',\n },\n 'auto-width': {\n container: 'w-auto',\n tabList: 'w-auto',\n inkbar: 'right-0',\n backgroundLine: 'block',\n },\n },\n smooth: {\n true: {\n inkbar: 'transition-all duration-200 ease-in-out',\n },\n false: {\n inkbar: '',\n },\n },\n },\n defaultVariants: {\n variant: 'full-width',\n smooth: true,\n },\n });\n\n render() {\n const { container, inkbar, tabList, backgroundLine } = this.class({\n variant: this.variant,\n smooth: this.smooth,\n });\n return (\n <div class={container()} slot=\"tabs-list\">\n <div class={backgroundLine()}></div>\n <div class={inkbar()}></div>\n <div class={tabList()} role=\"tablist\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/tabs-list.css CHANGED Viewed

	@@ -1 +1 @@
1	- .relative{position:relative}.block{display:block}:host{display:block;position:relative;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}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\[--bcm-ui-color-text-primary\]{background-color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
1	+ .relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.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}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.hidden{display:none}.h-0\.5{height:.125rem}.w-auto{width:auto}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\[--bcm-ui-color-text-placeholder\]{background-color:var(--bcm-ui-color-text-placeholder)}.bg-\[--bcm-ui-color-text-primary\]{background-color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}

package/dist/collection/components/tabs/tabs-trigger.component.js CHANGED Viewed

@@ -18,13 +18,21 @@ export class BcmTabsTrigger {
          * Whether the tab is disabled
          */
         this.disabled = false;
+        /**
+         * Tab variant - controls width behavior
+         */
+        this.variant = 'full-width';
+        /**
+         * Whether to enable smooth animations for transitions
+         */
+        this.smooth = true;
         /**
          * Tailwind variants configuration for styling
          */
         this.class = tv({
             slots: {
-                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',
-                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',
+                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium py-1 px-3 bg-white border-none',
+                borderLine: 'bottom-0 left-0 right-0 h-[2px]',
             },
             variants: {
                 size: {
@@ -37,7 +45,7 @@ export class BcmTabsTrigger {
                         tab: 'text-color-primary',
                     },
                     false: {
-                        tab: 'text-color-default',
+                        tab: 'text-color-placeholder',
                     },
                 },
                 disabled: {
@@ -47,7 +55,27 @@ export class BcmTabsTrigger {
                     },
                     false: {
                         tab: 'cursor-pointer text-color hover:text-color-primary',
-                        borderLine: 'bg-[--bcm-ui-color-text-default]',
+                        borderLine: 'bg-[--bcm-ui-color-text-placeholder]',
+                    },
+                },
+                variant: {
+                    'full-width': {
+                        tab: 'w-full',
+                        borderLine: 'w-full',
+                    },
+                    'auto-width': {
+                        tab: 'w-auto',
+                        borderLine: 'w-full',
+                    },
+                },
+                smooth: {
+                    true: {
+                        tab: 'transition-all duration-200 ease-in-out',
+                        borderLine: 'transition-all duration-200 ease-in-out',
+                    },
+                    false: {
+                        tab: '',
+                        borderLine: '',
                     },
                 },
             },
@@ -55,6 +83,8 @@ export class BcmTabsTrigger {
                 size: 'medium',
                 active: false,
                 disabled: false,
+                variant: 'full-width',
+                smooth: true,
             },
         }, {
             twMerge: false,
@@ -74,8 +104,10 @@ export class BcmTabsTrigger {
             size: this.size,
             active: this.active,
             disabled: this.disabled,
+            variant: this.variant,
+            smooth: this.smooth,
         });
-        return (h(Host, { key: 'd8d56bc1536edf98cda1f2a2499d2c2442dc10f3', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'd943223c1fcc2876b3360af9ab4913f4dc4dd8e9', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '499f0f1586cc55e451396b588720aa81a488e253' })), h("div", { key: '73e8da795af83ced549dd45a118e72b23a84daed', class: borderLine() })));
+        return (h(Host, { key: '5424cb7174c82878a415bab34e35b8f738580f89', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '3222e26cd8d148547c80b917e039c46852696cbf', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '11ec64418405358f95f0bfb8c6cb6c4b6f099a1e' })), h("div", { key: '8ebda693389b88ff87859907aca5c00f6277e243', class: borderLine() })));
     }
     static get is() { return "bcm-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +201,46 @@ export class BcmTabsTrigger {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full-width' | 'auto-width'",
+                    "resolved": "\"auto-width\" | \"full-width\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab variant - controls width behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'full-width'"
+            },
+            "smooth": {
+                "type": "boolean",
+                "attribute": "smooth",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable smooth animations for transitions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/tabs/tabs-trigger.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-trigger.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-trigger.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAiBE;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;~~QAsB1B~~;;WAEG;QACK,UAAK,GAAG,EAAE,CAChB;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,~~gKAAgK~~;~~gBACrK~~,UAAU,EAAE,~~gFAAgF~~;~~aAC7F~~;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACpC;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,GAAG,EAAE,oBAAoB;qBAC1B;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,~~oBAAoB~~;~~qBAC1B~~;iBACF;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAChD;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,~~kCAAkC~~;~~qBAC/C~~;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;~~aAChB~~;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;~~KAiBH~~;~~IArEC~~;;;OAGG;IACK,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;~~IA+CD~~,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;~~SACxB~~,CAAC,CAAC;QACH,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ;YAClF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;gBACzF,8DAAQ,CACD;YACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC3B,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n /\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /\n Reference to the host element\n /\n @Element() el: HTMLElement;\n\n /\n Unique identifier value for the tab\n /\n @Prop({ reflect: true })\n value: string;\n\n /\n Whether the tab is currently active\n /\n @Prop({ reflect: true })\n active: boolean = false;\n\n /\n Size of the tab\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the tab is disabled\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Event emitted when this tab is selected\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /\n Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n /\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /\n Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium ~~transition-all duration-200 ease-in-out~~ py-1 px-3 ~~w-full~~ bg-white border-none',\n borderLine: 'bottom-0 ~~w-full~~ left-0 right-0 h-[2px] ~~transition-all duration-200 ease-in-out~~',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color-~~default~~',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-~~default~~]',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tabs-trigger.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-trigger.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n /\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /\n Reference to the host element\n /\n @Element() el: HTMLElement;\n\n /\n Unique identifier value for the tab\n /\n @Prop({ reflect: true })\n value: string;\n\n /\n Whether the tab is currently active\n /\n @Prop({ reflect: true })\n active: boolean = false;\n\n /\n Size of the tab\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the tab is disabled\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Tab variant - controls width behavior\n /\n @Prop({ reflect: true })\n variant: 'full-width' \| 'auto-width' = 'full-width';\n\n /\n Whether to enable smooth animations for transitions\n /\n @Prop({ reflect: true })\n smooth: boolean = true;\n\n /\n Event emitted when this tab is selected\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /\n Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n /\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /\n Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium py-1 px-3 bg-white border-none',\n borderLine: 'bottom-0 left-0 right-0 h-[2px]',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color-placeholder',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-placeholder]',\n },\n },\n variant: {\n 'full-width': {\n tab: 'w-full',\n borderLine: 'w-full',\n },\n 'auto-width': {\n tab: 'w-auto',\n borderLine: 'w-full',\n },\n },\n smooth: {\n true: {\n tab: 'transition-all duration-200 ease-in-out',\n borderLine: 'transition-all duration-200 ease-in-out',\n },\n false: {\n tab: '',\n borderLine: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n variant: 'full-width',\n smooth: true,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n variant: this.variant,\n smooth: this.smooth,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/tabs-trigger.css CHANGED Viewed

	@@ -1 +1 @@
1	- .relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\[2px\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\[--bcm-ui-color-text-~~default~~\]{background-color:var(--bcm-ui-color-text-~~default~~)}.bg-\[--bcm-ui-color-text-~~disabled~~\]{background-color:var(--bcm-ui-color-text-~~disabled~~)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.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}.text-color-~~default~~{color:var(--bcm-ui-color-text-~~default~~)}.text-color-~~disabled~~{color:var(--bcm-ui-color-text-~~disabled~~)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}
1	+ .relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\[2px\]{height:2px}.w-auto{width:auto}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\[--bcm-ui-color-text-disabled\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-\[--bcm-ui-color-text-placeholder\]{background-color:var(--bcm-ui-color-text-placeholder)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.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}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}