bromcom-ui-next 0.1.6 → 0.1.7
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.
- package/dist/bromcom-ui/bromcom-ui.css +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/p-056c9348.entry.js +2 -0
- package/dist/bromcom-ui/{p-c1161950.entry.js.map → p-056c9348.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-15829c47.entry.js +2 -0
- package/dist/bromcom-ui/{p-c427ffee.entry.js.map → p-15829c47.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-4b7294a3.entry.js +2 -0
- package/dist/bromcom-ui/{p-cee68279.entry.js.map → p-4b7294a3.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-3b230145.entry.js → p-625bbd86.entry.js} +2 -2
- package/dist/bromcom-ui/{p-3b230145.entry.js.map → p-625bbd86.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-7d8ad3dd.entry.js +2 -0
- package/dist/bromcom-ui/{p-9551c35e.entry.js.map → p-7d8ad3dd.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-9ab4d2be.entry.js +2 -0
- package/dist/bromcom-ui/{p-25038cc8.entry.js.map → p-9ab4d2be.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-ae16edd3.entry.js +2 -0
- package/dist/bromcom-ui/{p-308f865b.entry.js.map → p-ae16edd3.entry.js.map} +1 -1
- package/dist/bromcom-ui/{p-98c76392.entry.js → p-e6025578.entry.js} +2 -2
- package/dist/bromcom-ui/{p-98c76392.entry.js.map → p-e6025578.entry.js.map} +1 -1
- package/dist/bromcom-ui/p-f7890098.entry.js +2 -0
- package/dist/bromcom-ui/{p-385fa0f3.entry.js.map → p-f7890098.entry.js.map} +1 -1
- package/dist/cjs/bcm-accordion.cjs.entry.js +1 -1
- package/dist/cjs/bcm-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-avatar_4.cjs.entry.js +1 -1
- package/dist/cjs/bcm-avatar_4.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/bcm-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-chip.cjs.entry.js +1 -1
- package/dist/cjs/bcm-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/bcm-dropdown-item.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js +1 -1
- package/dist/cjs/bcm-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
- package/dist/cjs/bcm-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js +1 -1
- package/dist/cjs/bcm-tabs-trigger.cjs.entry.js.map +1 -1
- package/dist/cjs/bcm-text.cjs.entry.js +1 -1
- package/dist/cjs/bcm-text.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.css +1 -1
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/checkbox/checkbox.css +1 -1
- package/dist/collection/components/chip/chip.css +1 -1
- package/dist/collection/components/dropdown-item/dropdown-item.css +1 -1
- package/dist/collection/components/popover/popover.css +1 -1
- package/dist/collection/components/switch/switch.css +1 -1
- package/dist/collection/components/tabs/tabs-trigger.css +1 -1
- package/dist/collection/components/text/text.css +1 -1
- package/dist/collection/styles/theme-variables.js +400 -18
- package/dist/collection/styles/theme-variables.js.map +1 -1
- package/dist/components/bcm-accordion.js +1 -1
- package/dist/components/bcm-accordion.js.map +1 -1
- package/dist/components/bcm-button.js +1 -1
- package/dist/components/bcm-checkbox.js +1 -1
- package/dist/components/bcm-checkbox.js.map +1 -1
- package/dist/components/bcm-chip.js +1 -1
- package/dist/components/bcm-chip.js.map +1 -1
- package/dist/components/bcm-dropdown-item.js +1 -1
- package/dist/components/bcm-dropdown-item.js.map +1 -1
- package/dist/components/bcm-dropdown.js +1 -1
- package/dist/components/bcm-pop-confirm.js +1 -1
- package/dist/components/bcm-popover.js +1 -1
- package/dist/components/bcm-popover.js.map +1 -1
- package/dist/components/bcm-switch.js +1 -1
- package/dist/components/bcm-switch.js.map +1 -1
- package/dist/components/bcm-tabs-trigger.js +1 -1
- package/dist/components/bcm-tabs-trigger.js.map +1 -1
- package/dist/components/bcm-text.js +1 -1
- package/dist/components/bcm-text.js.map +1 -1
- package/dist/components/{p-c3a60937.js → p-e6567774.js} +2 -2
- package/dist/components/{p-c3a60937.js.map → p-e6567774.js.map} +1 -1
- package/dist/esm/bcm-accordion.entry.js +1 -1
- package/dist/esm/bcm-accordion.entry.js.map +1 -1
- package/dist/esm/bcm-avatar_4.entry.js +1 -1
- package/dist/esm/bcm-avatar_4.entry.js.map +1 -1
- package/dist/esm/bcm-checkbox.entry.js +1 -1
- package/dist/esm/bcm-checkbox.entry.js.map +1 -1
- package/dist/esm/bcm-chip.entry.js +1 -1
- package/dist/esm/bcm-chip.entry.js.map +1 -1
- package/dist/esm/bcm-dropdown-item.entry.js +1 -1
- package/dist/esm/bcm-dropdown-item.entry.js.map +1 -1
- package/dist/esm/bcm-popover.entry.js +1 -1
- package/dist/esm/bcm-popover.entry.js.map +1 -1
- package/dist/esm/bcm-switch.entry.js +1 -1
- package/dist/esm/bcm-switch.entry.js.map +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js +1 -1
- package/dist/esm/bcm-tabs-trigger.entry.js.map +1 -1
- package/dist/esm/bcm-text.entry.js +1 -1
- package/dist/esm/bcm-text.entry.js.map +1 -1
- package/dist/types/styles/theme-variables.d.ts +386 -4
- package/package.json +1 -1
- package/dist/bromcom-ui/p-25038cc8.entry.js +0 -2
- package/dist/bromcom-ui/p-308f865b.entry.js +0 -2
- package/dist/bromcom-ui/p-385fa0f3.entry.js +0 -2
- package/dist/bromcom-ui/p-9551c35e.entry.js +0 -2
- package/dist/bromcom-ui/p-c1161950.entry.js +0 -2
- package/dist/bromcom-ui/p-c427ffee.entry.js +0 -2
- package/dist/bromcom-ui/p-cee68279.entry.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
@tailwind components;@tailwind utilities;*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:1px;--tw-ring-offset-color:#fff;--tw-ring-color:var(--bcm-ui-color-ring-default);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:1px;--tw-ring-offset-color:#fff;--tw-ring-color:var(--bcm-ui-color-ring-default);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.font-sans{font-family:Inter,sans-serif}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bcm-ui-color-text-base:#fff;--bcm-ui-color-text-header:var(--bcm-color-secondary-800);--bcm-ui-color-text-default:var(--bcm-color-secondary-700);--bcm-ui-color-text-label:var(--bcm-color-secondary-700);--bcm-ui-color-text-helper:var(--bcm-color-secondary-500);--bcm-ui-color-text-placeholder:var(--bcm-color-secondary-500);--bcm-ui-color-text-caption:var(--bcm-color-secondary-600);--bcm-ui-color-text-icon-default:var(--bcm-color-secondary-600);--bcm-ui-color-text-icon-dark:var(--bcm-color-secondary-700);--bcm-ui-color-text-primary:var(--bcm-color-primary-700);--bcm-ui-color-text-info:var(--bcm-color-info-700);--bcm-ui-color-text-success:var(--bcm-color-success-700);--bcm-ui-color-text-warning:var(--bcm-color-warning-700);--bcm-ui-color-text-error:var(--bcm-color-error-700);--bcm-ui-color-text-disabled:var(--bcm-color-secondary-500);--bcm-ui-color-text-visited:oklch(0.496 0.265 301.924);--bcm-ui-color-border-base:#fff;--bcm-ui-color-border-default:oklch(0.872 0.01 258.338);--bcm-ui-color-border-default-alt:oklch(0.446 0.03 256.802);--bcm-ui-color-border-focus:oklch(0.424 0.199 265.638);--bcm-ui-color-border-disabled:oklch(0.872 0.01 258.338);--bcm-ui-color-border-primary:var(--bcm-color-primary-700);--bcm-ui-color-border-info:var(--bcm-color-info-700);--bcm-ui-color-border-success:var(--bcm-color-success-700);--bcm-ui-color-border-warning:var(--bcm-color-warning-700);--bcm-ui-color-border-error:var(--bcm-color-error-700);--bcm-ui-color-background-basic-masterpage:oklch(0.985 0.002 247.839);--bcm-ui-color-background-basic-card:#fff;--bcm-ui-color-background-basic-modal:#fff;--bcm-ui-color-background-basic-panel:#fff;--bcm-ui-color-background-basic-base:#fff;--bcm-ui-color-background-disabled-default:oklch(0.872 0.01 258.338);--bcm-ui-color-background-base-default:#fff;--bcm-ui-color-background-base-hover:oklch(0.967 0.003 264.542);--bcm-ui-color-background-base-active:oklch(0.928 0.006 264.531);--bcm-ui-color-background-default-default:oklch(0.967 0.003 264.542);--bcm-ui-color-background-default-hover:oklch(0.928 0.006 264.531);--bcm-ui-color-background-default-active:oklch(0.872 0.01 258.338);--bcm-ui-color-background-default-dark-default:oklch(0.373 0.034 259.733);--bcm-ui-color-background-default-dark-hover:oklch(0.278 0.033 256.848);--bcm-ui-color-background-default-dark-active:oklch(0.21 0.034 264.665);--bcm-ui-color-background-primary-default:var(--bcm-color-primary-700);--bcm-ui-color-background-primary-hover:var(--bcm-color-primary-800);--bcm-ui-color-background-primary-active:var(--bcm-color-primary-900);--bcm-ui-color-background-info-default:var(--bcm-color-info-700);--bcm-ui-color-background-info-hover:var(--bcm-color-info-800);--bcm-ui-color-background-info-active:var(--bcm-color-info-900);--bcm-ui-color-background-success-default:var(--bcm-color-success-700);--bcm-ui-color-background-success-hover:var(--bcm-color-success-800);--bcm-ui-color-background-success-active:var(--bcm-color-success-900);--bcm-ui-color-background-warning-default:var(--bcm-color-warning-700);--bcm-ui-color-background-warning-hover:var(--bcm-color-warning-800);--bcm-ui-color-background-warning-active:var(--bcm-color-warning-900);--bcm-ui-color-background-error-default:var(--bcm-color-error-700);--bcm-ui-color-background-error-hover:var(--bcm-color-error-800);--bcm-ui-color-background-error-active:var(--bcm-color-error-900);--bcm-ui-color-ring-default:var(--bcm-color-primary-700);--bcm-ui-color-background-transparent-default:rgba(0,0,0,.4);--bcm-ui-color-text-palette-slate:oklch(0.372 0.044 257.287);--bcm-ui-color-text-palette-gray:oklch(0.373 0.034 259.733);--bcm-ui-color-text-palette-zinc:oklch(0.37 0.013 285.805);--bcm-ui-color-text-palette-neutral:oklch(0.371 0 0);--bcm-ui-color-text-palette-stone:oklch(0.374 0.01 67.558);--bcm-ui-color-text-palette-red:oklch(0.505 0.213 27.518);--bcm-ui-color-text-palette-orange:oklch(0.553 0.195 38.402);--bcm-ui-color-text-palette-amber:oklch(0.555 0.163 48.998);--bcm-ui-color-text-palette-yellow:oklch(0.554 0.135 66.442);--bcm-ui-color-text-palette-lime:oklch(0.532 0.157 131.589);--bcm-ui-color-text-palette-green:oklch(0.527 0.154 150.069);--bcm-ui-color-text-palette-emerald:oklch(0.508 0.118 165.612);--bcm-ui-color-text-palette-teal:oklch(0.511 0.096 186.391);--bcm-ui-color-text-palette-cyan:oklch(0.52 0.105 223.128);--bcm-ui-color-text-palette-sky:oklch(0.5 0.134 242.749);--bcm-ui-color-text-palette-blue:oklch(0.488 0.243 264.376);--bcm-ui-color-text-palette-indigo:oklch(0.457 0.24 277.023);--bcm-ui-color-text-palette-violet:oklch(0.491 0.27 292.581);--bcm-ui-color-text-palette-purple:oklch(0.496 0.265 301.924);--bcm-ui-color-text-palette-fuchsia:oklch(0.518 0.253 323.949);--bcm-ui-color-text-palette-pink:oklch(0.525 0.223 3.958);--bcm-ui-color-text-palette-rose:oklch(0.514 0.222 16.935);--bcm-ui-color-border-palette-slate:oklch(0.372 0.044 257.287);--bcm-ui-color-border-palette-gray:oklch(0.373 0.034 259.733);--bcm-ui-color-border-palette-zinc:oklch(0.37 0.013 285.805);--bcm-ui-color-border-palette-neutral:oklch(0.371 0 0);--bcm-ui-color-border-palette-stone:oklch(0.374 0.01 67.558);--bcm-ui-color-border-palette-red:oklch(0.505 0.213 27.518);--bcm-ui-color-border-palette-orange:oklch(0.553 0.195 38.402);--bcm-ui-color-border-palette-amber:oklch(0.555 0.163 48.998);--bcm-ui-color-border-palette-yellow:oklch(0.554 0.135 66.442);--bcm-ui-color-border-palette-lime:oklch(0.532 0.157 131.589);--bcm-ui-color-border-palette-green:oklch(0.527 0.154 150.069);--bcm-ui-color-border-palette-emerald:oklch(0.508 0.118 165.612);--bcm-ui-color-border-palette-teal:oklch(0.511 0.096 186.391);--bcm-ui-color-border-palette-cyan:oklch(0.52 0.105 223.128);--bcm-ui-color-border-palette-sky:oklch(0.5 0.134 242.749);--bcm-ui-color-border-palette-blue:oklch(0.488 0.243 264.376);--bcm-ui-color-border-palette-indigo:oklch(0.457 0.24 277.023);--bcm-ui-color-border-palette-violet:oklch(0.491 0.27 292.581);--bcm-ui-color-border-palette-purple:oklch(0.496 0.265 301.924);--bcm-ui-color-border-palette-fuchsia:oklch(0.518 0.253 323.949);--bcm-ui-color-border-palette-pink:oklch(0.525 0.223 3.958);--bcm-ui-color-border-palette-rose:oklch(0.514 0.222 16.935);--bcm-ui-color-background-vivid-slate-default:oklch(0.372 0.044 257.287);--bcm-ui-color-background-vivid-slate-hover:oklch(0.279 0.041 260.031);--bcm-ui-color-background-vivid-slate-active:oklch(0.208 0.042 265.755);--bcm-ui-color-background-vivid-gray-default:oklch(0.373 0.034 259.733);--bcm-ui-color-background-vivid-gray-hover:oklch(0.278 0.033 256.848);--bcm-ui-color-background-vivid-gray-active:oklch(0.21 0.034 264.665);--bcm-ui-color-background-vivid-zinc-default:oklch(0.37 0.013 285.805);--bcm-ui-color-background-vivid-zinc-hover:oklch(0.274 0.006 286.033);--bcm-ui-color-background-vivid-zinc-active:oklch(0.21 0.006 285.885);--bcm-ui-color-background-vivid-neutral-default:oklch(0.371 0 0);--bcm-ui-color-background-vivid-neutral-hover:oklch(0.269 0 0);--bcm-ui-color-background-vivid-neutral-active:oklch(0.205 0 0);--bcm-ui-color-background-vivid-stone-default:oklch(0.374 0.01 67.558);--bcm-ui-color-background-vivid-stone-hover:oklch(0.268 0.007 34.298);--bcm-ui-color-background-vivid-stone-active:oklch(0.216 0.006 56.043);--bcm-ui-color-background-vivid-red-default:oklch(0.505 0.213 27.518);--bcm-ui-color-background-vivid-red-hover:oklch(0.444 0.177 26.899);--bcm-ui-color-background-vivid-red-active:oklch(0.396 0.141 25.723);--bcm-ui-color-background-vivid-orange-default:oklch(0.553 0.195 38.402);--bcm-ui-color-background-vivid-orange-hover:oklch(0.47 0.157 37.304);--bcm-ui-color-background-vivid-orange-active:oklch(0.408 0.123 38.172);--bcm-ui-color-background-vivid-amber-default:oklch(0.555 0.163 48.998);--bcm-ui-color-background-vivid-amber-hover:oklch(0.473 0.137 46.201);--bcm-ui-color-background-vivid-amber-active:oklch(0.414 0.112 45.904);--bcm-ui-color-background-vivid-yellow-default:oklch(0.554 0.135 66.442);--bcm-ui-color-background-vivid-yellow-hover:oklch(0.476 0.114 61.907);--bcm-ui-color-background-vivid-yellow-active:oklch(0.421 0.095 57.708);--bcm-ui-color-background-vivid-lime-default:oklch(0.532 0.157 131.589);--bcm-ui-color-background-vivid-lime-hover:oklch(0.453 0.124 130.933);--bcm-ui-color-background-vivid-lime-active:oklch(0.405 0.101 131.063);--bcm-ui-color-background-vivid-green-default:oklch(0.527 0.154 150.069);--bcm-ui-color-background-vivid-green-hover:oklch(0.448 0.119 151.328);--bcm-ui-color-background-vivid-green-active:oklch(0.393 0.095 152.535);--bcm-ui-color-background-vivid-emerald-default:oklch(0.508 0.118 165.612);--bcm-ui-color-background-vivid-emerald-hover:oklch(0.432 0.095 166.913);--bcm-ui-color-background-vivid-emerald-active:oklch(0.378 0.077 168.94);--bcm-ui-color-background-vivid-teal-default:oklch(0.511 0.096 186.391);--bcm-ui-color-background-vivid-teal-hover:oklch(0.437 0.078 188.216);--bcm-ui-color-background-vivid-teal-active:oklch(0.386 0.063 188.416);--bcm-ui-color-background-vivid-cyan-default:oklch(0.52 0.105 223.128);--bcm-ui-color-background-vivid-cyan-hover:oklch(0.45 0.085 224.283);--bcm-ui-color-background-vivid-cyan-active:oklch(0.398 0.07 227.392);--bcm-ui-color-background-vivid-sky-default:oklch(0.5 0.134 242.749);--bcm-ui-color-background-vivid-sky-hover:oklch(0.443 0.11 240.79);--bcm-ui-color-background-vivid-sky-active:oklch(0.391 0.09 240.876);--bcm-ui-color-background-vivid-blue-default:oklch(0.488 0.243 264.376);--bcm-ui-color-background-vivid-blue-hover:oklch(0.424 0.199 265.638);--bcm-ui-color-background-vivid-blue-active:oklch(0.379 0.146 265.522);--bcm-ui-color-background-vivid-indigo-default:oklch(0.457 0.24 277.023);--bcm-ui-color-background-vivid-indigo-hover:oklch(0.398 0.195 277.366);--bcm-ui-color-background-vivid-indigo-active:oklch(0.359 0.144 278.697);--bcm-ui-color-background-vivid-violet-default:oklch(0.491 0.27 292.581);--bcm-ui-color-background-vivid-violet-hover:oklch(0.432 0.232 292.759);--bcm-ui-color-background-vivid-violet-active:oklch(0.38 0.189 293.745);--bcm-ui-color-background-vivid-purple-default:oklch(0.496 0.265 301.924);--bcm-ui-color-background-vivid-purple-hover:oklch(0.438 0.218 303.724);--bcm-ui-color-background-vivid-purple-active:oklch(0.381 0.176 304.987);--bcm-ui-color-background-vivid-fuchsia-default:oklch(0.518 0.253 323.949);--bcm-ui-color-background-vivid-fuchsia-hover:oklch(0.452 0.211 324.591);--bcm-ui-color-background-vivid-fuchsia-active:oklch(0.401 0.17 325.612);--bcm-ui-color-background-vivid-pink-default:oklch(0.525 0.223 3.958);--bcm-ui-color-background-vivid-pink-hover:oklch(0.459 0.187 3.815);--bcm-ui-color-background-vivid-pink-active:oklch(0.408 0.153 2.432);--bcm-ui-color-background-vivid-rose-default:oklch(0.514 0.222 16.935);--bcm-ui-color-background-vivid-rose-hover:oklch(0.455 0.188 13.697);--bcm-ui-color-background-vivid-rose-active:oklch(0.41 0.159 10.272);--bcm-ui-color-background-soft-slate-default:oklch(0.984 0.003 247.858);--bcm-ui-color-background-soft-gray-default:oklch(0.985 0.002 247.839);--bcm-ui-color-background-soft-zinc-default:oklch(0.985 0 0);--bcm-ui-color-background-soft-neutral-default:oklch(0.985 0 0);--bcm-ui-color-background-soft-stone-default:oklch(0.985 0.001 106.423);--bcm-ui-color-background-soft-red-default:oklch(0.971 0.013 17.38);--bcm-ui-color-background-soft-orange-default:oklch(0.98 0.016 73.684);--bcm-ui-color-background-soft-amber-default:oklch(0.987 0.022 95.277);--bcm-ui-color-background-soft-yellow-default:oklch(0.987 0.026 102.212);--bcm-ui-color-background-soft-lime-default:oklch(0.986 0.031 120.757);--bcm-ui-color-background-soft-green-default:oklch(0.982 0.018 155.826);--bcm-ui-color-background-soft-emerald-default:oklch(0.979 0.021 166.113);--bcm-ui-color-background-soft-teal-default:oklch(0.984 0.014 180.72);--bcm-ui-color-background-soft-cyan-default:oklch(0.984 0.019 200.873);--bcm-ui-color-background-soft-sky-default:oklch(0.977 0.013 236.62);--bcm-ui-color-background-soft-blue-default:oklch(0.97 0.014 254.604);--bcm-ui-color-background-soft-indigo-default:oklch(0.962 0.018 272.314);--bcm-ui-color-background-soft-violet-default:oklch(0.969 0.016 293.756);--bcm-ui-color-background-soft-purple-default:oklch(0.977 0.014 308.299);--bcm-ui-color-background-soft-fuchsia-default:oklch(0.977 0.017 320.058);--bcm-ui-color-background-soft-pink-default:oklch(0.971 0.014 343.198);--bcm-ui-color-background-soft-rose-default:oklch(0.969 0.015 12.422);--bcm-ui-color-background-palette-slate-default:oklch(0.968 0.007 247.896);--bcm-ui-color-background-palette-slate-hover:oklch(0.929 0.013 255.508);--bcm-ui-color-background-palette-slate-active:oklch(0.869 0.022 252.894);--bcm-ui-color-background-palette-gray-default:oklch(0.967 0.003 264.542);--bcm-ui-color-background-palette-gray-hover:oklch(0.928 0.006 264.531);--bcm-ui-color-background-palette-gray-active:oklch(0.872 0.01 258.338);--bcm-ui-color-background-palette-zinc-default:oklch(0.967 0.001 286.375);--bcm-ui-color-background-palette-zinc-hover:oklch(0.92 0.004 286.32);--bcm-ui-color-background-palette-zinc-active:oklch(0.871 0.006 286.286);--bcm-ui-color-background-palette-neutral-default:oklch(0.97 0 0);--bcm-ui-color-background-palette-neutral-hover:oklch(0.922 0 0);--bcm-ui-color-background-palette-neutral-active:oklch(0.87 0 0);--bcm-ui-color-background-palette-stone-default:oklch(0.97 0.001 106.424);--bcm-ui-color-background-palette-stone-hover:oklch(0.923 0.003 48.717);--bcm-ui-color-background-palette-stone-active:oklch(0.869 0.005 56.366);--bcm-ui-color-background-palette-red-default:oklch(0.936 0.032 17.717);--bcm-ui-color-background-palette-red-hover:oklch(0.885 0.062 18.334);--bcm-ui-color-background-palette-red-active:oklch(0.808 0.114 19.571);--bcm-ui-color-background-palette-orange-default:oklch(0.954 0.038 75.164);--bcm-ui-color-background-palette-orange-hover:oklch(0.901 0.076 70.697);--bcm-ui-color-background-palette-orange-active:oklch(0.837 0.128 66.29);--bcm-ui-color-background-palette-amber-default:oklch(0.962 0.059 95.617);--bcm-ui-color-background-palette-amber-hover:oklch(0.924 0.12 95.746);--bcm-ui-color-background-palette-amber-active:oklch(0.879 0.169 91.605);--bcm-ui-color-background-palette-yellow-default:oklch(0.973 0.071 103.193);--bcm-ui-color-background-palette-yellow-hover:oklch(0.945 0.129 101.54);--bcm-ui-color-background-palette-yellow-active:oklch(0.905 0.182 98.111);--bcm-ui-color-background-palette-lime-default:oklch(0.967 0.067 122.328);--bcm-ui-color-background-palette-lime-hover:oklch(0.938 0.127 124.321);--bcm-ui-color-background-palette-lime-active:oklch(0.897 0.196 126.665);--bcm-ui-color-background-palette-green-default:oklch(0.962 0.044 156.743);--bcm-ui-color-background-palette-green-hover:oklch(0.925 0.084 155.995);--bcm-ui-color-background-palette-green-active:oklch(0.871 0.15 154.449);--bcm-ui-color-background-palette-emerald-default:oklch(0.95 0.052 163.051);--bcm-ui-color-background-palette-emerald-hover:oklch(0.905 0.093 164.15);--bcm-ui-color-background-palette-emerald-active:oklch(0.845 0.143 164.978);--bcm-ui-color-background-palette-teal-default:oklch(0.953 0.051 180.801);--bcm-ui-color-background-palette-teal-hover:oklch(0.91 0.096 180.426);--bcm-ui-color-background-palette-teal-active:oklch(0.855 0.138 181.071);--bcm-ui-color-background-palette-cyan-default:oklch(0.956 0.045 203.388);--bcm-ui-color-background-palette-cyan-hover:oklch(0.917 0.08 205.041);--bcm-ui-color-background-palette-cyan-active:oklch(0.865 0.127 207.078);--bcm-ui-color-background-palette-sky-default:oklch(0.951 0.026 236.824);--bcm-ui-color-background-palette-sky-hover:oklch(0.901 0.058 230.902);--bcm-ui-color-background-palette-sky-active:oklch(0.828 0.111 230.318);--bcm-ui-color-background-palette-blue-default:oklch(0.932 0.032 255.585);--bcm-ui-color-background-palette-blue-hover:oklch(0.882 0.059 254.128);--bcm-ui-color-background-palette-blue-active:oklch(0.809 0.105 251.813);--bcm-ui-color-background-palette-indigo-default:oklch(0.93 0.034 272.788);--bcm-ui-color-background-palette-indigo-hover:oklch(0.87 0.065 274.039);--bcm-ui-color-background-palette-indigo-active:oklch(0.785 0.115 274.713);--bcm-ui-color-background-palette-violet-default:oklch(0.943 0.029 294.588);--bcm-ui-color-background-palette-violet-hover:oklch(0.894 0.057 293.283);--bcm-ui-color-background-palette-violet-active:oklch(0.811 0.111 293.571);--bcm-ui-color-background-palette-purple-default:oklch(0.946 0.033 307.174);--bcm-ui-color-background-palette-purple-hover:oklch(0.902 0.063 306.703);--bcm-ui-color-background-palette-purple-active:oklch(0.827 0.119 306.383);--bcm-ui-color-background-palette-fuchsia-default:oklch(0.952 0.037 318.852);--bcm-ui-color-background-palette-fuchsia-hover:oklch(0.903 0.076 319.62);--bcm-ui-color-background-palette-fuchsia-active:oklch(0.833 0.145 321.434);--bcm-ui-color-background-palette-pink-default:oklch(0.948 0.028 342.258);--bcm-ui-color-background-palette-pink-hover:oklch(0.899 0.061 343.231);--bcm-ui-color-background-palette-pink-active:oklch(0.823 0.12 346.018);--bcm-ui-color-background-palette-rose-default:oklch(0.941 0.03 12.58);--bcm-ui-color-background-palette-rose-hover:oklch(0.892 0.058 10.001);--bcm-ui-color-background-palette-rose-active:oklch(0.81 0.117 11.638);--bcm-ui-box-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--bcm-ui-box-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--bcm-ui-box-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--bcm-ui-box-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--bcm-ui-box-shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--bcm-ui-box-shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,.05);--bcm-ui-box-shadow-none:none;--bcm-ui-box-shadow-default:0 4px 12px 0 rgba(17,24,39,.1),0 1px 2px -1px rgba(0,0,0,.1);--bcm-ui-box-shadow-2:0px 1px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);--bcm-ui-box-shadow-3:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1);--bcm-ui-box-shadow-4:0px 10px 15px -3px rgba(0,0,0,.1),0px 4px 6px -4px rgba(0,0,0,.1);--bcm-ui-font-size-1:0.5rem;--bcm-ui-font-size-2:0.625rem;--bcm-ui-font-size-3:0.75rem;--bcm-ui-font-size-4:0.875rem;--bcm-ui-font-size-5:1rem;--bcm-ui-font-size-6:1.125rem;--bcm-ui-font-size-7:1.25rem;--bcm-ui-font-size-8:1.5rem;--bcm-ui-font-size-9:2rem;--bcm-ui-font-size-10:2.25rem;--bcm-ui-font-size-11:3rem;--bcm-ui-font-size-12:3.75rem;--bcm-ui-font-size-13:4.5rem;--bcm-ui-font-size-14:6rem;--bcm-ui-font-size-inherit:inherit;--bcm-ui-line-height-1:0.625rem;--bcm-ui-line-height-2:0.75rem;--bcm-ui-line-height-3:1rem;--bcm-ui-line-height-4:1.25rem;--bcm-ui-line-height-5:1.5rem;--bcm-ui-line-height-6:1.5rem;--bcm-ui-line-height-7:1.75rem;--bcm-ui-line-height-8:2rem;--bcm-ui-line-height-9:2.25rem;--bcm-ui-line-height-10:2.75rem;--bcm-ui-line-height-11:4rem;--bcm-ui-line-height-12:4.5rem;--bcm-ui-line-height-13:5.625rem;--bcm-ui-line-height-14:6rem;--bcm-ui-line-height-inherit:inherit;--bcm-ui-border-radius-none:0;--bcm-ui-border-radius-xs:2px;--bcm-ui-border-radius-sm:4px;--bcm-ui-border-radius-md:6px;--bcm-ui-border-radius-lg:8px;--bcm-ui-border-radius-xl:12px;--bcm-ui-border-radius-2xl:16px;--bcm-ui-border-radius-3xl:24px;--bcm-ui-border-radius-4xl:32px;--bcm-ui-border-radius-full:9999px;--bcm-ui-border-radius-default:var(--bcm-ui-border-radius-md);--bcm-color-primary-50:oklch(0.97 0.014 254.604);--bcm-color-primary-100:oklch(0.932 0.032 255.585);--bcm-color-primary-200:oklch(0.882 0.059 254.128);--bcm-color-primary-300:oklch(0.809 0.105 251.813);--bcm-color-primary-400:oklch(0.707 0.165 254.624);--bcm-color-primary-500:oklch(0.623 0.214 259.815);--bcm-color-primary-600:oklch(0.546 0.245 262.881);--bcm-color-primary-700:oklch(0.488 0.243 264.376);--bcm-color-primary-800:oklch(0.424 0.199 265.638);--bcm-color-primary-900:oklch(0.379 0.146 265.522);--bcm-color-primary-950:oklch(0.282 0.091 267.935);--bcm-color-secondary-50:oklch(0.985 0.002 247.839);--bcm-color-secondary-100:oklch(0.967 0.003 264.542);--bcm-color-secondary-200:oklch(0.928 0.006 264.531);--bcm-color-secondary-300:oklch(0.872 0.01 258.338);--bcm-color-secondary-400:oklch(0.707 0.022 261.325);--bcm-color-secondary-500:oklch(0.551 0.027 264.364);--bcm-color-secondary-600:oklch(0.446 0.03 256.802);--bcm-color-secondary-700:oklch(0.373 0.034 259.733);--bcm-color-secondary-800:oklch(0.278 0.033 256.848);--bcm-color-secondary-900:oklch(0.21 0.034 264.665);--bcm-color-secondary-950:oklch(0.13 0.028 261.692);--bcm-color-info-50:oklch(0.97 0.014 254.604);--bcm-color-info-100:oklch(0.932 0.032 255.585);--bcm-color-info-200:oklch(0.882 0.059 254.128);--bcm-color-info-300:oklch(0.809 0.105 251.813);--bcm-color-info-400:oklch(0.707 0.165 254.624);--bcm-color-info-500:oklch(0.623 0.214 259.815);--bcm-color-info-600:oklch(0.546 0.245 262.881);--bcm-color-info-700:oklch(0.488 0.243 264.376);--bcm-color-info-800:oklch(0.424 0.199 265.638);--bcm-color-info-900:oklch(0.379 0.146 265.522);--bcm-color-info-950:oklch(0.282 0.091 267.935);--bcm-color-success-50:oklch(0.979 0.021 166.113);--bcm-color-success-100:oklch(0.95 0.052 163.051);--bcm-color-success-200:oklch(0.905 0.093 164.15);--bcm-color-success-300:oklch(0.845 0.143 164.978);--bcm-color-success-400:oklch(0.765 0.177 163.223);--bcm-color-success-500:oklch(0.696 0.17 162.48);--bcm-color-success-600:oklch(0.596 0.145 163.225);--bcm-color-success-700:oklch(0.508 0.118 165.612);--bcm-color-success-800:oklch(0.432 0.095 166.913);--bcm-color-success-900:oklch(0.378 0.077 168.94);--bcm-color-success-950:oklch(0.262 0.051 172.552);--bcm-color-warning-50:oklch(0.987 0.022 95.277);--bcm-color-warning-100:oklch(0.962 0.059 95.617);--bcm-color-warning-200:oklch(0.924 0.12 95.746);--bcm-color-warning-300:oklch(0.879 0.169 91.605);--bcm-color-warning-400:oklch(0.828 0.189 84.429);--bcm-color-warning-500:oklch(0.769 0.188 70.08);--bcm-color-warning-600:oklch(0.666 0.179 58.318);--bcm-color-warning-700:oklch(0.555 0.163 48.998);--bcm-color-warning-800:oklch(0.473 0.137 46.201);--bcm-color-warning-900:oklch(0.414 0.112 45.904);--bcm-color-warning-950:oklch(0.279 0.077 45.635);--bcm-color-error-50:oklch(0.971 0.013 17.38);--bcm-color-error-100:oklch(0.936 0.032 17.717);--bcm-color-error-200:oklch(0.885 0.062 18.334);--bcm-color-error-300:oklch(0.808 0.114 19.571);--bcm-color-error-400:oklch(0.704 0.191 22.216);--bcm-color-error-500:oklch(0.637 0.237 25.331);--bcm-color-error-600:oklch(0.577 0.245 27.325);--bcm-color-error-700:oklch(0.505 0.213 27.518);--bcm-color-error-800:oklch(0.444 0.177 26.899);--bcm-color-error-900:oklch(0.396 0.141 25.723);--bcm-color-error-950:oklch(0.258 0.092 26.042)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
|
|
1
|
+
@tailwind components;@tailwind utilities;*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:1px;--tw-ring-offset-color:#fff;--tw-ring-color:var(--bcm-ui-color-ring-default);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:1px;--tw-ring-offset-color:#fff;--tw-ring-color:var(--bcm-ui-color-ring-default);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.font-sans{font-family:Inter,sans-serif}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bcm-ui-color-text-base:#fff;--bcm-ui-color-text-header:var(--bcm-color-secondary-800);--bcm-ui-color-text-default:var(--bcm-color-secondary-700);--bcm-ui-color-text-label:var(--bcm-color-secondary-700);--bcm-ui-color-text-helper:var(--bcm-color-secondary-500);--bcm-ui-color-text-placeholder:var(--bcm-color-secondary-500);--bcm-ui-color-text-caption:var(--bcm-color-secondary-600);--bcm-ui-color-text-icon-default:var(--bcm-color-secondary-600);--bcm-ui-color-text-icon-dark:var(--bcm-color-secondary-700);--bcm-ui-color-text-primary:var(--bcm-color-primary-700);--bcm-ui-color-text-info:var(--bcm-color-info-700);--bcm-ui-color-text-success:var(--bcm-color-success-700);--bcm-ui-color-text-warning:var(--bcm-color-warning-700);--bcm-ui-color-text-error:var(--bcm-color-error-700);--bcm-ui-color-text-disabled:var(--bcm-color-secondary-500);--bcm-ui-color-text-visited:oklch(0.496 0.265 301.924);--bcm-ui-color-border-base:#fff;--bcm-ui-color-border-default:var(--bcm-color-secondary-300);--bcm-ui-color-border-default-alt:var(--bcm-color-secondary-600);--bcm-ui-color-border-focus:var(--bcm-color-primary-800);--bcm-ui-color-border-disabled:var(--bcm-color-secondary-300);--bcm-ui-color-border-primary:var(--bcm-color-primary-700);--bcm-ui-color-border-info:var(--bcm-color-info-700);--bcm-ui-color-border-success:var(--bcm-color-success-700);--bcm-ui-color-border-warning:var(--bcm-color-warning-700);--bcm-ui-color-border-error:var(--bcm-color-error-700);--bcm-ui-color-background-basic-masterpage:oklch(0.985 0.002 247.839);--bcm-ui-color-background-basic-card:#fff;--bcm-ui-color-background-basic-modal:#fff;--bcm-ui-color-background-basic-panel:#fff;--bcm-ui-color-background-basic-base:#fff;--bcm-ui-color-background-disabled-default:var(--bcm-color-secondary-300);--bcm-ui-color-background-base-default:#fff;--bcm-ui-color-background-base-hover:var(--bcm-color-secondary-100);--bcm-ui-color-background-base-active:var(--bcm-color-secondary-200);--bcm-ui-color-background-default-default:var(--bcm-color-secondary-100);--bcm-ui-color-background-default-hover:var(--bcm-color-secondary-200);--bcm-ui-color-background-default-active:var(--bcm-color-secondary-300);--bcm-ui-color-background-default-dark-default:var(--bcm-color-secondary-700);--bcm-ui-color-background-default-dark-hover:var(--bcm-color-secondary-800);--bcm-ui-color-background-default-dark-active:var(--bcm-color-secondary-900);--bcm-ui-color-background-primary-default:var(--bcm-color-primary-700);--bcm-ui-color-background-primary-hover:var(--bcm-color-primary-800);--bcm-ui-color-background-primary-active:var(--bcm-color-primary-900);--bcm-ui-color-background-info-default:var(--bcm-color-info-700);--bcm-ui-color-background-info-hover:var(--bcm-color-info-800);--bcm-ui-color-background-info-active:var(--bcm-color-info-900);--bcm-ui-color-background-success-default:var(--bcm-color-success-700);--bcm-ui-color-background-success-hover:var(--bcm-color-success-800);--bcm-ui-color-background-success-active:var(--bcm-color-success-900);--bcm-ui-color-background-warning-default:var(--bcm-color-warning-700);--bcm-ui-color-background-warning-hover:var(--bcm-color-warning-800);--bcm-ui-color-background-warning-active:var(--bcm-color-warning-900);--bcm-ui-color-background-error-default:var(--bcm-color-error-700);--bcm-ui-color-background-error-hover:var(--bcm-color-error-800);--bcm-ui-color-background-error-active:var(--bcm-color-error-900);--bcm-ui-color-ring-default:var(--bcm-color-primary-700);--bcm-ui-color-background-transparent-default:rgba(0,0,0,.4);--bcm-ui-color-text-palette-slate:oklch(0.372 0.044 257.287);--bcm-ui-color-text-palette-gray:oklch(0.373 0.034 259.733);--bcm-ui-color-text-palette-zinc:oklch(0.37 0.013 285.805);--bcm-ui-color-text-palette-neutral:oklch(0.371 0 0);--bcm-ui-color-text-palette-stone:oklch(0.374 0.01 67.558);--bcm-ui-color-text-palette-red:oklch(0.505 0.213 27.518);--bcm-ui-color-text-palette-orange:oklch(0.553 0.195 38.402);--bcm-ui-color-text-palette-amber:oklch(0.555 0.163 48.998);--bcm-ui-color-text-palette-yellow:oklch(0.554 0.135 66.442);--bcm-ui-color-text-palette-lime:oklch(0.532 0.157 131.589);--bcm-ui-color-text-palette-green:oklch(0.527 0.154 150.069);--bcm-ui-color-text-palette-emerald:oklch(0.508 0.118 165.612);--bcm-ui-color-text-palette-teal:oklch(0.511 0.096 186.391);--bcm-ui-color-text-palette-cyan:oklch(0.52 0.105 223.128);--bcm-ui-color-text-palette-sky:oklch(0.5 0.134 242.749);--bcm-ui-color-text-palette-blue:oklch(0.488 0.243 264.376);--bcm-ui-color-text-palette-indigo:oklch(0.457 0.24 277.023);--bcm-ui-color-text-palette-violet:oklch(0.491 0.27 292.581);--bcm-ui-color-text-palette-purple:oklch(0.496 0.265 301.924);--bcm-ui-color-text-palette-fuchsia:oklch(0.518 0.253 323.949);--bcm-ui-color-text-palette-pink:oklch(0.525 0.223 3.958);--bcm-ui-color-text-palette-rose:oklch(0.514 0.222 16.935);--bcm-ui-color-border-palette-slate:oklch(0.372 0.044 257.287);--bcm-ui-color-border-palette-gray:oklch(0.373 0.034 259.733);--bcm-ui-color-border-palette-zinc:oklch(0.37 0.013 285.805);--bcm-ui-color-border-palette-neutral:oklch(0.371 0 0);--bcm-ui-color-border-palette-stone:oklch(0.374 0.01 67.558);--bcm-ui-color-border-palette-red:oklch(0.505 0.213 27.518);--bcm-ui-color-border-palette-orange:oklch(0.553 0.195 38.402);--bcm-ui-color-border-palette-amber:oklch(0.555 0.163 48.998);--bcm-ui-color-border-palette-yellow:oklch(0.554 0.135 66.442);--bcm-ui-color-border-palette-lime:oklch(0.532 0.157 131.589);--bcm-ui-color-border-palette-green:oklch(0.527 0.154 150.069);--bcm-ui-color-border-palette-emerald:oklch(0.508 0.118 165.612);--bcm-ui-color-border-palette-teal:oklch(0.511 0.096 186.391);--bcm-ui-color-border-palette-cyan:oklch(0.52 0.105 223.128);--bcm-ui-color-border-palette-sky:oklch(0.5 0.134 242.749);--bcm-ui-color-border-palette-blue:oklch(0.488 0.243 264.376);--bcm-ui-color-border-palette-indigo:oklch(0.457 0.24 277.023);--bcm-ui-color-border-palette-violet:oklch(0.491 0.27 292.581);--bcm-ui-color-border-palette-purple:oklch(0.496 0.265 301.924);--bcm-ui-color-border-palette-fuchsia:oklch(0.518 0.253 323.949);--bcm-ui-color-border-palette-pink:oklch(0.525 0.223 3.958);--bcm-ui-color-border-palette-rose:oklch(0.514 0.222 16.935);--bcm-ui-color-background-vivid-slate-default:oklch(0.372 0.044 257.287);--bcm-ui-color-background-vivid-slate-hover:oklch(0.279 0.041 260.031);--bcm-ui-color-background-vivid-slate-active:oklch(0.208 0.042 265.755);--bcm-ui-color-background-vivid-gray-default:oklch(0.373 0.034 259.733);--bcm-ui-color-background-vivid-gray-hover:oklch(0.278 0.033 256.848);--bcm-ui-color-background-vivid-gray-active:oklch(0.21 0.034 264.665);--bcm-ui-color-background-vivid-zinc-default:oklch(0.37 0.013 285.805);--bcm-ui-color-background-vivid-zinc-hover:oklch(0.274 0.006 286.033);--bcm-ui-color-background-vivid-zinc-active:oklch(0.21 0.006 285.885);--bcm-ui-color-background-vivid-neutral-default:oklch(0.371 0 0);--bcm-ui-color-background-vivid-neutral-hover:oklch(0.269 0 0);--bcm-ui-color-background-vivid-neutral-active:oklch(0.205 0 0);--bcm-ui-color-background-vivid-stone-default:oklch(0.374 0.01 67.558);--bcm-ui-color-background-vivid-stone-hover:oklch(0.268 0.007 34.298);--bcm-ui-color-background-vivid-stone-active:oklch(0.216 0.006 56.043);--bcm-ui-color-background-vivid-red-default:oklch(0.505 0.213 27.518);--bcm-ui-color-background-vivid-red-hover:oklch(0.444 0.177 26.899);--bcm-ui-color-background-vivid-red-active:oklch(0.396 0.141 25.723);--bcm-ui-color-background-vivid-orange-default:oklch(0.553 0.195 38.402);--bcm-ui-color-background-vivid-orange-hover:oklch(0.47 0.157 37.304);--bcm-ui-color-background-vivid-orange-active:oklch(0.408 0.123 38.172);--bcm-ui-color-background-vivid-amber-default:oklch(0.555 0.163 48.998);--bcm-ui-color-background-vivid-amber-hover:oklch(0.473 0.137 46.201);--bcm-ui-color-background-vivid-amber-active:oklch(0.414 0.112 45.904);--bcm-ui-color-background-vivid-yellow-default:oklch(0.554 0.135 66.442);--bcm-ui-color-background-vivid-yellow-hover:oklch(0.476 0.114 61.907);--bcm-ui-color-background-vivid-yellow-active:oklch(0.421 0.095 57.708);--bcm-ui-color-background-vivid-lime-default:oklch(0.532 0.157 131.589);--bcm-ui-color-background-vivid-lime-hover:oklch(0.453 0.124 130.933);--bcm-ui-color-background-vivid-lime-active:oklch(0.405 0.101 131.063);--bcm-ui-color-background-vivid-green-default:oklch(0.527 0.154 150.069);--bcm-ui-color-background-vivid-green-hover:oklch(0.448 0.119 151.328);--bcm-ui-color-background-vivid-green-active:oklch(0.393 0.095 152.535);--bcm-ui-color-background-vivid-emerald-default:oklch(0.508 0.118 165.612);--bcm-ui-color-background-vivid-emerald-hover:oklch(0.432 0.095 166.913);--bcm-ui-color-background-vivid-emerald-active:oklch(0.378 0.077 168.94);--bcm-ui-color-background-vivid-teal-default:oklch(0.511 0.096 186.391);--bcm-ui-color-background-vivid-teal-hover:oklch(0.437 0.078 188.216);--bcm-ui-color-background-vivid-teal-active:oklch(0.386 0.063 188.416);--bcm-ui-color-background-vivid-cyan-default:oklch(0.52 0.105 223.128);--bcm-ui-color-background-vivid-cyan-hover:oklch(0.45 0.085 224.283);--bcm-ui-color-background-vivid-cyan-active:oklch(0.398 0.07 227.392);--bcm-ui-color-background-vivid-sky-default:oklch(0.5 0.134 242.749);--bcm-ui-color-background-vivid-sky-hover:oklch(0.443 0.11 240.79);--bcm-ui-color-background-vivid-sky-active:oklch(0.391 0.09 240.876);--bcm-ui-color-background-vivid-blue-default:oklch(0.488 0.243 264.376);--bcm-ui-color-background-vivid-blue-hover:oklch(0.424 0.199 265.638);--bcm-ui-color-background-vivid-blue-active:oklch(0.379 0.146 265.522);--bcm-ui-color-background-vivid-indigo-default:oklch(0.457 0.24 277.023);--bcm-ui-color-background-vivid-indigo-hover:oklch(0.398 0.195 277.366);--bcm-ui-color-background-vivid-indigo-active:oklch(0.359 0.144 278.697);--bcm-ui-color-background-vivid-violet-default:oklch(0.491 0.27 292.581);--bcm-ui-color-background-vivid-violet-hover:oklch(0.432 0.232 292.759);--bcm-ui-color-background-vivid-violet-active:oklch(0.38 0.189 293.745);--bcm-ui-color-background-vivid-purple-default:oklch(0.496 0.265 301.924);--bcm-ui-color-background-vivid-purple-hover:oklch(0.438 0.218 303.724);--bcm-ui-color-background-vivid-purple-active:oklch(0.381 0.176 304.987);--bcm-ui-color-background-vivid-fuchsia-default:oklch(0.518 0.253 323.949);--bcm-ui-color-background-vivid-fuchsia-hover:oklch(0.452 0.211 324.591);--bcm-ui-color-background-vivid-fuchsia-active:oklch(0.401 0.17 325.612);--bcm-ui-color-background-vivid-pink-default:oklch(0.525 0.223 3.958);--bcm-ui-color-background-vivid-pink-hover:oklch(0.459 0.187 3.815);--bcm-ui-color-background-vivid-pink-active:oklch(0.408 0.153 2.432);--bcm-ui-color-background-vivid-rose-default:oklch(0.514 0.222 16.935);--bcm-ui-color-background-vivid-rose-hover:oklch(0.455 0.188 13.697);--bcm-ui-color-background-vivid-rose-active:oklch(0.41 0.159 10.272);--bcm-ui-color-background-soft-slate-default:oklch(0.984 0.003 247.858);--bcm-ui-color-background-soft-gray-default:oklch(0.985 0.002 247.839);--bcm-ui-color-background-soft-zinc-default:oklch(0.985 0 0);--bcm-ui-color-background-soft-neutral-default:oklch(0.985 0 0);--bcm-ui-color-background-soft-stone-default:oklch(0.985 0.001 106.423);--bcm-ui-color-background-soft-red-default:oklch(0.971 0.013 17.38);--bcm-ui-color-background-soft-orange-default:oklch(0.98 0.016 73.684);--bcm-ui-color-background-soft-amber-default:oklch(0.987 0.022 95.277);--bcm-ui-color-background-soft-yellow-default:oklch(0.987 0.026 102.212);--bcm-ui-color-background-soft-lime-default:oklch(0.986 0.031 120.757);--bcm-ui-color-background-soft-green-default:oklch(0.982 0.018 155.826);--bcm-ui-color-background-soft-emerald-default:oklch(0.979 0.021 166.113);--bcm-ui-color-background-soft-teal-default:oklch(0.984 0.014 180.72);--bcm-ui-color-background-soft-cyan-default:oklch(0.984 0.019 200.873);--bcm-ui-color-background-soft-sky-default:oklch(0.977 0.013 236.62);--bcm-ui-color-background-soft-blue-default:oklch(0.97 0.014 254.604);--bcm-ui-color-background-soft-indigo-default:oklch(0.962 0.018 272.314);--bcm-ui-color-background-soft-violet-default:oklch(0.969 0.016 293.756);--bcm-ui-color-background-soft-purple-default:oklch(0.977 0.014 308.299);--bcm-ui-color-background-soft-fuchsia-default:oklch(0.977 0.017 320.058);--bcm-ui-color-background-soft-pink-default:oklch(0.971 0.014 343.198);--bcm-ui-color-background-soft-rose-default:oklch(0.969 0.015 12.422);--bcm-ui-color-background-palette-slate-default:oklch(0.968 0.007 247.896);--bcm-ui-color-background-palette-slate-hover:oklch(0.929 0.013 255.508);--bcm-ui-color-background-palette-slate-active:oklch(0.869 0.022 252.894);--bcm-ui-color-background-palette-gray-default:oklch(0.967 0.003 264.542);--bcm-ui-color-background-palette-gray-hover:oklch(0.928 0.006 264.531);--bcm-ui-color-background-palette-gray-active:oklch(0.872 0.01 258.338);--bcm-ui-color-background-palette-zinc-default:oklch(0.967 0.001 286.375);--bcm-ui-color-background-palette-zinc-hover:oklch(0.92 0.004 286.32);--bcm-ui-color-background-palette-zinc-active:oklch(0.871 0.006 286.286);--bcm-ui-color-background-palette-neutral-default:oklch(0.97 0 0);--bcm-ui-color-background-palette-neutral-hover:oklch(0.922 0 0);--bcm-ui-color-background-palette-neutral-active:oklch(0.87 0 0);--bcm-ui-color-background-palette-stone-default:oklch(0.97 0.001 106.424);--bcm-ui-color-background-palette-stone-hover:oklch(0.923 0.003 48.717);--bcm-ui-color-background-palette-stone-active:oklch(0.869 0.005 56.366);--bcm-ui-color-background-palette-red-default:oklch(0.936 0.032 17.717);--bcm-ui-color-background-palette-red-hover:oklch(0.885 0.062 18.334);--bcm-ui-color-background-palette-red-active:oklch(0.808 0.114 19.571);--bcm-ui-color-background-palette-orange-default:oklch(0.954 0.038 75.164);--bcm-ui-color-background-palette-orange-hover:oklch(0.901 0.076 70.697);--bcm-ui-color-background-palette-orange-active:oklch(0.837 0.128 66.29);--bcm-ui-color-background-palette-amber-default:oklch(0.962 0.059 95.617);--bcm-ui-color-background-palette-amber-hover:oklch(0.924 0.12 95.746);--bcm-ui-color-background-palette-amber-active:oklch(0.879 0.169 91.605);--bcm-ui-color-background-palette-yellow-default:oklch(0.973 0.071 103.193);--bcm-ui-color-background-palette-yellow-hover:oklch(0.945 0.129 101.54);--bcm-ui-color-background-palette-yellow-active:oklch(0.905 0.182 98.111);--bcm-ui-color-background-palette-lime-default:oklch(0.967 0.067 122.328);--bcm-ui-color-background-palette-lime-hover:oklch(0.938 0.127 124.321);--bcm-ui-color-background-palette-lime-active:oklch(0.897 0.196 126.665);--bcm-ui-color-background-palette-green-default:oklch(0.962 0.044 156.743);--bcm-ui-color-background-palette-green-hover:oklch(0.925 0.084 155.995);--bcm-ui-color-background-palette-green-active:oklch(0.871 0.15 154.449);--bcm-ui-color-background-palette-emerald-default:oklch(0.95 0.052 163.051);--bcm-ui-color-background-palette-emerald-hover:oklch(0.905 0.093 164.15);--bcm-ui-color-background-palette-emerald-active:oklch(0.845 0.143 164.978);--bcm-ui-color-background-palette-teal-default:oklch(0.953 0.051 180.801);--bcm-ui-color-background-palette-teal-hover:oklch(0.91 0.096 180.426);--bcm-ui-color-background-palette-teal-active:oklch(0.855 0.138 181.071);--bcm-ui-color-background-palette-cyan-default:oklch(0.956 0.045 203.388);--bcm-ui-color-background-palette-cyan-hover:oklch(0.917 0.08 205.041);--bcm-ui-color-background-palette-cyan-active:oklch(0.865 0.127 207.078);--bcm-ui-color-background-palette-sky-default:oklch(0.951 0.026 236.824);--bcm-ui-color-background-palette-sky-hover:oklch(0.901 0.058 230.902);--bcm-ui-color-background-palette-sky-active:oklch(0.828 0.111 230.318);--bcm-ui-color-background-palette-blue-default:oklch(0.932 0.032 255.585);--bcm-ui-color-background-palette-blue-hover:oklch(0.882 0.059 254.128);--bcm-ui-color-background-palette-blue-active:oklch(0.809 0.105 251.813);--bcm-ui-color-background-palette-indigo-default:oklch(0.93 0.034 272.788);--bcm-ui-color-background-palette-indigo-hover:oklch(0.87 0.065 274.039);--bcm-ui-color-background-palette-indigo-active:oklch(0.785 0.115 274.713);--bcm-ui-color-background-palette-violet-default:oklch(0.943 0.029 294.588);--bcm-ui-color-background-palette-violet-hover:oklch(0.894 0.057 293.283);--bcm-ui-color-background-palette-violet-active:oklch(0.811 0.111 293.571);--bcm-ui-color-background-palette-purple-default:oklch(0.946 0.033 307.174);--bcm-ui-color-background-palette-purple-hover:oklch(0.902 0.063 306.703);--bcm-ui-color-background-palette-purple-active:oklch(0.827 0.119 306.383);--bcm-ui-color-background-palette-fuchsia-default:oklch(0.952 0.037 318.852);--bcm-ui-color-background-palette-fuchsia-hover:oklch(0.903 0.076 319.62);--bcm-ui-color-background-palette-fuchsia-active:oklch(0.833 0.145 321.434);--bcm-ui-color-background-palette-pink-default:oklch(0.948 0.028 342.258);--bcm-ui-color-background-palette-pink-hover:oklch(0.899 0.061 343.231);--bcm-ui-color-background-palette-pink-active:oklch(0.823 0.12 346.018);--bcm-ui-color-background-palette-rose-default:oklch(0.941 0.03 12.58);--bcm-ui-color-background-palette-rose-hover:oklch(0.892 0.058 10.001);--bcm-ui-color-background-palette-rose-active:oklch(0.81 0.117 11.638);--bcm-ui-box-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--bcm-ui-box-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--bcm-ui-box-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--bcm-ui-box-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--bcm-ui-box-shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--bcm-ui-box-shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,.05);--bcm-ui-box-shadow-none:none;--bcm-ui-box-shadow-default:0 4px 12px 0 rgba(17,24,39,.1),0 1px 2px -1px rgba(0,0,0,.1);--bcm-ui-box-shadow-2:0px 1px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);--bcm-ui-box-shadow-3:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1);--bcm-ui-box-shadow-4:0px 10px 15px -3px rgba(0,0,0,.1),0px 4px 6px -4px rgba(0,0,0,.1);--bcm-ui-font-size-1:0.5rem;--bcm-ui-font-size-2:0.625rem;--bcm-ui-font-size-3:0.75rem;--bcm-ui-font-size-4:0.875rem;--bcm-ui-font-size-5:1rem;--bcm-ui-font-size-6:1.125rem;--bcm-ui-font-size-7:1.25rem;--bcm-ui-font-size-8:1.5rem;--bcm-ui-font-size-9:2rem;--bcm-ui-font-size-10:2.25rem;--bcm-ui-font-size-11:3rem;--bcm-ui-font-size-12:3.75rem;--bcm-ui-font-size-13:4.5rem;--bcm-ui-font-size-14:6rem;--bcm-ui-font-size-inherit:inherit;--bcm-ui-line-height-1:0.625rem;--bcm-ui-line-height-2:0.75rem;--bcm-ui-line-height-3:1rem;--bcm-ui-line-height-4:1.25rem;--bcm-ui-line-height-5:1.5rem;--bcm-ui-line-height-6:1.5rem;--bcm-ui-line-height-7:1.75rem;--bcm-ui-line-height-8:2rem;--bcm-ui-line-height-9:2.25rem;--bcm-ui-line-height-10:2.75rem;--bcm-ui-line-height-11:4rem;--bcm-ui-line-height-12:4.5rem;--bcm-ui-line-height-13:5.625rem;--bcm-ui-line-height-14:6rem;--bcm-ui-line-height-inherit:inherit;--bcm-ui-border-radius-none:0;--bcm-ui-border-radius-xs:2px;--bcm-ui-border-radius-sm:4px;--bcm-ui-border-radius-md:6px;--bcm-ui-border-radius-lg:8px;--bcm-ui-border-radius-xl:12px;--bcm-ui-border-radius-2xl:16px;--bcm-ui-border-radius-3xl:24px;--bcm-ui-border-radius-4xl:32px;--bcm-ui-border-radius-full:9999px;--bcm-ui-border-radius-default:var(--bcm-ui-border-radius-md);--bcm-color-primary-50:oklch(0.97 0.014 254.604);--bcm-color-primary-100:oklch(0.932 0.032 255.585);--bcm-color-primary-200:oklch(0.882 0.059 254.128);--bcm-color-primary-300:oklch(0.809 0.105 251.813);--bcm-color-primary-400:oklch(0.707 0.165 254.624);--bcm-color-primary-500:oklch(0.623 0.214 259.815);--bcm-color-primary-600:oklch(0.546 0.245 262.881);--bcm-color-primary-700:oklch(0.488 0.243 264.376);--bcm-color-primary-800:oklch(0.424 0.199 265.638);--bcm-color-primary-900:oklch(0.379 0.146 265.522);--bcm-color-primary-950:oklch(0.282 0.091 267.935);--bcm-color-secondary-50:oklch(0.985 0.002 247.839);--bcm-color-secondary-100:oklch(0.967 0.003 264.542);--bcm-color-secondary-200:oklch(0.928 0.006 264.531);--bcm-color-secondary-300:oklch(0.872 0.01 258.338);--bcm-color-secondary-400:oklch(0.707 0.022 261.325);--bcm-color-secondary-500:oklch(0.551 0.027 264.364);--bcm-color-secondary-600:oklch(0.446 0.03 256.802);--bcm-color-secondary-700:oklch(0.373 0.034 259.733);--bcm-color-secondary-800:oklch(0.278 0.033 256.848);--bcm-color-secondary-900:oklch(0.21 0.034 264.665);--bcm-color-secondary-950:oklch(0.13 0.028 261.692);--bcm-color-info-50:oklch(0.97 0.014 254.604);--bcm-color-info-100:oklch(0.932 0.032 255.585);--bcm-color-info-200:oklch(0.882 0.059 254.128);--bcm-color-info-300:oklch(0.809 0.105 251.813);--bcm-color-info-400:oklch(0.707 0.165 254.624);--bcm-color-info-500:oklch(0.623 0.214 259.815);--bcm-color-info-600:oklch(0.546 0.245 262.881);--bcm-color-info-700:oklch(0.488 0.243 264.376);--bcm-color-info-800:oklch(0.424 0.199 265.638);--bcm-color-info-900:oklch(0.379 0.146 265.522);--bcm-color-info-950:oklch(0.282 0.091 267.935);--bcm-color-success-50:oklch(0.979 0.021 166.113);--bcm-color-success-100:oklch(0.95 0.052 163.051);--bcm-color-success-200:oklch(0.905 0.093 164.15);--bcm-color-success-300:oklch(0.845 0.143 164.978);--bcm-color-success-400:oklch(0.765 0.177 163.223);--bcm-color-success-500:oklch(0.696 0.17 162.48);--bcm-color-success-600:oklch(0.596 0.145 163.225);--bcm-color-success-700:oklch(0.508 0.118 165.612);--bcm-color-success-800:oklch(0.432 0.095 166.913);--bcm-color-success-900:oklch(0.378 0.077 168.94);--bcm-color-success-950:oklch(0.262 0.051 172.552);--bcm-color-warning-50:oklch(0.987 0.022 95.277);--bcm-color-warning-100:oklch(0.962 0.059 95.617);--bcm-color-warning-200:oklch(0.924 0.12 95.746);--bcm-color-warning-300:oklch(0.879 0.169 91.605);--bcm-color-warning-400:oklch(0.828 0.189 84.429);--bcm-color-warning-500:oklch(0.769 0.188 70.08);--bcm-color-warning-600:oklch(0.666 0.179 58.318);--bcm-color-warning-700:oklch(0.555 0.163 48.998);--bcm-color-warning-800:oklch(0.473 0.137 46.201);--bcm-color-warning-900:oklch(0.414 0.112 45.904);--bcm-color-warning-950:oklch(0.279 0.077 45.635);--bcm-color-error-50:oklch(0.971 0.013 17.38);--bcm-color-error-100:oklch(0.936 0.032 17.717);--bcm-color-error-200:oklch(0.885 0.062 18.334);--bcm-color-error-300:oklch(0.808 0.114 19.571);--bcm-color-error-400:oklch(0.704 0.191 22.216);--bcm-color-error-500:oklch(0.637 0.237 25.331);--bcm-color-error-600:oklch(0.577 0.245 27.325);--bcm-color-error-700:oklch(0.505 0.213 27.518);--bcm-color-error-800:oklch(0.444 0.177 26.899);--bcm-color-error-900:oklch(0.396 0.141 25.723);--bcm-color-error-950:oklch(0.258 0.092 26.042)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-c9b736d9.js";export{s as setNonce}from"./p-c9b736d9.js";import{g as t}from"./p-729a870f.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await t();return a([["p-c444235a",[[1,"bcm-dropdown",{text:[1],isReady:[32],dropdownItems:[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["p-e89ab4a7",[[1,"bcm-pop-confirm",{arrowColor:[1,"arrow-color"],cancelText:[1,"cancel-text"],confirmText:[1,"confirm-text"],description:[1],headerText:[1,"header-text"],placement:[1],size:[1],status:[1],statusIcon:[4,"status-icon"],targetId:[1,"target-id"],isOpen:[32],currentPlacement:[32],show:[64],hide:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-c9b736d9.js";export{s as setNonce}from"./p-c9b736d9.js";import{g as t}from"./p-729a870f.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await t();return a([["p-c444235a",[[1,"bcm-dropdown",{text:[1],isReady:[32],dropdownItems:[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["p-e89ab4a7",[[1,"bcm-pop-confirm",{arrowColor:[1,"arrow-color"],cancelText:[1,"cancel-text"],confirmText:[1,"confirm-text"],description:[1],headerText:[1,"header-text"],placement:[1],size:[1],status:[1],statusIcon:[4,"status-icon"],targetId:[1,"target-id"],isOpen:[32],currentPlacement:[32],show:[64],hide:[64]}]]],["p-056c9348",[[1,"bcm-accordion",{expanded:[1540],headerTitle:[1,"header-title"],group:[516],hintText:[1,"hint-text"],hasFooterContent:[32],toggle:[64],expand:[64],collapse:[64]}]]],["p-f2d8aa70",[[1,"bcm-accordion-group",{multi:[4],accordionItems:[32],expandAll:[64],collapseAll:[64],getExpandedItems:[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["p-58ee24a8",[[1,"bcm-alert",{status:[1],size:[1],kind:[1],dismissible:[4],showStatusIcon:[4,"show-status-icon"]}]]],["p-13784cd7",[[1,"bcm-button-group",{kind:[1],size:[1],status:[1],fullWidth:[516,"full-width"],loading:[4],disabled:[4],orientation:[513]}]]],["p-ae16edd3",[[1,"bcm-checkbox",{_id:[513,"id"],label:[1],name:[1],indeterminate:[1028],size:[1],checked:[1028],error:[4],disabled:[4],labelPosition:[1,"label-position"],internalChecked:[32]},null,{checked:["syncCheckedProp"],indeterminate:["updateIndeterminateState"],internalChecked:["updateIndeterminateState"]}]]],["p-4b7294a3",[[1,"bcm-chip",{size:[1],kind:[1],status:[1],dismissible:[4],disabled:[4],color:[1]}]]],["p-d57587e5",[[1,"bcm-divider",{direction:[1],variant:[1],size:[1]}]]],["p-f7890098",[[1,"bcm-dropdown-item",{text:[1],icon:[1],rightIcons:[16],selected:[516],error:[516],disabled:[516]}]]],["p-a29e61a4",[[1,"bcm-input",{value:[1537],placeholder:[1],name:[1],_id:[513,"id"],size:[1],status:[1],fullWidth:[516,"full-width"],type:[1],disabled:[4],readonly:[4],required:[4],autocomplete:[1],minLength:[2,"min-length"],maxLength:[2,"max-length"],min:[2],max:[2],step:[2],pattern:[1],label:[1],errorMessage:[1,"error-message"],captionText:[1,"caption-text"],labelledby:[1],describedby:[1],prefixIcon:[1,"prefix-icon"],suffixIcon:[1,"suffix-icon"],useNativeValidation:[4,"use-native-validation"],validator:[16],isFocused:[32],validationMessage:[32],isValid:[32],internalStatus:[32],internalErrorMessage:[32],setFocus:[64],setBlur:[64],select:[64],setLocale:[64]},null,{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}]]],["p-9ab4d2be",[[1,"bcm-popover",{size:[1],placement:[1],trigger:[1],hoverDelay:[2,"hover-delay"],open:[1028],headerText:[1,"header-text"],message:[1],openPopup:[64],closePopup:[64]}]]],["p-c2b3945e",[[1,"bcm-radio",{label:[1],name:[1],value:[1],checked:[516],size:[1],disabled:[4],readonly:[4],labelPosition:[1,"label-position"],error:[4]}]]],["p-c995a48c",[[1,"bcm-radio-group",{name:[1],value:[1],disabled:[4],required:[4],error:[4],label:[1],size:[1],direction:[1],captionText:[1,"caption-text"],setClear:[64],resetCaption:[64]},[[2,"bcmRadioChange","handleRadioChange"]],{value:["handleValueChange"]}]]],["p-55c4263c",[[1,"bcm-segmented-picker",{size:[1],value:[1537],disabled:[4],fullWidth:[516,"full-width"],options:[32],indicatorStyles:[32]},[[0,"bcmOptionClick","handleOptionClick"]],{value:["valueChanged"]}]]],["p-49b0e982",[[1,"bcm-segmented-picker-option",{value:[1],label:[1],size:[1],selected:[1028],disabled:[4],getWidth:[64]}]]],["p-625bbd86",[[1,"bcm-switch",{checked:[1540],disabled:[4],name:[1],value:[1],label:[1],labelPosition:[1,"label-position"],error:[4],caption:[1],size:[1],readonly:[4],required:[4]}]]],["p-cd271b49",[[1,"bcm-tabs",{defaultValue:[513,"default-value"],size:[513],activeTab:[32],previousTab:[32],disableTab:[64],enableTab:[64],disableAllTabs:[64],enableAllTabs:[64],getActiveTab:[64],setActiveTab:[64]},[[9,"resize","handleResize"],[2,"bcmTabSelected","handleTabSelected"]],{size:["handleSizeChange"]}]]],["p-bf69fc8a",[[1,"bcm-tabs-content",{value:[513]}]]],["p-bd0f7e78",[[1,"bcm-tabs-list"]]],["p-7d8ad3dd",[[1,"bcm-tabs-trigger",{value:[513],active:[516],size:[513],disabled:[516]}]]],["p-15829c47",[[1,"bcm-text",{text:[1],variant:[1],size:[1]}]]],["p-0d0d6483",[[1,"bcm-textarea",{value:[1537],rows:[2],cols:[2],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],resize:[1],autoGrow:[4,"auto-grow"],placeholder:[1],name:[1],_id:[513,"id"],size:[1],status:[1],fullWidth:[516,"full-width"],disabled:[4],readonly:[4],required:[4],minLength:[2,"min-length"],maxLength:[2,"max-length"],showCounter:[4,"show-counter"],label:[1],errorMessage:[1,"error-message"],captionText:[1,"caption-text"],labelledby:[1],describedby:[1],validator:[16],isFocused:[32],validationMessage:[32],isValid:[32],internalStatus:[32],internalErrorMessage:[32],setFocus:[64],setBlur:[64],select:[64]},null,{value:["handleValueChange"],status:["watchStatus"],errorMessage:["watchErrorMessage"]}]]],["p-389f1976",[[1,"bcm-tooltip",{trigger:[1],placement:[1],size:[1],message:[1],showDelay:[2,"show-delay"],open:[32],openTooltip:[64],closeTooltip:[64]}]]],["p-f4e8a47d",[[1,"bcm-linked",{targetId:[513,"target-id"],targetElement:[16],isVisible:[32]}]]],["p-e6025578",[[1,"bcm-avatar",{image:[1],alt:[1],shape:[1],size:[1],color:[1],icon:[1],status:[1],blink:[4],name:[1],isFallback:[32]}],[1,"bcm-basic-badge",{size:[1],variant:[1],color:[1],soft:[4],text:[1]}],[1,"bcm-badge",{size:[1],variant:[1],color:[1],soft:[4],blink:[4],status:[1],position:[1],offset:[1],text:[1]}],[1,"bcm-button",{kind:[1],size:[1],status:[1],variant:[1],position:[513],icon:[1],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"],fullWidth:[516,"full-width"],type:[1],loading:[4],disabled:[4],text:[1],active:[4],form:[1],value:[1],name:[1],label:[1],expanded:[1],controls:[1]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=bromcom-ui.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as t,h as a,g as e}from"./p-c9b736d9.js";import{c as r}from"./p-5fcf77f9.js";const i=".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;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)}";const c=i;const n=class{constructor(a){o(this,a);this.bcmAccordionChange=t(this,"bcmAccordionChange",1);this.expanded=false;this.group=false;this.hasFooterContent=false;this.handleFooterSlotChange=o=>{const t=o.target;const a=t.assignedNodes();this.hasFooterContent=a.length>0};this.accordionClass=r({slots:{container:"accordion-container flex flex-col bcm-ui-element w-full",header:"accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer",content:"accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base",footer:"accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max",icon:"accordion-icon cursor-pointer transform transition-transform duration-300",rightSection:"accordion-right-section flex flex-row gap-2.5 items-center"},variants:{hasFooterContent:{false:{footer:"hidden"},true:{footer:"flex"}},expanded:{true:{icon:"rotate-180"},false:{icon:"rotate-0",content:""}}}},{twMerge:false})}async toggle(){this.expanded=!this.expanded;this.updateAccordion()}async expand(){if(!this.expanded){this.expanded=true;this.updateAccordion()}}async collapse(){if(this.expanded){this.expanded=false;this.updateAccordion()}}updateAccordion(){if(this.contentEl){this.contentEl.style.maxHeight=this.expanded?`${this.contentEl.scrollHeight}px`:"0px"}this.bcmAccordionChange.emit({expanded:this.expanded,source:this.host})}render(){const{container:o,header:t,content:e,footer:r,icon:i,rightSection:c}=this.accordionClass({hasFooterContent:this.hasFooterContent||!!this.hintText,expanded:this.expanded});return a("div",{key:"5db020dbcdd3eea89865e0da775aecc79d6e8e52",class:o()},a("header",{key:"e9a792911fea8dc6bd1f832a3f4ed9210bd5f1bf",class:t(),role:"button",tabindex:"0","aria-expanded":this.expanded.toString(),"aria-controls":"accordion-content",onKeyDown:o=>{if(o.key==="Enter"||o.key===" "){o.preventDefault();this.toggle()}},onClick:()=>this.toggle()},a("slot",{key:"2662c77cd56d3708e60bf09e085710587d9e2b37",name:"title"},this.headerTitle),a("div",{key:"af9c679afb9688bbf0634b3057888fdf49a2bdc3",class:c()},a("span",{key:"c06ea66737e34ffa1f79e2fa36618eb90c5dd801",onClick:o=>o.stopPropagation()},a("slot",{key:"8668f76dbf3967518332a188a5fef5e9bc160a0e",name:"actions"})),a("bcm-icon",{key:"870460d228f6ae0ff9de5b36dab05e0587124cc4",name:"fa-regular fa-chevron-down",class:i()}))),a("div",{key:"814408b9602a7045addd1040271328d372ce23ba",class:e(),style:{maxHeight:this.expanded?"auto":"0px"},ref:o=>this.contentEl=o},a("div",{key:"be99ad1f7b4864c7cfe9b87044197c21770b84f2",class:"px-4 py-2"},a("slot",{key:"49e0af56da6775b74f3915dd696270bcc077e171"})),a("footer",{key:"6339e900da8224563d94a787cffe253703874568",class:r()},a("slot",{key:"19027ba2389ff5677b1610b4430ab671bda2f95e",name:"footer",onSlotchange:this.handleFooterSlotChange},this.hintText))))}get host(){return e(this)}};n.style=c;export{n as bcm_accordion};
|
|
2
|
+
//# sourceMappingURL=p-056c9348.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["accordionCss","BcmAccordionStyle0","BcmAccordion","constructor","hostRef","this","expanded","group","hasFooterContent","handleFooterSlotChange","e","slot","target","assignedNodes","length","accordionClass","tv","slots","container","header","content","footer","icon","rightSection","variants","false","true","twMerge","toggle","updateAccordion","expand","collapse","contentEl","style","maxHeight","scrollHeight","bcmAccordionChange","emit","source","host","render","hintText","h","key","class","role","tabindex","toString","onKeyDown","preventDefault","onClick","name","headerTitle","stopPropagation","ref","el","onSlotchange"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n --bcm-accordion-text: var(--bcm-ui-color-text-header);\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n border: 1px solid var(--bcm-accordion-border);\n border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n border-bottom: 1px solid var(--bcm-accordion-border);\n border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n border-top-left-radius: var(--bcm-accordion-radius);\n border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n}\n::slotted([slot='actions']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n * <div slot=\"title\">Accordion Title</div>\n * <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n * <div slot=\"title\">Title</div>\n * <div slot=\"actions\">\n * <button>Action</button>\n * </div>\n * <div>Main content</div>\n * <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n * const { expanded, source } = event.detail;\n * console.log('Accordion expanded:', expanded);\n * console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n tag: 'bcm-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /**\n * Controls whether the accordion is expanded or collapsed.\n * @prop\n * @defaultValue false\n */\n @Prop({ reflect: true, mutable: true })\n expanded: boolean = false;\n\n /**\n * Optional title text to display in the header.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n headerTitle?: string;\n\n /**\n * Indicates if the accordion is part of a group.\n * Used for group behavior coordination.\n * @prop\n * @defaultValue false\n */\n\n @Prop({ reflect: true })\n group: boolean = false;\n\n /**\n * Optional text to display in the footer when no footer slot content is provided.\n * @prop\n */\n @Prop({ attribute: 'hint-text' })\n hintText?: string;\n\n /**\n * Tracks whether footer content is present.\n * @state\n */\n @State()\n hasFooterContent: boolean = false;\n\n /**\n * Emitted when the accordion's expanded state changes.\n * @event\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmAccordionChange',\n })\n bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n private contentEl?: HTMLElement;\n\n /**\n * Toggles the accordion's expanded state.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async toggle(): Promise<void> {\n this.expanded = !this.expanded;\n this.updateAccordion();\n }\n\n /**\n * Expands the accordion if it's not already expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async expand(): Promise<void> {\n if (!this.expanded) {\n this.expanded = true;\n this.updateAccordion();\n }\n }\n\n /**\n * Collapses the accordion if it's currently expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async collapse(): Promise<void> {\n if (this.expanded) {\n this.expanded = false;\n this.updateAccordion();\n }\n }\n\n /**\n * Updates the accordion's content height and emits change event.\n * @private\n */\n private updateAccordion(): void {\n if (this.contentEl) {\n this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n }\n this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n }\n\n /**\n * Handles changes to the footer slot content.\n * @private\n * @param e - Slot change event\n */\n private handleFooterSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n const assignedNodes = slot.assignedNodes();\n this.hasFooterContent = assignedNodes.length > 0;\n };\n\n private accordionClass = tv(\n {\n slots: {\n container: 'accordion-container flex flex-col bcm-ui-element w-full',\n header:\n 'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n },\n variants: {\n hasFooterContent: {\n false: { footer: 'hidden' },\n true: { footer: 'flex' },\n },\n expanded: {\n true: { icon: 'rotate-180' },\n false: {\n icon: 'rotate-0',\n content: '',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n hasFooterContent: this.hasFooterContent || !!this.hintText,\n expanded: this.expanded,\n });\n\n return (\n <div class={container()}>\n {/* Header */}\n <header\n class={header()}\n role=\"button\"\n tabindex=\"0\"\n aria-expanded={this.expanded.toString()}\n aria-controls=\"accordion-content\"\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggle();\n }\n }}\n onClick={() => this.toggle()}\n >\n <slot name=\"title\">{this.headerTitle}</slot>\n {/* Actions */}\n <div class={rightSection()}>\n <span onClick={e => e.stopPropagation()}>\n <slot name=\"actions\"></slot>\n </span>\n <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n </div>\n </header>\n {/* Content */}\n <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n <div class=\"px-4 py-2\">\n <slot></slot>\n </div>\n <footer class={footer()}>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n {this.hintText}\n </slot>\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,gzHACrB,MAAAC,EAAeD,E,MCyEFE,EAAY,MALzB,WAAAC,CAAAC,G,iEAeEC,KAAAC,SAAoB,MAkBpBD,KAAAE,MAAiB,MAcjBF,KAAAG,iBAA4B,MAqEpBH,KAAAI,uBAA0BC,IAChC,MAAMC,EAAOD,EAAEE,OACf,MAAMC,EAAgBF,EAAKE,gBAC3BR,KAAKG,iBAAmBK,EAAcC,OAAS,CAAC,EAG1CT,KAAAU,eAAiBC,EACvB,CACEC,MAAO,CACLC,UAAW,0DACXC,OACE,yNACFC,QAAS,gGACTC,OAAQ,0JACRC,KAAM,4EACNC,aAAc,8DAEhBC,SAAU,CACRhB,iBAAkB,CAChBiB,MAAO,CAAEJ,OAAQ,UACjBK,KAAM,CAAEL,OAAQ,SAElBf,SAAU,CACRoB,KAAM,CAAEJ,KAAM,cACdG,MAAO,CACLH,KAAM,WACNF,QAAS,OAKjB,CACEO,QAAS,O,CA/Eb,YAAMC,GACJvB,KAAKC,UAAYD,KAAKC,SACtBD,KAAKwB,iB,CASP,YAAMC,GACJ,IAAKzB,KAAKC,SAAU,CAClBD,KAAKC,SAAW,KAChBD,KAAKwB,iB,EAUT,cAAME,GACJ,GAAI1B,KAAKC,SAAU,CACjBD,KAAKC,SAAW,MAChBD,KAAKwB,iB,EAQD,eAAAA,GACN,GAAIxB,KAAK2B,UAAW,CAClB3B,KAAK2B,UAAUC,MAAMC,UAAY7B,KAAKC,SAAW,GAAGD,KAAK2B,UAAUG,iBAAmB,K,CAExF9B,KAAK+B,mBAAmBC,KAAK,CAAE/B,SAAUD,KAAKC,SAAUgC,OAAQjC,KAAKkC,M,CA4CvE,MAAAC,GACE,MAAMtB,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,KAAEA,EAAIC,aAAEA,GAAiBlB,KAAKU,eAAe,CACrFP,iBAAkBH,KAAKG,oBAAsBH,KAAKoC,SAClDnC,SAAUD,KAAKC,WAGjB,OACEoC,EAAA,OAAAC,IAAA,2CAAKC,MAAO1B,KAEVwB,EAAA,UAAAC,IAAA,2CACEC,MAAOzB,IACP0B,KAAK,SACLC,SAAS,IAAG,gBACGzC,KAAKC,SAASyC,WAAU,gBACzB,oBACdC,UAAWtC,IACT,GAAIA,EAAEiC,MAAQ,SAAWjC,EAAEiC,MAAQ,IAAK,CACtCjC,EAAEuC,iBACF5C,KAAKuB,Q,GAGTsB,QAAS,IAAM7C,KAAKuB,UAEpBc,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAAS9C,KAAK+C,aAEzBV,EAAA,OAAAC,IAAA,2CAAKC,MAAOrB,KACVmB,EAAA,QAAAC,IAAA,2CAAMO,QAASxC,GAAKA,EAAE2C,mBACpBX,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,aAEbT,EAAA,YAAAC,IAAA,2CAAUQ,KAAK,6BAA6BP,MAAOtB,QAIvDoB,EAAA,OAAAC,IAAA,2CAAKC,MAAOxB,IAAWa,MAAO,CAAEC,UAAW7B,KAAKC,SAAW,OAAS,OAASgD,IAAKC,GAAOlD,KAAK2B,UAAYuB,GACxGb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,8CAEFD,EAAA,UAAAC,IAAA,2CAAQC,MAAOvB,KACbqB,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAASK,aAAcnD,KAAKI,wBACpCJ,KAAKoC,Y","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["accordionCss","BcmAccordionStyle0","BcmAccordion","constructor","hostRef","this","expanded","group","hasFooterContent","handleFooterSlotChange","e","slot","target","assignedNodes","length","accordionClass","tv","slots","container","header","content","footer","icon","rightSection","variants","false","true","twMerge","toggle","updateAccordion","expand","collapse","contentEl","style","maxHeight","scrollHeight","bcmAccordionChange","emit","source","host","render","hintText","h","key","class","role","tabindex","toString","onKeyDown","preventDefault","onClick","name","headerTitle","stopPropagation","ref","el","onSlotchange"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n --bcm-accordion-text: var(--bcm-ui-color-text-header);\n --bcm-accordion-border: var(--bcm-ui-color-border-default);\n --bcm-accordion-radius: 6px;\n --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n border: 1px solid var(--bcm-accordion-border);\n border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n border-bottom: 1px solid var(--bcm-accordion-border);\n border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n border-top-left-radius: var(--bcm-accordion-radius);\n border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n border-bottom-left-radius: var(--bcm-accordion-radius);\n border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n}\n::slotted([slot='actions']) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n * <div slot=\"title\">Accordion Title</div>\n * <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n * <div slot=\"title\">Title</div>\n * <div slot=\"actions\">\n * <button>Action</button>\n * </div>\n * <div>Main content</div>\n * <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n * const { expanded, source } = event.detail;\n * console.log('Accordion expanded:', expanded);\n * console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n tag: 'bcm-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n /** Reference to the host element */\n @Element() host: HTMLElement;\n\n /**\n * Controls whether the accordion is expanded or collapsed.\n * @prop\n * @defaultValue false\n */\n @Prop({ reflect: true, mutable: true })\n expanded: boolean = false;\n\n /**\n * Optional title text to display in the header.\n * @prop\n * @defaultValue undefined\n */\n @Prop()\n headerTitle?: string;\n\n /**\n * Indicates if the accordion is part of a group.\n * Used for group behavior coordination.\n * @prop\n * @defaultValue false\n */\n\n @Prop({ reflect: true })\n group: boolean = false;\n\n /**\n * Optional text to display in the footer when no footer slot content is provided.\n * @prop\n */\n @Prop({ attribute: 'hint-text' })\n hintText?: string;\n\n /**\n * Tracks whether footer content is present.\n * @state\n */\n @State()\n hasFooterContent: boolean = false;\n\n /**\n * Emitted when the accordion's expanded state changes.\n * @event\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmAccordionChange',\n })\n bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n private contentEl?: HTMLElement;\n\n /**\n * Toggles the accordion's expanded state.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async toggle(): Promise<void> {\n this.expanded = !this.expanded;\n this.updateAccordion();\n }\n\n /**\n * Expands the accordion if it's not already expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async expand(): Promise<void> {\n if (!this.expanded) {\n this.expanded = true;\n this.updateAccordion();\n }\n }\n\n /**\n * Collapses the accordion if it's currently expanded.\n * @method\n * @returns Promise<void>\n */\n @Method()\n async collapse(): Promise<void> {\n if (this.expanded) {\n this.expanded = false;\n this.updateAccordion();\n }\n }\n\n /**\n * Updates the accordion's content height and emits change event.\n * @private\n */\n private updateAccordion(): void {\n if (this.contentEl) {\n this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n }\n this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n }\n\n /**\n * Handles changes to the footer slot content.\n * @private\n * @param e - Slot change event\n */\n private handleFooterSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement;\n const assignedNodes = slot.assignedNodes();\n this.hasFooterContent = assignedNodes.length > 0;\n };\n\n private accordionClass = tv(\n {\n slots: {\n container: 'accordion-container flex flex-col bcm-ui-element w-full',\n header:\n 'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n },\n variants: {\n hasFooterContent: {\n false: { footer: 'hidden' },\n true: { footer: 'flex' },\n },\n expanded: {\n true: { icon: 'rotate-180' },\n false: {\n icon: 'rotate-0',\n content: '',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n hasFooterContent: this.hasFooterContent || !!this.hintText,\n expanded: this.expanded,\n });\n\n return (\n <div class={container()}>\n {/* Header */}\n <header\n class={header()}\n role=\"button\"\n tabindex=\"0\"\n aria-expanded={this.expanded.toString()}\n aria-controls=\"accordion-content\"\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggle();\n }\n }}\n onClick={() => this.toggle()}\n >\n <slot name=\"title\">{this.headerTitle}</slot>\n {/* Actions */}\n <div class={rightSection()}>\n <span onClick={e => e.stopPropagation()}>\n <slot name=\"actions\"></slot>\n </span>\n <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n </div>\n </header>\n {/* Content */}\n <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n <div class=\"px-4 py-2\">\n <slot></slot>\n </div>\n <footer class={footer()}>\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n {this.hintText}\n </slot>\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAe,g4HACrB,MAAAC,EAAeD,E,MCyEFE,EAAY,MALzB,WAAAC,CAAAC,G,iEAeEC,KAAAC,SAAoB,MAkBpBD,KAAAE,MAAiB,MAcjBF,KAAAG,iBAA4B,MAqEpBH,KAAAI,uBAA0BC,IAChC,MAAMC,EAAOD,EAAEE,OACf,MAAMC,EAAgBF,EAAKE,gBAC3BR,KAAKG,iBAAmBK,EAAcC,OAAS,CAAC,EAG1CT,KAAAU,eAAiBC,EACvB,CACEC,MAAO,CACLC,UAAW,0DACXC,OACE,yNACFC,QAAS,gGACTC,OAAQ,0JACRC,KAAM,4EACNC,aAAc,8DAEhBC,SAAU,CACRhB,iBAAkB,CAChBiB,MAAO,CAAEJ,OAAQ,UACjBK,KAAM,CAAEL,OAAQ,SAElBf,SAAU,CACRoB,KAAM,CAAEJ,KAAM,cACdG,MAAO,CACLH,KAAM,WACNF,QAAS,OAKjB,CACEO,QAAS,O,CA/Eb,YAAMC,GACJvB,KAAKC,UAAYD,KAAKC,SACtBD,KAAKwB,iB,CASP,YAAMC,GACJ,IAAKzB,KAAKC,SAAU,CAClBD,KAAKC,SAAW,KAChBD,KAAKwB,iB,EAUT,cAAME,GACJ,GAAI1B,KAAKC,SAAU,CACjBD,KAAKC,SAAW,MAChBD,KAAKwB,iB,EAQD,eAAAA,GACN,GAAIxB,KAAK2B,UAAW,CAClB3B,KAAK2B,UAAUC,MAAMC,UAAY7B,KAAKC,SAAW,GAAGD,KAAK2B,UAAUG,iBAAmB,K,CAExF9B,KAAK+B,mBAAmBC,KAAK,CAAE/B,SAAUD,KAAKC,SAAUgC,OAAQjC,KAAKkC,M,CA4CvE,MAAAC,GACE,MAAMtB,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,EAAOC,OAAEA,EAAMC,KAAEA,EAAIC,aAAEA,GAAiBlB,KAAKU,eAAe,CACrFP,iBAAkBH,KAAKG,oBAAsBH,KAAKoC,SAClDnC,SAAUD,KAAKC,WAGjB,OACEoC,EAAA,OAAAC,IAAA,2CAAKC,MAAO1B,KAEVwB,EAAA,UAAAC,IAAA,2CACEC,MAAOzB,IACP0B,KAAK,SACLC,SAAS,IAAG,gBACGzC,KAAKC,SAASyC,WAAU,gBACzB,oBACdC,UAAWtC,IACT,GAAIA,EAAEiC,MAAQ,SAAWjC,EAAEiC,MAAQ,IAAK,CACtCjC,EAAEuC,iBACF5C,KAAKuB,Q,GAGTsB,QAAS,IAAM7C,KAAKuB,UAEpBc,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAAS9C,KAAK+C,aAEzBV,EAAA,OAAAC,IAAA,2CAAKC,MAAOrB,KACVmB,EAAA,QAAAC,IAAA,2CAAMO,QAASxC,GAAKA,EAAE2C,mBACpBX,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,aAEbT,EAAA,YAAAC,IAAA,2CAAUQ,KAAK,6BAA6BP,MAAOtB,QAIvDoB,EAAA,OAAAC,IAAA,2CAAKC,MAAOxB,IAAWa,MAAO,CAAEC,UAAW7B,KAAKC,SAAW,OAAS,OAASgD,IAAKC,GAAOlD,KAAK2B,UAAYuB,GACxGb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,QAAAC,IAAA,8CAEFD,EAAA,UAAAC,IAAA,2CAAQC,MAAOvB,KACbqB,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,SAASK,aAAcnD,KAAKI,wBACpCJ,KAAKoC,Y","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t}from"./p-c9b736d9.js";import{c as o}from"./p-12360e4c.js";const l={display:"h1",heading1:"h2",heading2:"h3",title1:"h4",title2:"h5",title3:"h6",body:"p",bodyAccent:"p",helper:"p",caption:"p",label:"label",placeholder:"p",link:"a",info:"p",infoAccent:"p"};const i=".m-0{margin:0}.appearance-none{appearance:none}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.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 r=i;const a=class{constructor(t){e(this,t);this.variant="body";this.size="medium";this.variantClassMap={display:"font-semibold text-size-12 text-color-header",heading1:"font-semibold text-size-7 text-color-header",heading2:"font-semibold text-size-6 text-color-header",title1:{small:"font-semibold text-size-5 text-color-header",medium:"font-semibold text-size-6 text-color-header",large:"font-semibold text-size-7 text-color-header"},title2:{small:"font-semibold text-size-4 text-color-default",medium:"font-semibold text-size-5 text-color-default",large:"font-semibold text-size-6 text-color-default"},title3:{small:"font-semibold text-size-3 text-color-disabled",medium:"font-semibold text-size-4 text-color-disabled",large:"font-semibold text-size-5 text-color-disabled"},body:{small:"font-regular text-size-4 text-color-default",medium:"font-regular text-size-5 text-color-default",large:"font-regular text-size-6 text-color-default"},bodyAccent:{small:"font-medium text-size-4 text-color-default",medium:"font-medium text-size-5 text-color-default",large:"font-medium text-size-6 text-color-default"},helper:{small:"font-regular text-size-4 text-color-helper",medium:"font-regular text-size-5 text-color-helper",large:"font-regular text-size-6 text-color-helper"},caption:{small:"font-regular text-size-3 text-color-caption",medium:"font-regular text-size-4 text-color-caption",large:"font-regular text-size-5 text-color-caption"},link:{small:"font-medium text-size-4 underline text-color-primary",medium:"font-medium text-size-5 underline text-color-primary",large:"font-medium text-size-6 underline text-color-primary"},label:{small:"font-medium text-size-3 text-color-label",medium:"font-medium text-size-4 text-color-label",large:"font-medium text-size-5 text-color-label"},placeholder:{small:"font-regular text-size-4 text-color-placeholder",medium:"font-regular text-size-5 text-color-placeholder",large:"font-regular text-size-6 text-color-placeholder"},info:{small:"font-regular text-size-3 text-color-default",medium:"font-regular text-size-4 text-color-default",large:"font-regular text-size-5 text-color-default"},infoAccent:{small:"font-medium text-size-3 text-color-header",medium:"font-medium text-size-4 text-color-header",large:"font-medium text-size-5 text-color-header"}};this.getTextClass=(e,t)=>{const o=this.variantClassMap[e];if(typeof o==="string"){return o}return o[t]}}render(){const e=l[this.variant];const i=this.getTextClass(this.variant,this.size);return t(e,{key:"53890d0b241119b0df415e599538e806bd870517",class:o("bcm-text appearance-none m-0 p-0",i),part:"text"},t("slot",{key:"25ccb62cbbe1393379c42bd13b3a98d8806fa2cb"},this.text))}};a.style=r;export{a as bcm_text};
|
|
2
|
+
//# sourceMappingURL=p-15829c47.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["variantTagMap","display","heading1","heading2","title1","title2","title3","body","bodyAccent","helper","caption","label","placeholder","link","info","infoAccent","textCss","BcmTextStyle0","BcmText","constructor","hostRef","this","variant","size","variantClassMap","small","medium","large","getTextClass","variantClasses","render","Tag","variantClass","h","key","class","cs","part","text"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n display: 'h1',\n heading1: 'h2',\n heading2: 'h3',\n title1: 'h4',\n title2: 'h5',\n title3: 'h6',\n body: 'p',\n bodyAccent: 'p',\n helper: 'p',\n caption: 'p',\n label: 'label',\n placeholder: 'p',\n link: 'a',\n info: 'p',\n infoAccent: 'p',\n};\n",null,"import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n tag: 'bcm-text',\n styleUrl: 'text.scss',\n shadow: true,\n})\nexport class BcmText {\n /** Text content */\n @Prop()\n text: string;\n\n /** Text variant */\n @Prop()\n variant: TextVariant = 'body';\n\n /** Text size */\n @Prop()\n size: TextSize = 'medium';\n\n private readonly variantClassMap = {\n display: 'font-semibold text-size-12 text-color-header',\n heading1: 'font-semibold text-size-7 text-color-header',\n heading2: 'font-semibold text-size-6 text-color-header',\n title1: {\n small: 'font-semibold text-size-5 text-color-header',\n medium: 'font-semibold text-size-6 text-color-header',\n large: 'font-semibold text-size-7 text-color-header',\n },\n title2: {\n small: 'font-semibold text-size-4 text-color-default',\n medium: 'font-semibold text-size-5 text-color-default',\n large: 'font-semibold text-size-6 text-color-default',\n },\n title3: {\n small: 'font-semibold text-size-3 text-color-disabled',\n medium: 'font-semibold text-size-4 text-color-disabled',\n large: 'font-semibold text-size-5 text-color-disabled',\n },\n body: {\n small: 'font-regular text-size-4 text-color-default',\n medium: 'font-regular text-size-5 text-color-default',\n large: 'font-regular text-size-6 text-color-default',\n },\n bodyAccent: {\n small: 'font-medium text-size-4 text-color-default',\n medium: 'font-medium text-size-5 text-color-default',\n large: 'font-medium text-size-6 text-color-default',\n },\n helper: {\n small: 'font-regular text-size-4 text-color-helper',\n medium: 'font-regular text-size-5 text-color-helper',\n large: 'font-regular text-size-6 text-color-helper',\n },\n caption: {\n small: 'font-regular text-size-3 text-color-caption',\n medium: 'font-regular text-size-4 text-color-caption',\n large: 'font-regular text-size-5 text-color-caption',\n },\n link: {\n small: 'font-medium text-size-4 underline text-color-primary',\n medium: 'font-medium text-size-5 underline text-color-primary',\n large: 'font-medium text-size-6 underline text-color-primary',\n },\n label: {\n small: 'font-medium text-size-3 text-color-label',\n medium: 'font-medium text-size-4 text-color-label',\n large: 'font-medium text-size-5 text-color-label',\n },\n placeholder: {\n small: 'font-regular text-size-4 text-color-placeholder',\n medium: 'font-regular text-size-5 text-color-placeholder',\n large: 'font-regular text-size-6 text-color-placeholder',\n },\n info: {\n small: 'font-regular text-size-3 text-color-default',\n medium: 'font-regular text-size-4 text-color-default',\n large: 'font-regular text-size-5 text-color-default',\n },\n infoAccent: {\n small: 'font-medium text-size-3 text-color-header',\n medium: 'font-medium text-size-4 text-color-header',\n large: 'font-medium text-size-5 text-color-header',\n },\n } as const;\n\n private getTextClass = (variant: TextVariant, size: TextSize): string => {\n const variantClasses = this.variantClassMap[variant];\n\n if (typeof variantClasses === 'string') {\n return variantClasses;\n }\n\n return variantClasses[size];\n };\n\n render() {\n const Tag = variantTagMap[this.variant];\n const variantClass = this.getTextClass(this.variant, this.size);\n\n return (\n <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass)} part=\"text\">\n <slot>{this.text}</slot>\n </Tag>\n );\n }\n}\n"],"mappings":"+EAEO,MAAMA,EAA8C,CACzDC,QAAS,KACTC,SAAU,KACVC,SAAU,KACVC,OAAQ,KACRC,OAAQ,KACRC,OAAQ,KACRC,KAAM,IACNC,WAAY,IACZC,OAAQ,IACRC,QAAS,IACTC,MAAO,QACPC,YAAa,IACbC,KAAM,IACNC,KAAM,IACNC,WAAY,KCjBd,MAAMC,EAAU,
|
|
1
|
+
{"version":3,"names":["variantTagMap","display","heading1","heading2","title1","title2","title3","body","bodyAccent","helper","caption","label","placeholder","link","info","infoAccent","textCss","BcmTextStyle0","BcmText","constructor","hostRef","this","variant","size","variantClassMap","small","medium","large","getTextClass","variantClasses","render","Tag","variantClass","h","key","class","cs","part","text"],"sources":["src/components/text/text.utils.ts","src/components/text/text.scss?tag=bcm-text&encapsulation=shadow","src/components/text/text.component.tsx"],"sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n display: 'h1',\n heading1: 'h2',\n heading2: 'h3',\n title1: 'h4',\n title2: 'h5',\n title3: 'h6',\n body: 'p',\n bodyAccent: 'p',\n helper: 'p',\n caption: 'p',\n label: 'label',\n placeholder: 'p',\n link: 'a',\n info: 'p',\n infoAccent: 'p',\n};\n",null,"import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n tag: 'bcm-text',\n styleUrl: 'text.scss',\n shadow: true,\n})\nexport class BcmText {\n /** Text content */\n @Prop()\n text: string;\n\n /** Text variant */\n @Prop()\n variant: TextVariant = 'body';\n\n /** Text size */\n @Prop()\n size: TextSize = 'medium';\n\n private readonly variantClassMap = {\n display: 'font-semibold text-size-12 text-color-header',\n heading1: 'font-semibold text-size-7 text-color-header',\n heading2: 'font-semibold text-size-6 text-color-header',\n title1: {\n small: 'font-semibold text-size-5 text-color-header',\n medium: 'font-semibold text-size-6 text-color-header',\n large: 'font-semibold text-size-7 text-color-header',\n },\n title2: {\n small: 'font-semibold text-size-4 text-color-default',\n medium: 'font-semibold text-size-5 text-color-default',\n large: 'font-semibold text-size-6 text-color-default',\n },\n title3: {\n small: 'font-semibold text-size-3 text-color-disabled',\n medium: 'font-semibold text-size-4 text-color-disabled',\n large: 'font-semibold text-size-5 text-color-disabled',\n },\n body: {\n small: 'font-regular text-size-4 text-color-default',\n medium: 'font-regular text-size-5 text-color-default',\n large: 'font-regular text-size-6 text-color-default',\n },\n bodyAccent: {\n small: 'font-medium text-size-4 text-color-default',\n medium: 'font-medium text-size-5 text-color-default',\n large: 'font-medium text-size-6 text-color-default',\n },\n helper: {\n small: 'font-regular text-size-4 text-color-helper',\n medium: 'font-regular text-size-5 text-color-helper',\n large: 'font-regular text-size-6 text-color-helper',\n },\n caption: {\n small: 'font-regular text-size-3 text-color-caption',\n medium: 'font-regular text-size-4 text-color-caption',\n large: 'font-regular text-size-5 text-color-caption',\n },\n link: {\n small: 'font-medium text-size-4 underline text-color-primary',\n medium: 'font-medium text-size-5 underline text-color-primary',\n large: 'font-medium text-size-6 underline text-color-primary',\n },\n label: {\n small: 'font-medium text-size-3 text-color-label',\n medium: 'font-medium text-size-4 text-color-label',\n large: 'font-medium text-size-5 text-color-label',\n },\n placeholder: {\n small: 'font-regular text-size-4 text-color-placeholder',\n medium: 'font-regular text-size-5 text-color-placeholder',\n large: 'font-regular text-size-6 text-color-placeholder',\n },\n info: {\n small: 'font-regular text-size-3 text-color-default',\n medium: 'font-regular text-size-4 text-color-default',\n large: 'font-regular text-size-5 text-color-default',\n },\n infoAccent: {\n small: 'font-medium text-size-3 text-color-header',\n medium: 'font-medium text-size-4 text-color-header',\n large: 'font-medium text-size-5 text-color-header',\n },\n } as const;\n\n private getTextClass = (variant: TextVariant, size: TextSize): string => {\n const variantClasses = this.variantClassMap[variant];\n\n if (typeof variantClasses === 'string') {\n return variantClasses;\n }\n\n return variantClasses[size];\n };\n\n render() {\n const Tag = variantTagMap[this.variant];\n const variantClass = this.getTextClass(this.variant, this.size);\n\n return (\n <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass)} part=\"text\">\n <slot>{this.text}</slot>\n </Tag>\n );\n }\n}\n"],"mappings":"+EAEO,MAAMA,EAA8C,CACzDC,QAAS,KACTC,SAAU,KACVC,SAAU,KACVC,OAAQ,KACRC,OAAQ,KACRC,OAAQ,KACRC,KAAM,IACNC,WAAY,IACZC,OAAQ,IACRC,QAAS,IACTC,MAAO,QACPC,YAAa,IACbC,KAAM,IACNC,KAAM,IACNC,WAAY,KCjBd,MAAMC,EAAU,m6CAChB,MAAAC,EAAeD,E,MCSFE,EAAO,MALpB,WAAAC,CAAAC,G,UAYEC,KAAAC,QAAuB,OAIvBD,KAAAE,KAAiB,SAEAF,KAAAG,gBAAkB,CACjCvB,QAAS,+CACTC,SAAU,8CACVC,SAAU,8CACVC,OAAQ,CACNqB,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETtB,OAAQ,CACNoB,MAAO,+CACPC,OAAQ,+CACRC,MAAO,gDAETrB,OAAQ,CACNmB,MAAO,gDACPC,OAAQ,gDACRC,MAAO,iDAETpB,KAAM,CACJkB,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETnB,WAAY,CACViB,MAAO,6CACPC,OAAQ,6CACRC,MAAO,8CAETlB,OAAQ,CACNgB,MAAO,6CACPC,OAAQ,6CACRC,MAAO,8CAETjB,QAAS,CACPe,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETd,KAAM,CACJY,MAAO,uDACPC,OAAQ,uDACRC,MAAO,wDAEThB,MAAO,CACLc,MAAO,2CACPC,OAAQ,2CACRC,MAAO,4CAETf,YAAa,CACXa,MAAO,kDACPC,OAAQ,kDACRC,MAAO,mDAETb,KAAM,CACJW,MAAO,8CACPC,OAAQ,8CACRC,MAAO,+CAETZ,WAAY,CACVU,MAAO,4CACPC,OAAQ,4CACRC,MAAO,8CAIHN,KAAAO,aAAe,CAACN,EAAsBC,KAC5C,MAAMM,EAAiBR,KAAKG,gBAAgBF,GAE5C,UAAWO,IAAmB,SAAU,CACtC,OAAOA,C,CAGT,OAAOA,EAAeN,EAAK,C,CAG7B,MAAAO,GACE,MAAMC,EAAM/B,EAAcqB,KAAKC,SAC/B,MAAMU,EAAeX,KAAKO,aAAaP,KAAKC,QAASD,KAAKE,MAE1D,OACEU,EAACF,EAAG,CAAAG,IAAA,2CAACC,MAAOC,EAAG,mCAAoCJ,GAAeK,KAAK,QACrEJ,EAAA,QAAAC,IAAA,4CAAOb,KAAKiB,M","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c,h as r}from"./p-c9b736d9.js";import{c as t}from"./p-5fcf77f9.js";const i={info:"blue",error:"red",warning:"amber",success:"green"};const o=":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";const a=o;const b=class{constructor(r){e(this,r);this.bcmDismiss=c(this,"bcmDismiss",1);this.size="medium";this.kind="filled";this.status="default";this.dismissible=false;this.disabled=false;this.chipClass=t({base:["chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border","bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]","hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]"],variants:{size:{small:"small py-px text-size-3",medium:"medium py-0.5 text-size-4",large:"large py-1 text-size-5"},kind:{filled:"filled border-transparent",outlined:"outlined",text:"text border-none"},disabled:{true:"cursor-not-allowed"}}},{twMerge:false})}get chipStyle(){let e=this.color;if(this.disabled){return{"--bcm-chip-bg":"var(--bcm-ui-color-background-disabled-default)","--bcm-chip-text":"var(--bcm-ui-color-text-disabled)","--bcm-chip-border":"var(--bcm-ui-color-border-disabled)","--bcm-chip-hover-bg":"var(--bcm-ui-color-background-disabled-default)","--bcm-chip-active-bg":"var(--bcm-ui-color-background-disabled-default)"}}if(this.status!=="default"){e=i[this.status]}const c={filled:{"--bcm-chip-bg":`var(--bcm-ui-color-background-palette-${e}-default)`,"--bcm-chip-text":`var(--bcm-ui-color-text-palette-${e})`,"--bcm-chip-border":`var(--bcm-ui-color-border-${e})`,"--bcm-chip-hover-bg":`var(--bcm-ui-color-background-palette-${e}-hover)`,"--bcm-chip-active-bg":`var(--bcm-ui-color-background-palette-${e}-active)`},outlined:{"--bcm-chip-bg":"transparent","--bcm-chip-text":`var(--bcm-ui-color-text-palette-${e})`,"--bcm-chip-border":`var(--bcm-ui-color-border-${e})`,"--bcm-chip-hover-bg":`var(--bcm-ui-color-background-palette-${e}-hover)`,"--bcm-chip-active-bg":`var(--bcm-ui-color-background-palette-${e}-active)`},text:{"--bcm-chip-bg":"transparent","--bcm-chip-text":`var(--bcm-ui-color-text-palette-${e})`,"--bcm-chip-border":"transparent","--bcm-chip-hover-bg":`var(--bcm-ui-color-background-palette-${e}-hover)`,"--bcm-chip-active-bg":`var(--bcm-ui-color-background-palette-${e}-active)`}};const r={filled:{"--bcm-chip-bg":"var(--bcm-ui-color-background-default-default)","--bcm-chip-text":"var(--bcm-ui-color-text-default)","--bcm-chip-border":"var(--bcm-ui-color-border-default)","--bcm-chip-hover-bg":"var(--bcm-ui-color-background-default-hover)","--bcm-chip-active-bg":"var(--bcm-ui-color-background-default-active)"},outlined:{"--bcm-chip-bg":"transparent","--bcm-chip-text":"var(--bcm-ui-color-text-default)","--bcm-chip-border":"var(--bcm-ui-color-border-default)","--bcm-chip-hover-bg":"var(--bcm-ui-color-background-default-hover)","--bcm-chip-active-bg":"var(--bcm-ui-color-background-default-active)"},text:{"--bcm-chip-bg":"transparent","--bcm-chip-text":"var(--bcm-ui-color-text-default)","--bcm-chip-border":"transparent","--bcm-chip-hover-bg":"var(--bcm-ui-color-background-default-hover)","--bcm-chip-active-bg":"var(--bcm-ui-color-background-default-active)"}};return e?c[this.kind]:r[this.kind]}handleDismiss(){if(!this.disabled){this.bcmDismiss.emit()}}render(){return r("div",{key:"77ad31933acb6e0f5574f3590b2274f61b20caed",style:this.chipStyle,class:this.chipClass({size:this.size,kind:this.kind,disabled:this.disabled}),role:"button","aria-disabled":this.disabled?"true":"false"},r("slot",{key:"781811b794a2d89c0ac609e934d6393094c541e8"}),this.dismissible&&r("bcm-icon",{key:"08e55b19802624566ae6323c1102257cba784420",onClick:()=>this.handleDismiss(),class:"cursor-pointer","icon-name":"fa-regular fa-xmark","aria-label":"Dismiss chip"}))}};b.style=a;export{b as bcm_chip};
|
|
2
|
+
//# sourceMappingURL=p-4b7294a3.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["STATUS_COLORS","info","error","warning","success","chipCss","BcmChipStyle0","BcmChip","constructor","hostRef","this","size","kind","status","dismissible","disabled","chipClass","tv","base","variants","small","medium","large","filled","outlined","text","true","twMerge","chipStyle","_color","color","styles","defaultStyles","handleDismiss","bcmDismiss","emit","render","h","key","style","class","role","onClick"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /** Chip size variant */\n @Prop()\n size?: ChipSize = 'medium';\n\n /** Chip style variant */\n @Prop()\n kind?: ChipKind = 'filled';\n\n /** Chip status */\n @Prop()\n status?: ChipStatus = 'default';\n\n /** Whether chip can be dismissed */\n @Prop()\n dismissible?: boolean = false;\n\n /** Whether chip is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n ><slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"mappings":"iFAIO,MAAMA,EAAgB,CAC3BC,KAAM,OACNC,MAAO,MACPC,QAAS,QACTC,QAAS,SCRX,MAAMC,EAAU,
|
|
1
|
+
{"version":3,"names":["STATUS_COLORS","info","error","warning","success","chipCss","BcmChipStyle0","BcmChip","constructor","hostRef","this","size","kind","status","dismissible","disabled","chipClass","tv","base","variants","small","medium","large","filled","outlined","text","true","twMerge","chipStyle","_color","color","styles","defaultStyles","handleDismiss","bcmDismiss","emit","render","h","key","style","class","role","onClick"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /** Chip size variant */\n @Prop()\n size?: ChipSize = 'medium';\n\n /** Chip style variant */\n @Prop()\n kind?: ChipKind = 'filled';\n\n /** Chip status */\n @Prop()\n status?: ChipStatus = 'default';\n\n /** Whether chip can be dismissed */\n @Prop()\n dismissible?: boolean = false;\n\n /** Whether chip is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n ><slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"mappings":"iFAIO,MAAMA,EAAgB,CAC3BC,KAAM,OACNC,MAAO,MACPC,QAAS,QACTC,QAAS,SCRX,MAAMC,EAAU,i4DAChB,MAAAC,EAAeD,E,MCoCFE,EAAO,MALpB,WAAAC,CAAAC,G,iDAQEC,KAAAC,KAAkB,SAIlBD,KAAAE,KAAkB,SAIlBF,KAAAG,OAAsB,UAItBH,KAAAI,YAAwB,MAIxBJ,KAAAK,SAAqB,MAabL,KAAAM,UAAYC,EAClB,CACEC,KAAM,CACJ,+FACA,mGACA,mEAEFC,SAAU,CACRR,KAAM,CACJS,MAAO,0BACPC,OAAQ,4BACRC,MAAO,0BAETV,KAAM,CACJW,OAAQ,4BACRC,SAAU,WACVC,KAAM,oBAERV,SAAU,CACRW,KAAM,wBAIZ,CAAEC,QAAS,O,CAGb,aAAYC,GACV,IAAIC,EAASnB,KAAKoB,MAElB,GAAIpB,KAAKK,SAAU,CACjB,MAAO,CACL,gBAAiB,kDACjB,kBAAmB,oCACnB,oBAAqB,sCACrB,sBAAuB,kDACvB,uBAAwB,kD,CAI5B,GAAIL,KAAKG,SAAW,UAAW,CAC7BgB,EAAS7B,EAAcU,KAAKG,O,CAG9B,MAAMkB,EAAS,CACbR,OAAQ,CACN,gBAAiB,yCAAyCM,aAC1D,kBAAmB,mCAAmCA,KACtD,oBAAqB,6BAA6BA,KAClD,sBAAuB,yCAAyCA,WAChE,uBAAwB,yCAAyCA,aAEnEL,SAAU,CACR,gBAAiB,cACjB,kBAAmB,mCAAmCK,KACtD,oBAAqB,6BAA6BA,KAClD,sBAAuB,yCAAyCA,WAChE,uBAAwB,yCAAyCA,aAEnEJ,KAAM,CACJ,gBAAiB,cACjB,kBAAmB,mCAAmCI,KACtD,oBAAqB,cACrB,sBAAuB,yCAAyCA,WAChE,uBAAwB,yCAAyCA,cAIrE,MAAMG,EAAgB,CACpBT,OAAQ,CACN,gBAAiB,iDACjB,kBAAmB,mCACnB,oBAAqB,qCACrB,sBAAuB,+CACvB,uBAAwB,iDAE1BC,SAAU,CACR,gBAAiB,cACjB,kBAAmB,mCACnB,oBAAqB,qCACrB,sBAAuB,+CACvB,uBAAwB,iDAE1BC,KAAM,CACJ,gBAAiB,cACjB,kBAAmB,mCACnB,oBAAqB,cACrB,sBAAuB,+CACvB,uBAAwB,kDAI5B,OAAOI,EAASE,EAAOrB,KAAKE,MAAQoB,EAActB,KAAKE,K,CAGjD,aAAAqB,GACN,IAAKvB,KAAKK,SAAU,CAClBL,KAAKwB,WAAWC,M,EAIpB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO7B,KAAKkB,UACZY,MAAO9B,KAAKM,UAAU,CAAEL,KAAMD,KAAKC,KAAMC,KAAMF,KAAKE,KAAMG,SAAUL,KAAKK,WACzE0B,KAAK,SAAQ,gBACE/B,KAAKK,SAAW,OAAS,SACzCsB,EAAA,QAAAC,IAAA,6CACE5B,KAAKI,aAAeuB,EAAA,YAAAC,IAAA,2CAAUI,QAAS,IAAMhC,KAAKuB,gBAAiBO,MAAM,iBAAgB,YAAW,sBAAqB,aAAY,iB","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as i,g as r}from"./p-c9b736d9.js";import{g as o}from"./p-ba2410ef.js";import{c as s}from"./p-5fcf77f9.js";const a=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as i,g as r}from"./p-c9b736d9.js";import{g as o}from"./p-ba2410ef.js";import{c as s}from"./p-5fcf77f9.js";const a=":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";const c=a;const l=class{constructor(i){e(this,i);this.bcmSwitchChange=t(this,"bcmSwitchChange",1);this.checked=false;this.disabled=false;this.labelPosition="right";this.error=false;this.size="medium";this.readonly=false;this.required=false;this.switchId=o("switch");this.switchStyle=()=>{const e={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-hover)","--switch-dot-bg":"var(--bcm-ui-color-background-base-default)"};const t={"--switch-bg":"var(--bcm-ui-color-background-info-default)","--switch-bg-hover":"var(--bcm-ui-color-background-info-hover)"};const i={"--switch-bg":"var(--bcm-ui-color-background-error-default)","--switch-bg-hover":"var(--bcm-ui-color-background-error-hover)"};const r={"--switch-bg":"var(--bcm-ui-color-background-default-dark-default)","--switch-bg-hover":"var(--bcm-ui-color-background-default-dark-default)","--switch-dot-bg":"var(--bcm-ui-color-background-disabled-default)"};const o={"--switch-bg":"var(--bcm-ui-color-background-disabled-default)","--switch-bg-hover":"var(--bcm-ui-color-background-disabled-default)","--switch-dot-bg":"var(--bcm-ui-color-background-default-default)"};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e),this.checked&&t),this.error&&i),this.readonly&&r),this.disabled&&o)};this.switchClass=s({slots:{base:"bcm-ui-element flex flex-col",switchWrapper:"flex items-center group",dotContainer:"relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300",dot:"absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed",caption:"!text-color-error font-normal",label:"!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed"},variants:{size:{small:{dotContainer:"w-8 h-4",dot:"size-3",label:"text-size-4",caption:"text-size-3",switchWrapper:"gap-2",base:"gap-0.5"},medium:{dotContainer:"w-9 h-[18px]",dot:"size-3.5",label:"text-size-5",caption:"text-size-4",switchWrapper:"gap-2.5",base:"gap-1"},large:{dotContainer:"w-10 h-5",dot:"size-4",label:"text-size-6",caption:"text-size-5",switchWrapper:"gap-3",base:"gap-2"}},labelPosition:{left:{label:""},right:{label:"order-2"}},checked:{true:{dot:""},false:{dot:"left-0.5"}},disabled:{true:"",false:{switchWrapper:""}},readonly:{true:{switchWrapper:"cursor-default",dotContainer:"cursor-default",dot:"cursor-default"},false:{switchWrapper:"cursor-pointer",dotContainer:"cursor-pointer hover:bg-[--switch-bg-hover]"}}},compoundVariants:[{size:"small",checked:true,class:{dot:"left-[18px]"}},{size:"medium",checked:true,class:{dot:"left-[20px]"}},{size:"large",checked:true,class:{dot:"left-[22px]"}},{readonly:false,disabled:false,class:{dotContainer:"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300"}}]})}toggleSwitch(){if(this.disabled||this.readonly)return;this.checked=!this.checked;this.bcmSwitchChange.emit(this.checked)}render(){const{base:e,switchWrapper:t,label:r,dot:o,dotContainer:s,caption:a}=this.switchClass({size:this.size,checked:this.checked,disabled:this.disabled,labelPosition:this.labelPosition,readonly:this.readonly});const c=Object.assign({role:"switch","aria-checked":this.checked.toString(),"aria-disabled":this.disabled.toString(),"aria-readonly":this.readonly.toString()},this.required&&{"aria-required":"true"});const l=!this.readonly&&!this.disabled?{tabindex:"0"}:{};return i("div",{key:"6fe3f5b93d46367c73bac4711f5eb5ee93be0fb1",class:e()},i("label",{key:"ec4101b02f81f6e43e6f4279c893d08b710eb892",class:t(),style:this.switchStyle()},i("input",{key:"0ac5fbd5415b4f7c988fed8746c7cd4709de6931",id:this.switchId,type:"checkbox",class:"hidden peer",checked:this.checked,name:this.name,value:this.value,disabled:this.disabled,readOnly:this.readonly,required:this.required,onChange:()=>this.toggleSwitch()}),this.label&&i("span",{key:"1712d6a86427e0667f7ff393a570f1d5d1386494",class:r()},i("slot",{key:"a81c09316f27b86ace52436f26872c0626b642af"},this.label)),i("label",Object.assign({key:"bd77f8a8a7528aa0aee70730db772f789c90d910",htmlFor:this.switchId,class:s()},l,c,{onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!this.readonly&&!this.disabled){e.preventDefault();this.toggleSwitch()}}}),i("div",{key:"91a5d3ca25f67953b6beb8456976bbc7ad2876da",class:o()}))),this.error&&this.caption&&i("span",{key:"2a01e0e40041aa00938e714c22e6a8d241bac222",class:a()},this.caption),i("slot",{key:"4417057a08368eee0f06ca4fe86a620ea46f31ee",name:"caption"}))}get el(){return r(this)}};l.style=c;export{l as bcm_switch};
|
|
2
|
+
//# sourceMappingURL=p-625bbd86.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["switchCss","BcmSwitchStyle0","BcmSwitch","constructor","hostRef","this","checked","disabled","labelPosition","error","size","readonly","required","switchId","generateId","switchStyle","defaultStyle","checkedStyle","errorStyle","readonlyStyle","disabledStyle","Object","assign","switchClass","tv","slots","base","switchWrapper","dotContainer","dot","caption","label","variants","small","medium","large","left","right","true","false","compoundVariants","class","toggleSwitch","bcmSwitchChange","emit","render","ariaAttributes","role","toString","tabIndexAttr","tabindex","h","key","style","id","type","name","value","readOnly","onChange","htmlFor","onKeyDown","event","preventDefault"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /** Reference to the host element */\n @Element()\n el: HTMLElement;\n\n /** Whether the switch is checked or not */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Whether the switch is disabled */\n @Prop()\n disabled: boolean = false;\n\n /** The name attribute for the hidden input element */\n @Prop()\n name: string;\n\n /** The value attribute for the hidden input element */\n @Prop()\n value: string;\n\n /** Text label for the switch */\n @Prop()\n label: string;\n\n /** Position of the label relative to the switch */\n @Prop()\n labelPosition: 'left' | 'right' = 'right';\n\n /** Whether to display the switch in an error state */\n @Prop()\n error: boolean = false;\n\n /** Text to display as an error message when error is true */\n @Prop()\n caption?: string;\n\n /** Size variant of the switch */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Whether the switch is in readonly mode */\n @Prop()\n readonly: boolean = false;\n\n /** Whether the switch is required in a form */\n @Prop()\n required: boolean = false;\n\n /** Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled || this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAY,ymGAClB,MAAAC,EAAeD,E,MCoCFE,EAAS,MALtB,WAAAC,CAAAC,G,2DAYIC,KAAAC,QAAmB,MAInBD,KAAAE,SAAoB,MAgBpBF,KAAAG,cAAkC,QAIlCH,KAAAI,MAAiB,MAQjBJ,KAAAK,KAAqC,SAIrCL,KAAAM,SAAoB,MAIpBN,KAAAO,SAAoB,MAUZP,KAAAQ,SAAWC,EAAW,UAQtBT,KAAAU,YAAc,KAClB,MAAMC,EAAe,CACjB,cAAe,sDACf,oBAAqB,oDACrB,kBAAmB,+CAGvB,MAAMC,EAAe,CACjB,cAAe,8CACf,oBAAqB,6CAGzB,MAAMC,EAAa,CACf,cAAe,+CACf,oBAAqB,8CAGzB,MAAMC,EAAgB,CAClB,cAAe,sDACf,oBAAqB,sDACrB,kBAAmB,mDAGvB,MAAMC,EAAgB,CAClB,cAAe,kDACf,oBAAqB,kDACrB,kBAAmB,kDAGvB,OAAAC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACON,GACCX,KAAKC,SAAWW,GAChBZ,KAAKI,OAASS,GACdb,KAAKM,UAAYQ,GACjBd,KAAKE,UAAYa,EAAa,EAIlCf,KAAAkB,YAAcC,EAAG,CACrBC,MAAO,CACHC,KAAM,+BACNC,cAAe,0BACfC,aACI,6KACJC,IAAK,gIACLC,QAAS,gCACTC,MAAO,+FAEXC,SAAU,CACNtB,KAAM,CACFuB,MAAO,CACHL,aAAc,UACdC,IAAK,SACLE,MAAO,cACPD,QAAS,cACTH,cAAe,QACfD,KAAM,WAEVQ,OAAQ,CACJN,aAAc,eACdC,IAAK,WACLE,MAAO,cACPD,QAAS,cACTH,cAAe,UACfD,KAAM,SAEVS,MAAO,CACHP,aAAc,WACdC,IAAK,SACLE,MAAO,cACPD,QAAS,cACTH,cAAe,QACfD,KAAM,UAGdlB,cAAe,CACX4B,KAAM,CACFL,MAAO,IAEXM,MAAO,CACHN,MAAO,YAGfzB,QAAS,CACLgC,KAAM,CACFT,IAAK,IAETU,MAAO,CACHV,IAAK,aAGbtB,SAAU,CACN+B,KAAM,GACNC,MAAO,CACHZ,cAAe,KAGvBhB,SAAU,CACN2B,KAAM,CACFX,cAAe,iBACfC,aAAc,iBACdC,IAAK,kBAETU,MAAO,CACHZ,cAAe,iBACfC,aAAc,iDAI1BY,iBAAkB,CACd,CACI9B,KAAM,QACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACInB,KAAM,SACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACInB,KAAM,QACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACIlB,SAAU,MACVJ,SAAU,MACVkC,MAAO,CACHb,aAAc,kG,CA7ItB,YAAAc,GACJ,GAAIrC,KAAKE,UAAYF,KAAKM,SAAU,OACpCN,KAAKC,SAAWD,KAAKC,QACrBD,KAAKsC,gBAAgBC,KAAKvC,KAAKC,Q,CAgJnC,MAAAuC,GACI,MAAMnB,KAAEA,EAAIC,cAAEA,EAAaI,MAAEA,EAAKF,IAAEA,EAAGD,aAAEA,EAAYE,QAAEA,GAAYzB,KAAKkB,YAAY,CAChFb,KAAML,KAAKK,KACXJ,QAASD,KAAKC,QACdC,SAAUF,KAAKE,SACfC,cAAeH,KAAKG,cACpBG,SAAUN,KAAKM,WAGnB,MAAMmC,EAAczB,OAAAC,OAAA,CAChByB,KAAQ,SACR,eAAgB1C,KAAKC,QAAQ0C,WAC7B,gBAAiB3C,KAAKE,SAASyC,WAC/B,gBAAiB3C,KAAKM,SAASqC,YAC3B3C,KAAKO,UAAY,CAAE,gBAAiB,SAG5C,MAAMqC,GAAgB5C,KAAKM,WAAaN,KAAKE,SAAW,CAAE2C,SAAU,KAAQ,GAE5E,OACIC,EAAA,OAAAC,IAAA,2CAAKX,MAAOf,KACRyB,EAAA,SAAAC,IAAA,2CAAOX,MAAOd,IAAiB0B,MAAOhD,KAAKU,eACvCoC,EAAA,SAAAC,IAAA,2CACIE,GAAIjD,KAAKQ,SACT0C,KAAK,WACLd,MAAM,cACNnC,QAASD,KAAKC,QACdkD,KAAMnD,KAAKmD,KACXC,MAAOpD,KAAKoD,MACZlD,SAAUF,KAAKE,SACfmD,SAAUrD,KAAKM,SACfC,SAAUP,KAAKO,SACf+C,SAAU,IAAMtD,KAAKqC,iBAGxBrC,KAAK0B,OAASoB,EAAA,QAAAC,IAAA,2CAAMX,MAAOV,KAASoB,EAAA,QAAAC,IAAA,4CAAO/C,KAAK0B,QACjDoB,EAAA,QAAA9B,OAAAC,OAAA,CAAA8B,IAAA,2CACIQ,QAASvD,KAAKQ,SACd4B,MAAOb,KACHqB,EACAH,EAAc,CAClBe,UAAWC,IACP,IAAKA,EAAMV,MAAQ,SAAWU,EAAMV,MAAQ,OAAS/C,KAAKM,WAAaN,KAAKE,SAAU,CAClFuD,EAAMC,iBACN1D,KAAKqC,c,KAIbS,EAAA,OAAAC,IAAA,2CAAKX,MAAOZ,QAInBxB,KAAKI,OAASJ,KAAKyB,SAAWqB,EAAA,QAAAC,IAAA,2CAAMX,MAAOX,KAAYzB,KAAKyB,SAC7DqB,EAAA,QAAAC,IAAA,2CAAMI,KAAK,Y","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["switchCss","BcmSwitchStyle0","BcmSwitch","constructor","hostRef","this","checked","disabled","labelPosition","error","size","readonly","required","switchId","generateId","switchStyle","defaultStyle","checkedStyle","errorStyle","readonlyStyle","disabledStyle","Object","assign","switchClass","tv","slots","base","switchWrapper","dotContainer","dot","caption","label","variants","small","medium","large","left","right","true","false","compoundVariants","class","toggleSwitch","bcmSwitchChange","emit","render","ariaAttributes","role","toString","tabIndexAttr","tabindex","h","key","style","id","type","name","value","readOnly","onChange","htmlFor","onKeyDown","event","preventDefault"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /** Reference to the host element */\n @Element()\n el: HTMLElement;\n\n /** Whether the switch is checked or not */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Whether the switch is disabled */\n @Prop()\n disabled: boolean = false;\n\n /** The name attribute for the hidden input element */\n @Prop()\n name: string;\n\n /** The value attribute for the hidden input element */\n @Prop()\n value: string;\n\n /** Text label for the switch */\n @Prop()\n label: string;\n\n /** Position of the label relative to the switch */\n @Prop()\n labelPosition: 'left' | 'right' = 'right';\n\n /** Whether to display the switch in an error state */\n @Prop()\n error: boolean = false;\n\n /** Text to display as an error message when error is true */\n @Prop()\n caption?: string;\n\n /** Size variant of the switch */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Whether the switch is in readonly mode */\n @Prop()\n readonly: boolean = false;\n\n /** Whether the switch is required in a form */\n @Prop()\n required: boolean = false;\n\n /** Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled || this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAY,yiGAClB,MAAAC,EAAeD,E,MCoCFE,EAAS,MALtB,WAAAC,CAAAC,G,2DAYIC,KAAAC,QAAmB,MAInBD,KAAAE,SAAoB,MAgBpBF,KAAAG,cAAkC,QAIlCH,KAAAI,MAAiB,MAQjBJ,KAAAK,KAAqC,SAIrCL,KAAAM,SAAoB,MAIpBN,KAAAO,SAAoB,MAUZP,KAAAQ,SAAWC,EAAW,UAQtBT,KAAAU,YAAc,KAClB,MAAMC,EAAe,CACjB,cAAe,sDACf,oBAAqB,oDACrB,kBAAmB,+CAGvB,MAAMC,EAAe,CACjB,cAAe,8CACf,oBAAqB,6CAGzB,MAAMC,EAAa,CACf,cAAe,+CACf,oBAAqB,8CAGzB,MAAMC,EAAgB,CAClB,cAAe,sDACf,oBAAqB,sDACrB,kBAAmB,mDAGvB,MAAMC,EAAgB,CAClB,cAAe,kDACf,oBAAqB,kDACrB,kBAAmB,kDAGvB,OAAAC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACON,GACCX,KAAKC,SAAWW,GAChBZ,KAAKI,OAASS,GACdb,KAAKM,UAAYQ,GACjBd,KAAKE,UAAYa,EAAa,EAIlCf,KAAAkB,YAAcC,EAAG,CACrBC,MAAO,CACHC,KAAM,+BACNC,cAAe,0BACfC,aACI,6KACJC,IAAK,gIACLC,QAAS,gCACTC,MAAO,+FAEXC,SAAU,CACNtB,KAAM,CACFuB,MAAO,CACHL,aAAc,UACdC,IAAK,SACLE,MAAO,cACPD,QAAS,cACTH,cAAe,QACfD,KAAM,WAEVQ,OAAQ,CACJN,aAAc,eACdC,IAAK,WACLE,MAAO,cACPD,QAAS,cACTH,cAAe,UACfD,KAAM,SAEVS,MAAO,CACHP,aAAc,WACdC,IAAK,SACLE,MAAO,cACPD,QAAS,cACTH,cAAe,QACfD,KAAM,UAGdlB,cAAe,CACX4B,KAAM,CACFL,MAAO,IAEXM,MAAO,CACHN,MAAO,YAGfzB,QAAS,CACLgC,KAAM,CACFT,IAAK,IAETU,MAAO,CACHV,IAAK,aAGbtB,SAAU,CACN+B,KAAM,GACNC,MAAO,CACHZ,cAAe,KAGvBhB,SAAU,CACN2B,KAAM,CACFX,cAAe,iBACfC,aAAc,iBACdC,IAAK,kBAETU,MAAO,CACHZ,cAAe,iBACfC,aAAc,iDAI1BY,iBAAkB,CACd,CACI9B,KAAM,QACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACInB,KAAM,SACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACInB,KAAM,QACNJ,QAAS,KACTmC,MAAO,CACHZ,IAAK,gBAGb,CACIlB,SAAU,MACVJ,SAAU,MACVkC,MAAO,CACHb,aAAc,kG,CA7ItB,YAAAc,GACJ,GAAIrC,KAAKE,UAAYF,KAAKM,SAAU,OACpCN,KAAKC,SAAWD,KAAKC,QACrBD,KAAKsC,gBAAgBC,KAAKvC,KAAKC,Q,CAgJnC,MAAAuC,GACI,MAAMnB,KAAEA,EAAIC,cAAEA,EAAaI,MAAEA,EAAKF,IAAEA,EAAGD,aAAEA,EAAYE,QAAEA,GAAYzB,KAAKkB,YAAY,CAChFb,KAAML,KAAKK,KACXJ,QAASD,KAAKC,QACdC,SAAUF,KAAKE,SACfC,cAAeH,KAAKG,cACpBG,SAAUN,KAAKM,WAGnB,MAAMmC,EAAczB,OAAAC,OAAA,CAChByB,KAAQ,SACR,eAAgB1C,KAAKC,QAAQ0C,WAC7B,gBAAiB3C,KAAKE,SAASyC,WAC/B,gBAAiB3C,KAAKM,SAASqC,YAC3B3C,KAAKO,UAAY,CAAE,gBAAiB,SAG5C,MAAMqC,GAAgB5C,KAAKM,WAAaN,KAAKE,SAAW,CAAE2C,SAAU,KAAQ,GAE5E,OACIC,EAAA,OAAAC,IAAA,2CAAKX,MAAOf,KACRyB,EAAA,SAAAC,IAAA,2CAAOX,MAAOd,IAAiB0B,MAAOhD,KAAKU,eACvCoC,EAAA,SAAAC,IAAA,2CACIE,GAAIjD,KAAKQ,SACT0C,KAAK,WACLd,MAAM,cACNnC,QAASD,KAAKC,QACdkD,KAAMnD,KAAKmD,KACXC,MAAOpD,KAAKoD,MACZlD,SAAUF,KAAKE,SACfmD,SAAUrD,KAAKM,SACfC,SAAUP,KAAKO,SACf+C,SAAU,IAAMtD,KAAKqC,iBAGxBrC,KAAK0B,OAASoB,EAAA,QAAAC,IAAA,2CAAMX,MAAOV,KAASoB,EAAA,QAAAC,IAAA,4CAAO/C,KAAK0B,QACjDoB,EAAA,QAAA9B,OAAAC,OAAA,CAAA8B,IAAA,2CACIQ,QAASvD,KAAKQ,SACd4B,MAAOb,KACHqB,EACAH,EAAc,CAClBe,UAAWC,IACP,IAAKA,EAAMV,MAAQ,SAAWU,EAAMV,MAAQ,OAAS/C,KAAKM,WAAaN,KAAKE,SAAU,CAClFuD,EAAMC,iBACN1D,KAAKqC,c,KAIbS,EAAA,OAAAC,IAAA,2CAAKX,MAAOZ,QAInBxB,KAAKI,OAASJ,KAAKyB,SAAWqB,EAAA,QAAAC,IAAA,2CAAMX,MAAOX,KAAYzB,KAAKyB,SAC7DqB,EAAA,QAAAC,IAAA,2CAAMI,KAAK,Y","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as r}from"./p-c9b736d9.js";import{c as a}from"./p-5fcf77f9.js";const s=".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 l=s;const c=class{constructor(i){t(this,i);this.bcmTabSelected=e(this,"bcmTabSelected",1);this.active=false;this.size="medium";this.disabled=false;this.class=a({slots:{tab:"bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none",borderLine:"bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out"},variants:{size:{small:{tab:"text-size-4 gap-2"},medium:{tab:"text-size-5 gap-2.5"},large:{tab:"text-size-6 gap-3"}},active:{true:{tab:"text-color-primary"},false:{tab:"text-color"}},disabled:{true:{tab:"cursor-not-allowed text-color-disabled",borderLine:"bg-[--bcm-ui-color-text-disabled]"},false:{tab:"cursor-pointer text-color hover:text-color-primary",borderLine:"bg-[--bcm-ui-color-text-default]"}}},defaultVariants:{size:"medium",active:false,disabled:false}},{twMerge:false})}handleClick(){if(this.disabled)return;this.bcmTabSelected.emit(this.value)}render(){const{tab:t,borderLine:e}=this.class({size:this.size,active:this.active,disabled:this.disabled});return i(o,{key:"d55ce1eaa9290ffe2d47f6a0fa747cf9dd9f1b7c",role:"tab","aria-selected":this.active.toString(),"aria-disabled":this.disabled},i("button",{key:"d9dcc8685a2007e0c8f234913e461de90916a32d",class:t(),disabled:this.disabled,part:"tab",onClick:()=>this.handleClick()},i("slot",{key:"4ef0ed0302f2fedd966e461a77fd3f79bcb3c6c0"})),i("div",{key:"a0afbb81a99afe7eeab0917a824e67078c4c0636",class:e()}))}get el(){return r(this)}};c.style=l;export{c as bcm_tabs_trigger};
|
|
2
|
+
//# sourceMappingURL=p-7d8ad3dd.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabsTriggerCss","BcmTabsTriggerStyle0","BcmTabsTrigger","constructor","hostRef","this","active","size","disabled","class","tv","slots","tab","borderLine","variants","small","medium","large","true","false","defaultVariants","twMerge","handleClick","bcmTabSelected","emit","value","render","h","Host","key","role","toString","part","onClick"],"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}"],"mappings":"oGAAA,MAAMA,EAAiB,
|
|
1
|
+
{"version":3,"names":["tabsTriggerCss","BcmTabsTriggerStyle0","BcmTabsTrigger","constructor","hostRef","this","active","size","disabled","class","tv","slots","tab","borderLine","variants","small","medium","large","true","false","defaultVariants","twMerge","handleClick","bcmTabSelected","emit","value","render","h","Host","key","role","toString","part","onClick"],"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}"],"mappings":"oGAAA,MAAMA,EAAiB,g9DACvB,MAAAC,EAAeD,E,MCWFE,EAAc,MAL3B,WAAAC,CAAAC,G,yDAqBIC,KAAAC,OAAkB,MAMlBD,KAAAE,KAAqC,SAMrCF,KAAAG,SAAoB,MAyBZH,KAAAI,MAAQC,EACZ,CACIC,MAAO,CACHC,IAAK,iKACLC,WAAY,mGAEhBC,SAAU,CACNP,KAAM,CACFQ,MAAO,CAAEH,IAAK,qBACdI,OAAQ,CAAEJ,IAAK,uBACfK,MAAO,CAAEL,IAAK,sBAElBN,OAAQ,CACJY,KAAM,CACFN,IAAK,sBAETO,MAAO,CACHP,IAAK,eAGbJ,SAAU,CACNU,KAAM,CACFN,IAAK,yCACLC,WAAY,qCAEhBM,MAAO,CACHP,IAAK,qDACLC,WAAY,sCAIxBO,gBAAiB,CACbb,KAAM,SACND,OAAQ,MACRE,SAAU,QAGlB,CACIa,QAAS,O,CA9CT,WAAAC,GACJ,GAAIjB,KAAKG,SAAU,OACnBH,KAAKkB,eAAeC,KAAKnB,KAAKoB,M,CAgDlC,MAAAC,GACI,MAAMd,IAAEA,EAAGC,WAAEA,GAAeR,KAAKI,MAAM,CACnCF,KAAMF,KAAKE,KACXD,OAAQD,KAAKC,OACbE,SAAUH,KAAKG,WAEnB,OACImB,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,MAAK,gBAAgBzB,KAAKC,OAAOyB,WAAU,gBAAiB1B,KAAKG,UACxEmB,EAAA,UAAAE,IAAA,2CAAQpB,MAAOG,IAAOJ,SAAUH,KAAKG,SAAUwB,KAAK,MAAMC,QAAS,IAAM5B,KAAKiB,eAC1EK,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKpB,MAAOI,M","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as s,g as i}from"./p-c9b736d9.js";import{b as a,c as o,o as h,f as r,s as l,a as c}from"./p-9594cebb.js";import{c as n}from"./p-5fcf77f9.js";const d=":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";const f=d;const m=class{constructor(s){t(this,s);this.bcmPopoverOpen=e(this,"bcmPopoverOpen",1);this.bcmPopoverClose=e(this,"bcmPopoverClose",1);this.size="medium";this.placement="top";this.trigger="click";this.hoverDelay=150;this.open=false;this.togglePopover=()=>{this.open=!this.open;if(this.open){this.bcmPopoverOpen.emit()}else{this.bcmPopoverClose.emit()}this.updatePosition()};this.showPopover=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=true;this.bcmPopoverOpen.emit();this.updatePosition()}),this.hoverDelay)};this.hidePopover=()=>{clearTimeout(this.hoverTimeout);this.hoverTimeout=setTimeout((()=>{this.open=false;this.bcmPopoverClose.emit()}),this.hoverDelay)};this.handleSlotChange=()=>{const t=this.el.shadowRoot.querySelector("slot");const e=t.assignedElements();this.targetElement=e[0];if(this.targetElement){this.targetElement.removeEventListener("click",this.togglePopover);this.targetElement.removeEventListener("mouseenter",this.showPopover);this.targetElement.removeEventListener("mouseleave",this.hidePopover);if(this.trigger==="click"){this.targetElement.addEventListener("click",this.togglePopover);this.targetElement.setAttribute("aria-expanded",this.open.toString())}if(this.trigger==="hover"){this.targetElement.addEventListener("mouseenter",this.showPopover);this.targetElement.addEventListener("mouseleave",this.hidePopover)}if(this.popoverElement&&!this.cleanupAutoUpdate){this.cleanupAutoUpdate=a(this.targetElement,this.popoverElement,(()=>this.updatePosition()))}}};this.handleOutsideClick=t=>{if(!this.el.contains(t.target)&&this.open){this.open=false}};this.updatePosition=async()=>{if(!this.targetElement||!this.popoverElement||!this.arrowElement)return;const{x:t,y:e,placement:s,middlewareData:i}=await o(this.targetElement,this.popoverElement,{placement:this.placement,middleware:[h(12),r({fallbackPlacements:["top","left","bottom","right"]}),l({padding:8}),c({element:this.arrowElement})]});Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`});const{x:a,y:n}=i.arrow||{x:0,y:0};const d=s.split("-")[0];const f={top:"bottom",right:"left",bottom:"top",left:"right"}[d];Object.assign(this.arrowElement.style,{left:a!=null?`${a}px`:"",top:n!=null?`${n}px`:"",[f]:"-4px"})};this.popoverClass=n({slots:{box:"bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]",header:"font-semibold text-color",content:"font-normal text-color",arrow:"absolute w-4 h-4 bg-[--popover-bg] transform rotate-45"},variants:{size:{small:{box:"text-size-3"},medium:{box:"text-size-4"},large:{box:"text-size-5"}},isOpen:{true:{box:"flex"},false:{box:"hidden"}}},defaultVariants:{size:"medium",isOpen:false}})}connectedCallback(){document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){var t;document.removeEventListener("click",this.handleOutsideClick);if(this.targetElement){this.targetElement.removeEventListener("click",this.togglePopover);this.targetElement.removeEventListener("mouseenter",this.showPopover);this.targetElement.removeEventListener("mouseleave",this.hidePopover)}(t=this.cleanupAutoUpdate)===null||t===void 0?void 0:t.call(this);this.cleanupAutoUpdate=null;clearTimeout(this.hoverTimeout)}async openPopup(){this.showPopover()}async closePopup(){this.hidePopover()}render(){const{box:t,header:e,content:i,arrow:a}=this.popoverClass({isOpen:this.open,size:this.size});return s("div",{key:"665229a272b741f98b8f2a6afdbfcd381c570139",class:"relative"},s("slot",{key:"4ea3bf8f4a1ea77814c2356e81edbe405eceb7d4",onSlotchange:()=>this.handleSlotChange()}),s("div",{key:"00c49e72fa5803d9999639918ba30dcd0714c4d4",part:"popover",class:t(),role:"dialog","aria-hidden":!this.open?"true":"false",ref:t=>this.popoverElement=t},s("div",{key:"f293355d74a3b5420368cdda0ddd0f2fd5f42010",class:a(),ref:t=>this.arrowElement=t,part:"arrow"}),s("div",{key:"c2ac22ed51b5a01a8832467ee717e6bf35ccbb69",class:e(),part:"header"},s("slot",{key:"434a1f3f4a013222935ee681feae058c7bbfd993",name:"header"},this.headerText)),s("div",{key:"950d3aa73579ae246f43aaa3d6101da1d6a7a601",class:i(),part:"content"},s("slot",{key:"fa43adb4816dae231c92d5de93432d0a76f211f9",name:"content"},this.message))))}get el(){return i(this)}};m.style=f;export{m as bcm_popover};
|
|
2
|
+
//# sourceMappingURL=p-9ab4d2be.entry.js.map
|