Add attribute reference docs for all custom elements and visual protocol layers to schedule calendar

- Add 15 ATTRIBUTES.mdx files (one per custom element) with comprehensive
  attribute documentation, DOM API, events, and summary tables
- Add 9 visual protocol layers to aa-schedule-calendar (window shading,
  exclude-times hatching, fixed/random signal styling, signal-expiry height,
  min-interval buffers, reminder markers, exclude-dates/active-days dimming,
  fixed-times labels)
- Add interactive calendar key panel toggled by ? button
- Pass SignalProtocolConfig through calendar component hierarchy
- Add helper functions for time parsing, day activity, and duration conversion
- Extract calendar sub-components (warnings, stats, week-grid, signal-list,
  day-column)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: b3008

src/customElements/aa-affect-grid/aa-affect-grid.attributes.mdx

@@ -0,0 +1,223 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Response Items/Affect Grid/Attribute Reference" />
+
+# `<aa-affect-grid>` Attribute Reference
+
+A two-dimensional grid response item for measuring affect (emotional state) along two axes. Based on the Russell Affect Grid, it presents a square grid where the participant clicks a cell to indicate their current position in a 2D emotion space. Returns `[x, y]` coordinates.
+
+```html
+<aa-affect-grid
+  name="affect"
+  rows="9"
+  columns="9"
+  left-label="Unpleasant"
+  right-label="Pleasant"
+  top-label="High arousal"
+  bottom-label="Low arousal"
+  center-label="Neutral"
+  top-left-label="Distress"
+  top-right-label="Excitement"
+  bottom-left-label="Depression"
+  bottom-right-label="Relaxation">
+</aa-affect-grid>
+```
+
+---
+
+## Grid Dimensions
+
+### `rows`
+
+- **Type:** Number
+- **Default:** `11`
+
+The number of rows in the grid. Determines the vertical resolution.
+
+### `columns`
+
+- **Type:** Number
+- **Default:** `11`
+
+The number of columns in the grid. Determines the horizontal resolution.
+
+---
+
+## Axis Labels
+
+These labels describe the meaning of each axis and its endpoints.
+
+### `left-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the left side of the grid (negative x-axis). Typically describes the unpleasant end of the valence axis.
+
+### `right-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the right side of the grid (positive x-axis). Typically describes the pleasant end of the valence axis.
+
+### `top-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the top of the grid (positive y-axis). Typically describes high arousal.
+
+### `bottom-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the bottom of the grid (negative y-axis). Typically describes low arousal.
+
+### `center-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the centre of the grid. Typically "Neutral" or "Average".
+
+---
+
+## Quadrant Labels
+
+These labels describe the four corners of the grid, representing the combinations of the two axes.
+
+### `top-left-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the top-left corner (high arousal, unpleasant). Typically "Distress" or "Tense".
+
+### `top-right-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the top-right corner (high arousal, pleasant). Typically "Excitement" or "Alert".
+
+### `bottom-left-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the bottom-left corner (low arousal, unpleasant). Typically "Depression" or "Sad".
+
+### `bottom-right-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label at the bottom-right corner (low arousal, pleasant). Typically "Relaxation" or "Calm".
+
+---
+
+## Side Labels
+
+Additional labels positioned along the left and right edges, between the corner and centre.
+
+### `left-top-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the left side, upper half.
+
+### `left-bottom-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the left side, lower half.
+
+### `right-top-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the right side, upper half.
+
+### `right-bottom-label`
+
+- **Type:** String
+- **Default:** `""`
+
+Label on the right side, lower half.
+
+---
+
+## Other Attributes
+
+### `name`
+
+- **Type:** String
+- **Default:** —
+
+The variable name under which the selected coordinates are stored in session memory.
+
+### `value`
+
+- **Type:** Array `[x, y]`
+- **Default:** —
+- **User-defined:** No (read-only)
+
+The currently selected grid coordinates as a two-element array. `x` is the column (0-indexed from left), `y` is the row (0-indexed from top).
+
+### `required`
+
+- **Type:** Boolean
+- **Default:** `false`
+
+When `true`, the participant must select a cell before the parent screen can be submitted.
+
+---
+
+## Attribute Summary Table
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `name` | String | — | Variable name for data storage |
+| `rows` | Number | `11` | Grid row count |
+| `columns` | Number | `11` | Grid column count |
+| `top-label` | String | `""` | Top axis label |
+| `bottom-label` | String | `""` | Bottom axis label |
+| `left-label` | String | `""` | Left axis label |
+| `right-label` | String | `""` | Right axis label |
+| `center-label` | String | `""` | Centre label |
+| `top-left-label` | String | `""` | Top-left quadrant label |
+| `top-right-label` | String | `""` | Top-right quadrant label |
+| `bottom-left-label` | String | `""` | Bottom-left quadrant label |
+| `bottom-right-label` | String | `""` | Bottom-right quadrant label |
+| `left-top-label` | String | `""` | Left side upper label |
+| `left-bottom-label` | String | `""` | Left side lower label |
+| `right-top-label` | String | `""` | Right side upper label |
+| `right-bottom-label` | String | `""` | Right side lower label |
+| `value` | Array | — | Selected `[x, y]` coordinates (read-only) |
+| `required` | Boolean | `false` | Require selection before submit |
+
+---
+
+## DOM API
+
+```js
+const grid = document.querySelector('aa-affect-grid');
+console.log(grid.value); // e.g. [5, 3]
+console.log(grid.x);     // column index
+console.log(grid.y);     // row index
+```
+
+| Property | Type | Description |
+|---|---|---|
+| `value` | `[number, number]` | Selected `[x, y]` coordinates |
+| `x` | `number` | Selected column index |
+| `y` | `number` | Selected row index |
+
+### Layout
+
+The grid maintains a square aspect ratio using a `ResizeObserver`. It automatically adjusts to fit its container while keeping cells square.

