kayg/calternal

Watch

Fork 0

Calendar: day header focus ring is a heavy box clipped at the top (not the shared ring) #1003

New issue

Open

opened 2026-10-03 09:46:52 +00:00 by kayg · 5 comments

kayg commented

2026-10-03 09:46:52 +00:00

Owner

Found in review (2026-10-03, hover-725 week 1440 light screenshot)

In Week view the focused day header ("Sat 3", today) shows a thick dark rectangular focus ring whose top edge is cut off by the header strip, and its rectangle does not follow the header's rounded shape. It looks like a heavy black box rather than the shared #658 focus ring.

Fix

Use the shared #658 ring on calendar day headers (token colour and width, radius matching the element), drawn inside the header so the strip never clips it (inset ring or outline-offset negative), in Day, Week, Month and Year headers. Only on keyboard focus (:focus-visible), not after a pointer click.

Verification

Production-build screenshots of keyboard focus on a Week header at 390/820/1440, light and dark, with 3x crops; e2e asserting the ring rect lies inside the header strip.

## Found in review (2026-10-03, hover-725 week 1440 light screenshot) In Week view the focused day header ("Sat 3", today) shows a thick dark rectangular focus ring whose top edge is cut off by the header strip, and its rectangle does not follow the header's rounded shape. It looks like a heavy black box rather than the shared #658 focus ring. ## Fix Use the shared #658 ring on calendar day headers (token colour and width, radius matching the element), drawn inside the header so the strip never clips it (inset ring or outline-offset negative), in Day, Week, Month and Year headers. Only on keyboard focus (`:focus-visible`), not after a pointer click. ## Verification Production-build screenshots of keyboard focus on a Week header at 390/820/1440, light and dark, with 3x crops; e2e asserting the ring rect lies inside the header strip.

week-header-1440-dark-macos-3x.png

23 KiB

week-header-1440-dark-macos.png

424 KiB

week-header-1440-light-macos-3x.png

27 KiB

week-header-1440-light-macos.png

542 KiB

week-header-390-dark-macos-3x.png

12 KiB

week-header-390-dark-macos.png

251 KiB

week-header-390-light-macos-3x.png

13 KiB

week-header-390-light-macos.png

242 KiB

week-header-820-dark-macos-3x.png

14 KiB

week-header-820-dark-macos.png

396 KiB

week-header-820-light-macos-3x.png

10 KiB

week-header-820-light-macos.png

299 KiB

kayg commented

2026-10-03 11:41:25 +00:00

Author

Owner

Starting #1003 on branch job/headring-1003, based on origin/dev at d4e7188810. I am locating the shared #658 focus token and the Calendar header implementations before making the focused fix.

Starting #1003 on branch job/headring-1003, based on origin/dev at d4e7188810a89fb0e8e6b162279917f7e23989f9. I am locating the shared #658 focus token and the Calendar header implementations before making the focused fix.

kayg commented

2026-10-03 11:49:35 +00:00

Author

Owner

Finding: origin/dev at d4e7188 does not yet contain the shared #658 focus contract. Its --focus-ring is still a box-shadow token with app-level focus outlines/shadows. origin/job/merge-round-7b2 has the settled 2 px outline token and data-focus-ring="inset" rule. I will mark the Calendar date controls for that shared inset behavior and validate them against the merge-round tree.

Finding: origin/dev at d4e7188 does not yet contain the shared #658 focus contract. Its --focus-ring is still a box-shadow token with app-level focus outlines/shadows. origin/job/merge-round-7b2 has the settled 2 px outline token and data-focus-ring="inset" rule. I will mark the Calendar date controls for that shared inset behavior and validate them against the merge-round tree.

kayg commented

2026-10-03 12:44:43 +00:00

Author

Owner

Rechecked origin/dev d4e7188810. TimeGrid dayhead has hover and active styling but no local focus-visible inset-ring rule. The work note is on job/headring-1003; the fix and requested width and theme coverage are not on dev. Keep open until they land.

Rechecked origin/dev d4e7188810a89fb0e8e6b162279917f7e23989f9. TimeGrid dayhead has hover and active styling but no local focus-visible inset-ring rule. The work note is on job/headring-1003; the fix and requested width and theme coverage are not on dev. Keep open until they land.

kayg referenced this issue from a commit

2026-10-03 13:12:26 +00:00

