@bluevolt-tech/lumen 2.1.0 → 2.3.0

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

@@ -21,8 +21,7 @@ function adoptStyles(shadow, css) {
 
 // components/_shared/dropdown-controller.ts
 function bindDropdownController(host, options = {}) {
-  const shadow = host.shadowRoot;
-  if (!shadow) {
+  if (!host.shadowRoot) {
     throw new Error("bindDropdownController requires the host to have an open shadow root.");
   }
   const syncExpanded = () => {
@@ -37,24 +36,34 @@ function bindDropdownController(host, options = {}) {
     syncExpanded();
     host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
   };
-  const close = () => {
+  const closeWithReason = (reason) => {
+    var _a;
     if (!host.hasAttribute("open")) return;
+    if (options.canClose && !options.canClose(reason)) return;
     host.removeAttribute("open");
     syncExpanded();
+    host.dispatchEvent(
+      new CustomEvent("bv-dropdown-close", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
+    (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
   };
+  const close = () => closeWithReason("programmatic");
   const toggle = () => {
-    if (host.hasAttribute("open")) close();
+    if (host.hasAttribute("open")) closeWithReason("programmatic");
     else open();
   };
   const offClick = (e) => {
     if (!host.hasAttribute("open")) return;
-    const target = e.target;
-    if (host.contains(target) || shadow.contains(target)) return;
-    close();
+    if (e.composedPath().includes(host)) return;
+    closeWithReason("outside-click");
   };
   document.addEventListener("click", offClick);
   const onKeyDown = (e) => {
-    if (e.key === "Escape") close();
+    if (e.key === "Escape") closeWithReason("escape");
   };
   host.addEventListener("keydown", onKeyDown);
   const observer = new MutationObserver(syncExpanded);
@@ -69,9 +78,16 @@ function bindDropdownController(host, options = {}) {
 }
 
 // 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\n/* \u2500\u2500 BTN-10191 \xB7 validation error states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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.error-messages {\n  padding: var(--bv-spacing-2xs) 0 0 0;\n}\n\n.input-error,\n.form-error {\n  color: var(--bv-color-danger);\n  font-size: var(--bv-font-size-xs);\n  line-height: 1.25;\n  margin-top: var(--bv-spacing-2xs);\n}\n\n.form-error {\n  font-size: var(--bv-font-size-sm);\n  margin-top: var(--bv-spacing-xs);\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";
+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/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;
@@ -102,7 +118,11 @@ function validateDateRange(input, config = {}) {
     }
   }
   const valid = !startError && !endError && !formError;
-  const applyEnabled = valid && !!startDate && !!endDate;
+  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,
@@ -111,6 +131,15 @@ function validateDateRange(input, config = {}) {
     ...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;
@@ -437,7 +466,13 @@ var BvDateRangePicker = class extends HTMLElement {
     "error-order",
     "error-format",
     "range-limit-message",
-    "range-limit-heading"
+    "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;
@@ -461,12 +496,22 @@ var BvDateRangePicker = class extends HTMLElement {
   _startInput = null;
   _endInput = null;
   _applyBtn = null;
-  _bannerEl = null;
-  _startErrorEl = null;
-  _endErrorEl = null;
-  _formErrorEl = 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();
@@ -501,10 +546,12 @@ var BvDateRangePicker = class extends HTMLElement {
     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;
@@ -515,6 +562,30 @@ var BvDateRangePicker = class extends HTMLElement {
     }
     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._syncValidity();
+  }
   _render() {
     if (this._rendered) return;
     this._rendered = true;
@@ -598,31 +669,11 @@ var BvDateRangePicker = class extends HTMLElement {
     this._applyBtn = applyBtn;
     actions.append(cancelBtn, applyBtn);
     footer.append(inputsWrap, actions);
-    const errorsWrap = document.createElement("div");
-    errorsWrap.className = "error-messages";
-    const startErrorEl = document.createElement("div");
-    startErrorEl.className = "input-error input-error--start";
-    startErrorEl.setAttribute("role", "alert");
-    startErrorEl.hidden = true;
-    this._startErrorEl = startErrorEl;
-    const endErrorEl = document.createElement("div");
-    endErrorEl.className = "input-error input-error--end";
-    endErrorEl.setAttribute("role", "alert");
-    endErrorEl.hidden = true;
-    this._endErrorEl = endErrorEl;
-    const formErrorEl = document.createElement("div");
-    formErrorEl.className = "form-error";
-    formErrorEl.setAttribute("role", "alert");
-    formErrorEl.hidden = true;
-    this._formErrorEl = formErrorEl;
-    errorsWrap.append(startErrorEl, endErrorEl, formErrorEl);
-    footer.insertBefore(errorsWrap, actions);
     const bannerWrap = document.createElement("div");
     bannerWrap.className = "banner-wrap";
     const banner = document.createElement("bv-alert-banner");
-    banner.setAttribute("variant", "warning");
     banner.hidden = true;
-    this._bannerEl = banner;
+    this._alertBannerEl = banner;
     bannerWrap.appendChild(banner);
     main.append(calsWrap, bannerWrap, footer);
     picker.append(sidebar, main);
@@ -795,6 +846,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;
@@ -805,6 +857,7 @@ var BvDateRangePicker = class extends HTMLElement {
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
+      this._lastEditedField = "end";
     }
     this._startRawInvalid = "";
     this._endRawInvalid = "";
@@ -829,6 +882,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._hover = "";
     this._startRawInvalid = "";
     this._endRawInvalid = "";
+    this._lastEditedField = null;
     if (start) {
       const parts = start.split("-");
       const y = parseInt(parts[0], 10);
@@ -844,6 +898,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncValidity();
   }
   _onInputBlur(input, field) {
+    this._lastEditedField = field;
     const raw = input.value;
     if (raw === "") {
       if (field === "start") {
@@ -907,9 +962,9 @@ var BvDateRangePicker = class extends HTMLElement {
       },
       cfg
     );
-    this._applyErrorStates();
+    this._paintInputInvalidState();
+    this._applyAlertBanner(cfg);
     this._applyApplyState();
-    this._applyBannerState();
     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(
@@ -931,88 +986,140 @@ var BvDateRangePicker = class extends HTMLElement {
       max,
       maxRangeYears: Number.isFinite(maxRangeYears) ? maxRangeYears : void 0,
       validateOrder: this.hasAttribute("validate-order"),
-      validateFormat: this.hasAttribute("validate-format")
+      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"))
     };
   }
-  _applyErrorStates() {
+  /**
+   * 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;
-    this._paintInputError(this._startInput, this._startErrorEl, v.startError, "start");
-    this._paintInputError(this._endInput, this._endErrorEl, v.endError, "end");
-    if (this._formErrorEl) {
-      if (v.formError === "order") {
-        this._formErrorEl.textContent = this._resolveOrderError();
-        this._formErrorEl.hidden = false;
-      } else {
-        this._formErrorEl.textContent = "";
-        this._formErrorEl.hidden = true;
-      }
+    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");
     }
   }
-  _paintInputError(input, errorEl, err, field) {
-    if (input) {
-      if (err) {
-        input.classList.add("invalid");
-        input.setAttribute("aria-invalid", "true");
-      } else {
-        input.classList.remove("invalid");
-        input.removeAttribute("aria-invalid");
-      }
+  /**
+   * 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");
+    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;
     }
-    if (errorEl) {
-      if (err) {
-        errorEl.textContent = this._resolveFieldError(err, field);
-        errorEl.hidden = false;
-      } else {
-        errorEl.textContent = "";
-        errorEl.hidden = true;
-      }
+    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") {
-      return this.getAttribute("error-format") ?? "Enter a valid date in MM/DD/YYYY 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 custom2.replace("{min}", minDisplay).replace("{field}", field);
+      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 custom.replace("{max}", maxDisplay).replace("{field}", field);
+    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";
+    return this.getAttribute("error-order") || "Start date must be on or before end date";
   }
   _applyApplyState() {
     if (this._applyBtn) {
       this._applyBtn.disabled = !this._validity.applyEnabled;
     }
   }
-  _applyBannerState() {
-    if (!this._bannerEl) return;
-    const pickerEl = this.shadowRoot.querySelector(".picker");
-    const bannerAllowed = this.getAttribute("show-range-limit-banner") !== "false";
-    const show = this._validity.formError === "range-limit" && bannerAllowed;
-    if (show) {
-      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._bannerEl.setAttribute("heading", heading.replace("{N}", yearsAttr));
-      this._bannerEl.setAttribute("message", message.replace("{N}", yearsAttr));
-      this._bannerEl.hidden = false;
-      pickerEl == null ? void 0 : pickerEl.classList.add("picker--with-banner");
-    } else {
-      this._bannerEl.hidden = true;
-      pickerEl == null ? void 0 : pickerEl.classList.remove("picker--with-banner");
-    }
-  }
   _applyCalendarDisabledState() {
     const minIso = this.getAttribute("min") || "";
     const maxAttr = this.getAttribute("max") || "";
@@ -1048,6 +1155,7 @@ var BvDateRangePicker = class extends HTMLElement {
       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) {
@@ -1106,7 +1214,13 @@ var PICKER_PASSTHROUGH_ATTRS = [
   "error-order",
   "error-format",
   "range-limit-message",
-  "range-limit-heading"
+  "range-limit-heading",
+  // BTN-10312 — per-error severity attributes
+  "error-min-severity",
+  "error-max-severity",
+  "error-format-severity",
+  "error-order-severity",
+  "range-limit-severity"
 ];
 function isoToDisplay(iso) {
   if (!iso) return "";
@@ -1120,6 +1234,8 @@ var BvDateRangeInput = class extends HTMLElement {
     "end",
     "placeholder",
     "required",
+    // BTN-10312 — local (not passed through to picker); gates popup close.
+    "keep-open-while-invalid",
     ...PICKER_PASSTHROUGH_ATTRS
   ];
   _rendered = false;
@@ -1128,6 +1244,12 @@ var BvDateRangeInput = class extends HTMLElement {
   _triggerEl = null;
   _pickerEl = null;
   _dropdown = null;
+  /**
+   * BTN-10312 — cached validity from the internal picker. `canClose` on the
+   * dropdown controller consults this to gate popup close when
+   * `keep-open-while-invalid` is set.
+   */
+  _pickerValidity = { valid: true, applyEnabled: false };
   constructor() {
     super();
     adoptStyles(this.attachShadow({ mode: "open" }), bv_date_range_input_default);
@@ -1188,9 +1310,8 @@ var BvDateRangeInput = class extends HTMLElement {
     icon.className = "trigger-icon";
     icon.innerHTML = CALENDAR_ICON;
     trigger.append(display, icon);
-    trigger.addEventListener("click", (e) => {
+    trigger.addEventListener("click", () => {
       var _a;
-      e.stopPropagation();
       (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const popup = document.createElement("div");
@@ -1223,13 +1344,15 @@ var BvDateRangeInput = class extends HTMLElement {
     });
     picker.addEventListener("bv-validity-change", (e) => {
       const detail = e.detail;
+      this._pickerValidity = detail;
+      const hasBlockingError = !detail.applyEnabled && !!(detail.startError || detail.endError || detail.formError);
       if (this._triggerEl) {
-        if (detail.valid) {
-          this._triggerEl.classList.remove("invalid");
-          this._triggerEl.removeAttribute("aria-invalid");
-        } else {
+        if (hasBlockingError) {
           this._triggerEl.classList.add("invalid");
           this._triggerEl.setAttribute("aria-invalid", "true");
+        } else {
+          this._triggerEl.classList.remove("invalid");
+          this._triggerEl.removeAttribute("aria-invalid");
         }
       }
       this.dispatchEvent(
@@ -1251,6 +1374,28 @@ var BvDateRangeInput = class extends HTMLElement {
           this._pickerEl.setAttribute("start", this.getAttribute("start") ?? "");
           this._pickerEl.setAttribute("end", this.getAttribute("end") ?? "");
         }
+      },
+      // BTN-10312 — gate popup close when the consumer opted in via
+      // `keep-open-while-invalid` AND the picker has a blocking error.
+      // Only *implicit* dismissals (Escape / outside-click) are gated —
+      // explicit user actions (Cancel button, Apply, trigger toggle) always
+      // close so the user can never get trapped in an invalid popup.
+      // Non-blocking errors (warning/primary/success severity) do NOT block
+      // close either: the value externally is still the last-committed one.
+      canClose: (reason) => {
+        if (reason === "programmatic") return true;
+        if (!this.hasAttribute("keep-open-while-invalid")) return true;
+        const v = this._pickerValidity;
+        const hasBlockingError = !v.applyEnabled && !!(v.startError || v.endError || v.formError);
+        return !hasBlockingError;
+      },
+      // BTN-10312 — after every successful close (including Apply, Cancel,
+      // Escape, outside-click), reset the picker's internal draft state so the
+      // next open shows the last-committed value cleanly. Apply cases end up
+      // being a no-op because the draft already equals the committed value.
+      onAfterClose: () => {
+        var _a;
+        (_a = this._pickerEl) == null ? void 0 : _a.resetDraft();
       }
     });
   }