@bluevolt-tech/lumen 2.0.1 → 2.1.0

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

@@ -1,8 +1,148 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-date-range-input/bv-date-range-input.css
-var bv_date_range_input_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 44px;\n  box-sizing: border-box;\n  padding: 0 var(--bv-spacing-md);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  text-align: left;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n.trigger-display {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trigger-display.is-placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.trigger-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-left: var(--bv-spacing-sm);\n  color: var(--bv-color-neutral-400);\n  transition: color var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-icon {\n  color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Picker popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-popup {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 300;\n}\n\n:host([open]) .picker-popup {\n  display: block;\n}\n";
+var bv_date_range_input_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 44px;\n  box-sizing: border-box;\n  padding: 0 var(--bv-spacing-md);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  text-align: left;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n/* BTN-10191 \u2014 reflected from the internal picker's validity state */\n.trigger.invalid,\n.trigger.invalid:focus-visible,\n:host([open]) .trigger.invalid {\n  border-color: var(--bv-color-danger);\n  box-shadow: 0 0 0 3px var(--bv-color-danger-light);\n}\n\n.trigger-display {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trigger-display.is-placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.trigger-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-left: var(--bv-spacing-sm);\n  color: var(--bv-color-neutral-400);\n  transition: color var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-icon {\n  color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Picker popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-popup {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 300;\n}\n\n:host([open]) .picker-popup {\n  display: block;\n}\n";
+
+// components/_shared/adopt-styles.ts
+var _sheetCache = /* @__PURE__ */ new Map();
+function adoptStyles(shadow, css) {
+  if ("adoptedStyleSheets" in ShadowRoot.prototype && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    let sheet = _sheetCache.get(css);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      _sheetCache.set(css, sheet);
+    }
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
+
+// components/_shared/dropdown-controller.ts
+function bindDropdownController(host, options = {}) {
+  const shadow = host.shadowRoot;
+  if (!shadow) {
+    throw new Error("bindDropdownController requires the host to have an open shadow root.");
+  }
+  const syncExpanded = () => {
+    var _a;
+    (_a = options.trigger) == null ? void 0 : _a.setAttribute("aria-expanded", host.hasAttribute("open") ? "true" : "false");
+  };
+  const open = () => {
+    var _a;
+    if (host.hasAttribute("open")) return;
+    (_a = options.onBeforeOpen) == null ? void 0 : _a.call(options);
+    host.setAttribute("open", "");
+    syncExpanded();
+    host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
+  };
+  const close = () => {
+    if (!host.hasAttribute("open")) return;
+    host.removeAttribute("open");
+    syncExpanded();
+  };
+  const toggle = () => {
+    if (host.hasAttribute("open")) close();
+    else open();
+  };
+  const offClick = (e) => {
+    if (!host.hasAttribute("open")) return;
+    const target = e.target;
+    if (host.contains(target) || shadow.contains(target)) return;
+    close();
+  };
+  document.addEventListener("click", offClick);
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") close();
+  };
+  host.addEventListener("keydown", onKeyDown);
+  const observer = new MutationObserver(syncExpanded);
+  observer.observe(host, { attributes: true, attributeFilter: ["open"] });
+  const cleanup = () => {
+    observer.disconnect();
+    document.removeEventListener("click", offClick);
+    host.removeEventListener("keydown", onKeyDown);
+  };
+  syncExpanded();
+  return { open, close, toggle, cleanup };
+}
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-date-range-picker/bv-date-range-picker.css
-var bv_date_range_picker_default = ":host {\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Picker shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.picker {\n  display: flex;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-xl);\n  box-shadow: var(--bv-shadow-lg);\n  overflow: hidden;\n  user-select: none;\n}\n\n/* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 152px;\n  flex-shrink: 0;\n  padding: var(--bv-spacing-sm) 0;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn {\n  display: block;\n  width: 100%;\n  padding: 10px var(--bv-spacing-md);\n  text-align: left;\n  background: none;\n  border: none;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  white-space: nowrap;\n}\n\n.preset-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.sidebar-sep {\n  margin: var(--bv-spacing-xs) 0;\n  border: none;\n  border-top: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn.active {\n  background: var(--bv-color-secondary-light);\n  color: var(--bv-color-neutral-900);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n/* \u2500\u2500 Main panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.main {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n/* \u2500\u2500 Calendars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.calendars {\n  display: flex;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.calendar {\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  flex: 1;\n}\n\n.calendar--left {\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* \u2500\u2500 Calendar header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--bv-spacing-md);\n}\n\n.calendar-title {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n}\n\n.nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-md);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.nav-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-800);\n}\n\n/* \u2500\u2500 Weekdays row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n  margin-bottom: var(--bv-spacing-xs);\n}\n\n.weekday {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n}\n\n/* \u2500\u2500 Days grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n}\n\n/* \u2500\u2500 Day cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  border-radius: 0;\n  transition: background var(--bv-transition-fast);\n}\n\n.day:hover:not(.start):not(.end) .day-inner {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.day--blank {\n  pointer-events: none;\n}\n\n.day.today:not(.start):not(.end) .day-inner::after {\n  content: '';\n  position: absolute;\n  bottom: 2px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 4px;\n  height: 4px;\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Range band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day.in-range {\n  background: var(--bv-color-primary-light);\n}\n\n.day.in-range.week-start,\n.day.range-end.week-start {\n  border-radius: var(--bv-radius-full) 0 0 var(--bv-radius-full);\n}\n\n.day.in-range.week-end,\n.day.range-start.week-end {\n  border-radius: 0 var(--bv-radius-full) var(--bv-radius-full) 0;\n}\n\n.day.range-start {\n  background: linear-gradient(to right, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n.day.range-end {\n  background: linear-gradient(to left, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n/* \u2500\u2500 Day inner (circle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day-inner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--bv-radius-full);\n  z-index: 1;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n.day.start .day-inner,\n.day.end .day-inner {\n  background: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n  font-weight: var(--bv-font-weight-semibold);\n}\n\n.day.start:hover .day-inner,\n.day.end:hover .day-inner {\n  background: var(--bv-color-primary-dark);\n}\n\n/* \u2500\u2500 5-year warning banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.banner-wrap {\n  display: none;\n  padding: var(--bv-spacing-lg);\n}\n\n.picker--with-banner .banner-wrap {\n  display: block;\n}\n\n/* Footer loses its top padding when the banner is shown above it */\n.picker--with-banner .footer {\n  padding-top: 0;\n}\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--bv-spacing-lg);\n  gap: var(--bv-spacing-md);\n}\n\n/* \u2500\u2500 Date inputs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.date-inputs {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n}\n\n.date-input {\n  width: 112px;\n  height: 36px;\n  padding: 0 var(--bv-spacing-sm);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  text-align: center;\n  outline: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.date-input:focus {\n  border-color: var(--bv-color-primary);\n  box-shadow: 0 0 0 3px var(--bv-color-primary-light);\n}\n\n.date-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.date-sep {\n  color: var(--bv-color-neutral-400);\n  font-size: var(--bv-font-size-sm);\n}\n\n/* \u2500\u2500 Action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.footer-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  padding: 0 var(--bv-spacing-md);\n  border-radius: var(--bv-radius-lg);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n.btn-cancel {\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  color: var(--bv-color-neutral-700);\n}\n\n.btn-cancel:hover {\n  background: var(--bv-color-secondary);\n  border-color: var(--bv-color-neutral-400);\n}\n\n.btn-apply {\n  background: var(--bv-color-primary);\n  border: 1px solid var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n}\n\n.btn-apply:hover:not(:disabled) {\n  background: var(--bv-color-primary-dark);\n  border-color: var(--bv-color-primary-dark);\n}\n\n.btn-apply:disabled {\n  background: var(--bv-color-neutral-300);\n  border-color: var(--bv-color-neutral-300);\n  cursor: not-allowed;\n}\n";
+var bv_date_range_picker_default = ":host {\n  display: inline-block;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Picker shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.picker {\n  display: flex;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-xl);\n  box-shadow: var(--bv-shadow-lg);\n  overflow: hidden;\n  user-select: none;\n}\n\n/* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 152px;\n  flex-shrink: 0;\n  padding: var(--bv-spacing-sm) 0;\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn {\n  display: block;\n  width: 100%;\n  padding: 10px var(--bv-spacing-md);\n  text-align: left;\n  background: none;\n  border: none;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  white-space: nowrap;\n}\n\n.preset-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.sidebar-sep {\n  margin: var(--bv-spacing-xs) 0;\n  border: none;\n  border-top: 1px solid var(--bv-color-neutral-200);\n}\n\n.preset-btn.active {\n  background: var(--bv-color-secondary-light);\n  color: var(--bv-color-neutral-900);\n  font-weight: var(--bv-font-weight-medium);\n}\n\n/* \u2500\u2500 Main panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.main {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n/* \u2500\u2500 Calendars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.calendars {\n  display: flex;\n  border-bottom: 1px solid var(--bv-color-neutral-200);\n}\n\n.calendar {\n  padding: var(--bv-spacing-md) var(--bv-spacing-lg);\n  flex: 1;\n}\n\n.calendar--left {\n  border-right: 1px solid var(--bv-color-neutral-200);\n}\n\n/* \u2500\u2500 Calendar header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--bv-spacing-md);\n}\n\n.calendar-title {\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n}\n\n.nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-md);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n  flex-shrink: 0;\n}\n\n.nav-btn:hover {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-800);\n}\n\n/* \u2500\u2500 Weekdays row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n  margin-bottom: var(--bv-spacing-xs);\n}\n\n.weekday {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n}\n\n/* \u2500\u2500 Days grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 36px);\n  gap: 0;\n}\n\n/* \u2500\u2500 Day cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  border-radius: 0;\n  transition: background var(--bv-transition-fast);\n}\n\n.day:hover:not(.start):not(.end) .day-inner {\n  background: var(--bv-color-secondary);\n  color: var(--bv-color-neutral-900);\n}\n\n.day--blank {\n  pointer-events: none;\n}\n\n.day.today:not(.start):not(.end) .day-inner::after {\n  content: '';\n  position: absolute;\n  bottom: 2px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 4px;\n  height: 4px;\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Range band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day.in-range {\n  background: var(--bv-color-primary-light);\n}\n\n.day.in-range.week-start,\n.day.range-end.week-start {\n  border-radius: var(--bv-radius-full) 0 0 var(--bv-radius-full);\n}\n\n.day.in-range.week-end,\n.day.range-start.week-end {\n  border-radius: 0 var(--bv-radius-full) var(--bv-radius-full) 0;\n}\n\n.day.range-start {\n  background: linear-gradient(to right, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n.day.range-end {\n  background: linear-gradient(to left, transparent 50%, var(--bv-color-primary-light) 50%);\n}\n\n/* \u2500\u2500 Day inner (circle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.day-inner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--bv-radius-full);\n  z-index: 1;\n  transition:\n    background var(--bv-transition-fast),\n    color var(--bv-transition-fast);\n}\n\n.day.start .day-inner,\n.day.end .day-inner {\n  background: var(--bv-color-primary);\n  color: var(--bv-color-neutral-0);\n  font-weight: var(--bv-font-weight-semibold);\n}\n\n.day.start:hover .day-inner,\n.day.end:hover .day-inner {\n  background: var(--bv-color-primary-dark);\n}\n\n/* \u2500\u2500 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";
+
+// components/_shared/date-range-validator.ts
+function validateDateRange(input, config = {}) {
+  const { start, end } = input;
+  const { min, max, maxRangeYears, validateOrder, validateFormat } = config;
+  const resolvedMax = max === "today" ? isoToday() : max;
+  let startError;
+  let endError;
+  const startDate = start ? parseIso(start) : null;
+  const endDate = end ? parseIso(end) : null;
+  if (validateFormat) {
+    if (start && !startDate) startError = "format";
+    if (end && !endDate) endError = "format";
+  }
+  if (!startError && startDate) {
+    if (min && belowMin(startDate, min)) startError = "min";
+    else if (resolvedMax && aboveMax(startDate, resolvedMax)) startError = "max";
+  }
+  if (!endError && endDate) {
+    if (min && belowMin(endDate, min)) endError = "min";
+    else if (resolvedMax && aboveMax(endDate, resolvedMax)) endError = "max";
+  }
+  let formError;
+  const bothFieldsClean = startDate && endDate && !startError && !endError;
+  if (bothFieldsClean) {
+    if (validateOrder && startDate > endDate) {
+      formError = "order";
+    } else if (maxRangeYears !== void 0 && exceedsYearSpan(startDate, endDate, maxRangeYears)) {
+      formError = "range-limit";
+    }
+  }
+  const valid = !startError && !endError && !formError;
+  const applyEnabled = valid && !!startDate && !!endDate;
+  return {
+    valid,
+    applyEnabled,
+    ...startError && { startError },
+    ...endError && { endError },
+    ...formError && { formError }
+  };
+}
+function parseIso(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  if (!m) return null;
+  const [, yStr, mStr, dStr] = m;
+  const y = Number(yStr);
+  const mo = Number(mStr) - 1;
+  const d = Number(dStr);
+  const dt = new Date(y, mo, d);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null;
+  dt.setHours(0, 0, 0, 0);
+  return dt;
+}
+function isoToday() {
+  const now = /* @__PURE__ */ new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function belowMin(date, minIso) {
+  const minDate = parseIso(minIso);
+  return !!minDate && date < minDate;
+}
+function aboveMax(date, maxIso) {
+  const maxDate = parseIso(maxIso);
+  return !!maxDate && date > maxDate;
+}
+function exceedsYearSpan(start, end, years) {
+  const cutoff = new Date(start);
+  cutoff.setFullYear(cutoff.getFullYear() + years);
+  return end > cutoff;
+}
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-alert-banner/bv-alert-banner.css
 var bv_alert_banner_default = ":host {\n  --banner-bg: var(--bv-color-neutral-0);\n  --banner-border: var(--bv-color-neutral-200);\n  --banner-color: var(--bv-color-neutral-700);\n  --banner-color-subtle: var(--bv-color-neutral-500);\n  --banner-icon-color: var(--bv-color-neutral-500);\n\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='primary']) {\n  --banner-bg: var(--bv-color-primary-50);\n  --banner-border: color-mix(in srgb, var(--bv-color-primary) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-primary);\n  --banner-color-subtle: var(--bv-color-primary);\n  --banner-icon-color: var(--bv-color-primary);\n}\n\n:host([variant='error']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-danger-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-danger) 45%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-danger-dark);\n  --banner-color-subtle: var(--bv-color-danger-dark);\n  --banner-icon-color: var(--bv-color-danger);\n}\n\n:host([variant='warning']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-warning-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-warning) 50%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-warning-dark);\n  --banner-color-subtle: var(--bv-color-warning-dark);\n  --banner-icon-color: var(--bv-color-warning);\n}\n\n:host([variant='success']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-success-light) 30%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-success) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-success-dark);\n  --banner-color-subtle: var(--bv-color-success-dark);\n  --banner-icon-color: var(--bv-color-success);\n}\n\n/* \u2500\u2500 Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.banner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bv-spacing-md);\n  padding: var(--bv-spacing-md);\n  background: var(--banner-bg);\n  border: 1px solid var(--banner-border);\n  border-radius: var(--bv-radius-xl);\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.banner-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--banner-icon-color);\n  line-height: 0;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.banner-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n  min-width: 0;\n}\n\n.banner-heading {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-heading[hidden] {\n  display: none;\n}\n\n.banner-message {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-message[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.banner-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  margin-top: var(--bv-spacing-xs);\n}\n\n.banner-actions[hidden] {\n  display: none;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n  transition: opacity 0.15s;\n}\n\n.action-btn[hidden] {\n  display: none;\n}\n\n.action-btn:hover {\n  opacity: 0.75;\n}\n\n.action-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n  border-radius: var(--bv-radius-sm);\n}\n\n/* \u2500\u2500 Close button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  margin: -6px -6px 0 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  color: var(--banner-icon-color);\n  transition: background 0.15s;\n  padding: 0;\n}\n\n.close-btn[hidden] {\n  display: none;\n}\n\n.close-btn:hover {\n  background: color-mix(in srgb, var(--banner-border) 60%, var(--banner-bg));\n}\n\n.close-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n}\n";
@@ -21,14 +161,6 @@ var VARIANT_ICONS = {
   warning: ICON_ALERT_TRIANGLE,
   success: ICON_CHECK_CIRCLE
 };
-var _sheet = null;
-function getSheet() {
-  if (!_sheet) {
-    _sheet = new CSSStyleSheet();
-    _sheet.replaceSync(bv_alert_banner_default);
-  }
-  return _sheet;
-}
 var BvAlertBanner = class extends HTMLElement {
   static observedAttributes = [
     "variant",
@@ -48,10 +180,7 @@ var BvAlertBanner = class extends HTMLElement {
   _closeBtn = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_alert_banner_default);
   }
   get variant() {
     return this.getAttribute("variant") ?? "default";
@@ -105,11 +234,6 @@ var BvAlertBanner = class extends HTMLElement {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_alert_banner_default;
-      shadow.appendChild(s);
-    }
     const banner = document.createElement("div");
     banner.className = "banner";
     banner.setAttribute("role", "alert");
@@ -236,14 +360,6 @@ var MONTH_NAMES = [
 var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sat", "Su"];
 var CHEVRON_LEFT = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>`;
 var CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>`;
-var _sheet2 = null;
-function getSheet2() {
-  if (!_sheet2) {
-    _sheet2 = new CSSStyleSheet();
-    _sheet2.replaceSync(bv_date_range_picker_default);
-  }
-  return _sheet2;
-}
 function dateToIso(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
@@ -259,6 +375,9 @@ function parseDisplay(str) {
   const d = match[2].padStart(2, "0");
   return `${match[3]}-${m}-${d}`;
 }
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
 function getPresetDates(key) {
   const now = /* @__PURE__ */ new Date();
   now.setHours(0, 0, 0, 0);
@@ -301,7 +420,25 @@ function getPresetDates(key) {
   }
 }
 var BvDateRangePicker = class extends HTMLElement {
-  static observedAttributes = ["start", "end", "preset"];
+  static observedAttributes = [
+    "start",
+    "end",
+    "preset",
+    // BTN-10191 — opt-in validation config
+    "min",
+    "max",
+    "max-range-years",
+    "validate-order",
+    "validate-format",
+    "show-range-limit-banner",
+    // BTN-10191 — configurable error copy (all attributes; defaults apply otherwise)
+    "error-min",
+    "error-max",
+    "error-order",
+    "error-format",
+    "range-limit-message",
+    "range-limit-heading"
+  ];
   _rendered = false;
   _today;
   _start = "";
@@ -311,6 +448,12 @@ var BvDateRangePicker = class extends HTMLElement {
   _hover = "";
   _leftYear;
   _leftMonth;
+  // BTN-10191 — raw display strings retained when the user types an
+  // unparseable value AND `validate-format` is on. Lets V8 fire without
+  // corrupting `_start`/`_end` (which stay strictly ISO for consumers).
+  _startRawInvalid = "";
+  _endRawInvalid = "";
+  _validity = { valid: true, applyEnabled: false };
   _leftGrid = null;
   _rightGrid = null;
   _leftTitle = null;
@@ -319,6 +462,9 @@ var BvDateRangePicker = class extends HTMLElement {
   _endInput = null;
   _applyBtn = null;
   _bannerEl = null;
+  _startErrorEl = null;
+  _endErrorEl = null;
+  _formErrorEl = null;
   _leftDayMap = /* @__PURE__ */ new Map();
   _rightDayMap = /* @__PURE__ */ new Map();
   constructor() {
@@ -328,10 +474,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._today = dateToIso(now);
     this._leftYear = now.getFullYear();
     this._leftMonth = now.getMonth();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet2()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_date_range_picker_default);
   }
   get start() {
     return this._start;
@@ -355,14 +498,22 @@ var BvDateRangePicker = class extends HTMLElement {
     this._render();
   }
   attributeChangedCallback(name, _old, val) {
-    if (name === "start") this._start = val ?? "";
-    if (name === "end") this._end = val ?? "";
+    if (name === "start") {
+      this._start = val ?? "";
+      this._startRawInvalid = "";
+    }
+    if (name === "end") {
+      this._end = val ?? "";
+      this._endRawInvalid = "";
+    }
     if (name === "preset") this._preset = val ?? "";
     if (!this._rendered) return;
-    this._syncCalendars();
-    this._syncInputs();
-    this._syncPresets();
-    this._syncApply();
+    if (name === "start" || name === "end" || name === "preset") {
+      this._syncCalendars();
+      this._syncInputs();
+      this._syncPresets();
+    }
+    this._syncValidity();
   }
   _render() {
     if (this._rendered) return;
@@ -380,11 +531,6 @@ var BvDateRangePicker = class extends HTMLElement {
       }
     }
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_date_range_picker_default;
-      shadow.appendChild(s);
-    }
     const picker = document.createElement("div");
     picker.className = "picker";
     const sidebar = document.createElement("div");
@@ -452,15 +598,29 @@ 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.setAttribute("heading", "Date range exceeds 5 years");
-    banner.setAttribute(
-      "message",
-      "Only CSV download is available for this date range. Live report generation is not supported."
-    );
     banner.hidden = true;
     this._bannerEl = banner;
     bannerWrap.appendChild(banner);
@@ -470,8 +630,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _buildCalendarShell(side) {
     const cal = document.createElement("div");
@@ -647,11 +806,12 @@ var BvDateRangePicker = class extends HTMLElement {
       this._hover = "";
       this._preset = "custom";
     }
+    this._startRawInvalid = "";
+    this._endRawInvalid = "";
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _selectPreset(key) {
     if (key === "custom") {
@@ -667,6 +827,8 @@ var BvDateRangePicker = class extends HTMLElement {
     this._preset = key;
     this._picking = false;
     this._hover = "";
+    this._startRawInvalid = "";
+    this._endRawInvalid = "";
     if (start) {
       const parts = start.split("-");
       const y = parseInt(parts[0], 10);
@@ -679,21 +841,47 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncCalendars();
     this._syncInputs();
     this._syncPresets();
-    this._syncApply();
-    this._syncBanner();
+    this._syncValidity();
   }
   _onInputBlur(input, field) {
-    const iso = parseDisplay(input.value);
+    const raw = input.value;
+    if (raw === "") {
+      if (field === "start") {
+        this._start = "";
+        this._startRawInvalid = "";
+      } else {
+        this._end = "";
+        this._endRawInvalid = "";
+      }
+      this._syncCalendars();
+      this._syncPresets();
+      this._syncValidity();
+      return;
+    }
+    const iso = parseDisplay(raw);
     if (iso) {
-      if (field === "start") this._start = iso;
-      else this._end = iso;
+      if (field === "start") {
+        this._start = iso;
+        this._startRawInvalid = "";
+      } else {
+        this._end = iso;
+        this._endRawInvalid = "";
+      }
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
       this._syncCalendars();
       this._syncPresets();
-      this._syncApply();
-      this._syncBanner();
+      this._syncValidity();
+    } else if (this.hasAttribute("validate-format")) {
+      if (field === "start") {
+        this._start = "";
+        this._startRawInvalid = raw;
+      } else {
+        this._end = "";
+        this._endRawInvalid = raw;
+      }
+      this._syncValidity();
     } else {
       input.value = formatDisplay(field === "start" ? this._start : this._end);
     }
@@ -708,28 +896,153 @@ var BvDateRangePicker = class extends HTMLElement {
       btn.classList.toggle("active", btn.dataset["preset"] === this._preset);
     });
   }
-  _syncApply() {
+  // ── BTN-10191 — validation orchestrator ──────────────────────────────
+  _syncValidity() {
+    const cfg = this._readConfig();
+    const previous = this._validity;
+    this._validity = validateDateRange(
+      {
+        start: this._start || this._startRawInvalid,
+        end: this._end || this._endRawInvalid
+      },
+      cfg
+    );
+    this._applyErrorStates();
+    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(
+        new CustomEvent("bv-validity-change", {
+          bubbles: true,
+          composed: true,
+          detail: { ...this._validity }
+        })
+      );
+    }
+  }
+  _readConfig() {
+    const min = this.getAttribute("min") || void 0;
+    const max = this.getAttribute("max") || void 0;
+    const mryStr = this.getAttribute("max-range-years");
+    const maxRangeYears = mryStr !== null && mryStr !== "" ? Number(mryStr) : void 0;
+    return {
+      min,
+      max,
+      maxRangeYears: Number.isFinite(maxRangeYears) ? maxRangeYears : void 0,
+      validateOrder: this.hasAttribute("validate-order"),
+      validateFormat: this.hasAttribute("validate-format")
+    };
+  }
+  _applyErrorStates() {
+    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;
+      }
+    }
+  }
+  _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");
+      }
+    }
+    if (errorEl) {
+      if (err) {
+        errorEl.textContent = this._resolveFieldError(err, field);
+        errorEl.hidden = false;
+      } else {
+        errorEl.textContent = "";
+        errorEl.hidden = true;
+      }
+    }
+  }
+  _resolveFieldError(err, field) {
+    if (err === "format") {
+      return this.getAttribute("error-format") ?? "Enter a valid date in MM/DD/YYYY format";
+    }
+    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);
+      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 (maxAttr === "today") return `${capitalize(field)} date cannot be in the future`;
+    return `${capitalize(field)} date cannot be after ${maxDisplay}`;
+  }
+  _resolveOrderError() {
+    return this.getAttribute("error-order") ?? "Start date must be on or before end date";
+  }
+  _applyApplyState() {
     if (this._applyBtn) {
-      this._applyBtn.disabled = !this._start || !this._end;
+      this._applyBtn.disabled = !this._validity.applyEnabled;
     }
   }
-  _syncBanner() {
+  _applyBannerState() {
     if (!this._bannerEl) return;
     const pickerEl = this.shadowRoot.querySelector(".picker");
-    if (!this._start) {
+    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") || "";
+    const maxIso = maxAttr === "today" ? isoToday() : maxAttr;
+    if (!minIso && !maxIso) {
+      this._leftDayMap.forEach((btn) => this._resetDayDisabled(btn));
+      this._rightDayMap.forEach((btn) => this._resetDayDisabled(btn));
       return;
     }
-    const startDate = /* @__PURE__ */ new Date(this._start + "T00:00:00");
-    const fiveYearsAgo = /* @__PURE__ */ new Date();
-    fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
-    const show = startDate < fiveYearsAgo;
-    this._bannerEl.hidden = !show;
-    pickerEl == null ? void 0 : pickerEl.classList.toggle("picker--with-banner", show);
+    const paint = (btn, iso) => {
+      const outOfRange = !!minIso && iso < minIso || !!maxIso && iso > maxIso;
+      if (outOfRange) {
+        btn.disabled = true;
+        btn.setAttribute("aria-disabled", "true");
+        btn.classList.add("day--disabled");
+      } else {
+        this._resetDayDisabled(btn);
+      }
+    };
+    this._leftDayMap.forEach(paint);
+    this._rightDayMap.forEach(paint);
+  }
+  _resetDayDisabled(btn) {
+    btn.disabled = false;
+    btn.removeAttribute("aria-disabled");
+    btn.classList.remove("day--disabled");
   }
   // Auto-insert slashes after MM and DD digits while the user types forward.
-  // Also syncs the banner live once the date is fully typed.
+  // Also runs full validity sync on every keystroke — this is what clears the
+  // error state immediately on correction (per BTN-10191 a11y requirement).
   _setupDateMask(input, field) {
     input.addEventListener("input", (e) => {
       var _a;
@@ -746,17 +1059,19 @@ var BvDateRangePicker = class extends HTMLElement {
         formatted = digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4, 8);
       }
       input.value = formatted;
+      if (field === "start") this._startRawInvalid = "";
+      else this._endRawInvalid = "";
       if (formatted.length === 10) {
         const iso = parseDisplay(formatted);
         if (iso) {
           if (field === "start") this._start = iso;
           else this._end = iso;
-          this._syncBanner();
         }
-      } else if (field === "start" && formatted.length < 10) {
-        this._start = "";
-        this._syncBanner();
+      } else {
+        if (field === "start") this._start = "";
+        else this._end = "";
       }
+      this._syncValidity();
     });
   }
   _apply() {
@@ -779,14 +1094,20 @@ if (!customElements.get("bv-date-range-picker")) {
 
 // components/bv-date-range-input/bv-date-range-input.ts
 var CALENDAR_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>`;
-var _sheet3 = null;
-function getSheet3() {
-  if (!_sheet3) {
-    _sheet3 = new CSSStyleSheet();
-    _sheet3.replaceSync(bv_date_range_input_default);
-  }
-  return _sheet3;
-}
+var PICKER_PASSTHROUGH_ATTRS = [
+  "min",
+  "max",
+  "max-range-years",
+  "validate-order",
+  "validate-format",
+  "show-range-limit-banner",
+  "error-min",
+  "error-max",
+  "error-order",
+  "error-format",
+  "range-limit-message",
+  "range-limit-heading"
+];
 function isoToDisplay(iso) {
   if (!iso) return "";
   const [y, m, d] = iso.split("-");
@@ -798,19 +1119,18 @@ var BvDateRangeInput = class extends HTMLElement {
     "start",
     "end",
     "placeholder",
-    "required"
+    "required",
+    ...PICKER_PASSTHROUGH_ATTRS
   ];
   _rendered = false;
   _labelEl = null;
   _displayEl = null;
+  _triggerEl = null;
   _pickerEl = null;
-  _offClick = null;
+  _dropdown = null;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
-      shadow.adoptedStyleSheets = [getSheet3()];
-    }
+    adoptStyles(this.attachShadow({ mode: "open" }), bv_date_range_input_default);
   }
   get start() {
     return this.getAttribute("start") ?? "";
@@ -828,23 +1148,29 @@ var BvDateRangeInput = class extends HTMLElement {
     this._render();
   }
   disconnectedCallback() {
-    if (this._offClick) document.removeEventListener("click", this._offClick);
+    var _a;
+    (_a = this._dropdown) == null ? void 0 : _a.cleanup();
   }
-  attributeChangedCallback(name, _old, _val) {
+  attributeChangedCallback(name, _old, val) {
     if (!this._rendered) return;
     if (name === "label" || name === "required") this._syncLabel();
-    if (name === "start" || name === "end") this._syncDisplay();
     if (name === "placeholder") this._syncDisplay();
+    if (name === "start" || name === "end") {
+      this._syncDisplay();
+      if (this._pickerEl) {
+        if (val === null) this._pickerEl.removeAttribute(name);
+        else this._pickerEl.setAttribute(name, val);
+      }
+    }
+    if (PICKER_PASSTHROUGH_ATTRS.includes(name) && this._pickerEl) {
+      if (val === null) this._pickerEl.removeAttribute(name);
+      else this._pickerEl.setAttribute(name, val);
+    }
   }
   _render() {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    if (!shadow.adoptedStyleSheets.length) {
-      const s = document.createElement("style");
-      s.textContent = bv_date_range_input_default;
-      shadow.appendChild(s);
-    }
     const label = document.createElement("label");
     label.className = "field-label";
     this._labelEl = label;
@@ -854,6 +1180,7 @@ var BvDateRangeInput = class extends HTMLElement {
     trigger.setAttribute("aria-haspopup", "dialog");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("part", "trigger");
+    this._triggerEl = trigger;
     const display = document.createElement("span");
     display.className = "trigger-display";
     this._displayEl = display;
@@ -862,20 +1189,26 @@ var BvDateRangeInput = class extends HTMLElement {
     icon.innerHTML = CALENDAR_ICON;
     trigger.append(display, icon);
     trigger.addEventListener("click", (e) => {
+      var _a;
       e.stopPropagation();
-      this._toggle();
+      (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });
     const popup = document.createElement("div");
     popup.className = "picker-popup";
     const picker = document.createElement("bv-date-range-picker");
     picker.setAttribute("start", this.getAttribute("start") ?? "");
     picker.setAttribute("end", this.getAttribute("end") ?? "");
+    for (const attr of PICKER_PASSTHROUGH_ATTRS) {
+      const val = this.getAttribute(attr);
+      if (val !== null) picker.setAttribute(attr, val);
+    }
     this._pickerEl = picker;
     picker.addEventListener("bv-change", (e) => {
+      var _a;
       const detail = e.detail;
       this.setAttribute("start", detail.start);
       this.setAttribute("end", detail.end);
-      this._close();
+      (_a = this._dropdown) == null ? void 0 : _a.close();
       this.dispatchEvent(
         new CustomEvent("bv-change", {
           bubbles: true,
@@ -885,36 +1218,41 @@ var BvDateRangeInput = class extends HTMLElement {
       );
     });
     picker.addEventListener("bv-cancel", () => {
-      this._close();
+      var _a;
+      (_a = this._dropdown) == null ? void 0 : _a.close();
+    });
+    picker.addEventListener("bv-validity-change", (e) => {
+      const detail = e.detail;
+      if (this._triggerEl) {
+        if (detail.valid) {
+          this._triggerEl.classList.remove("invalid");
+          this._triggerEl.removeAttribute("aria-invalid");
+        } else {
+          this._triggerEl.classList.add("invalid");
+          this._triggerEl.setAttribute("aria-invalid", "true");
+        }
+      }
+      this.dispatchEvent(
+        new CustomEvent("bv-validity-change", {
+          bubbles: true,
+          composed: true,
+          detail
+        })
+      );
     });
     popup.appendChild(picker);
     shadow.append(label, trigger, popup);
     this._syncLabel();
     this._syncDisplay();
-    this._offClick = (e) => {
-      if (!this.contains(e.target) && !shadow.contains(e.target)) {
-        this._close();
+    this._dropdown = bindDropdownController(this, {
+      trigger,
+      onBeforeOpen: () => {
+        if (this._pickerEl) {
+          this._pickerEl.setAttribute("start", this.getAttribute("start") ?? "");
+          this._pickerEl.setAttribute("end", this.getAttribute("end") ?? "");
+        }
       }
-    };
-    document.addEventListener("click", this._offClick);
-  }
-  _toggle() {
-    if (this.hasAttribute("open")) this._close();
-    else this._open();
-  }
-  _open() {
-    var _a;
-    this.setAttribute("open", "");
-    (_a = this.shadowRoot.querySelector(".trigger")) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
-    if (this._pickerEl) {
-      this._pickerEl.setAttribute("start", this.getAttribute("start") ?? "");
-      this._pickerEl.setAttribute("end", this.getAttribute("end") ?? "");
-    }
-  }
-  _close() {
-    var _a;
-    this.removeAttribute("open");
-    (_a = this.shadowRoot.querySelector(".trigger")) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+    });
   }
   _syncLabel() {
     if (!this._labelEl) return;