hr_lite 0.21.2 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b228dd2330323d3a246e1ce28d35fffd6756504111414db39b6cf926743d809a
-  data.tar.gz: 4edfddb2381d4f9658b35f2b2178e86f00abb6e5d25c5c5a4d6d5cfab2df721f
+  metadata.gz: c6db8fc763b744461b7e4d52e484bc3a74a82fe95f9d35b51025d4eedb453e6c
+  data.tar.gz: 44a8caeed2447b02ffcf465befb0e965f101a79e5bb6d721cf138d53a1063f63
 SHA512:
-  metadata.gz: 2b926fab3a9e35d469dc5bd644cf6613ed6d0cd33cfd779ad3b7c1652de672ec4d0f065deac5035cd56833f37f151a7f56631f55244540fae08dccf52857b81f
-  data.tar.gz: 3c3e8489b655dad09965c7b1ef47b0fe1ac0f44c276513ed0b3d3e57acf3bd0bed8f16110f79470121c1573882cd456c3860f37917b062d5498b22382ca09bb1
+  metadata.gz: 6190cb5ca0db661d5aeb3e3c1bd6d359c1a10c6a798c7f99e67b20f27e9890fe6caa130fbf08fb6c5b1727b7aadde38ccff63285a41d9a403555d6befdc821eb
+  data.tar.gz: 39faf582aebd8d31c427da5bc1aeb118e1e750ef12a731ef6336be72b1c58f40a45a4b443843371058fa2a2f04a50f176198237fcbd122234fa45e734088eeca

data/CHANGELOG.md

