npm - bromcom-ui-next - Versions diffs - 0.1.6 → 0.1.8 - Mend

bromcom-ui-next 0.1.6 → 0.1.8

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

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 'tailwind-variants';\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',\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}"]}
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 'tailwind-variants';\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"]}

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{border-radius:var(--bcm-ui-border-radius-~~default~~,~~6px~~)}.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~~{color:var(--bcm~~-~~ui-color-text-default)}.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}.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/dropdown-item/dropdown-item.css CHANGED Viewed

	@@ -1 +1 @@
1	- .flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var$--bcm-ui-color-background-base-active$\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var$--bcm-ui-color-background-palette-red-default$\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.~~text-color{color:var(--bcm-ui-color-text-default)}.~~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)}.hover\:bg-\[var$--bcm-ui-color-background-base-active$\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var$--bcm-ui-color-background-base-hover$\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var$--bcm-ui-color-background-palette-red-default$\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}
1	+ .flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var$--bcm-ui-color-background-base-active$\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var$--bcm-ui-color-background-palette-red-default$\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.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)}.hover\:bg-\[var$--bcm-ui-color-background-base-active$\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var$--bcm-ui-color-background-base-hover$\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var$--bcm-ui-color-background-palette-red-default$\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}

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

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { defaultIcons } from "./types";
 import { tv } from "tailwind-variants";
 import classNames from "classnames";
 import { generateId } from "../../utils/id/generate-id";
@@ -10,6 +9,7 @@ export class BcmInput {
         this.isFocused = false;
         this.isValid = true;
         this.internalStatus = 'default';
+        this.isPasswordVisible = false;
         /** Input value */
         this.value = '';
         /** Input id */
@@ -131,6 +131,21 @@ export class BcmInput {
         }, {
             twMerge: false,
         });