src/customElements/aa-checkboxes/aa-checkboxes.attributes.mdx

@@ -0,0 +1,79 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Response Items/Checkboxes/Attribute Reference" />
+
+# `<aa-checkboxes>` Attribute Reference
+
+A multi-select response item that renders a group of checkboxes. The participant can select zero or more options. Each option is defined by an `<aa-choice-item>` child element (the same element used in `<aa-multiple-choice>`, but rendered here as checkboxes instead of radio buttons).
+
+```html
+<aa-checkboxes name="symptoms" vertical>
+  <aa-choice-item value="headache">Headache</aa-choice-item>
+  <aa-choice-item value="fatigue">Fatigue</aa-choice-item>
+  <aa-choice-item value="nausea">Nausea</aa-choice-item>
+  <aa-choice-item value="none">None of the above</aa-choice-item>
+</aa-checkboxes>
+```
+
+---
+
+## Attributes
+
+### `name`
+
+- **Type:** String
+- **Default:** —
+
+The variable name under which the selected values are stored in session memory. The stored value is an **array** of the `value` attributes of all checked items.
+
+### `horizontal`
+
+- **Type:** Boolean
+- **Default:** `false`
+
+When `true`, the checkbox items are laid out in a horizontal row.
+
+### `vertical`
+
+- **Type:** Boolean
+- **Default:** `true`
+
+When `true`, the checkbox items are laid out in a vertical stack. This is the default layout.
+
+### `value`
+
+- **Type:** String (array)
+- **Default:** —
+- **User-defined:** No (read-only)
+
+The currently selected values as an array. Each entry is the `value` attribute of a checked `<aa-choice-item>`.
+
+---
+
+## Child Element: `<aa-choice-item>`
+
+See the [`<aa-multiple-choice>` Attribute Reference](?path=/docs/response-items-multiple-choice-attribute-reference--docs) for full `<aa-choice-item>` documentation. Inside `<aa-checkboxes>`, the items render as checkboxes (allowing multiple selections) rather than radio buttons.
+
+---
+
+## Attribute Summary Table
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `name` | String | — | Variable name for data storage |
+| `horizontal` | Boolean | `false` | Horizontal layout |
+| `vertical` | Boolean | `true` | Vertical layout (default) |
+| `value` | Array | — | Array of checked item values (read-only) |
+
+---
+
+## DOM API
+
+```js
+const cb = document.querySelector('aa-checkboxes');
+console.log(cb.value); // e.g. ["headache", "fatigue"]
+```
+
+### Events
+
+Choice items dispatch `change` events when toggled. The parent `<aa-screen>` collects the final array of values on submission.