@bluevolt-tech/lumen 1.5.2 → 2.0.0

package/dist/components/bv-empty-state/bv-empty-state.js

@@ -85,7 +85,7 @@ function getIllustrationSvg(name) {
 }
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
-var bv_button_default = "/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Apps can override these three properties per-instance:\n\n   HTML:       <bv-button style=\"--bv-button-bg: #e53e3e;\">\n   Angular:    <bv-button [style.--bv-button-bg]=\"brandColor\">\n   JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n   Hover is auto-computed from the base colors via color-mix().\n   Override --bv-button-bg-hover / --bv-button-border-color-hover\n   if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n  /* Default values \u2014 map to global tokens (primary variant) */\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n  --bv-button-font-family: var(--bv-font-family-base);\n  --bv-button-font-size: var(--bv-font-size-sm);\n\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n  display: none !important;\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Each variant re-points the component tokens to different global\n   tokens. Apps can still override with inline styles \u2014 inline style\n   always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-border-color: var(--bv-color-secondary);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n  --bv-button-bg: var(--bv-color-tertiary);\n  --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n  --bv-button-bg: var(--bv-color-danger);\n  --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: transparent;\n  --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--bv-spacing-xs);\n  padding: 10px var(--bv-spacing-md);\n  min-height: 40px;\n  width: auto;\n  font-family: var(--bv-button-font-family);\n  font-size: var(--bv-button-font-size);\n  font-style: normal;\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  border: 1px solid var(--bv-button-border-color);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast),\n    opacity var(--bv-transition-fast);\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  outline: none;\n  box-sizing: border-box;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n  border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--bv-button-border-color);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n:host([size='sm']) .btn {\n  padding: 6px 12px;\n  min-height: 32px;\n  font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n  padding: 12px var(--bv-spacing-lg);\n  min-height: 48px;\n  font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-count {\n  opacity: 0.8;\n  font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var bv_button_default = "/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Apps can override these three properties per-instance:\n\n   HTML:       <bv-button style=\"--bv-button-bg: #e53e3e;\">\n   Angular:    <bv-button [style.--bv-button-bg]=\"brandColor\">\n   JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n   Hover is auto-computed from the base colors via color-mix().\n   Override --bv-button-bg-hover / --bv-button-border-color-hover\n   if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n  /* Default values \u2014 map to global tokens (primary variant) */\n  --bv-button-bg: var(--bv-color-primary);\n  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n  --bv-button-color: var(--bv-color-neutral-0);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n  --bv-button-font-family: var(--bv-font-family-base);\n  --bv-button-font-size: var(--bv-font-size-sm);\n\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n  display: none !important;\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Each variant re-points the component tokens to different global\n   tokens. Apps can still override with inline styles \u2014 inline style\n   always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n  --bv-button-bg: var(--bv-color-secondary);\n  --bv-button-border-color: var(--bv-color-secondary);\n  --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n  --bv-button-bg: var(--bv-color-tertiary);\n  --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n  --bv-button-bg: var(--bv-color-danger);\n  --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: transparent;\n  --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-primary-light);\n  --bv-button-color: var(--bv-color-primary);\n  --bv-button-border-color: var(--bv-color-primary);\n  --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n:host([variant='outline-secondary']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-neutral-700);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-300);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--bv-spacing-xs);\n  padding: 10px var(--bv-spacing-md);\n  min-height: 40px;\n  width: auto;\n  font-family: var(--bv-button-font-family);\n  font-size: var(--bv-button-font-size);\n  font-style: normal;\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  border: 1px solid var(--bv-button-border-color);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast),\n    opacity var(--bv-transition-fast);\n  white-space: nowrap;\n  user-select: none;\n  text-decoration: none;\n  outline: none;\n  box-sizing: border-box;\n  background: var(--bv-button-bg);\n  color: var(--bv-button-color);\n  box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n  background: var(--bv-button-bg-hover);\n  border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--bv-button-border-color);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n:host([size='sm']) .btn {\n  padding: 6px 12px;\n  min-height: 32px;\n  font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n  padding: 12px var(--bv-spacing-lg);\n  min-height: 48px;\n  font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-count {\n  opacity: 0.8;\n  font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 
 // components/bv-icon/icons.ts
 var icons = {

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.d.ts

@@ -1,26 +1,41 @@
 export interface FilterDropdownOption {
     label: string;
     value: string;
+    inactive?: boolean;
+    italic?: boolean;
+    depth?: number;
 }
 export declare class BvFilterDropdown extends HTMLElement {
-    static readonly observedAttributes: string[];
+    static readonly observedAttributes: readonly ["options", "value", "placeholder", "multi", "searchable", "show-inactive-toggle", "values", "disabled", "open"];
     private _rendered;
     private _labelEl;
     private _panelEl;
     private _options;
     private _value;
+    private _selectedValues;
+    private _showInactive;
+    private _searchQuery;
     private _offClick;
     constructor();
+    get value(): string;
+    get values(): string[];
+    get multi(): boolean;
+    get disabled(): boolean;
+    set disabled(v: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    get value(): string;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _parseValuesAttr;
     private _render;
     private _toggle;
     private _open;
     private _close;
     private _syncLabel;
-    private _renderOptions;
-    private _syncSelected;
-    private _select;
+    private _rebuildPanel;
+    private _buildSinglePanel;
+    private _syncSingleSelected;
+    private _selectSingle;
+    private _buildMultiPanel;
+    private _onSelectAll;
+    private _onToggleItem;
 }

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.js

@@ -1,51 +1,114 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-filter-dropdown/bv-filter-dropdown.css
-var bv_filter_dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 20px;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.trigger:hover {\n  background: var(--bv-color-secondary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  background: var(--bv-color-neutral-0);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-secondary-foreground);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n:host([open]) .trigger-chevron {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 Dropdown panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 100%;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n  padding: 4px 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 9px 14px;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--bv-transition-fast);\n}\n\n.option:hover {\n  background: var(--bv-color-secondary);\n}\n\n.option[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  background: var(--bv-color-secondary-light);\n}\n\n.option-check {\n  display: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n}\n\n.option[aria-selected='true'] .option-check {\n  display: flex;\n}\n";
+var bv_filter_dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 16px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-secondary-foreground);\n  line-height: 20px;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.trigger:hover {\n  background: var(--bv-color-secondary-light);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  background: var(--bv-color-neutral-0);\n}\n\n:host([disabled]) .trigger {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n  background: var(--bv-color-neutral-100);\n}\n\n:host([disabled]) .trigger:hover {\n  background: var(--bv-color-neutral-100);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-secondary-foreground);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n:host([open]) .trigger-chevron {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 Dropdown panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: max-content;\n  min-width: 100%;\n  max-width: 600px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n  padding: 4px 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Single-mode options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 9px 14px;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--bv-transition-fast);\n}\n\n.option:hover {\n  background: var(--bv-color-secondary);\n}\n\n.option[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  background: var(--bv-color-secondary-light);\n}\n\n.option-check {\n  display: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n}\n\n.option[aria-selected='true'] .option-check {\n  display: flex;\n}\n\n/* \u2500\u2500 Multi-mode search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.search-icon {\n  display: flex;\n  color: var(--bv-color-neutral-400);\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  background: transparent;\n  min-width: 0;\n}\n\n.search-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n/* \u2500\u2500 Multi-mode header (Select All + toggle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n}\n\n.select-all-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-700);\n  user-select: none;\n  flex: 1;\n  padding: 2px 0;\n}\n\n.select-all-row:hover {\n  color: var(--bv-color-neutral-900);\n}\n\n/* \u2500\u2500 Show Inactive toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.inactive-toggle-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.toggle-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n\n.toggle-track {\n  display: inline-flex;\n  align-items: center;\n  width: 28px;\n  height: 16px;\n  background: var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-full);\n  padding: 2px;\n  transition: background var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track {\n  background: var(--bv-color-primary);\n}\n\n.toggle-thumb {\n  width: 12px;\n  height: 12px;\n  background: var(--bv-color-neutral-0);\n  border-radius: var(--bv-radius-full);\n  transition: transform var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.toggle-input:checked ~ .toggle-track .toggle-thumb {\n  transform: translateX(12px);\n}\n\n.toggle-text {\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Panel divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel-divider {\n  height: 1px;\n  background: var(--bv-color-neutral-200);\n  margin: 0;\n}\n\n/* \u2500\u2500 Multi-mode options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.options-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.option--multi {\n  justify-content: flex-start;\n  white-space: normal;\n  min-width: 200px;\n}\n\n/* Depth-based indentation */\n.option--multi[data-depth='1'] {\n  padding-left: 30px;\n}\n\n.option--multi[data-depth='2'] {\n  padding-left: 46px;\n}\n\n/* In multi mode, checkbox is always visible */\n.option--multi .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.option--multi .option-check.checked {\n  background: var(--bv-color-primary);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n\n.option--multi:hover .option-check:not(.checked) {\n  border-color: var(--bv-color-primary);\n}\n\n/* In multi mode, override the single-mode aria-selected styles */\n.option--multi[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-regular);\n  background: transparent;\n  color: var(--bv-color-neutral-700);\n}\n\n.option--multi:hover {\n  background: var(--bv-color-secondary);\n}\n\n/* Inactive options */\n.option--inactive .option-label {\n  color: var(--bv-color-neutral-400);\n}\n\n/* Italic labels (Uncategorized, Ungrouped) */\n.option-label--italic {\n  font-style: italic;\n  color: var(--bv-color-neutral-500);\n}\n\n.option-label {\n  line-height: 1.4;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Select All row checkbox */\n.select-all-row .option-check {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-sm);\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--bv-color-neutral-0);\n  color: transparent;\n  transition:\n    border-color var(--bv-transition-fast),\n    background var(--bv-transition-fast);\n}\n\n.select-all-row .option-check.checked {\n  background: var(--bv-color-primary);\n  border-color: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n";
 
 // components/bv-filter-dropdown/bv-filter-dropdown.ts
 var CHEVRON_DOWN = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>`;
 var CHECK = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+var SEARCH_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>`;
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_filter_dropdown_default);
+  }
+  return _sheet;
+}
 var BvFilterDropdown = class extends HTMLElement {
-  static observedAttributes = ["options", "value", "placeholder"];
+  static observedAttributes = [
+    "options",
+    "value",
+    "placeholder",
+    "multi",
+    "searchable",
+    "show-inactive-toggle",
+    "values",
+    "disabled",
+    "open"
+  ];
   _rendered = false;
   _labelEl = null;
   _panelEl = null;
   _options = [];
+  // Single-select state
   _value = "";
+  // Multi-select state — null means "all selected" (no filter applied)
+  _selectedValues = null;
+  _showInactive = false;
+  _searchQuery = "";
   _offClick = null;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
-    if ("replaceSync" in CSSStyleSheet.prototype) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(bv_filter_dropdown_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
     }
   }
