npm - bromcom-ui-next - Versions diffs - 0.1.19 → 0.1.20 - Mend

bromcom-ui-next 0.1.19 → 0.1.20

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

package/dist/components/{p-923e07c4.js.map → p-d56f8a26.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-923e07c4.js","mappings":"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","names":["tv"],"sources":["src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.component.tsx"],"sourcesContent":["export type ButtonKind = 'primary' \| 'ghost' \| 'text' \| 'outline';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\nexport type ButtonType = 'button' \| 'reset' \| 'submit';\nexport type ButtonStatus = 'default' \| 'success' \| 'error' \| 'warning' \| 'info';\nexport type IconPosition = 'prefix' \| 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' \| 'middle' \| 'last' \| null;\n\nexport interface VariantOption {\n text: string;\n icon?: string;\n iconPosition?: IconPosition;\n status?: ButtonStatus;\n kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n save: {\n text: 'Save',\n status: 'success',\n icon: 'far fa-save',\n iconPosition: 'prefix',\n kind: 'primary',\n },\n ok: {\n text: 'Ok',\n status: 'success',\n icon: 'far fa-check',\n iconPosition: 'prefix',\n },\n new: {\n text: 'New',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n add: {\n text: 'Add',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n create: {\n text: 'Create',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n prev: {\n text: 'Prev',\n status: 'default',\n icon: 'far fa-arrow-left',\n iconPosition: 'prefix',\n },\n next: {\n text: 'Next',\n status: 'default',\n icon: 'far fa-arrow-right',\n iconPosition: 'suffix',\n },\n apply: {\n text: 'Apply',\n status: 'default',\n icon: 'far fa-check-circle',\n iconPosition: 'prefix',\n },\n submit: {\n text: 'Submit',\n status: 'default',\n icon: 'far fa-save',\n iconPosition: 'prefix',\n },\n send: {\n text: 'Send',\n status: 'success',\n icon: 'far fa-paper-plane',\n iconPosition: 'prefix',\n },\n delete: {\n text: 'Delete',\n status: 'error',\n icon: 'far fa-trash',\n iconPosition: 'prefix',\n },\n cancel: {\n text: 'Cancel',\n status: 'error',\n icon: 'far fa-times',\n iconPosition: 'prefix',\n },\n decline: {\n text: 'Decline',\n status: 'error',\n icon: 'far fa-ban',\n iconPosition: 'prefix',\n },\n close: {\n text: 'Close',\n status: 'error',\n icon: 'far fa-times-circle',\n iconPosition: 'prefix',\n },\n archive: {\n text: 'Archive',\n status: 'error',\n icon: 'far fa-folder-open',\n iconPosition: 'prefix',\n },\n remove: {\n text: 'Remove',\n status: 'error',\n icon: 'far fa-minus-circle',\n iconPosition: 'prefix',\n },\n edit: {\n text: 'Edit',\n status: 'default',\n icon: 'far fa-edit',\n iconPosition: 'prefix',\n },\n export: {\n text: 'Export',\n status: 'default',\n icon: 'far fa-sign-out',\n iconPosition: 'prefix',\n },\n import: {\n text: 'Import',\n status: 'default',\n icon: 'far fa-sign-in',\n iconPosition: 'prefix',\n },\n filter: {\n text: 'Filter',\n status: 'default',\n icon: 'far fa-filter',\n iconPosition: 'prefix',\n },\n update: {\n text: 'Update',\n status: 'default',\n icon: 'far fa-sync',\n iconPosition: 'prefix',\n },\n reset: {\n text: 'Reset',\n status: 'default',\n icon: 'far fa-sync',\n iconPosition: 'prefix',\n },\n download: {\n text: 'Download',\n status: 'default',\n icon: 'far fa-download',\n iconPosition: 'prefix',\n },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n display: inline-block;\n position: relative;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n tag: 'bcm-button',\n styleUrl: 'button.css',\n shadow: true,\n})\nexport class BcmButton {\n /** Defines the main visual style of the button /\n @Prop()\n kind: ButtonKind = 'primary';\n\n /* Controls the button size /\n @Prop()\n size: ButtonSize = 'medium';\n\n /* Defines the button's status/state color /\n @Prop()\n status: ButtonStatus = 'default';\n\n /* Predefined button variants /\n @Prop()\n variant?: ButtonVariant;\n\n /* Button position in button group (first, middle, last) /\n @Prop({ reflect: true })\n position?: ButtonPosition;\n\n /* Icon class name /\n @Prop()\n icon?: string;\n\n /* Icon placement (prefix/suffix) /\n @Prop()\n iconPosition: IconPosition = 'prefix';\n\n /* Icon-only button mode /\n @Prop()\n iconOnly = false;\n\n /* Full width button /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* HTML button type /\n @Prop()\n type: ButtonType = 'button';\n\n /* Loading state /\n @Prop()\n loading = false;\n\n /* Disabled state /\n @Prop()\n disabled = false;\n\n /* Button text content /\n @Prop()\n text?: string;\n\n /* Active state /\n @Prop()\n active = false;\n\n /* Form association /\n @Prop()\n form: string;\n\n @Prop()\n value: string;\n\n @Prop()\n name: string;\n\n /* Screen reader label /\n @Prop()\n label: string;\n\n /* Expanded state for expandable content /\n @Prop()\n expanded?: string;\n\n /* ID of controlled element */\n @Prop()\n controls: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmClick: EventEmitter<MouseEvent>;\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 private handleClick = (event: MouseEvent) => {\n if (!this.disabled && !this.loading) {\n this.bcmClick.emit(event);\n }\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.bcmFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.bcmBlur.emit(event);\n };\n\n private get buttonText(): string {\n return this.text \|\| (this.variant ? variantOptions[this.variant].text : '');\n }\n\n private get buttonIcon(): { icon?: string; position: IconPosition } {\n if (this.variant && variantOptions[this.variant].icon) {\n return {\n icon: variantOptions[this.variant].icon,\n position: variantOptions[this.variant].iconPosition \|\| 'prefix',\n };\n }\n\n return {\n icon: this.icon,\n position: this.iconPosition,\n };\n }\n\n private get buttonStatus(): ButtonStatus {\n return this.variant ? variantOptions[this.variant].status : this.status;\n }\n\n private get buttonStyles() {\n const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n // These are the internal default styles based on component props (kind, status)\n const kindStyleMap = {\n primary: {\n '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n },\n outline: {\n '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n },\n ghost: {\n '--bcm-button-bg': 'transparent',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n },\n text: {\n '--bcm-button-bg': 'transparent',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n },\n };\n const internalDefaultStyles = kindStyleMap[this.kind];\n\n // These are the \"final\" CSS custom properties used by the component's styling.\n // They use the \"--bcm-button-custom-...\" token if provided by the user,\n // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n const finalEffectiveStyles = {\n '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n };\n\n // return kindStyleMap[this.kind];\n\n return {\n ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n };\n }\n\n private buttonClass = tv(\n {\n base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n variants: {\n size: {\n small: 'text-size-4 py-px px-2 min-h-6',\n medium: 'text-size-5 py-0.5 px-3 min-h-8',\n large: 'text-size-6 py-1 px-3 min-h-10',\n },\n kind: {\n primary: 'kind-primary',\n ghost: 'kind-ghost',\n text: 'kind-text',\n outline: 'kind-outline',\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n false: [\n 'cursor-pointer',\n 'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n 'hover:bg-[--bcm-final-hover-bg-color]',\n 'active:bg-[--bcm-final-active-bg-color]',\n 'focus-visible:ring',\n ],\n },\n loading: {\n true: '',\n },\n position: {\n first: 'position-first',\n middle: 'position-middle',\n last: 'position-last',\n },\n },\n defaultVariants: {\n size: 'medium',\n kind: 'primary',\n fullWidth: false,\n disabled: false,\n loading: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { icon, position } = this.buttonIcon;\n\n return (\n <Host>\n <button\n type={this.type}\n disabled={this.disabled \|\| this.loading}\n aria-label={this.label}\n aria-expanded={this.expanded}\n aria-controls={this.controls}\n aria-disabled={this.disabled}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={this.buttonStyles}\n class={this.buttonClass({\n size: this.size,\n kind: this.kind,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n loading: this.loading,\n position: this.position,\n })}\n >\n {this.loading && <slot name=\"loading\"></slot>}\n <span>\n <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n </span>\n <slot>{this.buttonText}</slot>\n <span>\n <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d56f8a26.js","mappings":"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","names":["tv"],"sources":["src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.component.tsx"],"sourcesContent":["export type ButtonKind = 'primary' \| 'ghost' \| 'text' \| 'outline';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\nexport type ButtonType = 'button' \| 'reset' \| 'submit';\nexport type ButtonStatus = 'default' \| 'success' \| 'error' \| 'warning' \| 'info';\nexport type IconPosition = 'prefix' \| 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' \| 'middle' \| 'last' \| null;\n\nexport interface VariantOption {\n text: string;\n icon?: string;\n iconPosition?: IconPosition;\n status?: ButtonStatus;\n kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n save: {\n text: 'Save',\n status: 'success',\n icon: 'far fa-save',\n iconPosition: 'prefix',\n kind: 'primary',\n },\n ok: {\n text: 'Ok',\n status: 'success',\n icon: 'far fa-check',\n iconPosition: 'prefix',\n },\n new: {\n text: 'New',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n add: {\n text: 'Add',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n create: {\n text: 'Create',\n status: 'success',\n icon: 'far fa-plus',\n iconPosition: 'prefix',\n },\n prev: {\n text: 'Prev',\n status: 'default',\n icon: 'far fa-arrow-left',\n iconPosition: 'prefix',\n },\n next: {\n text: 'Next',\n status: 'default',\n icon: 'far fa-arrow-right',\n iconPosition: 'suffix',\n },\n apply: {\n text: 'Apply',\n status: 'default',\n icon: 'far fa-check-circle',\n iconPosition: 'prefix',\n },\n submit: {\n text: 'Submit',\n status: 'default',\n icon: 'far fa-save',\n iconPosition: 'prefix',\n },\n send: {\n text: 'Send',\n status: 'success',\n icon: 'far fa-paper-plane',\n iconPosition: 'prefix',\n },\n delete: {\n text: 'Delete',\n status: 'error',\n icon: 'far fa-trash',\n iconPosition: 'prefix',\n },\n cancel: {\n text: 'Cancel',\n status: 'error',\n icon: 'far fa-times',\n iconPosition: 'prefix',\n },\n decline: {\n text: 'Decline',\n status: 'error',\n icon: 'far fa-ban',\n iconPosition: 'prefix',\n },\n close: {\n text: 'Close',\n status: 'error',\n icon: 'far fa-times-circle',\n iconPosition: 'prefix',\n },\n archive: {\n text: 'Archive',\n status: 'error',\n icon: 'far fa-folder-open',\n iconPosition: 'prefix',\n },\n remove: {\n text: 'Remove',\n status: 'error',\n icon: 'far fa-minus-circle',\n iconPosition: 'prefix',\n },\n edit: {\n text: 'Edit',\n status: 'default',\n icon: 'far fa-edit',\n iconPosition: 'prefix',\n },\n export: {\n text: 'Export',\n status: 'default',\n icon: 'far fa-sign-out',\n iconPosition: 'prefix',\n },\n import: {\n text: 'Import',\n status: 'default',\n icon: 'far fa-sign-in',\n iconPosition: 'prefix',\n },\n filter: {\n text: 'Filter',\n status: 'default',\n icon: 'far fa-filter',\n iconPosition: 'prefix',\n },\n update: {\n text: 'Update',\n status: 'default',\n icon: 'far fa-sync',\n iconPosition: 'prefix',\n },\n reset: {\n text: 'Reset',\n status: 'default',\n icon: 'far fa-sync',\n iconPosition: 'prefix',\n },\n download: {\n text: 'Download',\n status: 'default',\n icon: 'far fa-download',\n iconPosition: 'prefix',\n },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n display: inline-block;\n position: relative;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n tag: 'bcm-button',\n styleUrl: 'button.css',\n shadow: true,\n})\nexport class BcmButton {\n /** Defines the main visual style of the button /\n @Prop()\n kind: ButtonKind = 'primary';\n\n /* Controls the button size /\n @Prop()\n size: ButtonSize = 'medium';\n\n /* Defines the button's status/state color /\n @Prop()\n status: ButtonStatus = 'default';\n\n /* Predefined button variants /\n @Prop()\n variant?: ButtonVariant;\n\n /* Button position in button group (first, middle, last) /\n @Prop({ reflect: true })\n position?: ButtonPosition;\n\n /* Icon class name /\n @Prop()\n icon?: string;\n\n /* Icon placement (prefix/suffix) /\n @Prop()\n iconPosition: IconPosition = 'prefix';\n\n /* Icon-only button mode /\n @Prop()\n iconOnly = false;\n\n /* Full width button /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* HTML button type /\n @Prop()\n type: ButtonType = 'button';\n\n /* Loading state /\n @Prop()\n loading = false;\n\n /* Disabled state /\n @Prop()\n disabled = false;\n\n /* Button text content /\n @Prop()\n text?: string;\n\n /* Active state /\n @Prop()\n active = false;\n\n /* Form association /\n @Prop()\n form: string;\n\n @Prop()\n value: string;\n\n @Prop()\n name: string;\n\n /* Screen reader label /\n @Prop()\n label: string;\n\n /* Expanded state for expandable content /\n @Prop()\n expanded?: string;\n\n /* ID of controlled element */\n @Prop()\n controls: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmClick: EventEmitter<MouseEvent>;\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 private handleClick = (event: MouseEvent) => {\n if (!this.disabled && !this.loading) {\n this.bcmClick.emit(event);\n }\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.bcmFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.bcmBlur.emit(event);\n };\n\n private get buttonText(): string {\n return this.text \|\| (this.variant ? variantOptions[this.variant].text : '');\n }\n\n private get buttonIcon(): { icon?: string; position: IconPosition } {\n if (this.variant && variantOptions[this.variant].icon) {\n return {\n icon: variantOptions[this.variant].icon,\n position: variantOptions[this.variant].iconPosition \|\| 'prefix',\n };\n }\n\n return {\n icon: this.icon,\n position: this.iconPosition,\n };\n }\n\n private get buttonStatus(): ButtonStatus {\n return this.variant ? variantOptions[this.variant].status : this.status;\n }\n\n private get buttonStyles() {\n const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n // These are the internal default styles based on component props (kind, status)\n const kindStyleMap = {\n primary: {\n '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n },\n outline: {\n '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n },\n ghost: {\n '--bcm-button-bg': 'transparent',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n },\n text: {\n '--bcm-button-bg': 'transparent',\n '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n '--bcm-button-border': 'transparent',\n '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n },\n };\n const internalDefaultStyles = kindStyleMap[this.kind];\n\n // These are the \"final\" CSS custom properties used by the component's styling.\n // They use the \"--bcm-button-custom-...\" token if provided by the user,\n // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n const finalEffectiveStyles = {\n '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n };\n\n // return kindStyleMap[this.kind];\n\n return {\n ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n };\n }\n\n private buttonClass = tv(\n {\n base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n variants: {\n size: {\n small: 'text-size-4 py-px px-2 min-h-6',\n medium: 'text-size-5 py-0.5 px-3 min-h-8',\n large: 'text-size-6 py-1 px-3 min-h-10',\n },\n kind: {\n primary: 'kind-primary',\n ghost: 'kind-ghost',\n text: 'kind-text',\n outline: 'kind-outline',\n },\n fullWidth: {\n true: 'full-width w-full',\n },\n disabled: {\n true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n false: [\n 'cursor-pointer',\n 'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n 'hover:bg-[--bcm-final-hover-bg-color]',\n 'active:bg-[--bcm-final-active-bg-color]',\n 'focus-visible:ring',\n ],\n },\n loading: {\n true: '',\n },\n position: {\n first: 'position-first',\n middle: 'position-middle',\n last: 'position-last',\n },\n },\n defaultVariants: {\n size: 'medium',\n kind: 'primary',\n fullWidth: false,\n disabled: false,\n loading: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { icon, position } = this.buttonIcon;\n\n return (\n <Host>\n <button\n type={this.type}\n disabled={this.disabled \|\| this.loading}\n aria-label={this.label}\n aria-expanded={this.expanded}\n aria-controls={this.controls}\n aria-disabled={this.disabled}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={this.buttonStyles}\n class={this.buttonClass({\n size: this.size,\n kind: this.kind,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n loading: this.loading,\n position: this.position,\n })}\n >\n {this.loading && <slot name=\"loading\"></slot>}\n <span>\n <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n </span>\n <slot>{this.buttonText}</slot>\n <span>\n <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-alert.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-18b75a47.js';
 import { c as ce } from './index-f3b17e60.js';
-const alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.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-alert-text\\]{color:var(--bcm-alert-text)}.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)}";
+const alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.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-alert-text\\]{color:var(--bcm-alert-text)}.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)}";
 const BcmAlertStyle0 = alertCss;
 const BcmAlert = class {

package/dist/esm/bcm-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~y4CAAy4C~~,CAAC;~~AAC35C~~,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/*\n Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n /\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /* Alert status type /\n @Prop()\n status?: AlertStatus = 'default';\n\n /* Alert size variant /\n @Prop()\n size?: AlertSize = 'medium';\n\n /* Alert style variant /\n @Prop()\n kind?: AlertKind = 'filled';\n\n /* Whether alert can be dismissed /\n @Prop()\n dismissible?: boolean = true;\n\n /* Whether to show status icon /\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /\n Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,i3CAAi3C,CAAC;AACn4C,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/*\n Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n /\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /* Alert status type /\n @Prop()\n status?: AlertStatus = 'default';\n\n /* Alert size variant /\n @Prop()\n size?: AlertSize = 'medium';\n\n /* Alert style variant /\n @Prop()\n kind?: AlertKind = 'filled';\n\n /* Whether alert can be dismissed /\n @Prop()\n dismissible?: boolean = true;\n\n /* Whether to show status icon /\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /\n Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-avatar.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
 import { c as classNames } from './index-097075ad.js';
-const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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)}";
+const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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)}";
 const BcmAvatarStyle0 = avatarCss;
 const BcmAvatar = class {

package/dist/esm/bcm-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-avatar.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~q6CAAq6C~~,CAAC;~~AACx7C~~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","names":["cs"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image /\n @Prop()\n image: string;\n\n /* Alternative text for image /\n @Prop()\n alt: string;\n\n /* Shape of the avatar (ellipse/square) /\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /* Size of the avatar /\n @Prop()\n size: AvatarSize = 'medium';\n\n /* Custom background color /\n @Prop()\n color: string;\n\n /* Fallback icon class /\n @Prop()\n icon: string = 'fas fa-user';\n\n /* Status indicator type /\n @Prop()\n status: AvatarStatus;\n\n /* Status indicator animation /\n @Prop()\n blink = false;\n\n /* Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt \|\| this.name \|\| 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt \|\| this.name \|\| 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-avatar.entry.js","mappings":"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","names":["cs"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image /\n @Prop()\n image: string;\n\n /* Alternative text for image /\n @Prop()\n alt: string;\n\n /* Shape of the avatar (ellipse/square) /\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /* Size of the avatar /\n @Prop()\n size: AvatarSize = 'medium';\n\n /* Custom background color /\n @Prop()\n color: string;\n\n /* Fallback icon class /\n @Prop()\n icon: string = 'fas fa-user';\n\n /* Status indicator type /\n @Prop()\n status: AvatarStatus;\n\n /* Status indicator animation /\n @Prop()\n blink = false;\n\n /* Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt \|\| this.name \|\| 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt \|\| this.name \|\| 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-badge.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
 import { c as ce } from './index-f3b17e60.js';
-const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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)}.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}}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}";
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.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)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
 const BcmBadgeStyle0 = badgeCss;
 const Badge = class {

package/dist/esm/bcm-badge.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-badge.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~8hHAA8hH~~,CAAC;~~AAChjH~~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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-badge.entry.js","mappings":"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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-button_8.entry.js CHANGED Viewed

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