Shift Roster

The component is self-contained: one file, zero dependencies, its own palette in local variables --vibeui-calendar-025-*. Server-side: there is no state, everything is computed from the people prop at render. The markup is a real <table> with <th scope="col"> on the days and <th scope="row"> on the staff, so a screen reader reads a cell as "Irina Sokolova, Tuesday". A cell holds a short code under aria-hidden and the full shift name in a visually hidden [data-part="sr"], so colour is not the only carrier of meaning. The shift type is expressed by the data-shift attribute, and every type has a palette of its own. The row density is switched by the variable --vibeui-calendar-025-cell through data-density, and the horizontal scroll lives in a separate [data-part="scroll"] wrapper, so the table does not stretch the card. 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. All the captions — the staff column heading, the shift names and codes — arrive in props, the Russian values sit in the defaults.