@@ -7,6 +7,81 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.22.0] - 2026-10-09
+
+The HRMS UI/UX pass: Keka/greytHR patterns and a ui-ux-pro-max review of every screen, phone first. No migrations. Hosts that theme through `--hrl-*` variables keep their values; the engine defaults for radius, info background and muted text change (see Changed).
+
+### Added
+- Work hours (`config.work_hours = { day: 8, probation_day: 9, week: 40 }`, off by default): the nightly close job marks a Mon–Fri day with a check-out but fewer worked hours than required (9 on probation) as a half day and tells the employee ("You worked 7.0 of 8h on 06 Jul — marked half day"). A regularization ticket with no times and a reason fixes it back to present: self-fixed within the `self_regularization` window and weekly cap, otherwise sent to HR. Home's "Needs a fix" list shows such days as "Short day". New admin screen Team attendance → Weekly hours (`/admin/attendances/week?date=`): each person's Mon–Fri hours, average per worked day, target (`week` less a fifth per holiday or full-day leave; the current week counts only the days already over) and a "Below target" badge. Saturdays are never counted.
+- Punch locations on Team attendance: a Location column names where each side was punched (the office whose radius covers it, else "Off-site · 2.0 km from HQ", or "No GPS") and how far apart check-in and check-out were, with a warning badge over 500 m (`AttendanceRecord::PUNCH_GAP_ALERT_M`). A "Where people punched" card counts people per check-in and per check-out place. New `OfficeLocation.place` and `AttendanceRecord#punch_gap_m`.
+- `config.require_punch_location = true` refuses a punch with no GPS fix instead of recording and flagging it.
+- Theming: new `--hrl-*` variables for the type ramp, line heights, spacing, large and pill radii, extra shadows, focus ring, motion, z-index, tap targets, and the colour roles `--hrl-ink-2`, `--hrl-field` and `--hrl-scrim`. The README lists every variable with its role.
+- Keyboard: every focused control shows a 2px accent ring (kudos badge chips included), focus scrolls clear of the app bar and tab bar, and a "Skip to content" link is the first Tab stop so desktop users skip the side rail. Reduced-motion users get no transitions or animations. New `.hrl-sr-only` utility.
+- Leave-type badge `.hrl-badge--type`: ink text on grey with an 8px dot in the HR-chosen colour, set inline as `--hrl-type`.
+- Navigation: the current screen's link carries `aria-current="page"`, and the phone "More" tab lights up in the accent colour, and carries `aria-current="true"` so screen readers hear it too, when the current screen lives in the sheet or under admin. New helper `hrl_nav_active?(item)`.
+- Sub-screens show a 44px "‹ Leaves", "‹ Attendance" or "‹ Calendar" link to their parent tab above the title: balances, comp-off, regularization, holidays, and the leave form and request. A view names its tab with `content_for(:back, "Leaves")`; new `.hrl-backlink`. The leave request's "Back" button gives way to it.
+- Attendance day detail: tap any day up to today on My attendance to open a card below the grid (`?day=YYYY-MM-DD#day`) with the day's status (a badge in the cell's colour), check-in, check-out, worked time, half-day part, leave type, holiday name, flag reason and latest regularization ticket. "Fix this day" opens the ticket form with that date filled in, unless the day is a holiday, weekly off or full-day leave, or already has a pending ticket. The whole cell is the link, here and on an employee's admin month (was the digit alone, 8x17px), and day numbers keep the cell's ink. On the admin month a tapped day scrolls to its fix form (`#regularize`), and upcoming days are no longer links. Below 481px the grid alone reaches 4px from the card edge (the card's text keeps its padding) and the cell gap drops to 2px, so cells are 44px wide at 360px.
+- Apply for leave: a card under the form, "Out in the next 2 weeks", names colleagues with approved leave from today to 14 days out and their dates, never the leave type (up to 10, then "+N more"). Home's "On leave this week" list and this card share the new `leave_requests/_out_list` partial.
+- Home Today card: under the punch button, the card lists the last 7 days that are absent, missing a check-out or flagged ("Mon 5 Jul · Absent"), each with a 44px "Fix" (screen readers hear "Fix Mon 5 Jul") that opens the ticket form for that date. Days with a pending ticket, holidays, weekly offs, full-day leave and days before joining are left out, and so is a shift from yesterday with no check-out yet (a night shift can still be running). Under it, quick actions: Apply leave, Fix a punch, Comp-off and Payslip. The punch card takes an optional `attention:` local; My attendance passes none and shows neither.
+- Attendance month grid: a day with a pending regularization ticket on My attendance gets a dashed `--hrl-ink-2` border (`.hrl-mgrid__day--pending`), screen readers hear ", fix pending", and the legend keys it as "Fix pending". The partial takes an optional `pending_dates:` set; an employee's admin month passes none and shows no key.
+- Home "My requests": your 5 newest pending leave requests, attendance fixes and comp-off requests, each a 44px row with its dates and a Pending badge that opens the leave request, the ticket list or the comp-off list. The card is left out when nothing is pending.
+- Home "Waiting on you": anyone with pending approvals, their own or ones they are covering for a delegator, sees "3 requests waiting on you" with a primary "Review requests" button to the inbox, above the Today card. Approvers with no routed flow (a manager or HR deciding leave, comp-off and attendance fixes off the HR queues) see the same card for the requests they may decide, never their own, and its button opens Leave approvals. Nobody else sees the card. New scope `Approval.pending_for(user)`, which the inbox now uses too. Deviation: the card sits above the Home grid, not inside it, so at 1024px and up it spans both columns instead of stretching to the Today card's height.
+- Type-to-filter staff pickers: the existing-staff and "Reports to" selects on the employee form, the loan's Employee and the asset hand-over get a 44px filter box above them (new `select_filter.js`, `.hrl-filter`), labelled for its field ("Filter existing staff", "Filter Reports to", else "Type a name to filter"). Typing "mee" leaves only Meera and picks her; Escape or an emptied box puts back the stored pick, a filter that matches nobody leaves the list as it was (so the field still submits), and Enter never submits the form. The "Existing staff member" label now names its select (a hidden field took its id). The select keeps its name and still submits; without JavaScript it is a plain select. Mark any select with `data-hrl-filter="<label>"` to get one. Deviation: Record leave keeps its type-ahead employee box (a datalist), since it has no select to filter.
+
+### Changed
+- Engine defaults: `--hrl-radius` 14px to 16px, `--hrl-radius-sm` 9px to 12px, `--hrl-info-bg` #dbeafe to #eff6ff (accent text on it now 4.75:1) and `--hrl-muted` #6b7280 to #4b5563 (4.5:1 or better on the page background). Hosts that set these variables see no change.
+- Type: every screen except the ID card uses the six-step ramp (12/14/16/18/20/24px) and weights 400/600/700. Nothing renders below 12px, and the page title grows from 20px to 24px at 768px.
+- Radii: every corner outside the ID card is 12, 16 or 20px or a pill. Month-grid day cells go from 7px to `--hrl-radius-sm`, pills use `--hrl-radius-pill`, and the phone "More" sheet gets 20px top corners (`--hrl-radius-lg`).
+- Long text: badges clip at their container's width, buttons wrap long labels, and definition-list values shrink instead of widening the page, so 60-character names no longer cause sideways scroll. Muted badges use `--hrl-ink-2`.
+- Forms: inputs are 16px with a `--hrl-field` border (3:1 or better), an invalid field turns its border and label red, hints are styled everywhere, kudos chips and check-row labels are 44px tall with an 8px gap, and the error box is announced and takes focus. Mandatory fields carry `required`, so the browser stops an empty submit. `.hrl-card--warn` (expiring documents) now has its amber fill.
+- Phone tab bar: tabs sit 8px apart (`--hrl-gap-target`) and size to their labels, each at least 44px wide, so "Attendance" fits at 320px without tabs touching.
+- Side rail (768px and up): every link, the brand and the back-to-CMS link are at least 44px tall (links were 38px).
+- Phone app bar: the brand and your name are 44px targets that end in an ellipsis instead of wrapping (the brand never narrower than 44px), your name opens My profile, and the bar stays 61px tall with the notifications link and a 60-character name (was up to 92px). The unread count reads "3 unread" to screen readers.
+- Navigation groups: the rail and the phone "More" sheet group your screens under My work, Time, Money, Me and Company (`group:` on `NAV_ITEMS`, which is reordered to keep each group together). Below 481px the sheet shows two columns, so an employee's sheet fits without scrolling (520px, was 661px in a 444px box). It can grow to just below the app bar instead of stopping at 60vh. A scrim dims the page behind it; Escape or a tap on the scrim closes it, and Escape returns focus to More. When `config.back_link` is set, it is the sheet's first row.
+- Layout: two-column card grids start at 1024px (was 700px, which clipped the slip's Earnings card at 768px) without a doubled gap below them. Stacked tables also stack between 768 and 1023px beside the side rail. Stacked action cells sit right-aligned with no empty label, the last row loses its 6px band, and side-by-side actions in table mode sit 8px apart. Amount, Net pay, Cover and Dependants headers right-align over their values. New `.hrl-card__link` (44px text link) and `.hrl-row--mb` replace inline margin styles.
+- Page actions: below 481px a screen's action buttons (Apply, New claim, Balances...) sit on their own full-width row under the title, starting at the screen edge and sharing the row, so they are easy to reach with a thumb. Icon-only arrows (the Team day pager) keep their own width. From 481px they stay right-aligned beside the title as before. The appraisal and leave-decision "Back" buttons become "‹ Appraisals" and "‹ Approvals" back links.
+- Attendance month grid: every day except an upcoming working day shows its state as a code (P, ½, L, ½L, H, WO, A) as well as a colour, and screen readers hear it in words ("16 Oct, Leave", plus "worked" on a punched holiday or weekly off, and "Flagged"). The legend keys every code, Today, Flagged and Upcoming. A half-day leave gets its own half-tinted cell instead of full leave's. Upcoming day numbers use `--hrl-muted` at full strength instead of 45% opacity. The invalid `role="grid"`/`"gridcell"` give way to labelled groups. Check-in and check-out times leave the cells for the day detail.
+- Month navigation: on My attendance, the company calendar and an employee's admin month, the bare arrows become "‹ Sep" and "Nov ›" buttons that screen readers hear as "Previous month, September 2026" and "Next month, November 2026". The "Present · Half · Absent" line becomes wrapping badges, P, ½, L (new: leave days) and A, each read as "Present 4 days" and so on.
+- Regularization form: one date and two time-only fields (were two date-and-time pickers), with the "leave blank" notes as hints under them. A check-out earlier than the check-in is saved on the next morning for a night shift; a ticket's check-out may fall on the next day only before the check-in's time.
+- Company calendar: cells show a short code, "H" for a holiday or "2 off" for leaves, instead of clipped names and leave-type codes, and today gets the accent ring. The legend keys "H Holiday", "N off On leave", "Weekly off" and "Today". Under the legend, a list names every holiday ("Fri 2 Oct: Gandhi Jayanti (holiday)") and colleague on leave ("Fri 16 Oct: Meera, on leave"; a range reads "Tue 29 Jun – Fri 2 Jul") that month, all in one date style. Colleagues show by name only, with no leave type, as on Home. "Holiday list" moves to the page actions, and from 768px cells are 88px tall.
+- Today card: while checked in, the badge reads "In since 09:30 · 3h 15m so far" (worked time as of the page load, no timer), the location status under the punch button is a polite live region (`role="status"`) that is never `hidden`, so its first message is announced, and "View my month" is a 44px `.hrl-card__link`.
+- Apply for leave: Type is a row of 44px chips that show what is left ("Casual · 9 left", a trailing " leave" dropped from the name, and "Leave without pay · Unpaid"), with the loss-of-pay note as a hint under them, and Day is a chip row with Full day checked. From starts empty, and a blank To means one day ("To (leave blank for one day)"). `?leave_type_id=` and `?date=YYYY-MM-DD` pre-check the type and fill From. The form drops the balance card above it, since the chips show what is left, and the balance card drops its Apply button on My leaves (it stays on Home). New helper `hrl_days` prints day counts without ".0". Deviation: at 360x740 Submit still ends at 921px, below the 687px tab bar (937px before), so it takes one short scroll; From is on the first screen. Five leave types need four chip rows, and the loss-of-pay hint and the 90px reason box stay, so the target "Submit in view" cannot be met without the sticky action bar that was ruled out.
+- Leave badges: the balance card reads "Casual leave · 9 of 10 left" (was "CL 9.0/10.0") and it and My leaves' type badges are `.hrl-badge--type`, ink on grey at 16:1 (was the type's colour on its tint, 1.96 to 3.65:1). Day counts drop the ".0" on My leaves, a leave request, Balances, Comp-off, the "N day(s) are beyond your balance" notice, and HR's leave requests, leave balances, comp-off requests and overview; `hrl_days(nil)` shows an em dash.
+- My leaves: each request is one tappable row (new `.hrl-listrow`), the type badge and name with the status badge at the end, then "16 Oct · 1 day", about 71px tall at 360px (was a stacked table of about 190px with a small "View" link). A leave request's status badge is coloured like the list's (`hrl_request_status_badge`), so Rejected reads red.
+- Leave balances: a primary "Apply" in the page actions, and each card ends in a 44px "Apply" link that opens the form with its type pre-checked. The comp-off card reads "Credited" instead of "Entitled". With no paid type set up, the page shows "No leave types set up yet. Ask HR." instead of a bare title. `.hrl-card__link` is now at least 44px wide as well as tall.
+- Home: "Out today" becomes "On leave this week", listing approved leave that overlaps the current Mon–Sun week, and when the list is empty it reads "Nobody is on leave this week." instead of "Everyone's in today.", which claimed attendance it never checked. "Team board" is a 44px `.hrl-card__link`.
+- Home: "Next holiday" becomes "Upcoming holidays", listing up to 3 company-wide holidays in the next 60 days ("Fri 2 Oct · Gandhi Jayanti · in 14 days"); optional holidays stay off it. With none due it reads "No holidays in the next 2 months." (was "No upcoming holidays on the calendar."), and its link is a 44px "All holidays" to the holiday list (was "Company calendar").
+- Salary slips: the slips list comes first under a "Slips" heading, so the latest View and PDF sit in the first phone screen (were at 899px, behind the tab bar). The salary structure table and TDS note fold into a closed "Show salary structure" disclosure under "My salary", so no structure amounts show until it is opened. Deviation: upcoming and earlier revisions stay visible below it.
+- Salary slip (employee and admin views): four tiles open the slip, Net pay, Gross, Deductions and "Payable / LOP days", so Net pay sits at about 172px on a 360px phone (was about 618px, below the fold). Tiles are 2x2 up to 1099px and 4 across from 1100px. The amount in words moves to its own muted 14px line under Net pay, and the Days line below reads "30 payable / 1 LOP of 31" like the tile (was "30.0 payable / 1.0 LOP"). Deviation: new `.hrl-kpis--money` sets the tile amounts at 18px below 481px (24px above), so "₹1,01,612.91" fits a half-width tile at 320px instead of splitting its digits.
+- Loans: each loan's Monthly instalment, Repaid so far, Outstanding and Next deduction are a definition list with real text labels at every width (were a stacked table whose labels existed only as CSS `::before` text), and "Already deducted" keeps its Month and Amount headers on phones. With no loans, a 44px "Ask HR about an advance" link opens Ask HR with Payroll query chosen; `?category=` pre-selects any help-desk category.
+- My documents: "On file" comes first (its heading at 134px on a 360px phone, was 675px behind the tab bar), and the upload form folds into an "Upload a document" disclosure under it, open when nothing is on file or the upload failed. Category is a row of 44px chips with none chosen and a choice required (Aadhaar was preselected, so any upload could be filed as an Aadhaar); the chip and the list say "PAN", not "Pan". The file picker offers PDFs and images only, and "Open" is a 44px button (was a 14px link) with Remove beside it at every width (in table mode Remove used to drop under it with no gap).
+- Ask HR: "What is this about" is a row of 44px chips, one per category and labelled as in the request list ("ID card", not "Id card"), with none chosen and a choice required (was a 12-option select), so one tap picks it. `?category=` still pre-checks one. Deviation: at 360x740 "Send to HR" ends at 820px, below the 687px tab bar (531px before), so it takes one short scroll.
+- Tax declaration: Tax regime is two 44px radio rows, "New regime" and "Old regime", each with a hint line under it (was a select whose option text was clipped at 360px). Under the new regime the claims fold into a closed "Deductions (old regime only)" disclosure, so Save draft is on the first phone screen; under the old regime it is open. Each "What it is (optional)" box has a visible muted label in place of its placeholder, 14px below its amount (was touching it). Save draft and Submit to HR share one action row under the claims, with Submit to HR the only primary button (Save draft is primary until there is something to submit). Submit to HR saves what is on screen and then submits it (it used to submit the last saved draft and drop unsaved edits). A failed save reopens the claims under the new regime too, so the red field shows. The form still posts `tax_declaration[regime]`.
+- New claim: each category option says up front whether it needs a receipt and what is left of its cap this month, "Client entertainment (receipt needed, ₹5,000.00 left this month)", from the same figures as the Expenses screen; a category with no cap and no receipt rule shows its name alone. The receipt hint reads "Needed when the category says "receipt needed"." (was "the form will say so if yours does", which it did only after a failed submit). Deviation: at 360px the closed select clips a long label once chosen; the full text shows in the option list before choosing.
+- Kudos wall: the composer folds into a full-width "Give kudos" button that opens it (open again after a failed post, with the error), so the first kudo sits at about 278px on a 360px phone (was about 540px).
+- Holidays and Team board: past holidays are muted, and the next company-wide holiday (the one Home leads with, never an optional day) carries a "Next" badge beside its name. "Optional" sits beside the name too, so the blank-headed badge column and its empty cells are gone at every width. On the Team board today's "Not in yet" is a grey badge (was red, before anyone could be late); a past day with no punch stays a red "Absent". The stacked hours label reads "Hours today" or "Hours that day" like its column header, and "Raise a regularization ticket" is a 44px `.hrl-card__link`.
+- Row actions: a policy's title on Policies and "Open" on Waiting on you are 44px buttons (were text links about 20px tall), and My HR profile's "Org chart" is its own 44px button under the details (was "· Org chart" inline after Reports to). A badge in a stacked table cell no longer stretches to the height of a button beside it, and in table mode a row with a 44px button centres its other cells on it, so a policy's version, date and acknowledgement line up with its title (they sat 12px higher).
+- Expenses and Ask HR: claims and requests are `.hrl-listrow` rows instead of stacked tables (were about 263px and 255px tall at 360px). A claim reads its description and amount, then date, category and status (plus the payroll month or HR's note), with Withdraw at the right of the second line: 96px at 768px and up, 116px at 360px when the description wraps. An Ask HR request is one tappable row, subject and status, then category and date (89px at 360px when the subject wraps, 70px at 768px and up), and its Withdraw moves onto the request's page. `.hrl-listrow` wraps long unbroken text, and its title line (first child) uses the tight line height, so a two-line title is 40px. Deviations: a claim row is not a link, since a claim has no page of its own and Withdraw cannot sit inside a link; claims carry no "Receipt needed" badge, since a claim in a receipt-required category cannot be saved without one.
+- HR admin tables: Team leave balances and an employee's Salary structures stack into labelled rows on phones and beside the side rail (768 to 1023px), like the engine's other tables, so neither scrolls sideways at 360px (they hid 20px and up to 33px). Each balance is labelled with its leave type's code ("CL 10 left, 0/10 used"), and a salary structure's Edit is a 44px button (was a 24x21px link). From 1024px both stay tables.
+- HR admin forms: an employee's Blood group is a row of 44px chips, "Not set" and the eight groups, with the stored group checked (was a 9-option select); "Not set" saves no blood group (the blank option used to save an empty string). Add asset's Category is a row of 44px chips with none chosen and a choice required (was a select with "Other" preselected from the column default). Chips are at least 44px wide, so "A-" and "B-" no longer fall 1px short. The read-only Employee code on the edit form is now named by its label (the label pointed at no field).
+- HR approvals tabs (Leaves, Comp-off, Regularization, Balances): the current tab carries `aria-current="page"`, so screen readers hear which one is open, not only see it in the accent colour. The tabs take 8px side padding (new `.hrl-row--tabs`), so all four sit in one row from 768px beside the side rail (469px of 485px with both pending counts showing; they needed 533px and wrapped). Below 481px they wrap with 9.6px gaps.
+- HR overview: the Pending approvals card's "All requests" link is a 44px `.hrl-card__link` (was 73x16px small text). The KPI tiles are unchanged.
+
+### Fixed
+- Attendance: a flagged punch's reason shows as text on the Today card ("Flagged: Check-in 2.4 km from Head office") instead of a hover-only tooltip that phones and screen readers never reached. The month grid's flag dot is hidden from screen readers; the day's label already says "Flagged".
+- Team attendance: the day arrows are heard as "Previous day, Wednesday 7 October" and "Next day, …", a flagged row prints its reason beside the badge instead of in a tooltip, and "Edit / half day" is a 44px link (was 86x16) that opens the employee's month at the fix form.
+- Attendance month grid: today with no punch yet shows "Today" with an accent ring instead of a red "A", and the Absent count on My attendance and an employee's admin month leaves it out. Every today cell gets the ring. Only the views change: `DayStatus` and `AttendanceSummary`, and so payroll, still count an unpunched today as absent.
+- A double tap on a submit button sends one request: the button locks (dimmed, `aria-busy`) once the form submits, stays live when a confirm prompt is cancelled, and unlocks when Back restores the page. Punch forms keep their own location flow.
+- Tax declaration: reopening a saved declaration shows a line for every section again (80C, 80D, NPS, home-loan interest, HRA, other), not only the sections already claimed, so a claim can be added in another section after the first save.
+
+## [0.21.3] - 2026-10-09
+
+### Fixed
+- Phones: My attendance, the team calendar and an employee's attendance in admin no longer run wider than the screen once a month has punches; Sa/Su are back and check-in/check-out stack in each day.
+- Phones: a long name or an email as the display name in the top bar no longer widens every screen and pushes the tab bar off.
+- Phones: long links, file names and emails in policies, HR requests, appraisals, flashes and stacked tables (audit trail, approvals, team board, request lists) wrap instead of widening the page or hiding values.
+- Admin employee profile with a salary card fits a phone; payroll and overview tiles go 2×2 below 1100px so amounts stay on one line beside the side rail.
+
 ## [0.21.2] - 2026-10-07
 
 ### Fixed

data/README.md

@@ -277,8 +277,9 @@ the audit row is the trail. Older days, off days, the third fix of a week, a cha
 to a real punch, a day HR already regularized or rejected, or a fix that cannot
 apply (no check-in that day) stay ordinary tickets for HR.
 
-Home has an "Out today" card: everyone on approved leave today, with the leave's
-dates, so the team knows who is away and until when. The leave type is not shown.
+Home has an "On leave this week" card: everyone with approved leave in the current
+Mon–Sun week, with the leave's dates, so the team knows who is away and until when.
+It says nothing about attendance, and the leave type is not shown.
 
 ### Holidays and calendar
 
@@ -398,6 +399,57 @@ Override the CSS variables, nothing else:
 :root { --hrl-accent: #00a24f; --hrl-font: "Inter", sans-serif; }
 ```
 
+Every variable, with its role and engine default (all on `:root` in
+`hr_lite/hr_lite.css`):
+
+| Variable | Role | Default |
+|---|---|---|
+| `--hrl-font` | body and UI face | system stack |
+| `--hrl-font-head` | page and card titles | `var(--hrl-font)` |
+| `--hrl-t-micro` | badges, chips, legends, table heads, tab labels | `.75rem` |
+| `--hrl-t-small` | hints, field labels, table cells, meta lines | `.875rem` |
+| `--hrl-t-body` | body text, inputs (iOS zoom floor), buttons | `1rem` |
+| `--hrl-t-lead` | card titles, the punch button | `1.125rem` |
+| `--hrl-t-title` | page title on phones | `1.25rem` |
+| `--hrl-t-display` | KPI values, page title from 768px | `1.5rem` |
+| `--hrl-lh-tight` / `--hrl-lh-body` | line height of titles and badges / of body text | `1.25` / `1.5` |
+| `--hrl-accent` | links, primary buttons, active nav | `#2563eb` |
+| `--hrl-accent-ink` | text on accent | `#ffffff` |
+| `--hrl-ink` | primary text | `#111827` |
+| `--hrl-ink-2` | text on a tint (grid tags, muted badges) | `#374151` |
+| `--hrl-muted` | secondary text on white or bg, never on a tint | `#4b5563` |
+| `--hrl-bg` | page background | `#f4f5f7` |
+| `--hrl-card` | card surface | `#ffffff` |
+| `--hrl-line` | dividers, card borders | `#e5e7eb` |
+| `--hrl-field` | input, select and textarea border (3:1 or better) | `#6b7280` |
+| `--hrl-ok` / `--hrl-ok-bg` | present, approved | `#047857` / `#d1fae5` |
+| `--hrl-warn` / `--hrl-warn-bg` | holiday, pending | `#b45309` / `#fef3c7` |
+| `--hrl-bad` / `--hrl-bad-bg` | absent, rejected, errors | `#b91c1c` / `#fee2e2` |
+| `--hrl-info-bg` | info tint, active nav, leave cell | `#eff6ff` |
+| `--hrl-scrim` | backdrop behind the More sheet | `rgba(15, 23, 42, .32)` |
+| `--hrl-s-1` `--hrl-s-2` `--hrl-s-3` `--hrl-s-4` `--hrl-s-5` `--hrl-s-6` `--hrl-s-8` `--hrl-s-10` `--hrl-s-12` | spacing steps | 4, 8, 12, 16, 20, 24, 32, 40, 48px |
+| `--hrl-gutter` | phone screen padding | `.85rem` |
+| `--hrl-target` | minimum tap target | `44px` |
+| `--hrl-gap-target` | minimum gap between adjacent targets | `8px` |
+| `--hrl-radius-sm` | controls, nav links, flash, grid cells | `12px` |
+| `--hrl-radius` | cards, KPI tiles, tables | `16px` |
+| `--hrl-radius-lg` | top corners of the More sheet | `20px` |
+| `--hrl-radius-pill` | badges, chips, avatars, counts | `9999px` |
+| `--hrl-shadow` | card elevation | `0 1px 3px` |
+| `--hrl-shadow-md` / `--hrl-shadow-lg` | menus / dialogs | `0 6px 18px` / `0 18px 40px` |
+| `--hrl-shadow-sheet` | the More sheet (shadow cast upward) | `0 -6px 18px` |
+| `--hrl-focus` | focus ring colour | `var(--hrl-accent)` |
+| `--hrl-focus-w` / `--hrl-focus-offset` | focus ring width / offset | `2px` / `2px` |
+| `--hrl-ease` | easing for transitions | `cubic-bezier(.2, .6, .2, 1)` |
+| `--hrl-dur-fast` / `--hrl-dur` | short / standard transition | `120ms` / `220ms` |
+| `--hrl-z-sticky` / `--hrl-z-menu` / `--hrl-z-sheet` | app and tab bars / dropdowns / the More sheet | `20` / `30` / `40` |
+
+The ID card also reads `--hrl-card-display` and `--hrl-card-body` (its fonts;
+unset, both fall back to `--hrl-font`).
+
+Leave-type badges (`.hrl-badge--type`) read `--hrl-type`, set inline per type;
+it colours the dot only, never the text.
+
 Point `config.extra_stylesheets` at a stylesheet and it is linked after the
 engine's own CSS, so your `--hrl-*` overrides win. Every view is also
 overridable through standard engine view precedence — drop a file at the same

data/app/assets/javascripts/hr_lite/confirm.js

@@ -19,13 +19,28 @@
       if (!form || form.nodeName !== "FORM") return;
 
       var message = form.getAttribute("data-turbo-confirm");
-      if (!message) return;
-
-      if (!window.confirm(message)) {
+      if (message && !window.confirm(message)) {
         event.preventDefault();
         event.stopPropagation();
+        return;
+      }
+
+      // Double-submit guard (data-disable-with is inert without Turbo/ujs). The
+      // timeout lets the submitter's value post first; geo punch runs its own.
+      if (!form.hasAttribute("data-hrl-geo-punch") && event.submitter) {
+        var b = event.submitter;
+        setTimeout(function () { b.disabled = true; b.setAttribute("aria-busy", "true"); }, 0);
       }
     },
     true // capture, so the check runs before any other submit handler
   );
+
+  // Back restores a submitted page from the bfcache with its button still locked.
+  window.addEventListener("pageshow", function (event) {
+    if (!event.persisted) return;
+    document.querySelectorAll("form:not([data-hrl-geo-punch]) [aria-busy]").forEach(function (b) {
+      b.disabled = false;
+      b.removeAttribute("aria-busy");
+    });
+  });
 })();