Calendar: keep date focus rings inside clipped headers (#1003)

kayg referenced this issue

2026-10-03 13:13:42 +00:00

Issue hygiene sweep 2026-10-03 #1008

kayg commented

2026-10-03 13:39:35 +00:00

Author

Owner

Integration findings while preparing #1003 production screenshots on the parallel round-7b tree (outside this issue's Calendar files):

bun run build could not resolve ../parts/GroupStatus.svelte from ConnectedAccountsSection.svelte and McpEventsGroup.svelte. The component exists on origin/dev; copying it into the temporary integration tree allowed the production bundle to build.
cargo build -p calternal-server on that tree failed in crates/calternal-fs/src/appledouble.rs because calternal_path::{AppleDoubleResource, appledouble_resource} were unresolved. I built the smoke-test server from this job's origin/dev workspace and served the integrated production bundle.
node scripts/check-focus-tokens.mjs reports local focus styles in apps/web/src/routes/settings/voice/VoiceSection.svelte:233 and packages/ui/src/components/composer/VoiceRecordingPill.svelte:258.

No files outside #1003's Calendar scope were changed.

Integration findings while preparing #1003 production screenshots on the parallel round-7b tree (outside this issue's Calendar files): - `bun run build` could not resolve `../parts/GroupStatus.svelte` from `ConnectedAccountsSection.svelte` and `McpEventsGroup.svelte`. The component exists on `origin/dev`; copying it into the temporary integration tree allowed the production bundle to build. - `cargo build -p calternal-server` on that tree failed in `crates/calternal-fs/src/appledouble.rs` because `calternal_path::{AppleDoubleResource, appledouble_resource}` were unresolved. I built the smoke-test server from this job's `origin/dev` workspace and served the integrated production bundle. - `node scripts/check-focus-tokens.mjs` reports local focus styles in `apps/web/src/routes/settings/voice/VoiceSection.svelte:233` and `packages/ui/src/components/composer/VoiceRecordingPill.svelte:258`. No files outside #1003's Calendar scope were changed.

kayg referenced this issue from a commit

2026-10-03 13:41:23 +00:00

Calendar: cover touch focus suppression in #1003

kayg commented

2026-10-03 13:43:20 +00:00

Author

Owner

#1003 is complete.

Built: Calendar Day, Week, Month and Year date controls use the shared #658 inset focus ring. The local Week header outline override is removed. The regression run checks the ring's 2 px width, accent colour, inset offset, rounded/rectangular shape, and containment. It also checks that mouse and touch activation opens the selected day without a keyboard ring.

Files:

packages/ui/src/components/calendar/TimeGrid.svelte
packages/ui/src/components/calendar/MonthGrid.svelte
packages/ui/src/components/calendar/YearHeatmap.svelte
apps/web/e2e/calendar-focus-1003.mjs

Commits:

eb2963218aa54ddf267eabde952a4005d4cefed5 — apply the shared inset ring to Calendar dates
c05d45fd992b942256a9c09c929a212b53f3d3d8 — cover touch focus suppression and the Calendar views

Head: c05d45fd992b942256a9c09c929a212b53f3d3d8. git fetch origin && git merge origin/dev reported Already up to date.

Gates:

cargo fmt --check — exit 0, no output.
bun run check passed. Output:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/headring-1003/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

node --check apps/web/e2e/calendar-focus-1003.mjs — exit 0, no output.
Production build output: ✓ built in 1m 32s.
Focused production E2E output:

PASS #1003: shared inset focus geometry across Day, Week, Month and Year; Week screenshots at 390/820/1440 in light and dark with macOS emulation (12 files in /home/kayg/Developer/calternal-wt/headring-1003/artifacts/calendar-focus-1003)

No Rust files changed, so per-crate clippy and test gates did not apply. The full Vitest, full e2e and adversarial suites are for the merge round.

Screenshots: 390, 820 and 1440 px; light and dark; full view and 3x crop. All use macOS platform emulation. The 12 PNGs are attached to this issue.

Viewport	Theme	Full view	3x crop
390 px	Light	PNG	PNG
390 px	Dark	PNG	PNG
820 px	Light	PNG	PNG
820 px	Dark	PNG	PNG
1440 px	Light	PNG	PNG
1440 px	Dark	PNG	PNG

UX gaps closed: Keyboard focus uses the shared ring across Calendar views. Mouse and touch activation preserve pointer modality and do not show the keyboard ring. Empty Calendar data is real server state.

UX gaps left: None found within #1003.

Decisions not stated in DESIGN: Reused the existing data-focus-ring="inset" contract and --focus-ring-inset-offset token instead of adding local outline rules. Year month headings have a negative start margin and no clipped month tile, so the geometry test bounds their ring to the heading itself.

Known integration findings for the merge round (outside #1003 files): The detached round-7b tree lacked settings/parts/GroupStatus.svelte required by two Settings modules; I copied the origin/dev file into the temporary test tree for the production build. Its server build also failed on unresolved calternal_path::{AppleDoubleResource, appledouble_resource} imports in calternal-fs/src/appledouble.rs, so the E2E used a server built from this job's origin/dev workspace. node scripts/check-focus-tokens.mjs also flags local focus styles in VoiceSection.svelte:233 and VoiceRecordingPill.svelte:258. I posted the evidence in the earlier issue comment. No out-of-scope source files were changed.

#1003 is complete. **Built:** Calendar Day, Week, Month and Year date controls use the shared #658 inset focus ring. The local Week header outline override is removed. The regression run checks the ring's 2 px width, accent colour, inset offset, rounded/rectangular shape, and containment. It also checks that mouse and touch activation opens the selected day without a keyboard ring. **Files:** - `packages/ui/src/components/calendar/TimeGrid.svelte` - `packages/ui/src/components/calendar/MonthGrid.svelte` - `packages/ui/src/components/calendar/YearHeatmap.svelte` - `apps/web/e2e/calendar-focus-1003.mjs` **Commits:** - `eb2963218aa54ddf267eabde952a4005d4cefed5` — apply the shared inset ring to Calendar dates - `c05d45fd992b942256a9c09c929a212b53f3d3d8` — cover touch focus suppression and the Calendar views **Head:** `c05d45fd992b942256a9c09c929a212b53f3d3d8`. `git fetch origin && git merge origin/dev` reported `Already up to date.` **Gates:** - `cargo fmt --check` — exit 0, no output. - `bun run check` passed. Output: ```text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/headring-1003/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` - `node --check apps/web/e2e/calendar-focus-1003.mjs` — exit 0, no output. - Production build output: `✓ built in 1m 32s`. - Focused production E2E output: ```text PASS #1003: shared inset focus geometry across Day, Week, Month and Year; Week screenshots at 390/820/1440 in light and dark with macOS emulation (12 files in /home/kayg/Developer/calternal-wt/headring-1003/artifacts/calendar-focus-1003) ``` No Rust files changed, so per-crate clippy and test gates did not apply. The full Vitest, full e2e and adversarial suites are for the merge round. **Screenshots:** 390, 820 and 1440 px; light and dark; full view and 3x crop. All use macOS platform emulation. The 12 PNGs are attached to this issue. | Viewport | Theme | Full view | 3x crop | | --- | --- | --- | --- | | 390 px | Light | [PNG](https://git.kayg.org/attachments/d1a83c82-cb41-4b22-8cf6-9c76b44f5385) | [PNG](https://git.kayg.org/attachments/1c6d3d29-50c0-4b22-8cf6-9c76b44f5385) | | 390 px | Dark | [PNG](https://git.kayg.org/attachments/6c71c458-a698-47fe-86d6-ad0f5a47339f) | [PNG](https://git.kayg.org/attachments/a684c70a-5269-4861-9509-4f84f24bf206) | | 820 px | Light | [PNG](https://git.kayg.org/attachments/3087a83b-03d5-4964-b4b7-501d67db2460) | [PNG](https://git.kayg.org/attachments/66bb5eed-0189-4244-bdc6-3d1c7deb49ff) | | 820 px | Dark | [PNG](https://git.kayg.org/attachments/1f721094-b658-4949-aea1-53303c2ba310) | [PNG](https://git.kayg.org/attachments/0816b3aa-2234-4a96-9e97-6d92822aa2e1) | | 1440 px | Light | [PNG](https://git.kayg.org/attachments/29375997-7111-4b61-81a9-ff6a5060e51f) | [PNG](https://git.kayg.org/attachments/7b1bc617-a800-4638-9a49-ec15e7c9b2fd) | | 1440 px | Dark | [PNG](https://git.kayg.org/attachments/d335d6e2-897e-4380-98dc-bd840dfe933f) | [PNG](https://git.kayg.org/attachments/248413b5-45fb-4a46-a56c-9e86ed3cc2ef) | **UX gaps closed:** Keyboard focus uses the shared ring across Calendar views. Mouse and touch activation preserve pointer modality and do not show the keyboard ring. Empty Calendar data is real server state. **UX gaps left:** None found within #1003. **Decisions not stated in DESIGN:** Reused the existing `data-focus-ring="inset"` contract and `--focus-ring-inset-offset` token instead of adding local outline rules. Year month headings have a negative start margin and no clipped month tile, so the geometry test bounds their ring to the heading itself. **Known integration findings for the merge round (outside #1003 files):** The detached round-7b tree lacked `settings/parts/GroupStatus.svelte` required by two Settings modules; I copied the `origin/dev` file into the temporary test tree for the production build. Its server build also failed on unresolved `calternal_path::{AppleDoubleResource, appledouble_resource}` imports in `calternal-fs/src/appledouble.rs`, so the E2E used a server built from this job's `origin/dev` workspace. `node scripts/check-focus-tokens.mjs` also flags local focus styles in `VoiceSection.svelte:233` and `VoiceRecordingPill.svelte:258`. I posted the evidence in the earlier issue comment. No out-of-scope source files were changed.

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

kayg/calternal#1003

No description provided.

Rows
Columns