npm - @phantompixeldev/retrocss - Versions diffs - 3.0.1 → 3.1.1 - Mend

@phantompixeldev/retrocss 3.0.1 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/MIGRATION.md CHANGED Viewed

@@ -1,3 +1,56 @@
+# Migrating to RetroCSS 3.x
+## 3.1 — keyboard access, OS dark mode, and the rest of the radius token
+Additive. Nothing was renamed and no class removed; existing markup keeps
+working, because the fixes are applied by the JavaScript at init time rather
+than by requiring new HTML. Three things are worth knowing:
+**Dark mode now follows the operating system.** Previously the default was a
+hardcoded `light`, so a visitor whose system was set to dark got a light page
+until they found the toggle — on a framework that ships a full dark theme. Now
+an explicit choice (anything stored under `retro-theme`) still wins; only when
+there is none does `prefers-color-scheme` decide. To keep the old behaviour,
+store a theme yourself before `RetroCSS.init()`:
+```js
+localStorage.setItem('retro-theme', 'light');
+```
+The palette itself is applied in CSS, so there is **no theme flash**: the dark
+tokens are emitted both for `[data-theme="dark"]` and, under
+`@media (prefers-color-scheme: dark)`, for `:root:not([data-theme="light"])`.
+A dark-OS visitor is painted dark before a line of JavaScript runs.
+Two consequences:
+- `applyTheme('light')` now writes `data-theme="light"` instead of *removing*
+  the attribute. It has to: on a dark OS the attribute is the only thing that
+  can hold a deliberate light choice in place. If you keyed any CSS off
+  `:root:not([data-theme])` to mean "light", match `[data-theme="light"]`
+  instead.
+- To also cover a *stored* choice that differs from the OS — the one case CSS
+  cannot see — add the inline `<head>` snippet documented in the README. Every
+  page in this repo now ships it.
+**`--retro-border-radius` now reaches the whole framework.** 3.0.1 wired 31
+components to the token; the core chrome — card, button, badge, nav, progress,
+alert, input, checkbox, accordion — still hardcoded `0`, so setting the token
+rounded dropdowns but left buttons square. All of it follows the token now. The
+default is unchanged (the token is `0`); but if you had already set
+`--retro-border-radius`, more of the framework will round than before.
+**Interactive components gained roles and keyboard handling.** Rating stars are
+a `radiogroup` of `radio`s, carousel dots are `button`s with `aria-current`,
+tooltips appear on focus and carry `aria-describedby`, tag removes are
+`button`s, and tabs use a roving tabindex. If you styled any of these by tag
+name (`span.retro-tag-remove`, `div.retro-carousel-dot`), switch to the class —
+newly generated ones are `<button>`. If you hid a file input with
+`.retro-hidden`, switch to `.retro-sr-only`: `display: none` removes it from the
+tab order, leaving no keyboard route to the file picker.
+---
 # Migrating to RetroCSS 3.0
 3.0 is a visual release. Nothing was renamed and no class was removed, but two

package/README.md CHANGED Viewed

