Capped Range

The component is self-contained: one file, zero dependencies, its own palette in local variables --vibeui-calendar-030-*. Client-side: both bounds of the range live in useState. The limit is expressed not by an error message but by the state of the grid: while only the first date is selected, the blocked function dims the days earlier than the start and further than maxDays-1 through the native disabled, so the ban is announced to a screen reader too. The number of grid rows is computed as Math.ceil((offset+days)/7)*7, so the month does not leave an empty sixth week. The progress bar under the grid is filled by the variable --vibeui-calendar-030-fill from the ratio of the range length to the limit. The total is declined through pluralize and announced through aria-live. The theme comes from the surrounding color-scheme through light-dark(): the component has no surface of its own by default, it sits directly on the page background and darkens along with it, while the background prop brings the panel back. The captions arrive in the text dictionary with the substitutions {max}, {count} and {unit}; the substitution returns nodes, so the numbers stay inside <b> and the word order is set by the translation.