+  get value() {
+    return this._value;
+  }
+  get values() {
+    return this._selectedValues ? [...this._selectedValues] : [];
+  }
+  get multi() {
+    return this.hasAttribute("multi");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    if (v) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
   connectedCallback() {
     this._render();
   }
   disconnectedCallback() {
     if (this._offClick) document.removeEventListener("click", this._offClick);
   }
-  get value() {
-    return this._value;
-  }
   attributeChangedCallback(name, _old, val) {
+    var _a;
     if (name === "options") {
       try {
         this._options = JSON.parse(val ?? "[]");
       } catch {
         this._options = [];
       }
-      if (this._rendered) this._renderOptions();
+      if (this._rendered) this._rebuildPanel();
     }
-    if (name === "value") {
+    if (name === "value" && !this.multi) {
       this._value = val ?? "";
-      if (this._rendered) this._syncLabel();
-      if (this._rendered) this._syncSelected();
+      if (this._rendered) {
+        this._syncLabel();
+        this._syncSingleSelected();
+      }
     }
-    if (name === "placeholder" && this._rendered) {
-      this._syncLabel();
+    if (name === "values" && this.multi) {
+      this._parseValuesAttr(val);
+      if (this._rendered) {
+        this._syncLabel();
+        this._rebuildPanel();
+      }
+    }
+    if (name === "placeholder" && this._rendered) this._syncLabel();
+    if ((name === "multi" || name === "searchable" || name === "show-inactive-toggle") && this._rendered) {
+      this._rebuildPanel();
+    }
+    if (name === "open" && this._rendered) {
+      const trigger = this.shadowRoot.querySelector(".trigger");
+      if (trigger) trigger.setAttribute("aria-expanded", val !== null ? "true" : "false");
+      if (val === null) (_a = this._panelEl) == null ? void 0 : _a.style.removeProperty("display");
+    }
+  }
+  _parseValuesAttr(val) {
+    if (!val) {
+      this._selectedValues = null;
+      return;
+    }
+    try {
+      const arr = JSON.parse(val);
+      this._selectedValues = arr.length === 0 ? null : new Set(arr);
+    } catch {
+      this._selectedValues = null;
     }
   }
   _render() {
@@ -63,6 +126,7 @@ var BvFilterDropdown = class extends HTMLElement {
       this._options = [];
     }
     this._value = this.getAttribute("value") ?? "";
+    this._parseValuesAttr(this.getAttribute("values"));
     const trigger = document.createElement("button");
     trigger.type = "button";
     trigger.className = "trigger";
@@ -82,10 +146,11 @@ var BvFilterDropdown = class extends HTMLElement {
     const panel = document.createElement("div");
     panel.className = "panel";
     panel.setAttribute("role", "listbox");
+    if (this.multi) panel.setAttribute("aria-multiselectable", "true");
     this._panelEl = panel;
     shadow.append(trigger, panel);
     this._syncLabel();
-    this._renderOptions();
+    this._rebuildPanel();
     this._offClick = (e) => {
       if (!this.contains(e.target) && !shadow.contains(e.target)) {
         this._close();
@@ -97,6 +162,7 @@ var BvFilterDropdown = class extends HTMLElement {
     });
   }
   _toggle() {
+    if (this.hasAttribute("disabled")) return;
     if (this.hasAttribute("open")) this._close();
     else this._open();
   }
@@ -104,6 +170,7 @@ var BvFilterDropdown = class extends HTMLElement {
     var _a;
     this.setAttribute("open", "");
     (_a = this.shadowRoot.querySelector(".trigger")) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+    this.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
   }
   _close() {
     var _a;
@@ -112,28 +179,47 @@ var BvFilterDropdown = class extends HTMLElement {
   }
   _syncLabel() {
     if (!this._labelEl) return;
-    const match = this._options.find((o) => o.value === this._value);
-    this._labelEl.textContent = (match == null ? void 0 : match.label) ?? this.getAttribute("placeholder") ?? "Select";
+    const placeholder = this.getAttribute("placeholder") ?? "All";
+    if (this.multi) {
+      if (!this._selectedValues || this._selectedValues.size === 0) {
+        this._labelEl.textContent = placeholder;
+      } else {
+        this._labelEl.textContent = `${this._selectedValues.size} selected`;
+      }
+    } else {
+      const match = this._options.find((o) => o.value === this._value);
+      this._labelEl.textContent = (match == null ? void 0 : match.label) ?? placeholder;
+    }
   }
-  _renderOptions() {
+  _rebuildPanel() {
     if (!this._panelEl) return;
     this._panelEl.innerHTML = "";
+    if (this.multi) {
+      this._buildMultiPanel(this._panelEl);
+    } else {
+      this._buildSinglePanel(this._panelEl);
+    }
+  }
+  // ── Single mode ───────────────────────────────────────────
+  _buildSinglePanel(panel) {
     for (const opt of this._options) {
       const item = document.createElement("div");
       item.className = "option";
       item.setAttribute("role", "option");
       item.setAttribute("aria-selected", opt.value === this._value ? "true" : "false");
+      item.title = opt.label;
       const text = document.createElement("span");
+      text.className = "option-label";
       text.textContent = opt.label;
       const check = document.createElement("span");
       check.className = "option-check";
       check.innerHTML = CHECK;
       item.append(text, check);
-      item.addEventListener("click", () => this._select(opt));
-      this._panelEl.appendChild(item);
+      item.addEventListener("click", () => this._selectSingle(opt));
+      panel.appendChild(item);
     }
   }
-  _syncSelected() {
+  _syncSingleSelected() {
     var _a;
     (_a = this._panelEl) == null ? void 0 : _a.querySelectorAll(".option").forEach((el, i) => {
       const opt = this._options[i];
@@ -141,11 +227,11 @@ var BvFilterDropdown = class extends HTMLElement {
     });
     this._syncLabel();
   }
-  _select(opt) {
+  _selectSingle(opt) {
     this._value = opt.value;
     this.setAttribute("value", opt.value);
     this._syncLabel();
-    this._syncSelected();
+    this._syncSingleSelected();
     this._close();
     this.dispatchEvent(
       new CustomEvent("bv-change", {
@@ -155,6 +241,158 @@ var BvFilterDropdown = class extends HTMLElement {
       })
     );
   }
+  // ── Multi mode ────────────────────────────────────────────
+  _buildMultiPanel(panel) {
+    const searchable = this.hasAttribute("searchable");
+    const showInactiveToggle = this.hasAttribute("show-inactive-toggle");
+    if (searchable) {
+      const searchWrap = document.createElement("div");
+      searchWrap.className = "panel-search";
+      const searchIcon = document.createElement("span");
+      searchIcon.className = "search-icon";
+      searchIcon.innerHTML = SEARCH_ICON;
+      const searchInput = document.createElement("input");
+      searchInput.type = "text";
+      searchInput.className = "search-input";
+      searchInput.placeholder = "Search...";
+      searchInput.value = this._searchQuery;
+      searchInput.setAttribute("aria-label", "Search options");
+      searchInput.addEventListener("input", (e) => {
+        var _a;
+        e.stopPropagation();
+        this._searchQuery = e.target.value;
+        this._rebuildPanel();
+        const restored = (_a = this._panelEl) == null ? void 0 : _a.querySelector(".search-input");
+        if (restored) {
+          restored.focus();
+          restored.setSelectionRange(restored.value.length, restored.value.length);
+        }
+      });
+      searchInput.addEventListener("click", (e) => e.stopPropagation());
+      searchWrap.append(searchIcon, searchInput);
+      panel.appendChild(searchWrap);
+    }
+    const header = document.createElement("div");
+    header.className = "panel-header";
+    const allSelected = this._selectedValues === null;
+    const selectAllBtn = document.createElement("div");
+    selectAllBtn.className = "select-all-row";
+    selectAllBtn.setAttribute("role", "option");
+    selectAllBtn.setAttribute("aria-selected", allSelected ? "true" : "false");
+    const saCheck = document.createElement("span");
+    saCheck.className = allSelected ? "option-check checked" : "option-check";
+    saCheck.innerHTML = CHECK;
+    const saText = document.createElement("span");
+    saText.className = "option-label";
+    saText.textContent = "Select All";
+    selectAllBtn.append(saCheck, saText);
+    selectAllBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._onSelectAll();
+    });
+    header.appendChild(selectAllBtn);
+    if (showInactiveToggle) {
+      const toggleLabel = document.createElement("label");
+      toggleLabel.className = "inactive-toggle-label";
+      const toggleInput = document.createElement("input");
+      toggleInput.type = "checkbox";
+      toggleInput.className = "toggle-input";
+      toggleInput.checked = this._showInactive;
+      toggleInput.setAttribute("aria-label", "Show inactive");
+      toggleInput.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this._showInactive = e.target.checked;
+        this._rebuildPanel();
+      });
+      toggleInput.addEventListener("click", (e) => e.stopPropagation());
+      const toggleTrack = document.createElement("span");
+      toggleTrack.className = "toggle-track";
+      const toggleThumb = document.createElement("span");
+      toggleThumb.className = "toggle-thumb";
+      toggleTrack.appendChild(toggleThumb);
+      const toggleText = document.createElement("span");
+      toggleText.className = "toggle-text";
+      toggleText.textContent = "Show Inactive";
+      toggleLabel.append(toggleInput, toggleTrack, toggleText);
+      header.appendChild(toggleLabel);
+    }
+    panel.appendChild(header);
+    const divider = document.createElement("div");
+    divider.className = "panel-divider";
+    panel.appendChild(divider);
+    const optList = document.createElement("div");
+    optList.className = "options-list";
+    const query = this._searchQuery.toLowerCase().trim();
+    for (const opt of this._options) {
+      if (opt.inactive && !this._showInactive) continue;
+      if (query && !opt.label.toLowerCase().includes(query)) continue;
+      const item = document.createElement("div");
+      item.className = "option option--multi";
+      if (opt.inactive) item.classList.add("option--inactive");
+      item.setAttribute("role", "option");
+      item.setAttribute("data-value", opt.value);
+      item.title = opt.label;
+      const depth = opt.depth ?? 0;
+      if (depth > 0) item.setAttribute("data-depth", String(depth));
+      const isChecked = !this._selectedValues || this._selectedValues.has(opt.value);
+      item.setAttribute("aria-selected", isChecked ? "true" : "false");
+      const checkSpan = document.createElement("span");
+      checkSpan.className = isChecked ? "option-check checked" : "option-check";
+      checkSpan.innerHTML = CHECK;
+      const labelSpan = document.createElement("span");
+      labelSpan.className = opt.italic ? "option-label option-label--italic" : "option-label";
+      labelSpan.textContent = opt.label;
+      item.append(checkSpan, labelSpan);
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._onToggleItem(opt);
+      });
+      optList.appendChild(item);
+    }
+    panel.appendChild(optList);
+  }
+  _onSelectAll() {
+    this._selectedValues = this._selectedValues === null ? /* @__PURE__ */ new Set() : null;
+    this._syncLabel();
+    this._rebuildPanel();
+    this.dispatchEvent(
+      new CustomEvent("bv-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          values: this._selectedValues ? [...this._selectedValues] : [],
+          allSelected: this._selectedValues === null
+        }
+      })
+    );
+  }
+  _onToggleItem(opt) {
+    const allActive = this._options.filter((o) => !o.inactive || this._showInactive);
+    if (!this._selectedValues) {
+      this._selectedValues = new Set(allActive.map((o) => o.value).filter((v) => v !== opt.value));
+    } else if (this._selectedValues.has(opt.value)) {
+      this._selectedValues.delete(opt.value);
+      if (this._selectedValues.size === 0) {
+      }
+    } else {
+      this._selectedValues.add(opt.value);
+      if (this._selectedValues.size === allActive.length) {
+        this._selectedValues = null;
+      }
+    }
+    this._syncLabel();
+    this._rebuildPanel();
+    this.dispatchEvent(
+      new CustomEvent("bv-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          values: this._selectedValues ? [...this._selectedValues] : [],
+          allSelected: this._selectedValues === null
+        }
+      })
+    );
+  }
 };
 if (!customElements.get("bv-filter-dropdown")) {
   customElements.define("bv-filter-dropdown", BvFilterDropdown);

package/dist/components/bv-filter-panel/bv-filter-panel.js

@@ -2,7 +2,7 @@
 var bv_filter_panel_default = ":host {\n  display: block;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n}\n\n/* Self-hide when there are no groups to show. */\n:host([empty]) {\n  display: none;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.panel-title {\n  margin: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.clear-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-primary);\n  cursor: pointer;\n}\n\n.clear-btn:hover {\n  text-decoration: underline;\n}\n\n.groups {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n.group {\n}\n\n.group-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding-bottom: var(--bv-spacing-sm);\n}\n\n.group-label {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.group-chevron {\n  width: 20px;\n  height: 20px;\n  color: var(--bv-color-neutral-500);\n  transition: transform var(--bv-transition-fast);\n}\n\n.group-chevron.collapsed {\n  transform: rotate(180deg);\n}\n\n.group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.group-options.hidden {\n  display: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-xs);\n}\n\n.option bv-checkbox {\n  flex: 1;\n  min-width: 0;\n}\n\n.option-count {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bv-spacing-sm);\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-full);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-600);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Loading skeleton */\n.skeleton {\n  display: none;\n  flex-direction: column;\n  gap: var(--bv-spacing-lg);\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n}\n\n:host([loading]) .groups {\n  display: none;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n.skeleton-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-heading {\n  height: 20px;\n  width: 55%;\n  margin-bottom: 4px;\n}\n\n.skeleton-short-line {\n  width: 70%;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-checkbox/bv-checkbox.css
-var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Size tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.wrap {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n}\n";
+var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Size tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.wrap {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n";
 
 // components/bv-checkbox/bv-checkbox.ts
 var CHECK_ICON = `<svg viewBox="0 0 11.3333 8.41667" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/components/bv-input/bv-input.d.ts

@@ -0,0 +1,24 @@
+export type InputType = 'text' | 'email' | 'password' | 'number';
+export interface InputChangeDetail {
+    value: string;
+}
+export declare class BvInput extends HTMLElement {
+    static readonly observedAttributes: readonly ["label", "type", "placeholder", "value", "name", "error", "required", "disabled"];
+    private _rendered;
+    private _labelEl;
+    private _inputEl;
+    private _errorEl;
+    constructor();
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+    private _syncLabel;
+    private _syncError;
+    private _syncDisabled;
+}