@@ -183,9 +183,32 @@ sidebar, tabs, pagination and the file uploader:
 :root { --retro-border-radius: 4px; }
 ```
-The core chrome — card, button, badge, table, input, modal — stays square
-regardless, and `.retro-rounded` / `-lg` / `-full` still round one element at a
-time.
+`.retro-rounded` / `-lg` / `-full` still round one element at a time. Two
+components keep their shape on purpose: `.retro-nav-pills` and `.retro-tag`.
+Tables stay square because `border-collapse: collapse` — what merges their cell
+borders into a single hairline — makes every engine ignore `border-radius`.
+Dark mode follows the operating system when the visitor has expressed no
+preference of their own. The moment they use a `.retro-theme-toggle`, that
+choice is stored and outranks the OS from then on.
+This is done in CSS, not script — the dark palette is emitted both for
+`[data-theme="dark"]` and under `@media (prefers-color-scheme: dark)` for
+`:root:not([data-theme="light"])` — so a dark-OS visitor gets the right colours
+on the very first paint, with no flash, even before the bundle loads.
+The one case CSS cannot see is a *stored* choice that differs from the OS.
+Add this to your `<head>` to cover it. It must be inline: an external or
+`defer`red script runs after the first paint, which is the whole problem.
+```html
+<script>
+  try {
+    var retroTheme = localStorage.getItem('retro-theme');
+    if (retroTheme) document.documentElement.setAttribute('data-theme', retroTheme);
+  } catch (e) {}
+</script>
+```
 > **Upgrading?** See [MIGRATION.md](MIGRATION.md). No class has ever been
 > renamed, but 3.0 raises the body text to 16px and drops the `!important` from
@@ -229,8 +252,13 @@ That proves the *tokens* are sound. `npm run check:pages` proves the *pages*
 are: it renders every page in the repo in real Chromium, in both themes, at
 1200/980/760/420/360px, and fails on a console error, horizontal overflow, a
 missing or duplicated `<h1>`, any rendered text below AA against the surface
-actually painted behind it, or an input glyph off its field's centre line. Both
-run in CI on every push.
+actually painted behind it, or an input glyph off its field's centre line.
+Neither can see whether a control can be *reached*, so `npm run check:keyboard`
+asserts that too: every control the framework drives from script is in the tab
+order and carries an accessible name, roving-tabindex groups expose exactly one
+tab stop, and every tooltip appears on focus and not only on hover. All four
+gates run in CI on every push.
 Beyond colour:
@@ -248,8 +276,19 @@ Beyond colour:
   neutralised, with the looping text effects switched off outright.
 - **Sortable tables are operable.** `.retro-table-sortable` headers are
   focusable, sort on Enter and Space as well as click, and carry `aria-sort`.
+  Add `data-sort="none"` to a column that should not sort.
+- **Rating stars are a radiogroup.** Tab reaches the group, Arrow keys move and
+  set the value, Home/End jump to the ends, and each star reports `aria-checked`.
+- **Carousels are keyboard-driven.** Dots are real buttons with labels and
+  `aria-current`; Left/Right arrows move between slides once focus is inside.
+- **Tooltips appear on focus,** not only on hover, are dismissible with Escape,
+  and are wired to their trigger with `aria-describedby` (WCAG 1.4.13).
+- **Tabs use a roving tabindex.** Tab steps over the tablist into the panel;
+  Arrow keys, Home and End move between tabs.
 - **`.retro-sr-only`** labels icon-only controls; `.retro-sr-only-focusable`
-  gives you a skip link.
+  gives you a skip link. Use it — not `.retro-hidden` — to hide a real form
+  control you still want reachable, such as a styled `<input type="file">`:
+  `display: none` takes it out of the tab order entirely.
 ```html
 <button class="retro-btn">💾<span class="retro-sr-only">Save</span></button>
@@ -289,13 +328,16 @@ npm run watch
 Run the gates:
 ```bash
-npm run check:a11y && npm run check:radius && npm run check:pages
+npm run check:a11y && npm run check:radius && npm run check:pages && npm run check:keyboard
 ```
 `check:a11y` gates the tokens (every `var(--retro-*)` resolves, every
 text/surface pair clears WCAG AA), `check:radius` gates the shape (nothing
-hardcodes a corner behind `--retro-border-radius`), and `check:pages` gates the
-rendered result across 8 pages × 2 themes × 5 widths.
+hardcodes a corner behind `--retro-border-radius`), `check:pages` gates the
+rendered result across 8 pages × 2 themes × 5 widths — including that the first
+paint is already the right theme with the bundle blocked, so a theme flash fails
+the build — and `check:keyboard` gates operability: that every control can
+actually be reached and used.
 `check:pages` needs a browser once: `npx playwright install chromium`.

package/dist/retro.css CHANGED Viewed