data/app/assets/javascripts/hr_lite/geo_punch.js

@@ -4,7 +4,7 @@
 //     <input type="hidden" name="lat"><input type="hidden" name="lng">
 //     <input type="hidden" name="accuracy_m"><input type="hidden" name="geo_status">
 //     <button type="submit">…</button>
-//     <span data-hrl-geo-status hidden></span>
+//     <p data-hrl-geo-status role="status" aria-live="polite"></p>  (not hidden, or the first message is missed)
 //   </form>
 // A denied permission holds the punch; timeout/unavailable submit anyway
 // with geo_status set; the server flags them.

data/app/assets/javascripts/hr_lite/nav.js

@@ -12,10 +12,27 @@
 
   centre(document.querySelector(".hrl-side"));
 
+  // Chrome scrolls a focused field's caret into view, not the whole field, so a
+  // textarea near the bottom can sit half under the fixed tab bar. Nudge it out.
+  var tabbar = document.querySelector(".hrl-tabbar");
+  document.addEventListener("focusin", function (event) {
+    if (!tabbar || !tabbar.getClientRects().length || tabbar.contains(event.target)) return;
+    if (event.target.getBoundingClientRect().bottom > tabbar.getBoundingClientRect().top) {
+      event.target.scrollIntoView({ block: "nearest" });
+    }
+  });
+
   var more = document.querySelector(".hrl-tabbar__more");
   if (more) {
     more.addEventListener("toggle", function () {
       if (more.open) centre(more.querySelector(".hrl-sheet"));
     });
+    // Escape, or a tap on the scrim (the <details> itself), closes the sheet.
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && more.open) { more.open = false; more.querySelector("summary").focus(); }
+    });
+    document.addEventListener("click", function (event) {
+      if (more.open && !event.target.closest(".hrl-sheet, .hrl-tabbar__more > summary")) more.open = false;
+    });
   }
 })();

