@acms-subir/core 0.3.60 → 0.3.61

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @acms-subir/core
 
+## 0.3.61
+
+### Patch Changes
+
+- c2f3b86: Round radio buttons and square checkboxes in the admin again.
+
+  - **Radio buttons in choice cards are round.** In Calendar settings (Booking approval, and Direction in Google's "Link a calendar" and edit-link dialogs) and in a booking link's Approval, the radio stretched to the card's height and looked like a tall oval. It's a 16 px circle next to the option's bold title now.
+  - **No ring after clicking a radio or checkbox.** Clicking one used to draw the pale focus ring that text fields get, around the control's whole box. Radios and checkboxes now show a thin accent outline only when you reach them with the keyboard. Text fields, dropdowns and text areas keep their ring.
+  - **Checkboxes stay square next to long labels.** A checkbox whose label wraps onto a second line, like "Show confirmed bookings on the public calendar…" on a room, or a long calendar name under Mobile app, was squeezed narrower. The room checkboxes under an event's "Hold rooms & people" were wider than tall. All are square now.
+
+  There's no migration, and nothing to change after updating.
+
 ## 0.3.60
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.60",
+  "version": "0.3.61",
   "publishConfig": {
     "access": "public"
   },

package/src/pages/admin/calendar/settings.astro

@@ -742,7 +742,7 @@ const sections = [
   .cs-choices { display: flex; flex-direction: column; gap: 8px; }
   .cs-choice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
   .cs-choice:has(input:checked) { border-color: var(--accent-ring); background: var(--accent-soft); }
-  .cs-choice input { accent-color: var(--accent); margin-top: 2px; }
+  .cs-choice input { width: 16px; height: 16px; margin: 2px 0 0; align-self: start; accent-color: var(--accent); }
   .cs-choice b { display: block; font-size: 13.5px; }
   .cs-choice small { color: var(--muted); font-size: 12px; }
   .cs-rules { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }

package/src/styles/admin.css

@@ -380,7 +380,9 @@ input[type='search'] { -webkit-appearance: none; appearance: none; }
 input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }
 textarea { resize: vertical; line-height: 1.6; }
 textarea.code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12.5px; }
-input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+input:where(:not([type='radio'], [type='checkbox'])):focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+/* radios and checkboxes: a ring for keyboard focus only, not after a click */
+:where(input[type='radio'], input[type='checkbox']):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 label.field { display: block; margin-bottom: 12px; }
 label.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
 .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@@ -1173,7 +1175,7 @@ a.mini-row:hover { background: var(--hover); }
 .scard-sub .hint, .scard .hint { margin: 0 0 8px; }
 .subpanel { margin: 10px 0 0 24px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); }
 .check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
-.check-row input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
+.check-row input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
 .field-row.three { grid-template-columns: repeat(3, 1fr); }
 .field.narrow { max-width: 320px; }
 label.field > small.hint { display: block; margin: 5px 0 0; }
@@ -1644,7 +1646,7 @@ a.bk-row:hover, .bk-row.is-sel { background: var(--hover); }
 .appr-choices { display: flex; flex-direction: column; gap: 8px; }
 .appr-choice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
 .appr-choice:has(input:checked) { border-color: var(--accent-ring); background: var(--accent-soft); }
-.appr-choice input { accent-color: var(--accent); margin-top: 2px; }
+.appr-choice input { width: 16px; height: 16px; margin: 2px 0 0; align-self: start; accent-color: var(--accent); }
 .appr-choice b { display: block; font-size: 13.5px; }
 .appr-choice small { color: var(--muted); font-size: 12px; }
 .appr-rules { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }

package/src/styles/editor.css

@@ -1115,7 +1115,7 @@
   border-radius: var(--r-md); padding: 0 10px; font: inherit; font-size: 13.5px;
 }
 .pe-evsec textarea { background: var(--panel); border-color: var(--line-strong); font-size: 13.5px; }
-.pe-evsec input:focus, .pe-evsec select:focus, .pe-evsec textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.pe-evsec input:where(:not([type='radio'], [type='checkbox'])):focus, .pe-evsec select:focus, .pe-evsec textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
 .pe-evsec input[type='date'] { min-width: 150px; }
 .pe-evsec input[type='time'] { min-width: 112px; }
 .pe-evsec input.mono { font-size: 12.5px; }
@@ -1242,7 +1242,7 @@ html.pe-evr-lock { overflow: hidden; }
 .rh-room + .rh-room { border-top: 1px solid var(--line); }
 .rh-room:hover { background: var(--hover); }
 .rh-room.on { background: var(--sel); }
-.rh-room input { accent-color: var(--accent); margin: 0; }
+.rh-room input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
 .rh-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
 .rh-name b { font-size: 13px; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rh-room.on .rh-name b { font-weight: 600; }

package/src/styles/mobile-app.css

@@ -77,7 +77,7 @@
 .ma-rule .hint { margin: 8px 0 0; }
 .ma-choices { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
 .ma-check { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; color: var(--text-2); cursor: pointer; }
-.ma-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
+.ma-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
 .ma-check:has(input:disabled) { cursor: default; opacity: 0.6; }
 .ma-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
 .ma-lead { max-width: 240px; margin: 10px 0 0; }