@@ -614,6 +614,185 @@
   --retro-syntax-attribute: #c8a2e0;
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) {
+    color-scheme: dark;
+    --retro-body-bg: #2b2b2b;
+    --retro-bg: #3a3a3a;
+    --retro-primary: #4a90e2;
+    --retro-primary-rgb: 74, 144, 226;
+    --retro-light: #454545;
+    --retro-white: #3a3a3a;
+    --retro-black: #fff;
+    --retro-white-rgb: 58, 58, 58;
+    --retro-black-rgb: 255, 255, 255;
+    --retro-light-rgb: 69, 69, 69;
+    --retro-border-light: #909090;
+    --retro-border-medium: #262626;
+    --retro-border-dark: #151515;
+    --retro-success: #2ecc71;
+    --retro-success-rgb: 46, 204, 113;
+    --retro-warning: #f39c12;
+    --retro-warning-rgb: 243, 156, 18;
+    --retro-danger: #e74c3c;
+    --retro-danger-rgb: 231, 76, 60;
+    --retro-info: #3498db;
+    --retro-info-rgb: 52, 152, 219;
+    --retro-teal: #1abc9c;
+    --retro-teal-rgb: 26, 188, 156;
+    --retro-tan: #d4b483;
+    --retro-tan-rgb: 212, 180, 131;
+    --retro-pink: #e84393;
+    --retro-pink-rgb: 232, 67, 147;
+    --retro-lime: #00b894;
+    --retro-lime-rgb: 0, 184, 148;
+    --retro-cyan: #00cec9;
+    --retro-cyan-rgb: 0, 206, 201;
+    --retro-orange: #e67e22;
+    --retro-orange-rgb: 230, 126, 34;
+    --retro-brown: #a67c52;
+    --retro-brown-rgb: 166, 124, 82;
+    --retro-violet: #9b59b6;
+    --retro-violet-rgb: 155, 89, 182;
+    --retro-gray: #95a5a6;
+    --retro-gray-rgb: 149, 165, 166;
+    --retro-maroon: #c0392b;
+    --retro-maroon-rgb: 192, 57, 43;
+    --retro-gold: #f1c40f;
+    --retro-gold-rgb: 241, 196, 15;
+    --retro-navy: #2c3e50;
+    --retro-navy-rgb: 44, 62, 80;
+    --retro-olive: #7f8c8d;
+    --retro-olive-rgb: 127, 140, 141;
+    --retro-silver: #bdc3c7;
+    --retro-silver-rgb: 189, 195, 199;
+    --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
+    --retro-card-bg: #3a3a3a;
+    --retro-card-header-bg: #1a237e;
+    --retro-card-header-text: #fff;
+    --retro-card-content-bg: #333333;
+    --retro-card-content-text: #f2f2f2;
+    --retro-card-footer-bg: #3a3a3a;
+    --retro-card-footer-text: #f2f2f2;
+    --retro-modal-bg: #3a3a3a;
+    --retro-modal-header-bg: #1a237e;
+    --retro-modal-header-text: #fff;
+    --retro-table-bg: #333333;
+    --retro-table-header-bg: #3a3a3a;
+    --retro-table-header-text: #f2f2f2;
+    --retro-table-striped-bg: #3f3f3f;
+    --retro-input-bg: #2e2e2e;
+    --retro-input-text: #f2f2f2;
+    --retro-sidebar-bg: #333333;
+    --retro-sidebar-text: #f2f2f2;
+    --retro-dropdown-bg: #3a3a3a;
+    --retro-dropdown-text: #f2f2f2;
+    --retro-list-bg: #333333;
+    --retro-list-text: #f2f2f2;
+    --retro-progress-bg: #2e2e2e;
+    --retro-progress-bar-bg: #4a90e2;
+    --retro-alert-bg: #3a3a3a;
+    --retro-alert-text: #f2f2f2;
+    --retro-badge-bg: #4a4a4a;
+    --retro-badge-text: #fff;
+    --retro-toast-bg: #3a3a3a;
+    --retro-toast-text: #f2f2f2;
+    --retro-primary-text: #8fbaed;
+    --retro-success-text: #31d074;
+    --retro-danger-text: #f3a29a;
+    --retro-warning-text: #f4a72b;
+    --retro-info-text: #7ebee8;
+    --retro-teal-text: #1cceab;
+    --retro-tan-text: #d4b483;
+    --retro-pink-text: #f39dc6;
+    --retro-lime-text: #00cfa6;
+    --retro-cyan-text: #00cec9;
+    --retro-orange-text: #eea869;
+    --retro-brown-text: #ccb399;
+    --retro-violet-text: #ccabda;
+    --retro-gray-text: #adb9ba;
+    --retro-maroon-text: #e9a69f;
+    --retro-gold-text: #f1c40f;
+    --retro-navy-text: #a5b9cd; /* fill is 1.41:1 as text -- worst case in the framework */
+    --retro-olive-text: #b1b9b9;
+    --retro-silver-text: #bdc3c7;
+    --retro-primary-fg: #000000;
+    --retro-success-fg: #000000;
+    --retro-danger-fg: #000000;
+    --retro-warning-fg: #000000;
+    --retro-info-fg: #000000;
+    --retro-teal-fg: #000000;
+    --retro-tan-fg: #000000;
+    --retro-pink-fg: #000000;
+    --retro-lime-fg: #000000;
+    --retro-cyan-fg: #000000;
+    --retro-orange-fg: #000000;
+    --retro-brown-fg: #000000;
+    --retro-violet-fg: #ffffff;
+    --retro-gray-fg: #000000;
+    --retro-maroon-fg: #ffffff;
+    --retro-gold-fg: #000000;
+    --retro-navy-fg: #ffffff;
+    --retro-olive-fg: #000000;
+    --retro-silver-fg: #000000;
+    --retro-text: #f2f2f2;
+    --retro-text-muted: #b8b8b8;
+    --retro-text-inverse: #1a1a1a;
+    --retro-primary-hover: #76abe9;
+    --retro-primary-active: #2378db;
+    --retro-success-hover: #54d98c;
+    --retro-success-active: #25a25a;
+    --retro-danger-hover: #ed7669;
+    --retro-danger-active: #e32f1c;
+    --retro-warning-hover: #f5b043;
+    --retro-warning-active: #c87f0a;
+    --retro-info-hover: #5faee3;
+    --retro-info-active: #217dbb;
+    --retro-teal-hover: #28e1bd;
+    --retro-teal-active: #148f77;
+    --retro-tan-hover: #e1cba9;
+    --retro-tan-active: #c79d5d;
+    --retro-pink-hover: #ee70ad;
+    --retro-pink-active: #e21c7c;
+    --retro-lime-hover: #00ebbd;
+    --retro-lime-active: #008a6f;
+    --retro-cyan-hover: #02fff9;
+    --retro-cyan-active: #009b97;
+    --retro-orange-hover: #eb9950;
+    --retro-orange-active: #bf6516;
+    --retro-brown-hover: #b99672;
+    --retro-brown-active: #956f4a;
+    --retro-violet-hover: #9b59b6;
+    --retro-violet-active: #804399;
+    --retro-gray-hover: #b1bdbd;
+    --retro-gray-active: #798d8f;
+    --retro-maroon-hover: #d14233;
+    --retro-maroon-active: #962d22;
+    --retro-gold-hover: #f4d03f;
+    --retro-gold-active: #c29d0b;
+    --retro-navy-hover: #3e5771;
+    --retro-navy-active: #1a242f;
+    --retro-olive-hover: #9aa4a5;
+    --retro-olive-active: #6d7a7b;
+    --retro-silver-hover: #d9dcde;
+    --retro-silver-active: #a1aab0;
+    --retro-primary-dark: #2378db;
+    --retro-gray-100: #454545;
+    --retro-shadow-light: #909090;
+    --retro-syntax-keyword: #6ba9db;
+    --retro-syntax-string: #d0967e;
+    --retro-syntax-comment: #8cad6f;
+    --retro-syntax-function: #dcdcaa;
+    --retro-syntax-number: #b5cea8;
+    --retro-syntax-operator: #9cdcfe;
+    --retro-syntax-variable: #d4d4d4;
+    --retro-syntax-class: #4ec9b0;
+    --retro-syntax-property: #9cdcfe;
+    --retro-syntax-tag: #6ba9db;
+    --retro-syntax-attribute: #c8a2e0;
+  }
+}
 /* Layout Specific Variables */
 /* Component Specific Variables */
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -922,7 +1101,7 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: var(--retro-font-weight-bold);
   text-align: left;
   margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: none;
   letter-spacing: 0;
   background: none;
