@reliability-design/web 1.4.9 → 1.4.11

package/dist/components/rel-calendar/README.md

@@ -1,109 +1,111 @@
-# rel-calendar
-
-`<rel-calendar>` is the inline, always-visible month calendar of the Reliability Design System (Figma "Calendar"). It renders one month as a 7-column grid with previous/next navigation, a today ring, dimmed weekends and adjacent-month days, `min`/`max` bounds and a custom disabled-day predicate, and lets the user select a single date. Use it when the calendar itself is the interface — a scheduling sidebar, an inline availability view. For a form field that opens a calendar in a popover use `<rel-date-picker>`; for a from/to range use `<rel-range-picker>`.
-
-## Usage
-
-```html
-<!-- Default: today's month, nothing selected -->
-<rel-calendar></rel-calendar>
-
-<!-- Preselected date (ISO YYYY-MM-DD); the grid opens on that month -->
-<rel-calendar value="2026-01-16"></rel-calendar>
-
-<!-- Bounded: days outside min/max render disabled -->
-<rel-calendar min="2026-01-01" max="2026-12-31"></rel-calendar>
-
-<!-- Monday-first week with German month and weekday names -->
-<rel-calendar week-start="mon" locale="de-DE"></rel-calendar>
-
-<!-- Disabled: every cell and both navigation buttons are inert -->
-<rel-calendar value="2026-01-16" disabled></rel-calendar>
-```
-
-```js
-const calendar = document.querySelector("rel-calendar");
-
-// Disable individual days on top of min/max (property only — there is no attribute)
-calendar.isDateDisabled = (date) => date.getDay() === 0 || date.getDay() === 6;
-
-calendar.addEventListener("rel-change", (e) => {
-  e.detail.value; // "2026-01-16"
-  e.detail.date;  // Date at local midnight
-});
-```
-
-<!-- readme-gen:start -->
-
-<!-- Generated from rel-calendar.ts — do not edit; run readme-generate.mjs -->
-
-## API
-
-### Attributes / Properties
-
-| Property | Attribute | Type | Default | Description |
-| --- | --- | --- | --- | --- |
-| `value` | `value` | `string \| null` | `null` | Selected date as an ISO `YYYY-MM-DD` string, or `null` for no selection; setting it also moves the visible month. Reflected. |
-| `min` | `min` | `string \| null` | `null` | Earliest selectable date (ISO `YYYY-MM-DD`); earlier days render disabled. |
-| `max` | `max` | `string \| null` | `null` | Latest selectable date (ISO `YYYY-MM-DD`); later days render disabled. |
-| `disabled` | `disabled` | `boolean` | `false` | Disables every day cell and the month navigation; the host dims to 40% opacity (Figma State=Disabled). Reflected. |
-| `weekStart` | `week-start` | `"sun" \| "mon"` | `"sun"` | First column of the week grid: `"sun"` (default) or `"mon"`. |
-| `locale` | `locale` | `string` | `"en-US"` | BCP 47 locale for the month name, weekday headers and day cell labels (via `Intl.DateTimeFormat`). |
-
-### Public fields / accessors
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `isDateDisabled` | `(date: Date) => boolean` | Custom predicate that disables individual days (return `true` to disable); applied on top of `min`/`max`. Property only — assign it from JavaScript. |
-
-## Events
-
-| Event | Detail | Bubbles / composed | Description |
-| --- | --- | --- | --- |
-| `rel-change` | `{ value: newValue, date: new Date(day.date), }` | bubbles / composed | Fired when the user selects a day. Detail: `{ value: string, date: Date }` — the ISO `YYYY-MM-DD` string and a local-midnight Date. |
-
-## Slots
-
-| Slot | Description |
-| --- | --- |
-| — | This element has no slots. |
-
-## CSS Parts
-
-| Part | Description |
-| --- | --- |
-| `header` | Month navigation row (previous button, month/year label, next button) |
-| `action` | The previous-month and next-month buttons |
-| `label` | The month/year heading and each weekday column header |
-| `list` | The weekday-header row and the day grid |
-| `item` | Each day cell button |
-
-<!-- readme-gen:end -->
-
-## Accessibility
-
-- The day area is a `role="grid"` named "<Month> <Year>" (e.g. "January 2026"); the weekday header row and each week are `role="row"`, weekday names are `role="columnheader"`.
-- Every day is a native `<button role="gridcell">` whose `aria-label` is the full long date in `locale` ("Friday, January 16, 2026"), with `aria-selected` for the selected day, `aria-current="date"` on today, and the native `disabled` attribute for days outside `min`/`max`, rejected by `isDateDisabled`, or when the host is `disabled`.
-- The navigation buttons are labelled "Previous month" / "Next month".
-- Roving tabindex: exactly one cell is a Tab stop — the last cell the user arrowed to, else the selected day, else today, else the first enabled day of the month — so Tab can always re-enter the grid.
-- After every month or year change (buttons, PageUp/PageDown, or arrowing past the edge of the month) the new "<Month> <Year>" is read to screen readers through the shared `announce()` live region (`utils/announce.ts`).
-
-| Key | Action |
-| --- | --- |
-| ArrowLeft / ArrowRight | Focus the previous / next day (crossing into the adjacent month switches the view) |
-| ArrowUp / ArrowDown | Focus the same weekday one week earlier / later |
-| Home / End | Focus the first / last cell of the current row |
-| PageUp / PageDown | Show the previous / next month |
-| Shift + PageUp / Shift + PageDown | Show the previous / next year |
-| Enter / Space | Select the focused day (fires `rel-change`) |
-
-## Notes / Edge Cases
-
-- `value`, `min` and `max` must be `YYYY-MM-DD`; any other string is ignored (no selection, view unchanged). Setting `value` moves the visible month; clearing it to `null` leaves the view where it is.
-- The grid always renders six weeks (42 cells). The leading/trailing cells belong to the adjacent months and, unlike in `rel-date-picker`, they are selectable (subject to `min`/`max`/`isDateDisabled`); picking one fires `rel-change` and the view jumps to that month.
-- Comparisons happen at local midnight: the `Date` passed to `isDateDisabled` and returned in `rel-change` is `new Date(y, m, d)`, so read it with local getters, not `toISOString()`.
-- `disabled` makes every day fail the disabled check and disables both navigation buttons; pointer events stay on the host so the `not-allowed` cursor shows.
-- Each cell follows Figma ".Date Days": a 36 px full-rounded halo around a 28 px disc. The halo carries hover (`action/overlay/hover`), the focus ring and the selected day's `elevated-1` backing; the disc carries today's 1 px brand ring and the selected day's `inverse-2` fill with an inverse semibold label.
-- Figma treats the cell tone as one axis, so exactly one applies per day: today beats weekend beats adjacent-month. Adjacent-month labels render at 40% and weekend labels at 70% — on the label only, so a *selected* weekend or adjacent-month day still reads at full contrast on the dark disc. A disabled day switches to the disabled text colour, and a disabled today swaps its brand ring for a neutral one.
-- The month-navigation buttons are hand-rolled ghost buttons that bind the same action tokens as `<rel-button variant="ghost">` (audit 8b) — they are intentionally not `<rel-button>` instances.
-- The host has a fixed `max-width: 320px`, its own radius, shadow and padding and no border (Figma draws the card with `shadow/xl`, approximated here by `--rel-shadows-shadow-400`, the nearest shipped step); wrap it or override on the host if you need a different footprint.
+# rel-calendar
+
+`<rel-calendar>` is the inline, always-visible month calendar of the Reliability Design System (Figma "Calendar"). It renders one month as a 7-column grid with previous/next navigation, a today ring, dimmed weekends and adjacent-month days, `min`/`max` bounds and a custom disabled-day predicate, and lets the user select a single date. Use it when the calendar itself is the interface — a scheduling sidebar, an inline availability view. For a form field that opens a calendar in a popover use `<rel-date-picker>`; for a from/to range use `<rel-range-picker>`.
+
+## Usage
+
+```html
+<!-- Default: today's month, nothing selected -->
+<rel-calendar></rel-calendar>
+
+<!-- Preselected date (ISO YYYY-MM-DD); the grid opens on that month -->
+<rel-calendar value="2026-01-16"></rel-calendar>
+
+<!-- Bounded: days outside min/max render disabled -->
+<rel-calendar min="2026-01-01" max="2026-12-31"></rel-calendar>
+
+<!-- Monday-first week with German month and weekday names -->
+<rel-calendar week-start="mon" locale="de-DE"></rel-calendar>
+
+<!-- Disabled: every cell and both navigation buttons are inert -->
+<rel-calendar value="2026-01-16" disabled></rel-calendar>
+```
+
+```js
+const calendar = document.querySelector("rel-calendar");
+
+// Disable individual days on top of min/max (property only — there is no attribute)
+calendar.isDateDisabled = (date) => date.getDay() === 0 || date.getDay() === 6;
+
+calendar.addEventListener("rel-change", (e) => {
+  e.detail.value; // "2026-01-16"
+  e.detail.date;  // Date at local midnight
+});
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-calendar.ts — do not edit; run readme-generate.mjs -->
+
+## API
+
+### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `string \| null` | `null` | Selected date as an ISO `YYYY-MM-DD` string, or `null` for no selection; setting it also moves the visible month. Reflected. |
+| `min` | `min` | `string \| null` | `null` | Earliest selectable date (ISO `YYYY-MM-DD`); earlier days render disabled. |
+| `max` | `max` | `string \| null` | `null` | Latest selectable date (ISO `YYYY-MM-DD`); later days render disabled. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables every day cell and the month navigation; the host dims to 40% opacity (Figma State=Disabled). Reflected. |
+| `weekStart` | `week-start` | `"sun" \| "mon"` | `"sun"` | First column of the week grid: `"sun"` (default) or `"mon"`. |
+| `locale` | `locale` | `string` | `"en-US"` | BCP 47 locale for the month name, weekday headers and day cell labels (via `Intl.DateTimeFormat`). |
+
+### Public fields / accessors
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isDateDisabled` | `(date: Date) => boolean` | Custom predicate that disables individual days (return `true` to disable); applied on top of `min`/`max`. Property only — assign it from JavaScript. |
+
+## Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `rel-change` | `{ value: newValue, date: new Date(day.date), }` | bubbles / composed | Fired when the user selects a day. Detail: `{ value: string, date: Date }` — the ISO `YYYY-MM-DD` string and a local-midnight Date. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| — | This element has no slots. |
+
+## CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `header` | Month navigation row (previous button, month/year label, next button) |
+| `action` | The previous-month and next-month buttons |
+| `label` | The month/year heading and each weekday column header |
+| `list` | The weekday-header row and the day grid |
+| `item` | Each day cell button (unavailable days also carry `unavailable`) |
+| `unavailable` | Day cells that cannot be picked (outside `min` / `max`, or blocked by `isDateDisabled`), alongside `item`. They are `aria-disabled` and stay focusable, so `::part(item):disabled` does not match them; style them with `::part(unavailable)` |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- The day area is a `role="grid"` named "<Month> <Year>" (e.g. "January 2026"); the weekday header row and each week are `role="row"`, weekday names are `role="columnheader"`.
+- Every day is a native `<button role="gridcell">` whose `aria-label` is the full long date in `locale` ("Friday, January 16, 2026"), with `aria-selected` for the selected day and `aria-current="date"` on today. Days outside `min`/`max` or rejected by `isDateDisabled` are `aria-disabled="true"`, not natively disabled: they stay focusable so the arrow keys can land on them (rather than getting stuck in front of one), and Enter, Space and click do nothing there. When the host is `disabled`, every day button is also natively disabled, so the grid leaves the tab order.
+- The navigation buttons are labelled "Previous month" / "Next month".
+- Roving tabindex: exactly one cell is a Tab stop — the day last interacted with (arrowed to, clicked, or tabbed onto), else the selected day, else today, else the first enabled day of the month — so Tab can always re-enter the grid, and Shift+Tab then Tab returns to the day you left. The day last interacted with keeps the Tab stop after a chevron click as long as it is still on screen as a leading/trailing cell.
+- The key map is shared with `<rel-date-picker>` and `<rel-range-picker>` (`dayGridTarget` in `rel-date-picker/period-page.ts`). Keys move by date, so crossing a month edge lands on the right day (Sun 27 Sep + ArrowDown → Sun 4 Oct) and the view follows.
+- After every month or year change (buttons, PageUp/PageDown, or arrowing past the edge of the month) the new "<Month> <Year>" is read to screen readers through the shared `announce()` live region (`utils/announce.ts`).
+
+| Key | Action |
+| --- | --- |
+| ArrowLeft / ArrowRight | Focus the previous / next day (crossing into the adjacent month switches the view) |
+| ArrowUp / ArrowDown | Focus the same weekday one week earlier / later |
+| Home / End | Focus the first / last day of the week (honours `week-start`; may cross into the adjacent month) |
+| PageUp / PageDown | Focus the same day in the previous / next month, clamped to that month's last day (31 Jan → 28 Feb) |
+| Shift + PageUp / Shift + PageDown | Focus the same day in the previous / next year (29 Feb → 28 Feb) |
+| Enter / Space | Select the focused day (fires `rel-change`); does nothing on an unavailable day |
+
+## Notes / Edge Cases
+
+- `value`, `min` and `max` must be `YYYY-MM-DD`; any other string is ignored (no selection, view unchanged). Setting `value` moves the visible month; clearing it to `null` leaves the view where it is.
+- The grid always renders six weeks (42 cells). The leading/trailing cells belong to the adjacent months and, unlike in `rel-date-picker`, they are selectable (subject to `min`/`max`/`isDateDisabled`); picking one fires `rel-change`, the view jumps to that month and focus moves with the picked day.
+- Comparisons happen at local midnight: the `Date` passed to `isDateDisabled` and returned in `rel-change` is `new Date(y, m, d)`, so read it with local getters, not `toISOString()`.
+- `disabled` makes every day fail the disabled check and natively disables every day button and both navigation buttons, so nothing in the calendar is in the tab order; pointer events stay on the host so the `not-allowed` cursor shows.
+- Each cell follows Figma ".Date Days": a 36 px full-rounded halo around a 28 px disc. The halo carries hover (`action/overlay/hover`), the focus ring and the selected day's `elevated-1` backing; the disc carries today's 1 px brand ring and the selected day's `inverse-2` fill with an inverse semibold label.
+- Figma treats the cell tone as one axis, so exactly one applies per day: today beats weekend beats adjacent-month. Adjacent-month and weekend labels use the caption colour (`--rel-text-caption`; changed in 1.5.0, they used to fade to 40% / 70% opacity) — on the label only, so a *selected* weekend or adjacent-month day still reads at full contrast on the dark disc. A disabled day switches to the disabled text colour, with no extra fade when it is also a weekend or adjacent-month day (changed in 1.5.0; those used to fade further), and today keeps its brand ring even when it is unavailable or the calendar is disabled (changed in 1.5.0; it used to switch to a neutral ring).
+- The month-navigation buttons are hand-rolled ghost buttons that bind the same action tokens as `<rel-button variant="ghost">` (audit 8b) — they are intentionally not `<rel-button>` instances.
+- The host has a fixed `max-width: 320px`, its own radius, shadow and padding and no border (Figma draws the card with `shadow/xl`, approximated here by `--rel-shadows-shadow-400`, the nearest shipped step); wrap it or override on the host if you need a different footprint.

package/dist/components/rel-cardmedia/README.md

@@ -21,7 +21,7 @@ Media card (element `<rel-card-media>`, folder `rel-cardmedia`): a bordered surf
   subtitle="$99.99"
 >
   <p>Closed-back, 40 mm drivers, detachable cable.</p>
-  <rel-button variant="primary" size="small">Add to cart</rel-button>
+  <rel-button variant="primary" tone="brand" size="small">Add to cart</rel-button>
 </rel-card-media>
 
 <!-- No image: just the content area -->