+        this.togglePasswordVisibility = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+            this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
+        };
+        this.PasswordToggleButton = () => {
+            var _a;
+            if (this.type !== 'password' || this.disabled || this.readonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0)
+                return null;
+            return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
+        };
+        this.iconSize = {
+            small: 14,
+            medium: 16,
+            large: 18,
+        }[this.size];
     }
     handleValueChange(newValue) {
         if (this.inputRef) {
@@ -225,7 +240,8 @@ export class BcmInput {
         return checkSlotContent(this.el, slotName);
     }
     getDefaultIconForType() {
-        return defaultIcons[this.type];
+        return; // TODO: Will be implemented later
+        // return defaultIcons[this.type as keyof typeof defaultIcons];
     }
     render() {
         const inputId = this._id + '-input' || this.name;
@@ -236,19 +252,14 @@ export class BcmInput {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        const iconSize = {
-            small: 14,
-            medium: 16,
-            large: 18,
-        }[this.size];
-        return (h("div", { key: 'a0fa86f738a07e475cd809c9abe8bd7aa5f50d2e', class: "bcm-ui-element" }, this.label && (h("label", { key: 'b2715f3669bf51b2bc93b29a4ce78fc84d6a8fec', class: classNames('input-label font-medium', {
+        return (h("div", { key: '9a3781baf249407a61a8d2f4b77a7138004515b2', class: "bcm-ui-element" }, this.label && (h("label", { key: 'b1d6575a78bf6fec8b2dd9ccb91a6f40e13390c8', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: '26f991e1bad25cc2f074b9259320cc555c3d4bd9', name: "label" }, this.label), this.required && h("span", { key: '0b5a332b842ece285b093b2474e7dd376530d613' }, "*"))), h("div", { key: 'f4b1d4087e2bdfb07c140170e4e59e10c2163535', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'dcc49ae6c4ad4795d1f10f85065e44cb061fce0e', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'c56c06852192dcfc4e7d3df24851afc31804b6b9', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: '29bd74d28492d5e95b4c3155b3c5a9fed3671a2a', name: "prefix" }))), h("input", { key: '21a06d459d5f68be085d46580134ea4718192d89', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'd3852234f0410ed5ceb7df79c2645a97c45afac2', class: "flex items-center gap-2 px-2" }, h("slot", { key: '1e280c327b4791631c3dda4f3ec49706b8a88300', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'd0d14a9d2c7ce1be1de030afb661866b7bf60546', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '4408fc79afa594d8a932898f13573395ae33cccd', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '82f4e178764f66383e0103a8521e66164f5fbbd1', name: "label" }, this.label), this.required && h("span", { key: '473e4695ca4674a673057f7826c535e37912e435' }, "*"))), h("div", { key: '38b0f8a03d58ad7786ad8a16cfba753b5e61d428', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '664798966076f0a7f6e95bd8074d5a2f7cb8d4d5', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '1e45bf50ebc511dd2b2f8d46d58996bbc280d652', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '383afe644aea0129cbb3287f89af8e7d7d202113', name: "prefix" }))), h("input", { key: 'b1b7ed8238d492855fb2f4c0fa20289845ae30cc', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '6a238ee35be66890d4afed5226ad760ecadf01d3', class: "flex items-center gap-2 px-2" }, h("slot", { key: 'f54dffe3dee3a0c36cb404478645bec177238dd5', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'c61a18b2f63696ed45430b2521e2823fc3b950c3', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: 'b8bda1b35acb92f6b6d479c8ca26474ad3c67f76', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
@@ -822,7 +833,8 @@ export class BcmInput {
             "validationMessage": {},
             "isValid": {},
             "internalStatus": {},
-            "internalErrorMessage": {}
+            "internalErrorMessage": {},
+            "isPasswordVisible": {}
         };
     }
     static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType, defaultIcons } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-input',\n styleUrl: 'input.scss',\n shadow: true,\n})\nexport class BcmInput {\n @Element() el: HTMLElement;\n private inputRef: HTMLInputElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n\n /** Input value /\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /* Input placeholder text /\n @Prop()\n placeholder?: string;\n\n /* Input name /\n @Prop()\n name?: string;\n\n /* Input id /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('input');\n\n /* Controls the input size /\n @Prop()\n size: InputSize = 'medium';\n\n /* Defines the input's status/state /\n @Prop()\n status: InputStatus = 'default';\n\n /* Full width input /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* HTML input type /\n @Prop()\n type: InputType = 'text';\n\n /* Whether the input is disabled /\n @Prop()\n disabled = false;\n\n /* Whether the input is readonly /\n @Prop()\n readonly = false;\n\n /* Whether the input is required /\n @Prop()\n required = false;\n\n /* Input autocomplete attribute /\n @Prop()\n autocomplete?: string;\n\n /* Min length for text input /\n @Prop()\n minLength?: number;\n\n /* Max length for text input /\n @Prop()\n maxLength?: number;\n\n /* Min value for number input /\n @Prop()\n min?: number;\n\n /* Max value for number input /\n @Prop()\n max?: number;\n\n /* Step value for number input /\n @Prop()\n step?: number;\n\n /* Pattern for validation /\n @Prop()\n pattern?: string;\n\n /* Input label for accessibility /\n @Prop()\n label?: string;\n\n /* Error message to display /\n @Prop()\n errorMessage?: string;\n\n /* Caption text to display below input /\n @Prop()\n captionText?: string;\n\n /* ID of associated label element /\n @Prop()\n labelledby?: string;\n\n /* ID of associated caption/error text element /\n @Prop()\n describedby?: string;\n\n /* Prefix icon class name /\n @Prop()\n prefixIcon?: string;\n\n /* Suffix icon class name /\n @Prop()\n suffixIcon?: string;\n\n /* Whether to use native form validation\n * If false, component will handle validation internally\n /\n @Prop()\n useNativeValidation = true;\n\n /* Custom validation function /\n @Prop()\n validator?: (value: string) => string \| undefined;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmInput: EventEmitter<InputEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<Event>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n if (this.inputRef) {\n this.inputRef.value = newValue;\n }\n }\n\n @Watch('status')\n watchStatus(newValue: InputStatus) {\n this.internalStatus = newValue;\n }\n\n @Watch('errorMessage')\n watchErrorMessage(newValue: string) {\n this.internalErrorMessage = newValue;\n }\n\n @Method()\n async setFocus() {\n this.inputRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.inputRef?.blur();\n }\n\n @Method()\n async select() {\n this.inputRef?.select();\n }\n\n /* Sets locale and messages for all inputs /\n @Method()\n async setLocale(locale: string, messages: Record<string, string>) {\n // Set messages and update validation immediately\n setValidationMessages(locale, messages);\n\n // Mevcut validasyon mesajını güncelle\n if (!this.isValid) {\n this.validateInput();\n }\n }\n\n componentWillLoad() {\n // I18n için default mesajları set et\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n private validateInput(): void {\n if (!this.inputRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.inputRef.value;\n\n // Required check\n if (this.required && !value) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('required');\n this.internalStatus = 'error';\n this.internalErrorMessage = this.validationMessage;\n return;\n }\n\n // Minimum length check\n else if (this.minLength && value.length < this.minLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n }\n // Maximum length check\n else if (this.maxLength && value.length > this.maxLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n }\n // Pattern check\n else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('pattern');\n }\n // Email check\n else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('email');\n }\n // Number range check\n else if (this.type === 'number' && value) {\n const numValue = parseFloat(value);\n if (this.min !== undefined && numValue < this.min) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('min', { min: this.min });\n } else if (this.max !== undefined && numValue > this.max) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('max', { max: this.max });\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\n }\n\n private onInput = (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.bcmInput.emit(event);\n this.validateInput();\n };\n\n private onChange = (event: Event) => {\n this.bcmChange.emit(event);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.bcmFocus.emit(event);\n };\n\n private onBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.bcmBlur.emit(event);\n this.validateInput();\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n this.bcmKeyDown.emit(event);\n };\n\n private onKeyUp = (event: KeyboardEvent) => {\n this.bcmKeyUp.emit(event);\n };\n\n private hasSlotContent(slotName: string): boolean {\n return checkSlotContent(this.el, slotName);\n }\n\n private styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-input bcm-input__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex items-center justify-between',\n 'transition-colors duration-200',\n 'px-2',\n ],\n inputClass: [\n 'input',\n 'w-full flex-1',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none text-ellipsis',\n 'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n 'font-sans antialiased font-medium',\n 'px-1',\n ],\n },\n variants: {\n size: {\n small: {\n base: '',\n inputClass: 'text-size-4 h-6',\n },\n medium: {\n base: '',\n inputClass: 'text-size-5 h-8',\n },\n large: {\n base: '',\n inputClass: 'text-size-6 h-10',\n },\n },\n status: {\n default: {\n base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n },\n error: {\n base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n },\n success: {\n base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n },\n warning: {\n base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n },\n info: {\n base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n },\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed',\n false: '',\n },\n focused: {\n true: {\n base: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n private getDefaultIconForType(): string \| undefined {\n return defaultIcons[this.type as keyof typeof defaultIcons];\n }\n\n render() {\n const inputId = this._id + '-input' \|\| this.name;\n\n const { base, inputClass } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n const iconSize = {\n small: 14,\n medium: 16,\n large: 18,\n }[this.size];\n\n return (\n <div class=\"bcm-ui-element\">\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n htmlFor={inputId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span></span>}\n </label>\n )}\n\n <div class={base()}>\n {(this.hasSlotContent('prefix') \|\| this.prefixIcon \|\| this.getDefaultIconForType()) && (\n <div class=\"flex items-center gap-2 px-2\">\n {(this.prefixIcon \|\| this.getDefaultIconForType()) && (\n <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon \|\| this.getDefaultIconForType()} size={iconSize}></bcm-icon>\n )}\n <slot name=\"prefix\"></slot>\n </div>\n )}\n <input\n ref={el => (this.inputRef = el)}\n id={inputId}\n class={inputClass()}\n type={this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n autocomplete={this.autocomplete}\n minlength={this.minLength}\n maxlength={this.maxLength}\n min={this.min}\n max={this.max}\n step={this.step}\n pattern={this.pattern}\n aria-invalid={this.status === 'error'}\n aria-required={this.required}\n aria-labelledby={this.labelledby}\n aria-describedby={this.describedby}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {(this.hasSlotContent('suffix') \|\| this.suffixIcon) && (\n <div class=\"flex items-center gap-2 px-2\">\n <slot name=\"suffix\"></slot>\n {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={iconSize}></bcm-icon>}\n </div>\n )}\n </div>\n {(this.captionText \|\| this.internalErrorMessage \|\| this.validationMessage) && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' \|\| !this.isValid),\n 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n 'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n 'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, InputType } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\nimport { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n tag: 'bcm-input',\n styleUrl: 'input.scss',\n shadow: true,\n})\nexport class BcmInput {\n @Element() el: HTMLElement;\n private inputRef: HTMLInputElement;\n\n @State() isFocused = false;\n @State() validationMessage: string;\n @State() isValid = true;\n @State() internalStatus: InputStatus = 'default';\n @State() internalErrorMessage: string;\n @State() isPasswordVisible = false;\n\n /** Input value /\n @Prop({ mutable: true, reflect: true })\n value: string = '';\n\n /* Input placeholder text /\n @Prop()\n placeholder?: string;\n\n /* Input name /\n @Prop()\n name?: string;\n\n /* Input id /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('input');\n\n /* Controls the input size /\n @Prop()\n size: InputSize = 'medium';\n\n /* Defines the input's status/state /\n @Prop()\n status: InputStatus = 'default';\n\n /* Full width input /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* HTML input type /\n @Prop()\n type: InputType = 'text';\n\n /* Whether the input is disabled /\n @Prop()\n disabled = false;\n\n /* Whether the input is readonly /\n @Prop()\n readonly = false;\n\n /* Whether the input is required /\n @Prop()\n required = false;\n\n /* Input autocomplete attribute /\n @Prop()\n autocomplete?: string;\n\n /* Min length for text input /\n @Prop()\n minLength?: number;\n\n /* Max length for text input /\n @Prop()\n maxLength?: number;\n\n /* Min value for number input /\n @Prop()\n min?: number;\n\n /* Max value for number input /\n @Prop()\n max?: number;\n\n /* Step value for number input /\n @Prop()\n step?: number;\n\n /* Pattern for validation /\n @Prop()\n pattern?: string;\n\n /* Input label for accessibility /\n @Prop()\n label?: string;\n\n /* Error message to display /\n @Prop()\n errorMessage?: string;\n\n /* Caption text to display below input /\n @Prop()\n captionText?: string;\n\n /* ID of associated label element /\n @Prop()\n labelledby?: string;\n\n /* ID of associated caption/error text element /\n @Prop()\n describedby?: string;\n\n /* Prefix icon class name /\n @Prop()\n prefixIcon?: string;\n\n /* Suffix icon class name /\n @Prop()\n suffixIcon?: string;\n\n /* Whether to use native form validation\n * If false, component will handle validation internally\n /\n @Prop()\n useNativeValidation = true;\n\n /* Custom validation function /\n @Prop()\n validator?: (value: string) => string \| undefined;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmInput: EventEmitter<InputEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<Event>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n handleValueChange(newValue: string) {\n if (this.inputRef) {\n this.inputRef.value = newValue;\n }\n }\n\n @Watch('status')\n watchStatus(newValue: InputStatus) {\n this.internalStatus = newValue;\n }\n\n @Watch('errorMessage')\n watchErrorMessage(newValue: string) {\n this.internalErrorMessage = newValue;\n }\n\n @Method()\n async setFocus() {\n this.inputRef?.focus();\n }\n\n @Method()\n async setBlur() {\n this.inputRef?.blur();\n }\n\n @Method()\n async select() {\n this.inputRef?.select();\n }\n\n /* Sets locale and messages for all inputs /\n @Method()\n async setLocale(locale: string, messages: Record<string, string>) {\n // Set messages and update validation immediately\n setValidationMessages(locale, messages);\n\n // Mevcut validasyon mesajını güncelle\n if (!this.isValid) {\n this.validateInput();\n }\n }\n\n componentWillLoad() {\n // I18n için default mesajları set et\n setValidationMessages('en', defaultValidationMessages);\n this.internalStatus = this.status;\n this.internalErrorMessage = this.errorMessage;\n }\n\n private validateInput(): void {\n if (!this.inputRef) return;\n\n // Reset validation state\n this.isValid = true;\n this.validationMessage = '';\n\n const value = this.inputRef.value;\n\n // Required check\n if (this.required && !value) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('required');\n this.internalStatus = 'error';\n this.internalErrorMessage = this.validationMessage;\n return;\n }\n\n // Minimum length check\n else if (this.minLength && value.length < this.minLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n }\n // Maximum length check\n else if (this.maxLength && value.length > this.maxLength) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n }\n // Pattern check\n else if (this.pattern && !new RegExp(this.pattern).test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('pattern');\n }\n // Email check\n else if (this.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('email');\n }\n // Number range check\n else if (this.type === 'number' && value) {\n const numValue = parseFloat(value);\n if (this.min !== undefined && numValue < this.min) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('min', { min: this.min });\n } else if (this.max !== undefined && numValue > this.max) {\n this.isValid = false;\n this.validationMessage = getValidationMessage('max', { max: this.max });\n }\n }\n\n // Update component state\n this.internalStatus = this.isValid ? 'default' : 'error';\n this.internalErrorMessage = this.validationMessage;\n }\n\n private onInput = (event: InputEvent) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.bcmInput.emit(event);\n this.validateInput();\n };\n\n private onChange = (event: Event) => {\n this.bcmChange.emit(event);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.bcmFocus.emit(event);\n };\n\n private onBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.bcmBlur.emit(event);\n this.validateInput();\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n this.bcmKeyDown.emit(event);\n };\n\n private onKeyUp = (event: KeyboardEvent) => {\n this.bcmKeyUp.emit(event);\n };\n\n private hasSlotContent(slotName: string): boolean {\n return checkSlotContent(this.el, slotName);\n }\n\n private styleClass = tv(\n {\n slots: {\n base: [\n 'bcm-input bcm-input__container',\n 'bg-[--bcm-ui-color-background-base-default]',\n 'border border-solid rounded',\n 'flex items-center justify-between',\n 'transition-colors duration-200',\n 'px-2',\n ],\n inputClass: [\n 'input',\n 'w-full flex-1',\n 'border-0 outline-0 bg-transparent',\n 'appearance-none text-ellipsis',\n 'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n 'font-sans antialiased font-medium',\n 'px-1',\n ],\n },\n variants: {\n size: {\n small: {\n base: '',\n inputClass: 'text-size-4 h-6',\n },\n medium: {\n base: '',\n inputClass: 'text-size-5 h-8',\n },\n large: {\n base: '',\n inputClass: 'text-size-6 h-10',\n },\n },\n status: {\n default: {\n base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n },\n error: {\n base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n },\n success: {\n base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n },\n warning: {\n base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n },\n info: {\n base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n },\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed',\n false: '',\n },\n focused: {\n true: {\n base: '',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n status: 'default',\n fullWidth: false,\n disabled: false,\n focused: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n private getDefaultIconForType(): string \| undefined {\n return; // TODO: Will be implemented later\n // return defaultIcons[this.type as keyof typeof defaultIcons];\n }\n\n private togglePasswordVisibility = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';\n };\n\n private PasswordToggleButton = () => {\n if (this.type !== 'password' \|\| this.disabled \|\| this.readonly \|\| this.value?.length === 0) return null;\n return (\n <button class=\"appearance-none flex items-center w-6 h-full justify-center\" onClick={this.togglePasswordVisibility} type=\"button\">\n <bcm-icon name={this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye'} size={this.iconSize}></bcm-icon>\n </button>\n );\n };\n\n private iconSize = {\n small: 14,\n medium: 16,\n large: 18,\n }[this.size];\n\n render() {\n const inputId = this._id + '-input' \|\| this.name;\n\n const { base, inputClass } = this.styleClass({\n size: this.size,\n status: this.internalStatus,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n focused: this.isFocused,\n });\n\n return (\n <div class=\"bcm-ui-element\">\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n htmlFor={inputId}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span></span>}\n </label>\n )}\n\n <div class={base()}>\n {(this.hasSlotContent('prefix') \|\| this.prefixIcon \|\| this.getDefaultIconForType()) && (\n <div class=\"flex items-center gap-2 px-2\">\n {(this.prefixIcon \|\| this.getDefaultIconForType()) && (\n <bcm-icon class=\"prefix-icon\" icon-name={this.prefixIcon \|\| this.getDefaultIconForType()} size={this.iconSize}></bcm-icon>\n )}\n <slot name=\"prefix\"></slot>\n </div>\n )}\n <input\n ref={el => (this.inputRef = el)}\n id={inputId}\n class={inputClass()}\n type={this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n autocomplete={this.autocomplete}\n minlength={this.minLength}\n maxlength={this.maxLength}\n min={this.min}\n max={this.max}\n step={this.step}\n pattern={this.pattern}\n aria-invalid={this.status === 'error'}\n aria-required={this.required}\n aria-labelledby={this.labelledby}\n aria-describedby={this.describedby}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n onKeyUp={this.onKeyUp}\n />\n {(this.hasSlotContent('suffix') \|\| this.suffixIcon) && (\n <div class=\"flex items-center gap-2 px-2\">\n <slot name=\"suffix\"></slot>\n {this.suffixIcon && <bcm-icon class=\"suffix-icon\" icon-name={this.suffixIcon} size={this.iconSize}></bcm-icon>}\n </div>\n )}\n {/* {this.type === 'password' && this.value?.length > 0 && !this.disabled && ( \n // <bcm-icon\n // class=\"password-toggle-icon cursor-pointer\"\n // icon-name={this.isPasswordVisible ? 'fa-regular fa-eye-slash' : 'fa-regular fa-eye'}\n // size={iconSize}\n // onClick={this.togglePasswordVisibility}\n // ></bcm-icon>\n // )}*/}\n {this.PasswordToggleButton()}\n </div>\n {(this.captionText \|\| this.internalErrorMessage \|\| this.validationMessage) && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' \|\| !this.isValid),\n 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n 'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n 'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\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(.928 .006 264.531);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(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);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-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.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-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}.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}.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)}
+ /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);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(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);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-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.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}.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}.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)}

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

	@@ -1 +1 @@
1	- :host{--popover-bg:var(--bcm-ui-color-background-base-default);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}.z-\[9999\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.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))}.flex-col{flex-direction:column}.gap-1\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.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)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.~~text-color{color:var(--bcm-ui-color-text-default)}.~~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)}
1	+ :host{--popover-bg:var(--bcm-ui-color-background-base-default);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}.z-\[9999\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.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))}.flex-col{flex-direction:column}.gap-1\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.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)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.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)}

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

	@@ -1 +1 @@
