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

@bluevolt-tech/lumen 2.1.0 → 2.3.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 (20) hide show

package/dist/components/bv-date-range-picker/bv-date-range-picker.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface DateRangeChangeDetail {
     preset: string;
 }
 export declare class BvDateRangePicker extends HTMLElement {
-    static readonly observedAttributes: readonly ["start", "end", "preset", "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"];
+    static readonly observedAttributes: readonly ["start", "end", "preset", "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", "error-min-severity", "error-max-severity", "error-format-severity", "error-order-severity", "range-limit-severity"];
     private _rendered;
     private _today;
     private _start;
@@ -26,12 +26,22 @@ export declare class BvDateRangePicker extends HTMLElement {
     private _startInput;
     private _endInput;
     private _applyBtn;
-    private _bannerEl;
-    private _startErrorEl;
-    private _endErrorEl;
-    private _formErrorEl;
+    /**
+     * 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`).
+     */
+    private _alertBannerEl;
     private _leftDayMap;
     private _rightDayMap;
+    /**
+     * 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.
+     */
+    private _lastEditedField;
     constructor();
     get start(): string;
     set start(v: string);
@@ -41,6 +51,16 @@ export declare class BvDateRangePicker extends HTMLElement {
     set preset(v: string);
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    /**
+     * 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(): void;
     private _render;
     private _buildCalendarShell;
     private _navigate;
@@ -57,12 +77,45 @@ export declare class BvDateRangePicker extends HTMLElement {
     private _syncPresets;
     private _syncValidity;
     private _readConfig;
-    private _applyErrorStates;
-    private _paintInputError;
+    /**
+     * 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").
+     */
+    private _paintInputInvalidState;
+    private _paintOne;
+    /**
+     * 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).
+     */
+    private _applyAlertBanner;
+    /**
+     * Pick which error the banner should reflect. See `_applyAlertBanner` for
+     * the precedence rules.
+     */
+    private _resolveActiveError;
     private _resolveFieldError;
+    /**
+     * 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.
+     */
+    private _interpolateField;
     private _resolveOrderError;
     private _applyApplyState;
-    private _applyBannerState;
     private _applyCalendarDisabledState;
     private _resetDayDisabled;
     private _setupDateMask;

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

@@ -1,5 +1,5 @@
 // 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/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();
@@ -20,6 +20,13 @@ function adoptStyles(shadow, css) {
 }
 // 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;
@@ -50,7 +57,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,
@@ -59,6 +70,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;
@@ -385,7 +405,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;
@@ -409,12 +435,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();
@@ -449,10 +485,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;
@@ -463,6 +501,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;
@@ -546,31 +608,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);
@@ -743,6 +785,7 @@ var BvDateRangePicker = class extends HTMLElement {
       this._preset = "custom";
       this._picking = true;
       this._hover = "";
+      this._lastEditedField = "start";
     } else {
       if (iso < this._start) {
         this._end = this._start;
@@ -753,6 +796,7 @@ var BvDateRangePicker = class extends HTMLElement {
       this._picking = false;
       this._hover = "";
       this._preset = "custom";
+      this._lastEditedField = "end";
     }
     this._startRawInvalid = "";
     this._endRawInvalid = "";
@@ -777,6 +821,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);
@@ -792,6 +837,7 @@ var BvDateRangePicker = class extends HTMLElement {
     this._syncValidity();
   }
   _onInputBlur(input, field) {
+    this._lastEditedField = field;
     const raw = input.value;
     if (raw === "") {
       if (field === "start") {
@@ -855,9 +901,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(
@@ -879,88 +925,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") || "";
@@ -996,6 +1094,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) {

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.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,34 @@ function bindDropdownController(host, options = {}) {
     syncExpanded();
     host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
   };
-  const close = () => {
+  const closeWithReason = (reason) => {
+    var _a;
     if (!host.hasAttribute("open")) return;
+    if (options.canClose && !options.canClose(reason)) return;
     host.removeAttribute("open");
     syncExpanded();
+    host.dispatchEvent(
+      new CustomEvent("bv-dropdown-close", {
+        bubbles: true,
+        composed: true,
+        detail: { reason }
+      })
+    );
+    (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
   };
+  const close = () => closeWithReason("programmatic");
   const toggle = () => {
-    if (host.hasAttribute("open")) close();
+    if (host.hasAttribute("open")) closeWithReason("programmatic");
     else open();
   };
   const offClick = (e) => {
     if (!host.hasAttribute("open")) return;
-    const target = e.target;
-    if (host.contains(target) || shadow.contains(target)) return;
-    close();
+    if (e.composedPath().includes(host)) return;
+    closeWithReason("outside-click");
   };
   document.addEventListener("click", offClick);
   const onKeyDown = (e) => {
-    if (e.key === "Escape") close();
+    if (e.key === "Escape") closeWithReason("escape");
   };
   host.addEventListener("keydown", onKeyDown);
   const observer = new MutationObserver(syncExpanded);
@@ -185,9 +194,8 @@ var BvFilterDropdown = class extends HTMLElement {
     chevron.className = "trigger-chevron";
     chevron.innerHTML = CHEVRON_DOWN;
     trigger.append(label, chevron);
-    trigger.addEventListener("click", (e) => {
+    trigger.addEventListener("click", () => {
       var _a;
-      e.stopPropagation();
       if (this.disabled) return;
       (_a = this._dropdown) == null ? void 0 : _a.toggle();
     });