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

bromcom-ui-next 0.1.18 → 0.1.19

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

package/dist/cjs/bcm-tooltip.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-tooltip.entry.cjs.js","mappings":"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","names":["autoUpdate","computePosition","offset","flip","shift","arrow","tv","h"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-tooltip.entry.cjs.js","mappings":"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","names":["autoUpdate","computePosition","offset","flip","shift","arrow","tv","h"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- .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~~)}
1	+ .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)}

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

@@ -11,9 +11,9 @@ export class BcmDrawer {
             slots: {
                 backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
                 wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-center bg-color-default',
-                title: 'font-semibold text-size-6 m-0',
-                closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                header: 'flex justify-between items-center bg-color-default text-color-default',
+                title: 'font-semibold m-0 text-size-6',
+                closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
                 content: 'overflow-y-auto flex-grow',
             },
             variants: {
@@ -103,6 +103,8 @@ export class BcmDrawer {
                     },
                 },
             ],
+        }, {
+            twMerge: false,
         });
     }
     handleOpenChange(isOpen) {
@@ -181,7 +183,7 @@ export class BcmDrawer {
             size: this.size,
             noHeader: this.noHeader,
         });
-        return (h("div", { key: '4432db26aee1f6bd99b068ea4bdcce1598566e34', part: "base" }, h("div", { key: '4ffab0356a2e10d834bcc7d289fa7d7e75bfe0ed', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '30a072303c0f37aa302e9fb710fc108dec4118b7', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: '9c96428392739375c14c3f0d43686c1fc4c76dad', part: "header", class: header() }, h("h2", { key: 'e5e97af67578ac5d6decbaae87f258374ce46a71', part: "title", class: title() }, h("slot", { key: '023760bf63b5bb31f931fef734b5157ad5ad5eaa', name: "header" }, this.headerText)), h("button", { key: '787ae47852969e29e3164668c20acfd684d03bd0', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'c4590f8f9cf838bc274800f8cd9baa093e1debb0', name: "fa-solid fa-xmark" }))), h("div", { key: '76c9d7302a725ba798201176ab6bb9186d3a81e7', part: "content", class: content() }, h("slot", { key: '8422d3ae70d855538760c2e0a0a658e29ee74654' })), h("div", { key: 'ce8e4ee5ecf0ed61d559a259b58714a01f914d50', part: "footer" }, h("slot", { key: '61826c516851892de0ce2690baf3a64b5c51a41a', name: "footer" })))));
+        return (h("div", { key: '6311b0bed989d41cf504487545f414ce5b881749', part: "base" }, h("div", { key: '5aa597edf8d0d5523570fbb326072c2e02c813b0', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '736cc10ae7341ad5139bc37ee9265801e0da6a6c', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: 'ddaf3499e8709f0ad8a58891baacfa9c5a595973', part: "header", class: header() }, h("h2", { key: '0124009ad323dfb4fca18618d750789a0c805ebd', part: "title", class: title() }, h("slot", { key: '95813a9ea32872ab5cd00f5d641cdaef8d43504d', name: "header" }, this.headerText)), h("button", { key: '7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'd61996a289c3a0727475a3e7798866b874292885', name: "fa-solid fa-xmark" }))), h("div", { key: '6650b5e079d31b2bd372f80a648256761bc78a14', part: "content", class: content() }, h("slot", { key: '8858d3e8e12eeeb0745a3aee54507f104bd6506f' })), h("div", { key: '97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80', part: "footer" }, h("slot", { key: 'ee90d5b261eef5e435d8247717e5fa79593893f3', name: "footer" })))));
     }
     static get is() { return "bcm-drawer"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n tag: 'bcm-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class BcmDrawer {\n @Element() host: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop() size: DrawerSize = 'medium';\n @Prop() position: DrawerPosition = 'right';\n @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n @Prop() headerText?: string;\n @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n @Event() bcmOpen: EventEmitter<void>;\n @Event() bcmClose: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n private drawerClass = tv({\n slots: {\n backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n header: 'flex justify-between items-center bg-color-default',\n title: 'font-semibold text-size-6 m-0',\n closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n content: 'overflow-y-auto flex-grow',\n },\n variants: {\n open: {\n true: {\n backdrop: 'opacity-100 visible',\n },\n false: {\n backdrop: 'opacity-0 invisible',\n },\n },\n position: {\n left: {\n wrapper: 'top-0 left-0 bottom-0',\n },\n right: {\n wrapper: 'top-0 right-0 bottom-0',\n },\n top: {\n wrapper: 'top-0 left-0 right-0',\n },\n bottom: {\n wrapper: 'bottom-0 left-0 right-0',\n },\n },\n size: {\n small: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n medium: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n large: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n },\n noHeader: {\n true: {\n header: 'hidden',\n },\n },\n },\n compoundVariants: [\n {\n open: true,\n position: ['left', 'right'],\n class: {\n wrapper: 'translate-x-0',\n },\n },\n {\n open: true,\n position: ['top', 'bottom'],\n class: {\n wrapper: 'translate-y-0',\n },\n },\n {\n open: false,\n position: 'left',\n class: {\n wrapper: '-translate-x-full',\n },\n },\n {\n open: false,\n position: 'right',\n class: {\n wrapper: 'translate-x-full',\n },\n },\n {\n open: false,\n position: 'top',\n class: {\n wrapper: '-translate-y-full',\n },\n },\n {\n open: false,\n position: 'bottom',\n class: {\n wrapper: 'translate-y-full',\n },\n },\n ],\n });\n\n @Watch('open')\n handleOpenChange(isOpen: boolean) {\n if (isOpen) {\n document.body.style.overflow = 'hidden';\n this.bcmOpen.emit();\n } else {\n document.body.style.overflow = '';\n this.bcmClose.emit();\n }\n }\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.open) {\n this.hide();\n }\n }\n\n @Method()\n async show(): Promise<void> {\n const event = this.bcmBeforeOpen.emit();\n if (!event.defaultPrevented) {\n this.open = true;\n }\n }\n\n @Method()\n async hide(): Promise<void> {\n const event = this.bcmBeforeClose.emit();\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n private getWrapperStyle() {\n const style: { [key: string]: string } = {};\n\n if (this.fullWidth) {\n if (this.position === 'left' \|\| this.position === 'right') {\n style.width = '100vw';\n } else {\n style.height = '100vh';\n }\n return style;\n }\n\n if (this.position === 'left' \|\| this.position === 'right') {\n switch (this.size) {\n case 'small':\n style.width = '320px';\n break;\n case 'medium':\n style.width = '480px';\n break;\n case 'large':\n style.width = '1064px';\n break;\n }\n } else {\n switch (this.size) {\n case 'small':\n style.height = '40vh';\n break;\n case 'medium':\n style.height = '60vh';\n break;\n case 'large':\n style.height = '90vh';\n break;\n }\n }\n\n return style;\n }\n\n render() {\n const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n open: this.open,\n position: this.position,\n size: this.size,\n noHeader: this.noHeader,\n });\n\n return (\n <div part=\"base\">\n <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n <div\n part=\"wrapper\"\n class={wrapper()}\n style={this.getWrapperStyle()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-label={this.headerText}\n >\n <div part=\"header\" class={header()}>\n <h2 part=\"title\" class={title()}>\n <slot name=\"header\">{this.headerText}</slot>\n </h2>\n <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n </button>\n </div>\n <div part=\"content\" class={content()}>\n <slot />\n </div>\n <div part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n tag: 'bcm-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class BcmDrawer {\n @Element() host: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop() size: DrawerSize = 'medium';\n @Prop() position: DrawerPosition = 'right';\n @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n @Prop() headerText?: string;\n @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n @Event() bcmOpen: EventEmitter<void>;\n @Event() bcmClose: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n private drawerClass = tv(\n {\n slots: {\n backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n header: 'flex justify-between items-center bg-color-default text-color-default',\n title: 'font-semibold m-0 text-size-6',\n closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n content: 'overflow-y-auto flex-grow',\n },\n variants: {\n open: {\n true: {\n backdrop: 'opacity-100 visible',\n },\n false: {\n backdrop: 'opacity-0 invisible',\n },\n },\n position: {\n left: {\n wrapper: 'top-0 left-0 bottom-0',\n },\n right: {\n wrapper: 'top-0 right-0 bottom-0',\n },\n top: {\n wrapper: 'top-0 left-0 right-0',\n },\n bottom: {\n wrapper: 'bottom-0 left-0 right-0',\n },\n },\n size: {\n small: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n medium: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n large: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n },\n noHeader: {\n true: {\n header: 'hidden',\n },\n },\n },\n compoundVariants: [\n {\n open: true,\n position: ['left', 'right'],\n class: {\n wrapper: 'translate-x-0',\n },\n },\n {\n open: true,\n position: ['top', 'bottom'],\n class: {\n wrapper: 'translate-y-0',\n },\n },\n {\n open: false,\n position: 'left',\n class: {\n wrapper: '-translate-x-full',\n },\n },\n {\n open: false,\n position: 'right',\n class: {\n wrapper: 'translate-x-full',\n },\n },\n {\n open: false,\n position: 'top',\n class: {\n wrapper: '-translate-y-full',\n },\n },\n {\n open: false,\n position: 'bottom',\n class: {\n wrapper: 'translate-y-full',\n },\n },\n ],\n },\n {\n twMerge: false,\n },\n );\n\n @Watch('open')\n handleOpenChange(isOpen: boolean) {\n if (isOpen) {\n document.body.style.overflow = 'hidden';\n this.bcmOpen.emit();\n } else {\n document.body.style.overflow = '';\n this.bcmClose.emit();\n }\n }\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.open) {\n this.hide();\n }\n }\n\n @Method()\n async show(): Promise<void> {\n const event = this.bcmBeforeOpen.emit();\n if (!event.defaultPrevented) {\n this.open = true;\n }\n }\n\n @Method()\n async hide(): Promise<void> {\n const event = this.bcmBeforeClose.emit();\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n private getWrapperStyle() {\n const style: { [key: string]: string } = {};\n\n if (this.fullWidth) {\n if (this.position === 'left' \|\| this.position === 'right') {\n style.width = '100vw';\n } else {\n style.height = '100vh';\n }\n return style;\n }\n\n if (this.position === 'left' \|\| this.position === 'right') {\n switch (this.size) {\n case 'small':\n style.width = '320px';\n break;\n case 'medium':\n style.width = '480px';\n break;\n case 'large':\n style.width = '1064px';\n break;\n }\n } else {\n switch (this.size) {\n case 'small':\n style.height = '40vh';\n break;\n case 'medium':\n style.height = '60vh';\n break;\n case 'large':\n style.height = '90vh';\n break;\n }\n }\n\n return style;\n }\n\n render() {\n const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n open: this.open,\n position: this.position,\n size: this.size,\n noHeader: this.noHeader,\n });\n\n return (\n <div part=\"base\">\n <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n <div\n part=\"wrapper\"\n class={wrapper()}\n style={this.getWrapperStyle()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-label={this.headerText}\n >\n <div part=\"header\" class={header()}>\n <h2 part=\"title\" class={title()}>\n <slot name=\"header\">{this.headerText}</slot>\n </h2>\n <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n </button>\n </div>\n <div part=\"content\" class={content()}>\n <slot />\n </div>\n <div part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- .contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.~~appearance-none{appearance:none}.~~flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}
1	+ .contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.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-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}

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

	@@ -1 +1 @@
1	- .block{display:block}:host{display:block;padding:10px 0;width:100%}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
1	+ .block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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)}

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-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)}
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}.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/components/tooltip/tooltip.css CHANGED Viewed

	@@ -1 +1 @@
