@bluevolt-tech/lumen 2.0.1 → 2.2.0

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

@@ -1,5 +1,116 @@
 // 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";
+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 Alert banner (BTN-10312 \u2014 unified for all validation errors) \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\n/* \u2500\u2500 Validation error states (BTN-10191 / BTN-10312) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/*\n * `.invalid` is applied to input fields only when the field's error resolves\n * to severity 'error' (blocking). Non-blocking severities (warning/primary/\n * success) surface via the banner but do not paint the input red.\n */\n.date-input.invalid,\n.date-input.invalid:focus {\n  border-color: var(--bv-color-danger);\n  box-shadow: 0 0 0 3px var(--bv-color-danger-light);\n}\n\n.day--disabled,\n.day[disabled] {\n  color: var(--bv-color-neutral-300);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.day--disabled .day-inner,\n.day[disabled] .day-inner {\n  color: var(--bv-color-neutral-300);\n}\n";
+
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
+// components/_shared/date-range-validator.ts
+var ALLOWED_SEVERITIES = ["error", "warning", "primary", "success"];
+function normalizeSeverity(value) {
+  if (value && ALLOWED_SEVERITIES.includes(value)) {
+    return value;
+  }
+  return "error";
+}
+function validateDateRange(input, config = {}) {
+  const { start, end } = input;
+  const { min, max, maxRangeYears, validateOrder, validateFormat } = config;
+  const resolvedMax = max === "today" ? isoToday() : max;
+  let startError;
+  let endError;
+  const startDate = start ? parseIso(start) : null;
+  const endDate = end ? parseIso(end) : null;
+  if (validateFormat) {
+    if (start && !startDate) startError = "format";
+    if (end && !endDate) endError = "format";
+  }
+  if (!startError && startDate) {
+    if (min && belowMin(startDate, min)) startError = "min";
+    else if (resolvedMax && aboveMax(startDate, resolvedMax)) startError = "max";
+  }
+  if (!endError && endDate) {
+    if (min && belowMin(endDate, min)) endError = "min";
+    else if (resolvedMax && aboveMax(endDate, resolvedMax)) endError = "max";
+  }
+  let formError;
+  const bothFieldsClean = startDate && endDate && !startError && !endError;
+  if (bothFieldsClean) {
+    if (validateOrder && startDate > endDate) {
+      formError = "order";
+    } else if (maxRangeYears !== void 0 && exceedsYearSpan(startDate, endDate, maxRangeYears)) {
+      formError = "range-limit";
+    }
+  }
+  const valid = !startError && !endError && !formError;
+  const startSev = startError ? severityOfFieldError(startError, config) : null;
+  const endSev = endError ? severityOfFieldError(endError, config) : null;
+  const formSev = formError ? severityOfFormError(formError, config) : null;
+  const hasBlockingError = startSev === "error" || endSev === "error" || formSev === "error";
+  const applyEnabled = !hasBlockingError && !!startDate && !!endDate;
+  return {
+    valid,
+    applyEnabled,
+    ...startError && { startError },
+    ...endError && { endError },
+    ...formError && { formError }
+  };
+}
+function severityOfFieldError(err, config) {
+  if (err === "format") return normalizeSeverity(config.formatSeverity);
+  if (err === "min") return normalizeSeverity(config.minSeverity);
+  return normalizeSeverity(config.maxSeverity);
+}
+function severityOfFormError(err, config) {
+  if (err === "order") return normalizeSeverity(config.orderSeverity);
+  return normalizeSeverity(config.rangeLimitSeverity);
+}
+function parseIso(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  if (!m) return null;
+  const [, yStr, mStr, dStr] = m;
+  const y = Number(yStr);
+  const mo = Number(mStr) - 1;
+  const d = Number(dStr);
+  const dt = new Date(y, mo, d);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null;
+  dt.setHours(0, 0, 0, 0);
+  return dt;
+}
+function isoToday() {
+  const now = /* @__PURE__ */ new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function belowMin(date, minIso) {
+  const minDate = parseIso(minIso);
+  return !!minDate && date < minDate;
+}
+function aboveMax(date, maxIso) {
+  const maxDate = parseIso(maxIso);
+  return !!maxDate && date > maxDate;
+}
+function exceedsYearSpan(start, end, years) {
+  const cutoff = new Date(start);
+  cutoff.setFullYear(cutoff.getFullYear() + years);
+  return end > cutoff;
+}
 
 // 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";
@@ -18,14 +129,6 @@ var VARIANT_ICONS = {
   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",
@@ -45,10 +148,7 @@ var BvAlertBanner = class extends HTMLElement {
   _closeBtn = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_alert_banner_default);
   }
   get variant() {
     return this.getAttribute("variant") ?? "default";
@@ -102,11 +202,6 @@ var BvAlertBanner = class extends HTMLElement {
     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");
@@ -233,14 +328,6 @@ var MONTH_NAMES = [
 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")}`;
 }
@@ -256,6 +343,9 @@ function parseDisplay(str) {
   const d = match[2].padStart(2, "0");
   return `${match[3]}-${m}-${d}`;
 }
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
 function getPresetDates(key) {
   const now = /* @__PURE__ */ new Date();
   now.setHours(0, 0, 0, 0);
@@ -298,7 +388,31 @@ function getPresetDates(key) {
   }
 }
 var BvDateRangePicker = class extends HTMLElement {
-  static observedAttributes = ["start", "end", "preset"];
+  static observedAttributes = [
+    "start",
+    "end",
+    "preset",
+    // BTN-10191 — opt-in validation config
+    "min",
+    "max",
+    "max-range-years",
+    "validate-order",
+    "validate-format",
+    "show-range-limit-banner",
+    // BTN-10191 — configurable error copy (all attributes; defaults apply otherwise)
+    "error-min",
+    "error-max",
+    "error-order",
+    "error-format",
+    "range-limit-message",
+    "range-limit-heading",
+    // BTN-10312 — per-error severity (default error = blocks Apply + red banner)
+    "error-min-severity",
+    "error-max-severity",
+    "error-format-severity",
+    "error-order-severity",
+    "range-limit-severity"
+  ];
   _rendered = false;
   _today;
   _start = "";
@@ -308,6 +422,12 @@ var BvDateRangePicker = class extends HTMLElement {
   _hover = "";
   _leftYear;
   _leftMonth;
+  // BTN-10191 — raw display strings retained when the user types an
+  // unparseable value AND `validate-format` is on. Lets V8 fire without
+  // corrupting `_start`/`_end` (which stay strictly ISO for consumers).
+  _startRawInvalid = "";
+  _endRawInvalid = "";
+  _validity = { valid: true, applyEnabled: false };
   _leftGrid = null;
   _rightGrid = null;
   _leftTitle = null;
@@ -315,9 +435,22 @@ var BvDateRangePicker = class extends HTMLElement {
   _startInput = null;
   _endInput = null;
   _applyBtn = null;
-  _bannerEl = null;
+  /**
+   * Unified alert banner (BTN-10312). Shows AT MOST ONE error at a time. When
+   * multiple errors are simultaneously active, the banner reflects the
+   * most-recently-edited field (see `_lastEditedField`).
+   */
+  _alertBannerEl = null;
   _leftDayMap = /* @__PURE__ */ new Map();
   _rightDayMap = /* @__PURE__ */ new Map();
+  /**
+   * BTN-10312 — tracks which field the user most-recently interacted with.
+   * When both `startError` and `endError` are active, the banner shows the
+   * error corresponding to this field. Set to `null` when no field has been
+   * touched (initial render, or external attribute set); the resolver falls
+   * back to a stable precedence in that case.
+   */
+  _lastEditedField = null;
   constructor() {
     super();
     const now = /* @__PURE__ */ new Date();
@@ -325,10 +458,7 @@ var BvDateRangePicker = class extends HTMLElement {
     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()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_date_range_picker_default);
   }
   get start() {
     return this._start;
@@ -352,14 +482,48 @@ var BvDateRangePicker = class extends HTMLElement {
     this._render();
   }
   attributeChangedCallback(name, _old, val) {
-    if (name === "start") this._start = val ?? "";
-    if (name === "end") this._end = val ?? "";
+    if (name === "start") {
+      this._start = val ?? "";
+      this._startRawInvalid = "";
+      this._lastEditedField = null;
+    }
+    if (name === "end") {
+      this._end = val ?? "";
+      this._endRawInvalid = "";
+      this._lastEditedField = null;
+    }
     if (name === "preset") this._preset = val ?? "";
     if (!this._rendered) return;
+    if (name === "start" || name === "end" || name === "preset") {
+      this._syncCalendars();
+      this._syncInputs();
+      this._syncPresets();
+    }
+    this._syncValidity();
+  }
+  /**
+   * BTN-10312 — public reset of the picker's internal draft state to the
+   * currently committed `start` / `end` / `preset` attributes. Called by
+   * `bv-date-range-input` when the popup closes without Apply (Cancel,
+   * Escape, outside-click) so the next open shows the last-committed value
+   * cleanly, with no leftover error banners from the discarded edit.
+   *
+   * The external value is not modified — this only clears the draft.
+   */
+  resetDraft() {
+    this._start = this.getAttribute("start") ?? "";
+    this._end = this.getAttribute("end") ?? "";
+    this._preset = this.getAttribute("preset") ?? "";
+    this._startRawInvalid = "";
+    this._endRawInvalid = "";
+    this._picking = false;
+    this._hover = "";
+    this._lastEditedField = null;
+    if (!this._rendered) return;
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
+    this._syncValidity();
   }
   _render() {
     if (this._rendered) return;
@@ -377,11 +541,6 @@ var BvDateRangePicker = class extends HTMLElement {
       }
     }
     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");
@@ -452,14 +611,8 @@ var BvDateRangePicker = class extends HTMLElement {
     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;
+    this._alertBannerEl = banner;
     bannerWrap.appendChild(banner);
     main.append(calsWrap, bannerWrap, footer);
     picker.append(sidebar, main);
@@ -467,8 +620,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _buildCalendarShell(side) {
     const cal = document.createElement("div");
@@ -633,6 +785,7 @@ var BvDateRangePicker = class extends HTMLElement {
       this._preset = "custom";
       this._picking = true;
       this._hover = "";
+      this._lastEditedField = "start";
     } else {
       if (iso < this._start) {
         this._end = this._start;
@@ -643,12 +796,14 @@ var BvDateRangePicker = class extends HTMLElement {
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
+      this._lastEditedField = "end";
     }
+    this._startRawInvalid = "";
+    this._endRawInvalid = "";
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _selectPreset(key) {
     if (key === "custom") {
@@ -664,6 +819,9 @@ var BvDateRangePicker = class extends HTMLElement {
     this._preset = key;
     this._picking = false;
     this._hover = "";
+    this._startRawInvalid = "";
+    this._endRawInvalid = "";
+    this._lastEditedField = null;
     if (start) {
       const parts = start.split("-");
       const y = parseInt(parts[0], 10);
@@ -676,21 +834,48 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _onInputBlur(input, field) {
-    const iso = parseDisplay(input.value);
+    this._lastEditedField = field;
+    const raw = input.value;
+    if (raw === "") {
+      if (field === "start") {
+        this._start = "";
+        this._startRawInvalid = "";
+      } else {
+        this._end = "";
+        this._endRawInvalid = "";
+      }
+      this._syncCalendars();
+      this._syncPresets();
+      this._syncValidity();
+      return;
+    }
+    const iso = parseDisplay(raw);
     if (iso) {
-      if (field === "start") this._start = iso;
-      else this._end = iso;
+      if (field === "start") {
+        this._start = iso;
+        this._startRawInvalid = "";
+      } else {
+        this._end = iso;
+        this._endRawInvalid = "";
+      }
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
       this._syncCalendars();
       this._syncPresets();
-      this._syncApply();
-      this._syncBanner();
+      this._syncValidity();
+    } else if (this.hasAttribute("validate-format")) {
+      if (field === "start") {
+        this._start = "";
+        this._startRawInvalid = raw;
+      } else {
+        this._end = "";
+        this._endRawInvalid = raw;
+      }
+      this._syncValidity();
     } else {
       input.value = formatDisplay(field === "start" ? this._start : this._end);
     }
@@ -705,33 +890,211 @@ var BvDateRangePicker = class extends HTMLElement {
       btn.classList.toggle("active", btn.dataset["preset"] === this._preset);
     });
   }
-  _syncApply() {
-    if (this._applyBtn) {
-      this._applyBtn.disabled = !this._start || !this._end;
+  // ── BTN-10191 — validation orchestrator ──────────────────────────────
+  _syncValidity() {
+    const cfg = this._readConfig();
+    const previous = this._validity;
+    this._validity = validateDateRange(
+      {
+        start: this._start || this._startRawInvalid,
+        end: this._end || this._endRawInvalid
+      },
+      cfg
+    );
+    this._paintInputInvalidState();
+    this._applyAlertBanner(cfg);
+    this._applyApplyState();
+    this._applyCalendarDisabledState();
+    if (previous.valid !== this._validity.valid || previous.applyEnabled !== this._validity.applyEnabled || previous.startError !== this._validity.startError || previous.endError !== this._validity.endError || previous.formError !== this._validity.formError) {
+      this.dispatchEvent(
+        new CustomEvent("bv-validity-change", {
+          bubbles: true,
+          composed: true,
+          detail: { ...this._validity }
+        })
+      );
+    }
+  }
+  _readConfig() {
+    const min = this.getAttribute("min") || void 0;
+    const max = this.getAttribute("max") || void 0;
+    const mryStr = this.getAttribute("max-range-years");
+    const maxRangeYears = mryStr !== null && mryStr !== "" ? Number(mryStr) : void 0;
+    return {
+      min,
+      max,
+      maxRangeYears: Number.isFinite(maxRangeYears) ? maxRangeYears : void 0,
+      validateOrder: this.hasAttribute("validate-order"),
+      validateFormat: this.hasAttribute("validate-format"),
+      minSeverity: normalizeSeverity(this.getAttribute("error-min-severity")),
+      maxSeverity: normalizeSeverity(this.getAttribute("error-max-severity")),
+      formatSeverity: normalizeSeverity(this.getAttribute("error-format-severity")),
+      orderSeverity: normalizeSeverity(this.getAttribute("error-order-severity")),
+      rangeLimitSeverity: normalizeSeverity(this.getAttribute("range-limit-severity"))
+    };
+  }
+  /**
+   * BTN-10312 — apply the `.invalid` + `aria-invalid` state to input fields
+   * whose field-level error is currently blocking (severity `'error'`).
+   * Non-blocking severities (warning/primary/success) do not paint the input
+   * red so the visual matches the semantic ("not a fatal error").
+   */
+  _paintInputInvalidState() {
+    const v = this._validity;
+    const cfg = this._readConfig();
+    this._paintOne(this._startInput, v.startError ? severityOfFieldError(v.startError, cfg) : null);
+    this._paintOne(this._endInput, v.endError ? severityOfFieldError(v.endError, cfg) : null);
+  }
+  _paintOne(input, sev) {
+    if (!input) return;
+    if (sev === "error") {
+      input.classList.add("invalid");
+      input.setAttribute("aria-invalid", "true");
+    } else {
+      input.classList.remove("invalid");
+      input.removeAttribute("aria-invalid");
     }
   }
-  _syncBanner() {
-    if (!this._bannerEl) return;
+  /**
+   * BTN-10312 — single alert banner. Picks the "active" error following the
+   * precedence:
+   *
+   *   1. If a form error is active, show it (form errors don't coexist with
+   *      field errors by validator design).
+   *   2. If both field errors are active, show the one for
+   *      `_lastEditedField` (falling back to `start` if `null`).
+   *   3. Else show whichever single field error is active.
+   *   4. Else hide the banner.
+   *
+   * `show-range-limit-banner="false"` still suppresses the range-limit
+   * banner specifically (existing consumer contract from BTN-10191).
+   */
+  _applyAlertBanner(cfg) {
+    if (!this._alertBannerEl) return;
     const pickerEl = this.shadowRoot.querySelector(".picker");
-    if (!this._start) {
-      this._bannerEl.hidden = true;
+    const active = this._resolveActiveError();
+    if (!active) {
+      this._alertBannerEl.hidden = true;
+      this._alertBannerEl.removeAttribute("heading");
+      this._alertBannerEl.removeAttribute("message");
       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);
+    if (active.kind === "form" && active.error === "range-limit" && this.getAttribute("show-range-limit-banner") === "false") {
+      this._alertBannerEl.hidden = true;
+      pickerEl == null ? void 0 : pickerEl.classList.remove("picker--with-banner");
+      return;
+    }
+    const variant = active.kind === "field" ? severityOfFieldError(active.error, cfg) : severityOfFormError(active.error, cfg);
+    this._alertBannerEl.setAttribute("variant", variant);
+    if (active.kind === "form" && active.error === "range-limit") {
+      const yearsAttr = this.getAttribute("max-range-years") ?? "";
+      const heading = this.getAttribute("range-limit-heading") || (yearsAttr ? `Date range exceeds ${yearsAttr} years` : "Date range exceeds the maximum");
+      const message = this.getAttribute("range-limit-message") || "Only CSV download is available for this date range. Live report generation is not supported.";
+      this._alertBannerEl.setAttribute("heading", heading.replace(/\{N\}/g, yearsAttr));
+      this._alertBannerEl.setAttribute("message", message.replace(/\{N\}/g, yearsAttr));
+    } else {
+      this._alertBannerEl.removeAttribute("heading");
+      const message = active.kind === "field" ? this._resolveFieldError(active.error, active.field) : this._resolveOrderError();
+      this._alertBannerEl.setAttribute("message", message);
+    }
+    this._alertBannerEl.hidden = false;
+    pickerEl == null ? void 0 : pickerEl.classList.add("picker--with-banner");
+  }
+  /**
+   * Pick which error the banner should reflect. See `_applyAlertBanner` for
+   * the precedence rules.
+   */
+  _resolveActiveError() {
+    const v = this._validity;
+    if (v.formError) return { kind: "form", error: v.formError };
+    if (v.startError && v.endError) {
+      const winner = this._lastEditedField ?? "start";
+      return {
+        kind: "field",
+        error: winner === "start" ? v.startError : v.endError,
+        field: winner
+      };
+    }
+    if (v.startError) return { kind: "field", error: v.startError, field: "start" };
+    if (v.endError) return { kind: "field", error: v.endError, field: "end" };
+    return null;
+  }
+  _resolveFieldError(err, field) {
+    if (err === "format") {
+      const custom2 = this.getAttribute("error-format");
+      if (custom2) return this._interpolateField(custom2, field);
+      return `Enter a valid ${field} date`;
+    }
+    if (err === "min") {
+      const minIso = this.getAttribute("min") ?? "";
+      const minDisplay = formatDisplay(minIso);
+      const custom2 = this.getAttribute("error-min");
+      if (custom2) return this._interpolateField(custom2, field).replace(/\{min\}/g, minDisplay);
+      return `${capitalize(field)} date must be on or after ${minDisplay}`;
+    }
+    const maxAttr = this.getAttribute("max") ?? "";
+    const resolvedMax = maxAttr === "today" ? isoToday() : maxAttr;
+    const maxDisplay = formatDisplay(resolvedMax);
+    const custom = this.getAttribute("error-max");
+    if (custom) return this._interpolateField(custom, field).replace(/\{max\}/g, maxDisplay);
+    if (maxAttr === "today") return `${capitalize(field)} date cannot be in the future`;
+    return `${capitalize(field)} date cannot be after ${maxDisplay}`;
+  }
+  /**
+   * BTN-10312 — interpolate `{field}` (always lowercase) and `{Field}` (always
+   * capitalized) in a user-provided template. Before this change, the historical
+   * behavior was that `{field}` in custom copy resolved lowercase while the
+   * built-in defaults capitalized inline — inconsistent. Now the split is
+   * explicit: `{field}` = lowercase, `{Field}` = capitalized.
+   */
+  _interpolateField(template, field) {
+    return template.replace(/\{Field\}/g, capitalize(field)).replace(/\{field\}/g, field);
+  }
+  _resolveOrderError() {
+    return this.getAttribute("error-order") || "Start date must be on or before end date";
+  }
+  _applyApplyState() {
+    if (this._applyBtn) {
+      this._applyBtn.disabled = !this._validity.applyEnabled;
+    }
+  }
+  _applyCalendarDisabledState() {
+    const minIso = this.getAttribute("min") || "";
+    const maxAttr = this.getAttribute("max") || "";
+    const maxIso = maxAttr === "today" ? isoToday() : maxAttr;
+    if (!minIso && !maxIso) {
+      this._leftDayMap.forEach((btn) => this._resetDayDisabled(btn));
+      this._rightDayMap.forEach((btn) => this._resetDayDisabled(btn));
+      return;
+    }
+    const paint = (btn, iso) => {
+      const outOfRange = !!minIso && iso < minIso || !!maxIso && iso > maxIso;
+      if (outOfRange) {
+        btn.disabled = true;
+        btn.setAttribute("aria-disabled", "true");
+        btn.classList.add("day--disabled");
+      } else {
+        this._resetDayDisabled(btn);
+      }
+    };
+    this._leftDayMap.forEach(paint);
+    this._rightDayMap.forEach(paint);
+  }
+  _resetDayDisabled(btn) {
+    btn.disabled = false;
+    btn.removeAttribute("aria-disabled");
+    btn.classList.remove("day--disabled");
   }
   // Auto-insert slashes after MM and DD digits while the user types forward.
-  // Also syncs the banner live once the date is fully typed.
+  // Also runs full validity sync on every keystroke — this is what clears the
+  // error state immediately on correction (per BTN-10191 a11y requirement).
   _setupDateMask(input, field) {
     input.addEventListener("input", (e) => {
       var _a;
       const ev = e;
       if ((_a = ev.inputType) == null ? void 0 : _a.startsWith("delete")) return;
+      this._lastEditedField = field;
       const digits = input.value.replace(/[^\d]/g, "");
       let formatted;
       if (digits.length <= 2) {
@@ -743,17 +1106,19 @@ var BvDateRangePicker = class extends HTMLElement {
         formatted = digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4, 8);
       }
       input.value = formatted;
+      if (field === "start") this._startRawInvalid = "";
+      else this._endRawInvalid = "";
       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();
+      } else {
+        if (field === "start") this._start = "";
+        else this._end = "";
       }
+      this._syncValidity();
     });
   }
   _apply() {