1	- .block{display:block}:host{display:block}.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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.~~static{position:static}.~~absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\[18px\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance: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-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--bcm-radio-bg\]{background-color:var(--bcm-radio-bg)}.bg-\[--bcm-radio-checked\]{background-color:var(--bcm-radio-checked)}.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-\[--bcm-radio-text-color\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\[inset_0_0_0_1px_var$--bcm-radio-border$\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var$--bcm-radio-border$\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\[inset_0_0_0_3px_var$--bcm-radio-border$\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);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)}.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)}.group:hover .group-hover\:shadow-\[inset_0_0_0_1px_var$--bcm-radio-border-hover$\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
1	+ .block{display:block}:host{display:block}.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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\[18px\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance: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-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--bcm-radio-bg\]{background-color:var(--bcm-radio-bg)}.bg-\[--bcm-radio-checked\]{background-color:var(--bcm-radio-checked)}.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-\[--bcm-radio-text-color\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\[inset_0_0_0_1px_var$--bcm-radio-border$\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var$--bcm-radio-border$\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\[inset_0_0_0_3px_var$--bcm-radio-border$\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);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)}.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)}.group:hover .group-hover\:shadow-\[inset_0_0_0_1px_var$--bcm-radio-border-hover$\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

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~~{color:var(--bcm~~-~~ui-color-text-default)!important}.\!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-\[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}

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~~{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;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-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.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-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)}

package/dist/collection/global/global.js CHANGED Viewed

@@ -23,6 +23,16 @@ customElements.define(
       `;
     }
+    static get observedAttributes() {
+      return ['name', 'icon-name'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if ((name === 'name' || name === 'icon-name') && oldValue !== newValue) {
+        this.icon = newValue;
+      }
+    }
     get icon() {
       return this.getAttribute('name') || this.getAttribute('icon-name');
     }

	@@ -1 +1 @@
1	- .flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.~~text-color{color:var(--bcm-ui-color-text-default)}.~~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)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}
1	+ .flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.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)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}