npm - @bluevolt-tech/lumen - Versions diffs - 2.1.0 → 2.2.0 - Mend

@bluevolt-tech/lumen 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

@@ -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,27 @@ 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();
+    (_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 +71,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 +111,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 +124,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 +459,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 +489,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 +539,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 +555,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 +662,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 +839,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 +850,7 @@ var BvDateRangePicker = class extends HTMLElement {
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
+      this._lastEditedField = "end";
     }
     this._startRawInvalid = "";
     this._endRawInvalid = "";
@@ -829,6 +875,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 +891,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 +955,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 +979,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 +1148,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 +1207,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 +1227,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 +1237,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);
@@ -1223,13 +1338,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 +1368,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();
       }
     });
   }