@bluevolt-tech/lumen 1.5.1 → 2.0.0

package/dist/components/bv-date-range-picker/bv-date-range-picker.js

@@ -0,0 +1,778 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-date-range-picker/bv-date-range-picker.css
+var bv_date_range_picker_default = ":host {\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Picker shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.picker {\n  display: flex;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-xl);\n  box-shadow: var(--bv-shadow-lg);\n  overflow: hidden;\n  user-select: none;\n}\n\n/* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 152px;\n  flex-shrink: 0;\n  padding: var(--bv-spacing-sm) 0;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn {\n  display: block;\n  width: 100%;\n  padding: 10px var(--bv-spacing-md);\n  text-align: left;\n  background: none;\n  border: none;\n  font-family: inherit;\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  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  white-space: nowrap;\n}\n\n.preset-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.sidebar-sep {\n  margin: var(--bv-spacing-xs) 0;\n  border: none;\n  border-top: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn.active {\n  background: var(--bv-color-secondary-light);\n  color: var(--bv-color-neutral-900);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n/* \u2500\u2500 Main 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\u2500\u2500\u2500\u2500\u2500 */\n\n.main {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n/* \u2500\u2500 Calendars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.calendars {\n  display: flex;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.calendar {\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  flex: 1;\n}\n\n.calendar--left {\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* \u2500\u2500 Calendar header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--bv-spacing-md);\n}\n\n.calendar-title {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n}\n\n.nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-md);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.nav-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-800);\n}\n\n/* \u2500\u2500 Weekdays row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n  margin-bottom: var(--bv-spacing-xs);\n}\n\n.weekday {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n}\n\n/* \u2500\u2500 Days grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n}\n\n/* \u2500\u2500 Day cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.day {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  border-radius: 0;\n  transition: background var(--bv-transition-fast);\n}\n\n.day:hover:not(.start):not(.end) .day-inner {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.day--blank {\n  pointer-events: none;\n}\n\n.day.today:not(.start):not(.end) .day-inner::after {\n  content: '';\n  position: absolute;\n  bottom: 2px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 4px;\n  height: 4px;\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Range band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.day.in-range {\n  background: var(--bv-color-primary-light);\n}\n\n.day.in-range.week-start,\n.day.range-end.week-start {\n  border-radius: var(--bv-radius-full) 0 0 var(--bv-radius-full);\n}\n\n.day.in-range.week-end,\n.day.range-start.week-end {\n  border-radius: 0 var(--bv-radius-full) var(--bv-radius-full) 0;\n}\n\n.day.range-start {\n  background: linear-gradient(to right, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n.day.range-end {\n  background: linear-gradient(to left, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n/* \u2500\u2500 Day inner (circle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.day-inner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--bv-radius-full);\n  z-index: 1;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n.day.start .day-inner,\n.day.end .day-inner {\n  background: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n  font-weight: var(--bv-font-weight-semibold);\n}\n\n.day.start:hover .day-inner,\n.day.end:hover .day-inner {\n  background: var(--bv-color-primary-dark);\n}\n\n/* \u2500\u2500 5-year warning banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-wrap {\n  display: none;\n  padding: var(--bv-spacing-lg);\n}\n\n.picker--with-banner .banner-wrap {\n  display: block;\n}\n\n/* Footer loses its top padding when the banner is shown above it */\n.picker--with-banner .footer {\n  padding-top: 0;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-lg);\n  gap: var(--bv-spacing-md);\n}\n\n/* \u2500\u2500 Date inputs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.date-inputs {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n}\n\n.date-input {\n  width: 112px;\n  height: 36px;\n  padding: 0 var(--bv-spacing-sm);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  text-align: center;\n  outline: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.date-input:focus {\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n.date-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.date-sep {\n  color: var(--bv-color-neutral-400);\n  font-size: var(--bv-font-size-sm);\n}\n\n/* \u2500\u2500 Action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.footer-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  padding: 0 var(--bv-spacing-md);\n  border-radius: var(--bv-radius-lg);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n.btn-cancel {\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  color: var(--bv-color-neutral-700);\n}\n\n.btn-cancel:hover {\n  background: var(--bv-color-secondary);\n  border-color: var(--bv-color-neutral-400);\n}\n\n.btn-apply {\n  background: var(--bv-color-primary);\n  border: 1px solid var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n\n.btn-apply:hover:not(:disabled) {\n  background: var(--bv-color-primary-dark);\n  border-color: var(--bv-color-primary-dark);\n}\n\n.btn-apply:disabled {\n  background: var(--bv-color-neutral-300);\n  border-color: var(--bv-color-neutral-300);\n  cursor: not-allowed;\n}\n";
+
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-alert-banner/bv-alert-banner.css
+var bv_alert_banner_default = ":host {\n  --banner-bg: var(--bv-color-neutral-0);\n  --banner-border: var(--bv-color-neutral-200);\n  --banner-color: var(--bv-color-neutral-700);\n  --banner-color-subtle: var(--bv-color-neutral-500);\n  --banner-icon-color: var(--bv-color-neutral-500);\n\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='primary']) {\n  --banner-bg: var(--bv-color-primary-50);\n  --banner-border: color-mix(in srgb, var(--bv-color-primary) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-primary);\n  --banner-color-subtle: var(--bv-color-primary);\n  --banner-icon-color: var(--bv-color-primary);\n}\n\n:host([variant='error']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-danger-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-danger) 45%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-danger-dark);\n  --banner-color-subtle: var(--bv-color-danger-dark);\n  --banner-icon-color: var(--bv-color-danger);\n}\n\n:host([variant='warning']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-warning-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-warning) 50%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-warning-dark);\n  --banner-color-subtle: var(--bv-color-warning-dark);\n  --banner-icon-color: var(--bv-color-warning);\n}\n\n:host([variant='success']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-success-light) 30%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-success) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-success-dark);\n  --banner-color-subtle: var(--bv-color-success-dark);\n  --banner-icon-color: var(--bv-color-success);\n}\n\n/* \u2500\u2500 Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bv-spacing-md);\n  padding: var(--bv-spacing-md);\n  background: var(--banner-bg);\n  border: 1px solid var(--banner-border);\n  border-radius: var(--bv-radius-xl);\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 */\n\n.banner-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--banner-icon-color);\n  line-height: 0;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n  min-width: 0;\n}\n\n.banner-heading {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-heading[hidden] {\n  display: none;\n}\n\n.banner-message {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-message[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  margin-top: var(--bv-spacing-xs);\n}\n\n.banner-actions[hidden] {\n  display: none;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n  transition: opacity 0.15s;\n}\n\n.action-btn[hidden] {\n  display: none;\n}\n\n.action-btn:hover {\n  opacity: 0.75;\n}\n\n.action-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n  border-radius: var(--bv-radius-sm);\n}\n\n/* \u2500\u2500 Close 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 */\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  margin: -6px -6px 0 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  color: var(--banner-icon-color);\n  transition: background 0.15s;\n  padding: 0;\n}\n\n.close-btn[hidden] {\n  display: none;\n}\n\n.close-btn:hover {\n  background: color-mix(in srgb, var(--banner-border) 60%, var(--banner-bg));\n}\n\n.close-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n}\n";
+
+// components/bv-alert-banner/bv-alert-banner.ts
+var ICON_INFO = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`;
+var ICON_ALERT_CIRCLE = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+var ICON_ALERT_TRIANGLE = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+var ICON_CHECK_CIRCLE = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`;
+var ICON_X = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+var ICON_ARROW_RIGHT = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>`;
+var VARIANT_ICONS = {
+  default: ICON_INFO,
+  primary: ICON_INFO,
+  error: ICON_ALERT_CIRCLE,
+  warning: ICON_ALERT_TRIANGLE,
+  success: ICON_CHECK_CIRCLE
+};
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_alert_banner_default);
+  }
+  return _sheet;
+}
+var BvAlertBanner = class extends HTMLElement {
+  static observedAttributes = [
+    "variant",
+    "heading",
+    "message",
+    "dismissable",
+    "action-label",
+    "secondary-action-label"
+  ];
+  _rendered = false;
+  _iconEl = null;
+  _headingEl = null;
+  _messageEl = null;
+  _actionsEl = null;
+  _primaryActionBtn = null;
+  _secondaryActionBtn = null;
+  _closeBtn = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get variant() {
+    return this.getAttribute("variant") ?? "default";
+  }
+  set variant(v) {
+    this.setAttribute("variant", v);
+  }
+  get heading() {
+    return this.getAttribute("heading") ?? "";
+  }
+  set heading(v) {
+    this.setAttribute("heading", v);
+  }
+  get message() {
+    return this.getAttribute("message") ?? "";
+  }
+  set message(v) {
+    this.setAttribute("message", v);
+  }
+  get dismissable() {
+    return this.hasAttribute("dismissable");
+  }
+  set dismissable(v) {
+    if (v) this.setAttribute("dismissable", "");
+    else this.removeAttribute("dismissable");
+  }
+  get actionLabel() {
+    return this.getAttribute("action-label") ?? "";
+  }
+  set actionLabel(v) {
+    this.setAttribute("action-label", v);
+  }
+  get secondaryActionLabel() {
+    return this.getAttribute("secondary-action-label") ?? "";
+  }
+  set secondaryActionLabel(v) {
+    this.setAttribute("secondary-action-label", v);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "variant") this._syncVariant();
+    if (name === "heading") this._syncHeading();
+    if (name === "message") this._syncMessage();
+    if (name === "dismissable") this._syncClose();
+    if (name === "action-label" || name === "secondary-action-label") this._syncActions();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_alert_banner_default;
+      shadow.appendChild(s);
+    }
+    const banner = document.createElement("div");
+    banner.className = "banner";
+    banner.setAttribute("role", "alert");
+    const iconWrap = document.createElement("span");
+    iconWrap.className = "banner-icon";
+    this._iconEl = iconWrap;
+    const content = document.createElement("div");
+    content.className = "banner-content";
+    const heading = document.createElement("p");
+    heading.className = "banner-heading";
+    this._headingEl = heading;
+    const message = document.createElement("p");
+    message.className = "banner-message";
+    this._messageEl = message;
+    const actions = document.createElement("div");
+    actions.className = "banner-actions";
+    this._actionsEl = actions;
+    const primaryBtn = document.createElement("button");
+    primaryBtn.type = "button";
+    primaryBtn.className = "action-btn action-btn--primary";
+    primaryBtn.addEventListener("click", () => {
+      this.dispatchEvent(
+        new CustomEvent("bv-action", {
+          bubbles: true,
+          composed: true,
+          detail: { action: "primary" }
+        })
+      );
+    });
+    this._primaryActionBtn = primaryBtn;
+    const secondaryBtn = document.createElement("button");
+    secondaryBtn.type = "button";
+    secondaryBtn.className = "action-btn action-btn--secondary";
+    secondaryBtn.addEventListener("click", () => {
+      this.dispatchEvent(
+        new CustomEvent("bv-action", {
+          bubbles: true,
+          composed: true,
+          detail: { action: "secondary" }
+        })
+      );
+    });
+    this._secondaryActionBtn = secondaryBtn;
+    actions.append(primaryBtn, secondaryBtn);
+    content.append(heading, message, actions);
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "close-btn";
+    closeBtn.setAttribute("aria-label", "Dismiss");
+    closeBtn.innerHTML = ICON_X;
+    closeBtn.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("bv-dismiss", { bubbles: true, composed: true }));
+    });
+    this._closeBtn = closeBtn;
+    banner.append(iconWrap, content, closeBtn);
+    shadow.appendChild(banner);
+    this._syncVariant();
+    this._syncHeading();
+    this._syncMessage();
+    this._syncActions();
+    this._syncClose();
+  }
+  _syncVariant() {
+    if (!this._iconEl) return;
+    const v = this.variant;
+    this._iconEl.innerHTML = VARIANT_ICONS[v] ?? ICON_INFO;
+  }
+  _syncHeading() {
+    if (!this._headingEl) return;
+    const text = this.heading;
+    this._headingEl.textContent = text;
+    this._headingEl.hidden = !text;
+  }
+  _syncMessage() {
+    if (!this._messageEl) return;
+    const text = this.message;
+    this._messageEl.textContent = text;
+    this._messageEl.hidden = !text;
+  }
+  _syncActions() {
+    if (!this._actionsEl || !this._primaryActionBtn || !this._secondaryActionBtn) return;
+    const primary = this.actionLabel;
+    const secondary = this.secondaryActionLabel;
+    this._primaryActionBtn.textContent = primary;
+    this._primaryActionBtn.hidden = !primary;
+    this._secondaryActionBtn.innerHTML = secondary ? `<span>${secondary}</span>${ICON_ARROW_RIGHT}` : "";
+    this._secondaryActionBtn.hidden = !secondary;
+    this._actionsEl.hidden = !primary && !secondary;
+  }
+  _syncClose() {
+    if (!this._closeBtn) return;
+    this._closeBtn.hidden = !this.dismissable;
+  }
+};
+if (!customElements.get("bv-alert-banner")) {
+  customElements.define("bv-alert-banner", BvAlertBanner);
+}
+
+// components/bv-date-range-picker/bv-date-range-picker.ts
+var PRESETS = [
+  { key: "last-30-days", label: "Last 30 Days" },
+  { key: "last-90-days", label: "Last 90 Days" },
+  { key: "last-365-days", label: "Last 365 Days", separator: true },
+  { key: "last-month", label: "Last Month" },
+  { key: "last-quarter", label: "Last Quarter" },
+  { key: "last-year", label: "Last Year" },
+  { key: "year-to-date", label: "Year to Date", separator: true },
+  { key: "custom", label: "Custom Range" }
+];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sat", "Su"];
+var CHEVRON_LEFT = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>`;
+var CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>`;
+var _sheet2 = null;
+function getSheet2() {
+  if (!_sheet2) {
+    _sheet2 = new CSSStyleSheet();
+    _sheet2.replaceSync(bv_date_range_picker_default);
+  }
+  return _sheet2;
+}
+function dateToIso(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function formatDisplay(iso) {
+  if (!iso) return "";
+  const [y, m, d] = iso.split("-");
+  return `${m}/${d}/${y}`;
+}
+function parseDisplay(str) {
+  const match = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) return "";
+  const m = match[1].padStart(2, "0");
+  const d = match[2].padStart(2, "0");
+  return `${match[3]}-${m}-${d}`;
+}
+function getPresetDates(key) {
+  const now = /* @__PURE__ */ new Date();
+  now.setHours(0, 0, 0, 0);
+  const today = dateToIso(now);
+  switch (key) {
+    case "last-30-days": {
+      const s = new Date(now);
+      s.setDate(s.getDate() - 29);
+      return { start: dateToIso(s), end: today };
+    }
+    case "last-90-days": {
+      const s = new Date(now);
+      s.setDate(s.getDate() - 89);
+      return { start: dateToIso(s), end: today };
+    }
+    case "last-365-days": {
+      const s = new Date(now);
+      s.setDate(s.getDate() - 364);
+      return { start: dateToIso(s), end: today };
+    }
+    case "last-month": {
+      const s = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      const e = new Date(now.getFullYear(), now.getMonth(), 0);
+      return { start: dateToIso(s), end: dateToIso(e) };
+    }
+    case "last-quarter": {
+      const q = Math.floor(now.getMonth() / 3);
+      const qs = q === 0 ? new Date(now.getFullYear() - 1, 9, 1) : new Date(now.getFullYear(), (q - 1) * 3, 1);
+      const qe = new Date(qs.getFullYear(), qs.getMonth() + 3, 0);
+      return { start: dateToIso(qs), end: dateToIso(qe) };
+    }
+    case "last-year": {
+      const y = now.getFullYear() - 1;
+      return { start: `${y}-01-01`, end: `${y}-12-31` };
+    }
+    case "year-to-date":
+      return { start: `${now.getFullYear()}-01-01`, end: today };
+    default:
+      return { start: "", end: "" };
+  }
+}
+var BvDateRangePicker = class extends HTMLElement {
+  static observedAttributes = ["start", "end", "preset"];
+  _rendered = false;
+  _today;
+  _start = "";
+  _end = "";
+  _preset = "";
+  _picking = false;
+  _hover = "";
+  _leftYear;
+  _leftMonth;
+  _leftGrid = null;
+  _rightGrid = null;
+  _leftTitle = null;
+  _rightTitle = null;
+  _startInput = null;
+  _endInput = null;
+  _applyBtn = null;
+  _bannerEl = null;
+  _leftDayMap = /* @__PURE__ */ new Map();
+  _rightDayMap = /* @__PURE__ */ new Map();
+  constructor() {
+    super();
+    const now = /* @__PURE__ */ new Date();
+    now.setHours(0, 0, 0, 0);
+    this._today = dateToIso(now);
+    this._leftYear = now.getFullYear();
+    this._leftMonth = now.getMonth();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet2()];
+    }
+  }
+  get start() {
+    return this._start;
+  }
+  set start(v) {
+    this.setAttribute("start", v);
+  }
+  get end() {
+    return this._end;
+  }
+  set end(v) {
+    this.setAttribute("end", v);
+  }
+  get preset() {
+    return this._preset;
+  }
+  set preset(v) {
+    this.setAttribute("preset", v);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (name === "start") this._start = val ?? "";
+    if (name === "end") this._end = val ?? "";
+    if (name === "preset") this._preset = val ?? "";
+    if (!this._rendered) return;
+    this._syncCalendars();
+    this._syncInputs();
+    this._syncPresets();
+    this._syncApply();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    this._start = this.getAttribute("start") ?? "";
+    this._end = this.getAttribute("end") ?? "";
+    this._preset = this.getAttribute("preset") ?? "";
+    if (this._start) {
+      const parts = this._start.split("-");
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      if (!isNaN(y) && !isNaN(m)) {
+        this._leftYear = y;
+        this._leftMonth = m;
+      }
+    }
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_date_range_picker_default;
+      shadow.appendChild(s);
+    }
+    const picker = document.createElement("div");
+    picker.className = "picker";
+    const sidebar = document.createElement("div");
+    sidebar.className = "sidebar";
+    for (const p of PRESETS) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "preset-btn";
+      btn.dataset["preset"] = p.key;
+      btn.textContent = p.label;
+      btn.addEventListener("click", () => this._selectPreset(p.key));
+      sidebar.appendChild(btn);
+      if (p.separator) {
+        const hr = document.createElement("hr");
+        hr.className = "sidebar-sep";
+        sidebar.appendChild(hr);
+      }
+    }
+    const main = document.createElement("div");
+    main.className = "main";
+    const calsWrap = document.createElement("div");
+    calsWrap.className = "calendars";
+    calsWrap.append(this._buildCalendarShell("left"), this._buildCalendarShell("right"));
+    const footer = document.createElement("div");
+    footer.className = "footer";
+    const inputsWrap = document.createElement("div");
+    inputsWrap.className = "date-inputs";
+    const startInput = document.createElement("input");
+    startInput.type = "text";
+    startInput.className = "date-input";
+    startInput.placeholder = "MM/DD/YYYY";
+    startInput.setAttribute("aria-label", "Start date");
+    startInput.addEventListener("blur", () => this._onInputBlur(startInput, "start"));
+    this._setupDateMask(startInput, "start");
+    this._startInput = startInput;
+    const sep = document.createElement("span");
+    sep.className = "date-sep";
+    sep.textContent = "\u2013";
+    sep.setAttribute("aria-hidden", "true");
+    const endInput = document.createElement("input");
+    endInput.type = "text";
+    endInput.className = "date-input";
+    endInput.placeholder = "MM/DD/YYYY";
+    endInput.setAttribute("aria-label", "End date");
+    endInput.addEventListener("blur", () => this._onInputBlur(endInput, "end"));
+    this._setupDateMask(endInput, "end");
+    this._endInput = endInput;
+    inputsWrap.append(startInput, sep, endInput);
+    const actions = document.createElement("div");
+    actions.className = "footer-actions";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "btn btn-cancel";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.setAttribute("part", "cancel-button");
+    cancelBtn.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("bv-cancel", { bubbles: true, composed: true }));
+    });
+    const applyBtn = document.createElement("button");
+    applyBtn.type = "button";
+    applyBtn.className = "btn btn-apply";
+    applyBtn.textContent = "Apply";
+    applyBtn.setAttribute("part", "apply-button");
+    applyBtn.addEventListener("click", () => this._apply());
+    this._applyBtn = applyBtn;
+    actions.append(cancelBtn, applyBtn);
+    footer.append(inputsWrap, actions);
+    const bannerWrap = document.createElement("div");
+    bannerWrap.className = "banner-wrap";
+    const banner = document.createElement("bv-alert-banner");
+    banner.setAttribute("variant", "warning");
+    banner.setAttribute("heading", "Date range exceeds 5 years");
+    banner.setAttribute(
+      "message",
+      "Only CSV download is available for this date range. Live report generation is not supported."
+    );
+    banner.hidden = true;
+    this._bannerEl = banner;
+    bannerWrap.appendChild(banner);
+    main.append(calsWrap, bannerWrap, footer);
+    picker.append(sidebar, main);
+    shadow.appendChild(picker);
+    this._syncCalendars();
+    this._syncInputs();
+    this._syncPresets();
+    this._syncApply();
+    this._syncBanner();
+  }
+  _buildCalendarShell(side) {
+    const cal = document.createElement("div");
+    cal.className = `calendar calendar--${side}`;
+    const header = document.createElement("div");
+    header.className = "calendar-header";
+    const prevBtn = document.createElement("button");
+    prevBtn.type = "button";
+    prevBtn.className = "nav-btn";
+    prevBtn.setAttribute("aria-label", "Previous month");
+    prevBtn.innerHTML = CHEVRON_LEFT;
+    prevBtn.addEventListener("click", () => this._navigate(-1));
+    const title = document.createElement("span");
+    title.className = "calendar-title";
+    const nextBtn = document.createElement("button");
+    nextBtn.type = "button";
+    nextBtn.className = "nav-btn";
+    nextBtn.setAttribute("aria-label", "Next month");
+    nextBtn.innerHTML = CHEVRON_RIGHT;
+    nextBtn.addEventListener("click", () => this._navigate(1));
+    header.append(prevBtn, title, nextBtn);
+    const weekdaysRow = document.createElement("div");
+    weekdaysRow.className = "weekdays";
+    for (const d of WEEKDAYS) {
+      const wd = document.createElement("span");
+      wd.className = "weekday";
+      wd.textContent = d;
+      weekdaysRow.appendChild(wd);
+    }
+    const grid = document.createElement("div");
+    grid.className = "days-grid";
+    cal.append(header, weekdaysRow, grid);
+    if (side === "left") {
+      this._leftTitle = title;
+      this._leftGrid = grid;
+    } else {
+      this._rightTitle = title;
+      this._rightGrid = grid;
+    }
+    return cal;
+  }
+  _navigate(delta) {
+    this._leftMonth += delta;
+    if (this._leftMonth > 11) {
+      this._leftMonth = 0;
+      this._leftYear++;
+    } else if (this._leftMonth < 0) {
+      this._leftMonth = 11;
+      this._leftYear--;
+    }
+    this._syncCalendars();
+  }
+  _getRightMonth() {
+    const m = this._leftMonth + 1;
+    return m > 11 ? { year: this._leftYear + 1, month: 0 } : { year: this._leftYear, month: m };
+  }
+  _syncCalendars() {
+    if (!this._leftGrid || !this._rightGrid) return;
+    const right = this._getRightMonth();
+    if (this._leftTitle) {
+      this._leftTitle.textContent = `${MONTH_NAMES[this._leftMonth]} ${this._leftYear}`;
+    }
+    if (this._rightTitle) {
+      this._rightTitle.textContent = `${MONTH_NAMES[right.month]} ${right.year}`;
+    }
+    this._buildDaysGrid(this._leftGrid, this._leftYear, this._leftMonth, this._leftDayMap);
+    this._buildDaysGrid(this._rightGrid, right.year, right.month, this._rightDayMap);
+  }
+  _buildDaysGrid(container, year, month, map) {
+    container.innerHTML = "";
+    map.clear();
+    const firstDow = new Date(year, month, 1).getDay();
+    const offset = firstDow === 0 ? 6 : firstDow - 1;
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const totalCells = Math.ceil((offset + daysInMonth) / 7) * 7;
+    for (let i = 0; i < totalCells; i++) {
+      let iso;
+      let dayNum;
+      if (i < offset) {
+        const blank = document.createElement("span");
+        blank.className = "day day--blank";
+        container.appendChild(blank);
+        continue;
+      } else if (i >= offset + daysInMonth) {
+        const blank = document.createElement("span");
+        blank.className = "day day--blank";
+        container.appendChild(blank);
+        continue;
+      } else {
+        dayNum = i - offset + 1;
+        iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(dayNum).padStart(2, "0")}`;
+      }
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset["date"] = iso;
+      btn.dataset["weekPos"] = String(i % 7);
+      btn.dataset["otherMonth"] = "0";
+      btn.dataset["dayNum"] = String(dayNum);
+      btn.dataset["daysInMonth"] = String(daysInMonth);
+      const inner = document.createElement("span");
+      inner.className = "day-inner";
+      inner.textContent = String(dayNum);
+      btn.appendChild(inner);
+      btn.addEventListener("click", () => this._selectDate(iso));
+      btn.addEventListener("mouseenter", () => this._onHover(iso));
+      this._applyDayClasses(btn, iso, false, i % 7, daysInMonth, dayNum);
+      map.set(iso, btn);
+      container.appendChild(btn);
+    }
+  }
+  _applyDayClasses(btn, iso, isOtherMonth, weekPos, daysInMonth, dayNum) {
+    const classes = ["day"];
+    if (isOtherMonth) classes.push("other-month");
+    if (iso === this._today) classes.push("today");
+    if (iso === this._start) classes.push("start");
+    if (iso === this._end) classes.push("end");
+    if (weekPos === 0 || dayNum === 1) classes.push("week-start");
+    if (weekPos === 6 || dayNum === daysInMonth) classes.push("week-end");
+    const effectiveEnd = this._picking && this._hover ? this._hover : this._end;
+    if (this._start && effectiveEnd) {
+      const [s, e] = this._start <= effectiveEnd ? [this._start, effectiveEnd] : [effectiveEnd, this._start];
+      if (iso > s && iso < e) classes.push("in-range");
+      if (iso === s && s !== e) classes.push("range-start");
+      if (iso === e && s !== e) classes.push("range-end");
+    }
+    btn.className = classes.join(" ");
+  }
+  _onHover(iso) {
+    if (!this._picking || this._hover === iso) return;
+    this._hover = iso;
+    this._updateDayClasses();
+  }
+  _updateDayClasses() {
+    const right = this._getRightMonth();
+    const rightDaysInMonth = new Date(right.year, right.month + 1, 0).getDate();
+    const leftDaysInMonth = new Date(this._leftYear, this._leftMonth + 1, 0).getDate();
+    this._leftDayMap.forEach((btn, iso) => {
+      this._applyDayClasses(
+        btn,
+        iso,
+        btn.dataset["otherMonth"] === "1",
+        parseInt(btn.dataset["weekPos"] ?? "0", 10),
+        leftDaysInMonth,
+        parseInt(btn.dataset["dayNum"] ?? "1", 10)
+      );
+    });
+    this._rightDayMap.forEach((btn, iso) => {
+      this._applyDayClasses(
+        btn,
+        iso,
+        btn.dataset["otherMonth"] === "1",
+        parseInt(btn.dataset["weekPos"] ?? "0", 10),
+        rightDaysInMonth,
+        parseInt(btn.dataset["dayNum"] ?? "1", 10)
+      );
+    });
+  }
+  _selectDate(iso) {
+    if (!this._picking) {
+      this._start = iso;
+      this._end = "";
+      this._preset = "custom";
+      this._picking = true;
+      this._hover = "";
+    } else {
+      if (iso < this._start) {
+        this._end = this._start;
+        this._start = iso;
+      } else {
+        this._end = iso;
+      }
+      this._picking = false;
+      this._hover = "";
+      this._preset = "custom";
+    }
+    this._syncCalendars();
+    this._syncInputs();
+    this._syncPresets();
+    this._syncApply();
+    this._syncBanner();
+  }
+  _selectPreset(key) {
+    if (key === "custom") {
+      this._preset = "custom";
+      this._picking = false;
+      this._hover = "";
+      this._syncPresets();
+      return;
+    }
+    const { start, end } = getPresetDates(key);
+    this._start = start;
+    this._end = end;
+    this._preset = key;
+    this._picking = false;
+    this._hover = "";
+    if (start) {
+      const parts = start.split("-");
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      if (!isNaN(y) && !isNaN(m)) {
+        this._leftYear = y;
+        this._leftMonth = m;
+      }
+    }
+    this._syncCalendars();
+    this._syncInputs();
+    this._syncPresets();
+    this._syncApply();
+    this._syncBanner();
+  }
+  _onInputBlur(input, field) {
+    const iso = parseDisplay(input.value);
+    if (iso) {
+      if (field === "start") this._start = iso;
+      else this._end = iso;
+      this._picking = false;
+      this._hover = "";
+      this._preset = "custom";
+      this._syncCalendars();
+      this._syncPresets();
+      this._syncApply();
+      this._syncBanner();
+    } else {
+      input.value = formatDisplay(field === "start" ? this._start : this._end);
+    }
+  }
+  _syncInputs() {
+    if (this._startInput) this._startInput.value = formatDisplay(this._start);
+    if (this._endInput) this._endInput.value = formatDisplay(this._end);
+  }
+  _syncPresets() {
+    this.shadowRoot.querySelectorAll(".preset-btn").forEach((el) => {
+      const btn = el;
+      btn.classList.toggle("active", btn.dataset["preset"] === this._preset);
+    });
+  }
+  _syncApply() {
+    if (this._applyBtn) {
+      this._applyBtn.disabled = !this._start || !this._end;
+    }
+  }
+  _syncBanner() {
+    if (!this._bannerEl) return;
+    const pickerEl = this.shadowRoot.querySelector(".picker");
+    if (!this._start) {
+      this._bannerEl.hidden = true;
+      pickerEl == null ? void 0 : pickerEl.classList.remove("picker--with-banner");
+      return;
+    }
+    const startDate = /* @__PURE__ */ new Date(this._start + "T00:00:00");
+    const fiveYearsAgo = /* @__PURE__ */ new Date();
+    fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
+    const show = startDate < fiveYearsAgo;
+    this._bannerEl.hidden = !show;
+    pickerEl == null ? void 0 : pickerEl.classList.toggle("picker--with-banner", show);
+  }
+  // Auto-insert slashes after MM and DD digits while the user types forward.
+  // Also syncs the banner live once the date is fully typed.
+  _setupDateMask(input, field) {
+    input.addEventListener("input", (e) => {
+      var _a;
+      const ev = e;
+      if ((_a = ev.inputType) == null ? void 0 : _a.startsWith("delete")) return;
+      const digits = input.value.replace(/[^\d]/g, "");
+      let formatted;
+      if (digits.length <= 2) {
+        formatted = digits.length === 2 ? digits + "/" : digits;
+      } else if (digits.length <= 4) {
+        const part = digits.slice(0, 2) + "/" + digits.slice(2);
+        formatted = digits.length === 4 ? part + "/" : part;
+      } else {
+        formatted = digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4, 8);
+      }
+      input.value = formatted;
+      if (formatted.length === 10) {
+        const iso = parseDisplay(formatted);
+        if (iso) {
+          if (field === "start") this._start = iso;
+          else this._end = iso;
+          this._syncBanner();
+        }
+      } else if (field === "start" && formatted.length < 10) {
+        this._start = "";
+        this._syncBanner();
+      }
+    });
+  }
+  _apply() {
+    if (!this._start || !this._end) return;
+    this.setAttribute("start", this._start);
+    this.setAttribute("end", this._end);
+    if (this._preset) this.setAttribute("preset", this._preset);
+    this.dispatchEvent(
+      new CustomEvent("bv-change", {
+        bubbles: true,
+        composed: true,
+        detail: { start: this._start, end: this._end, preset: this._preset }
+      })
+    );
+  }
+};
+if (!customElements.get("bv-date-range-picker")) {
+  customElements.define("bv-date-range-picker", BvDateRangePicker);
+}
+export {
+  BvDateRangePicker
+};