1	- :host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.z-\[-1\]{z-index:-1}.z-\[9999\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--tooltip-bg\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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}.text-color-base{color:var(--bcm-ui-color-text-base)}.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{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.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-\[-1\]{z-index:-1}.z-\[9999\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\[--tooltip-bg\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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}.text-color-base{color:var(--bcm-ui-color-text-base)}.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/components/bcm-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BcmButton$1, d as defineCustomElement$1 } from './p-d56f8a26.js';
+import { B as BcmButton$1, d as defineCustomElement$1 } from './p-923e07c4.js';
 const BcmButton = BcmButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/bcm-drawer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
+const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.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-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
 const BcmDrawerStyle0 = drawerCss;
 const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
@@ -22,9 +22,9 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
             slots: {
                 backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
                 wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-center bg-color-default',
-                title: 'font-semibold text-size-6 m-0',
-                closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                header: 'flex justify-between items-center bg-color-default text-color-default',
+                title: 'font-semibold m-0 text-size-6',
+                closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
                 content: 'overflow-y-auto flex-grow',
             },
             variants: {
@@ -114,6 +114,8 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
                     },
                 },
             ],
+        }, {
+            twMerge: false,
         });
     }
     handleOpenChange(isOpen) {
@@ -192,7 +194,7 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
             size: this.size,
             noHeader: this.noHeader,
         });