data/app/assets/javascripts/hr_lite/select_filter.js

@@ -0,0 +1,46 @@
+// Dependency-free type-to-filter for long selects.
+// Markup contract: <select data-hrl-filter="Type a name to filter">. A search
+// box with that label goes in front of the select, and typing keeps only the
+// options whose text matches. The select keeps its name and submits as before;
+// without JS it stays a plain select. Options are removed, not hidden, because
+// iOS Safari's picker ignores hidden options.
+(function () {
+  "use strict";
+
+  function setup(select) {
+    var all = Array.prototype.slice.call(select.options);
+    var picked = select.value; // the stored pick, or the admin's own choice from the list
+    var input = document.createElement("input");
+    input.type = "search";
+    input.className = "hrl-input hrl-filter";
+    input.autocomplete = "off";
+    input.placeholder = select.getAttribute("data-hrl-filter") || "Type to filter";
+    input.setAttribute("aria-label", input.placeholder);
+    select.parentNode.insertBefore(input, select);
+
+    function filter() {
+      var q = input.value.trim().toLowerCase();
+      var value = q ? select.value : picked; // an empty box puts the stored pick back
+      var keep = all.filter(function (o) { return o.text.toLowerCase().indexOf(q) !== -1; });
+      if (!keep.length) return; // no match: leave the list as is, so the field still submits
+      select.replaceChildren.apply(select, keep);
+      // Keep the current pick while it still matches, else take the first match.
+      if (keep.some(function (o) { return o.value === value; })) select.value = value;
+      else select.selectedIndex = 0;
+    }
+
+    select.addEventListener("change", function () { picked = select.value; });
+    input.addEventListener("input", filter);
+    input.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") e.preventDefault(); // never submit the form half-filled
+      if (e.key === "Escape" && input.value) { e.preventDefault(); input.value = ""; filter(); }
+    });
+  }
+
+  function init() {
+    document.querySelectorAll("select[data-hrl-filter]").forEach(setup);
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();