@@ -1559,7 +1738,7 @@ h5, h6 {
   user-select: none;
   padding: var(--retro-spacing-xs) var(--retro-spacing-md);
   border: var(--retro-border-width-thick) solid var(--retro-border-dark);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-light);
   color: var(--retro-text);
   box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-medium);
@@ -1769,9 +1948,11 @@ h5, h6 {
   box-shadow: inset 1px 1px 0 var(--retro-bg), inset -1px -1px 0 var(--retro-border-medium);
   font-family: var(--retro-font);
   margin-bottom: 24px;
+  border-radius: var(--retro-border-radius);
   position: relative;
 }
 .retro-card-header {
+  border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
   background: var(--retro-card-header-bg);
   color: var(--retro-card-header-text);
 }
@@ -1797,6 +1978,11 @@ h5, h6 {
 }
 .retro-card-content {
   padding: 16px 16px;
+}
+.retro-card-content:last-child {
+  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
+}
+.retro-card-content {
   background: var(--retro-card-content-bg);
   border-top: 2px solid var(--retro-card-content-bg);
   font-size: 1rem;
@@ -1811,6 +1997,7 @@ h5, h6 {
   color: var(--retro-card-footer-text);
   padding: 8px 16px;
   font-size: 0.875rem;
+  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
   text-align: left;
 }
@@ -1866,7 +2053,7 @@ h5, h6 {
   color: var(--retro-input-text);
   font-family: var(--retro-font);
   font-size: var(--retro-font-size);
-  border-radius: 0 !important;
+  border-radius: var(--retro-border-radius);
   transition: none;
 }
 .retro-input:focus,
@@ -2077,7 +2264,7 @@ input[type=radio].retro-input {
 }
 input[type=checkbox].retro-input {
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
 }
 input[type=checkbox].retro-input:checked::after {
@@ -2271,7 +2458,7 @@ input[type=radio].retro-input:focus-visible {
 /* Checkbox specific styles */
 .retro-checkbox {
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
 }
 .retro-checkbox:checked {
   background: var(--retro-white);
@@ -2476,7 +2663,7 @@ input[type=radio].retro-input:focus-visible {
   border-bottom: 2px solid var(--retro-border-light);
   border-left: 2px solid var(--retro-border-medium);
   border-top: 2px solid var(--retro-border-medium);
-  border-radius: 0 !important;
+  border-radius: var(--retro-border-radius);
   font-family: var(--retro-font-heading);
   box-shadow: none;
   margin-bottom: 1.2em;
@@ -2509,7 +2696,7 @@ input[type=radio].retro-input:focus-visible {
   padding: 0.3em 1em 0.2em 1em;
   font-size: var(--retro-font-size-sm);
   font-family: inherit;
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: none;
   border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
   background: var(--retro-light);
@@ -2934,12 +3121,14 @@ input[type=radio].retro-input:focus-visible {
   transition: none;
   text-align: left;
   vertical-align: middle;
+  border-radius: var(--retro-border-radius);
 }
 .retro-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 24px;
+  border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
   background: var(--retro-modal-header-bg);
   color: var(--retro-modal-header-text);
 }
@@ -3092,7 +3281,7 @@ input[type=radio].retro-input:focus-visible {
   list-style: none;
   background: var(--retro-light);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
   font-family: var(--retro-font);
   transition: none;
@@ -3103,7 +3292,7 @@ input[type=radio].retro-input:focus-visible {
   padding: 8px 16px;
   color: var(--retro-black);
   text-decoration: none;
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-light);
   border-right: 1px solid var(--retro-border-medium);
   font-family: var(--retro-font);
@@ -3203,7 +3392,7 @@ input[type=radio].retro-input:focus-visible {
   display: block;
   border-right: none;
   border-bottom: 1px solid var(--retro-border-medium);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   width: 100%;
 }
 .retro-nav-vertical .retro-nav-item:last-child, .retro-nav-vertical .retro-tab:last-child {
@@ -3259,7 +3448,7 @@ input[type=radio].retro-input:focus-visible {
   margin: 0;
   background: var(--retro-light);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
   font-family: var(--retro-font);
 }
@@ -3275,7 +3464,7 @@ input[type=radio].retro-input:focus-visible {
   text-decoration: none;
   background: var(--retro-light);
   border: 2px solid transparent;
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   text-align: center;
 }
 .retro-nav-toolbar .retro-nav-item:hover, .retro-nav-toolbar .retro-tab:hover {
@@ -3471,7 +3660,7 @@ input[type=radio].retro-input:focus-visible {
   border-bottom: 2px solid var(--retro-border-light);
   border-left: 2px solid var(--retro-border-medium);
   border-top: 2px solid var(--retro-border-medium);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   height: 22px;
   position: relative;
   margin: 1em 0;
@@ -3485,7 +3674,7 @@ input[type=radio].retro-input:focus-visible {
   width: 0%;
   transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border-right: 2px solid var(--retro-border-light);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: none;
   position: absolute;
   left: 0;
@@ -3547,7 +3736,7 @@ input[type=radio].retro-input:focus-visible {
   color: var(--retro-badge-text);
   background: var(--retro-badge-bg);
   border: 1px solid var(--retro-border-dark);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.1), inset 0 0 6px rgba(var(--retro-black-rgb), 0.8);
   text-shadow: none;
   margin: 0.2em 0.4em 0.2em 0;
@@ -3785,6 +3974,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-accordion-item {
+  border-radius: var(--retro-border-radius);
   border: 2px solid var(--retro-border-dark);
   margin-bottom: 0.5rem;
   background-color: var(--retro-bg);
@@ -4030,6 +4220,11 @@ input[type=radio].retro-input:focus-visible {
   margin-bottom: 0;
 }
+.retro-file-input:focus-visible + .retro-file-label {
+  outline: 2px solid var(--retro-primary);
+  outline-offset: 2px;
+}
 .retro-file-filename {
   font-size: var(--retro-font-size);
   color: var(--retro-input-text);
@@ -4517,7 +4712,7 @@ input[type=radio].retro-input:focus-visible {
   margin-left: var(--retro-spacing-lg);
   background: none;
   box-shadow: none;
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
 }
 .retro-list-bordered {
   border: 1px solid var(--retro-border-medium);
@@ -4661,7 +4856,7 @@ dl.retro-list dd {
   color: var(--retro-black);
   border: 2px solid var(--retro-border-dark);
   box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -4700,7 +4895,7 @@ dl.retro-list dd {
 .retro-carousel-dot {
   width: 12px;
   height: 12px;
-  border-radius: 0;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-border-medium);
   border: 2px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -5053,18 +5248,22 @@ input[type=datetime-local].retro-input.retro-input-sm {
 }
 .retro-sidebar-group {
-  margin: var(--retro-spacing-sm) 0 var(--retro-spacing-xs);
+  margin: 0;
+  padding: var(--retro-spacing-xs) var(--retro-spacing-md);
   font-size: var(--retro-font-size-xs);
   font-weight: var(--retro-font-weight-bold);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
   color: var(--retro-text-muted);
+  background: var(--retro-bg);
   border-bottom: 1px solid var(--retro-border-medium);
-  padding-bottom: 2px;
 }
-.retro-sidebar-section:first-of-type .retro-sidebar-group {
-  margin-top: 0;
+.retro-nav-vertical .retro-sidebar-section {
+  margin-bottom: 0;
+}
+.retro-nav-vertical .retro-sidebar-section + .retro-sidebar-section .retro-sidebar-group {
+  border-top: 1px solid var(--retro-border-medium);
 }
 /* Utilities */