-        return (h("div", { key: '4432db26aee1f6bd99b068ea4bdcce1598566e34', part: "base" }, h("div", { key: '4ffab0356a2e10d834bcc7d289fa7d7e75bfe0ed', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '30a072303c0f37aa302e9fb710fc108dec4118b7', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: '9c96428392739375c14c3f0d43686c1fc4c76dad', part: "header", class: header() }, h("h2", { key: 'e5e97af67578ac5d6decbaae87f258374ce46a71', part: "title", class: title() }, h("slot", { key: '023760bf63b5bb31f931fef734b5157ad5ad5eaa', name: "header" }, this.headerText)), h("button", { key: '787ae47852969e29e3164668c20acfd684d03bd0', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'c4590f8f9cf838bc274800f8cd9baa093e1debb0', name: "fa-solid fa-xmark" }))), h("div", { key: '76c9d7302a725ba798201176ab6bb9186d3a81e7', part: "content", class: content() }, h("slot", { key: '8422d3ae70d855538760c2e0a0a658e29ee74654' })), h("div", { key: 'ce8e4ee5ecf0ed61d559a259b58714a01f914d50', part: "footer" }, h("slot", { key: '61826c516851892de0ce2690baf3a64b5c51a41a', name: "footer" })))));
+        return (h("div", { key: '6311b0bed989d41cf504487545f414ce5b881749', part: "base" }, h("div", { key: '5aa597edf8d0d5523570fbb326072c2e02c813b0', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '736cc10ae7341ad5139bc37ee9265801e0da6a6c', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: 'ddaf3499e8709f0ad8a58891baacfa9c5a595973', part: "header", class: header() }, h("h2", { key: '0124009ad323dfb4fca18618d750789a0c805ebd', part: "title", class: title() }, h("slot", { key: '95813a9ea32872ab5cd00f5d641cdaef8d43504d', name: "header" }, this.headerText)), h("button", { key: '7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'd61996a289c3a0727475a3e7798866b874292885', name: "fa-solid fa-xmark" }))), h("div", { key: '6650b5e079d31b2bd372f80a648256761bc78a14', part: "content", class: content() }, h("slot", { key: '8858d3e8e12eeeb0745a3aee54507f104bd6506f' })), h("div", { key: '97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80', part: "footer" }, h("slot", { key: 'ee90d5b261eef5e435d8247717e5fa79593893f3', name: "footer" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/bcm-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-drawer.js","mappings":"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","names":["BcmDrawer","tv"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n tag: 'bcm-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class BcmDrawer {\n @Element() host: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop() size: DrawerSize = 'medium';\n @Prop() position: DrawerPosition = 'right';\n @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n @Prop() headerText?: string;\n @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n @Event() bcmOpen: EventEmitter<void>;\n @Event() bcmClose: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n private drawerClass = tv({\n slots: {\n backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n header: 'flex justify-between items-center bg-color-default',\n title: 'font-semibold text-size-6 m-0',\n closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n content: 'overflow-y-auto flex-grow',\n },\n variants: {\n open: {\n true: {\n backdrop: 'opacity-100 visible',\n },\n false: {\n backdrop: 'opacity-0 invisible',\n },\n },\n position: {\n left: {\n wrapper: 'top-0 left-0 bottom-0',\n },\n right: {\n wrapper: 'top-0 right-0 bottom-0',\n },\n top: {\n wrapper: 'top-0 left-0 right-0',\n },\n bottom: {\n wrapper: 'bottom-0 left-0 right-0',\n },\n },\n size: {\n small: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n medium: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n large: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n },\n noHeader: {\n true: {\n header: 'hidden',\n },\n },\n },\n compoundVariants: [\n {\n open: true,\n position: ['left', 'right'],\n class: {\n wrapper: 'translate-x-0',\n },\n },\n {\n open: true,\n position: ['top', 'bottom'],\n class: {\n wrapper: 'translate-y-0',\n },\n },\n {\n open: false,\n position: 'left',\n class: {\n wrapper: '-translate-x-full',\n },\n },\n {\n open: false,\n position: 'right',\n class: {\n wrapper: 'translate-x-full',\n },\n },\n {\n open: false,\n position: 'top',\n class: {\n wrapper: '-translate-y-full',\n },\n },\n {\n open: false,\n position: 'bottom',\n class: {\n wrapper: 'translate-y-full',\n },\n },\n ],\n });\n\n @Watch('open')\n handleOpenChange(isOpen: boolean) {\n if (isOpen) {\n document.body.style.overflow = 'hidden';\n this.bcmOpen.emit();\n } else {\n document.body.style.overflow = '';\n this.bcmClose.emit();\n }\n }\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.open) {\n this.hide();\n }\n }\n\n @Method()\n async show(): Promise<void> {\n const event = this.bcmBeforeOpen.emit();\n if (!event.defaultPrevented) {\n this.open = true;\n }\n }\n\n @Method()\n async hide(): Promise<void> {\n const event = this.bcmBeforeClose.emit();\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n private getWrapperStyle() {\n const style: { [key: string]: string } = {};\n\n if (this.fullWidth) {\n if (this.position === 'left' \|\| this.position === 'right') {\n style.width = '100vw';\n } else {\n style.height = '100vh';\n }\n return style;\n }\n\n if (this.position === 'left' \|\| this.position === 'right') {\n switch (this.size) {\n case 'small':\n style.width = '320px';\n break;\n case 'medium':\n style.width = '480px';\n break;\n case 'large':\n style.width = '1064px';\n break;\n }\n } else {\n switch (this.size) {\n case 'small':\n style.height = '40vh';\n break;\n case 'medium':\n style.height = '60vh';\n break;\n case 'large':\n style.height = '90vh';\n break;\n }\n }\n\n return style;\n }\n\n render() {\n const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n open: this.open,\n position: this.position,\n size: this.size,\n noHeader: this.noHeader,\n });\n\n return (\n <div part=\"base\">\n <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n <div\n part=\"wrapper\"\n class={wrapper()}\n style={this.getWrapperStyle()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-label={this.headerText}\n >\n <div part=\"header\" class={header()}>\n <h2 part=\"title\" class={title()}>\n <slot name=\"header\">{this.headerText}</slot>\n </h2>\n <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n </button>\n </div>\n <div part=\"content\" class={content()}>\n <slot />\n </div>\n <div part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-drawer.js","mappings":"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","names":["BcmDrawer","tv"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n tag: 'bcm-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class BcmDrawer {\n @Element() host: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n @Prop() size: DrawerSize = 'medium';\n @Prop() position: DrawerPosition = 'right';\n @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n @Prop() headerText?: string;\n @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n @Event() bcmOpen: EventEmitter<void>;\n @Event() bcmClose: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n private drawerClass = tv(\n {\n slots: {\n backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n header: 'flex justify-between items-center bg-color-default text-color-default',\n title: 'font-semibold m-0 text-size-6',\n closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n content: 'overflow-y-auto flex-grow',\n },\n variants: {\n open: {\n true: {\n backdrop: 'opacity-100 visible',\n },\n false: {\n backdrop: 'opacity-0 invisible',\n },\n },\n position: {\n left: {\n wrapper: 'top-0 left-0 bottom-0',\n },\n right: {\n wrapper: 'top-0 right-0 bottom-0',\n },\n top: {\n wrapper: 'top-0 left-0 right-0',\n },\n bottom: {\n wrapper: 'bottom-0 left-0 right-0',\n },\n },\n size: {\n small: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n medium: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n large: {\n header: 'py-3 px-4',\n content: 'p-4',\n },\n },\n noHeader: {\n true: {\n header: 'hidden',\n },\n },\n },\n compoundVariants: [\n {\n open: true,\n position: ['left', 'right'],\n class: {\n wrapper: 'translate-x-0',\n },\n },\n {\n open: true,\n position: ['top', 'bottom'],\n class: {\n wrapper: 'translate-y-0',\n },\n },\n {\n open: false,\n position: 'left',\n class: {\n wrapper: '-translate-x-full',\n },\n },\n {\n open: false,\n position: 'right',\n class: {\n wrapper: 'translate-x-full',\n },\n },\n {\n open: false,\n position: 'top',\n class: {\n wrapper: '-translate-y-full',\n },\n },\n {\n open: false,\n position: 'bottom',\n class: {\n wrapper: 'translate-y-full',\n },\n },\n ],\n },\n {\n twMerge: false,\n },\n );\n\n @Watch('open')\n handleOpenChange(isOpen: boolean) {\n if (isOpen) {\n document.body.style.overflow = 'hidden';\n this.bcmOpen.emit();\n } else {\n document.body.style.overflow = '';\n this.bcmClose.emit();\n }\n }\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.open) {\n this.hide();\n }\n }\n\n @Method()\n async show(): Promise<void> {\n const event = this.bcmBeforeOpen.emit();\n if (!event.defaultPrevented) {\n this.open = true;\n }\n }\n\n @Method()\n async hide(): Promise<void> {\n const event = this.bcmBeforeClose.emit();\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n private getWrapperStyle() {\n const style: { [key: string]: string } = {};\n\n if (this.fullWidth) {\n if (this.position === 'left' \|\| this.position === 'right') {\n style.width = '100vw';\n } else {\n style.height = '100vh';\n }\n return style;\n }\n\n if (this.position === 'left' \|\| this.position === 'right') {\n switch (this.size) {\n case 'small':\n style.width = '320px';\n break;\n case 'medium':\n style.width = '480px';\n break;\n case 'large':\n style.width = '1064px';\n break;\n }\n } else {\n switch (this.size) {\n case 'small':\n style.height = '40vh';\n break;\n case 'medium':\n style.height = '60vh';\n break;\n case 'large':\n style.height = '90vh';\n break;\n }\n }\n\n return style;\n }\n\n render() {\n const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n open: this.open,\n position: this.position,\n size: this.size,\n noHeader: this.noHeader,\n });\n\n return (\n <div part=\"base\">\n <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n <div\n part=\"wrapper\"\n class={wrapper()}\n style={this.getWrapperStyle()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!this.open ? 'true' : 'false'}\n aria-label={this.headerText}\n >\n <div part=\"header\" class={header()}>\n <h2 part=\"title\" class={title()}>\n <slot name=\"header\">{this.headerText}</slot>\n </h2>\n <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n </button>\n </div>\n <div part=\"content\" class={content()}>\n <slot />\n </div>\n <div part=\"footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/bcm-dropdown.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-import { d as defineCustomElement$3 } from './p-d56f8a26.js';
+import { d as defineCustomElement$3 } from './p-923e07c4.js';
 import { d as defineCustomElement$2 } from './p-39872cdf.js';
 const dropdownCss = ".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";

package/dist/components/bcm-pop-confirm.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-30135590.js';
 import { c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-50133556.js';
 import { c as ce } from './p-5fcf77f9.js';
-import { d as defineCustomElement$2 } from './p-d56f8a26.js';
+import { d as defineCustomElement$2 } from './p-923e07c4.js';
 const popConfirmCss = ".absolute{position:absolute}.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))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.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}.relative{position:relative}.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)}";
 const BcmPopConfirmStyle0 = popConfirmCss;

package/dist/components/bcm-tabs-content.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-30135590.js';
-const tabsContentCss = ".block{display:block}:host{display:block;padding:10px 0;width:100%}.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 tabsContentCss = ".block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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 BcmTabsContentStyle0 = tabsContentCss;
 const BcmTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsContent extends H {

package/dist/components/bcm-tabs-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-tabs-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~kRAAkR~~,CAAC;~~AAC1S~~,6BAAe,cAAc;;MCUhBA,gBAAc;;;;;;IAOvB,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACjB,8DAAa,CACV,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsContent"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/*\n @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n /\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /\n Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"bcm-tabs-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0SAA0S,CAAC;AAClU,6BAAe,cAAc;;MCUhBA,gBAAc;;;;;;IAOvB,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACjB,8DAAa,CACV,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsContent"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/*\n @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n /\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /\n Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"version":3}

package/dist/components/bcm-tabs-trigger.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-const tabsTriggerCss = ".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)}";
+const tabsTriggerCss = ".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}.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)}";
 const BcmTabsTriggerStyle0 = tabsTriggerCss;
 const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger extends H {

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

	@@ -1 +1 @@
1	- {"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,u+~~DAAu+D~~,CAAC;~~AAC//~~D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBI,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGC,EAAE,CACd;YACI,KAAK,EAAE;gBACH,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,iGAAiG;aAChH;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACtC;gBACD,MAAM,EAAE;oBACJ,IAAI,EAAE;wBACF,GAAG,EAAE,oBAAoB;qBAC5B;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,YAAY;qBACpB;iBACJ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE;wBACF,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAClD;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBACjD;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAiBL;;;;;IAjEW,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;IA+CD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAChF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACvF,8DAAQ,CACH,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsTrigger","tv"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n position: relative;\n display: block;\n width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n /\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /\n Reference to the host element\n /\n @Element() el: HTMLElement;\n\n /\n Unique identifier value for the tab\n /\n @Prop({ reflect: true })\n value: string;\n\n /\n Whether the tab is currently active\n /\n @Prop({ reflect: true })\n active: boolean = false;\n\n /\n Size of the tab\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the tab is disabled\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Event emitted when this tab is selected\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /\n Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n /\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /\n Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-default]',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+8DAA+8D,CAAC;AACv+D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBI,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGC,EAAE,CACd;YACI,KAAK,EAAE;gBACH,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,iGAAiG;aAChH;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACtC;gBACD,MAAM,EAAE;oBACJ,IAAI,EAAE;wBACF,GAAG,EAAE,oBAAoB;qBAC5B;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,YAAY;qBACpB;iBACJ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE;wBACF,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAClD;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBACjD;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAiBL;;;;;IAjEW,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;IA+CD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAChF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACvF,8DAAQ,CACH,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsTrigger","tv"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n position: relative;\n display: block;\n width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n /\n@Component({\n tag: 'bcm-tabs-trigger',\n styleUrl: 'tabs-trigger.css',\n shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n /\n Reference to the host element\n /\n @Element() el: HTMLElement;\n\n /\n Unique identifier value for the tab\n /\n @Prop({ reflect: true })\n value: string;\n\n /\n Whether the tab is currently active\n /\n @Prop({ reflect: true })\n active: boolean = false;\n\n /\n Size of the tab\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the tab is disabled\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Event emitted when this tab is selected\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmTabSelected',\n })\n bcmTabSelected: EventEmitter<string>;\n\n /\n Handles click events on the tab\n * Emits bcmTabSelected event with tab value if not disabled\n /\n private handleClick() {\n if (this.disabled) return;\n this.bcmTabSelected.emit(this.value);\n }\n\n /\n Tailwind variants configuration for styling\n */\n private class = tv(\n {\n slots: {\n tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out',\n },\n variants: {\n size: {\n small: { tab: 'text-size-4 gap-2' },\n medium: { tab: 'text-size-5 gap-2.5' },\n large: { tab: 'text-size-6 gap-3' },\n },\n active: {\n true: {\n tab: 'text-color-primary',\n },\n false: {\n tab: 'text-color',\n },\n },\n disabled: {\n true: {\n tab: 'cursor-not-allowed text-color-disabled',\n borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n },\n false: {\n tab: 'cursor-pointer text-color hover:text-color-primary',\n borderLine: 'bg-[--bcm-ui-color-text-default]',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n active: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { tab, borderLine } = this.class({\n size: this.size,\n active: this.active,\n disabled: this.disabled,\n });\n return (\n <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n <slot />\n </button>\n <div class={borderLine()}></div>\n </Host>\n );\n }\n}"],"version":3}

package/dist/components/bcm-tooltip.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-30135590.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-50133556.js';
 import { c as ce } from './p-5fcf77f9.js';
-const tooltipCss = ":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.z-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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}.text-color-base{color:var(--bcm-ui-color-text-base)}.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)}";
+const tooltipCss = ":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.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-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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}.text-color-base{color:var(--bcm-ui-color-text-base)}.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)}";
 const BcmTooltipStyle0 = tooltipCss;
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {

package/dist/components/bcm-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-tooltip.js","mappings":"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","names":["tv"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-tooltip.js","mappings":"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","names":["tv"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}