palace-ui 0.11.0 → 0.12.1

package/README.md

@@ -13,4 +13,10 @@ rotation, chunky offset shadows. One stylesheet, no build step, no JavaScript.
 - `SPEC.md`: the design specification, written to be followed exactly by people and AI agents alike
 - `catalog.html`: every component on one page; open it in a browser
 
+## Utilities
+
+- `.visually-hidden`: text for screen readers only. A scrolling container
+  (`overflow-x: auto`) that holds it needs `position: relative`, or the hidden
+  text widens the page.
+
 MIT licensed.

package/SPEC.md

@@ -138,6 +138,37 @@ Every page follows this structure:
 </nav>
 ```
 
+A navbar menu for the signed-in user is a `<details class="navbar-menu">`: the summary looks like `.navbar-user`, and the panel's links and buttons are its items. A form in the panel (sign out) sits under a thin rule. It works without JavaScript; a script can add Escape and closing from outside.
+
+```html
+<nav class="navbar">
+  <a href="/" class="navbar-brand">App Name</a>
+  <div class="navbar-right">
+    <details class="navbar-menu">
+      <summary><span class="visually-hidden">Account: </span>Username</summary>
+      <div class="navbar-menu-panel">
+        <p class="navbar-menu-label" aria-hidden="true">Your teams</p>
+        <ul aria-label="Your teams"><li><a href="/a" aria-current="true">Team A</a></li></ul>
+        <a href="/account">Account</a>
+        <form method="post" action="/logout"><button type="submit">Sign out</button></form>
+      </div>
+    </details>
+  </div>
+</nav>
+```
+
+Group items with `.navbar-menu-group`: a thin rule above, like the one before sign out, and an optional `.navbar-menu-label` as its heading. A setting that is switched on and off is a `button.navbar-menu-setting` with `aria-pressed`: its name sits on the left and a small square switch on the right, pink when pressed. Toggle `aria-pressed` with a script, or submit a form that renders the new state. Use it for on/off settings, not for links.
+
+```html
+<div class="navbar-menu-group" role="group" aria-labelledby="menu-settings">
+  <p class="navbar-menu-label" id="menu-settings">Settings</p>
+  <button type="button" class="navbar-menu-setting" aria-pressed="true">Notifications</button>
+  <button type="button" class="navbar-menu-setting" aria-pressed="false">Sound</button>
+</div>
+```
+
+`.visually-hidden` hides text visually and keeps it for screen readers (see Visually Hidden).
+
 With an icon beside the brand name (`.navbar-brand` uses `inline-flex` layout with `gap: 10px`; images/SVGs are auto-sized to 24×24):
 
 ```html
@@ -281,7 +312,7 @@ Use `.card-static` instead of `.card` when the card is a container (e.g. auth fo
 
 ### Buttons
 
-Size modifiers compose with any color variant:
+Size modifiers compose with any color variant. `.btn` works on `<button>` and on `<a>` alike: each size sets its own line height, so a button and a link button of the same size are the same height (41px default, 28px `.btn-sm`, 51px `.btn-lg` and `.cta`) and line up side by side.
 
 ```html
 <!-- Size modifiers -->
@@ -605,11 +636,27 @@ Inline keyboard key: bordered, uppercase mono, with a small pink offset shadow.
 <kbd>Ctrl</kbd> + <kbd>Z</kbd>
 ```
 
+### Visually Hidden
+
+`.visually-hidden` keeps text for screen readers and draws nothing: a label for an icon-only column, the name of the row an "Edit" button acts on.
+
+```html
+<button class="btn btn-sm btn-outline">Edit<span class="visually-hidden"> Ada</span></button>
+```
+
+It is absolutely positioned where the text would have been, with no `top` or `left`, so it stays where the text is and a screen reader moving to it does not jump the page. That means it still counts toward the width of its containing block. **A scrolling container (`overflow-x: auto`) holding `.visually-hidden` text needs `position: relative`**; without it the hidden text's containing block is the page, and a wide table makes the whole page scroll sideways on a phone.
+
+```html
+<div style="overflow-x: auto; position: relative;">
+  <table>…<th><span class="visually-hidden">Actions</span></th>…</table>
+</div>
+```
+
 ## Accessibility
 
 ### Focus Visible
 
-All interactive elements (buttons, links, inputs) have `:focus-visible` styles with a `2px` outline in accent-2 (purple) and `2px` offset. Buttons also get a lift + shadow on focus.
+All interactive elements (buttons, links, inputs, checkboxes, radio buttons, `<summary>`) have `:focus-visible` styles with a `2px` outline in accent-2 (purple) and `2px` offset. Buttons also get a lift + shadow on focus. Text inputs show focus with a purple border and shadow instead. The navbar menu's summary keeps its own cyan ring.
 
 ### Reduced Motion
 

package/catalog.html

@@ -361,6 +361,17 @@
     <button class="btn btn-lg btn-primary">Large</button>
   </div>
 
+  <h3 style="margin-bottom: 12px;">Buttons and links side by side</h3>
+  <p style="margin-bottom: 12px;">A <code>&lt;button&gt;</code> and an <code>&lt;a class="btn"&gt;</code> of the same size are the same height and line up.</p>
+  <div data-source id="btn-match" style="display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 24px;">
+    <button class="btn btn-sm btn-outline">Button</button>
+    <a href="#" class="btn btn-sm btn-outline">Link</a>
+    <button class="btn btn-primary">Button</button>
+    <a href="#" class="btn btn-primary">Link</a>
+    <button class="btn btn-lg btn-secondary">Button</button>
+    <a href="#" class="btn btn-lg btn-secondary">Link</a>
+  </div>
+
   <h3 style="margin-bottom: 12px;">Disabled</h3>
   <div data-source style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;">
     <button class="btn btn-primary" disabled>Disabled</button>
@@ -462,6 +473,23 @@
     </div>
   </div>
 
+  <h3 style="margin-bottom: 12px;">Checkboxes, radio buttons and disclosures</h3>
+  <p style="margin-bottom: 12px;">Tab through them: each gets the same focus ring as links and buttons.</p>
+  <div data-source id="focus-controls" class="card-static" style="margin-bottom: 16px;">
+    <div class="stack-md">
+      <label><input type="checkbox" checked> Show lap times</label>
+      <fieldset style="border: 0;">
+        <legend class="visually-hidden">Direction</legend>
+        <label><input type="radio" name="cat-dir" checked> Anticlockwise</label>
+        <label><input type="radio" name="cat-dir"> Clockwise</label>
+      </fieldset>
+      <details>
+        <summary>More options</summary>
+        <p>Hidden until the summary is opened.</p>
+      </details>
+    </div>
+  </div>
+
   <h3 style="margin-bottom: 12px;">Inline Form</h3>
   <div data-source style="display: flex; gap: 8px;">
     <input type="text" placeholder="Add a label" aria-label="Add a label" style="flex: 1;">
@@ -522,6 +550,20 @@
       </tbody>
     </table>
   </div>
+
+  <h3 style="margin-bottom: 12px; margin-top: 24px;">Scrolling table</h3>
+  <p style="margin-bottom: 12px;">A wide table scrolls inside its wrapper. The wrapper is <code>position: relative</code>, so <code>.visually-hidden</code> text in it stays inside it and the page never grows wider.</p>
+  <div data-source id="scroll-table" style="overflow-x: auto; position: relative;">
+    <table style="min-width: 640px;">
+      <thead>
+        <tr><th>Driver</th><th>Laps</th><th>Best</th><th>Last</th><th><span class="visually-hidden">Actions</span></th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Ada</td><td>12</td><td>4.812</td><td>4.977</td><td><button class="btn btn-sm btn-outline">Edit<span class="visually-hidden"> Ada</span></button></td></tr>
+        <tr><td>Grace</td><td>11</td><td>4.903</td><td>5.120</td><td><button class="btn btn-sm btn-outline">Edit<span class="visually-hidden"> Grace</span></button></td></tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 
 <!-- ════════════════════════════════════════ CODE ════════════════════════════════════════ -->
@@ -793,6 +835,29 @@
     </nav>
   </div>
 
+  <h3 style="margin-bottom: 12px;">With a navbar menu (open it)</h3>
+  <div data-source style="margin-bottom: 24px; padding-bottom: 300px;">
+    <nav class="navbar">
+      <a href="#" class="navbar-brand">App Name</a>
+      <div class="navbar-right">
+        <details class="navbar-menu">
+          <summary><span class="visually-hidden">Account: </span>Username</summary>
+          <div class="navbar-menu-panel">
+            <p class="navbar-menu-label" aria-hidden="true">Your teams</p>
+            <ul aria-label="Your teams"><li><a href="#" aria-current="true">Team A</a></li><li><a href="#">Team B</a></li></ul>
+            <a href="#">Account</a>
+            <div class="navbar-menu-group" role="group" aria-labelledby="cat-menu-settings">
+              <p class="navbar-menu-label" id="cat-menu-settings">Settings</p>
+              <button type="button" class="navbar-menu-setting" aria-pressed="true">Notifications</button>
+              <button type="button" class="navbar-menu-setting" aria-pressed="false">Sound</button>
+            </div>
+            <form><button type="button">Sign out</button></form>
+          </div>
+        </details>
+      </div>
+    </nav>
+  </div>
+
   <h3 style="margin-bottom: 12px;">Light (.navbar-light)</h3>
   <div data-source>
     <nav class="navbar navbar-light" style="border: 2px solid var(--p-border);">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "palace-ui",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Retro-technical design system. Hard edges, vibrant gradients, chunky shadows.",
   "license": "MIT",
   "repository": {

package/palace.css

@@ -1,4 +1,4 @@
-/*! palace-ui v0.11.0 | MIT License | fonts: SIL OFL 1.1, see fonts/ */
+/*! palace-ui v0.12.0 | MIT License | fonts: SIL OFL 1.1, see fonts/ */
 
 /* ══════════════════════════════════════════
    FONTS (self-hosted; no third-party requests)
@@ -114,6 +114,22 @@
 /* The hidden attribute always hides, even on elements palace gives a display (buttons, .btn). */
 [hidden] { display: none !important; }
 
+/* Text for screen readers only: not drawn, still read. It is absolutely
+   positioned where it would have been, so inside a scrolling container that is
+   not positioned it still widens the page: give that container
+   position: relative. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 body {
   font-family: var(--p-font);
   color: var(--p-text);
@@ -311,12 +327,17 @@ button, .btn {
   transition: var(--p-transition);
   text-decoration: none;
   display: inline-block;
+  /* One line height for <button> and <a class="btn">, so both are the same
+     height: a button does not inherit the body's line height, a link does. */
+  line-height: calc(17 / 13);
+  text-align: center;
 }
 
 /* Size modifiers */
 .btn-sm {
   padding: 6px 14px;
   font-size: 11px;
+  line-height: calc(14 / 11);
   letter-spacing: 1px;
   border-width: var(--p-border-thin);
 }
@@ -324,6 +345,7 @@ button, .btn {
 .btn-lg {
   padding: 14px 28px;
   font-size: 15px;
+  line-height: calc(19 / 15);
   letter-spacing: 1px;
 }
 
@@ -387,6 +409,8 @@ button, .btn {
   padding: 14px 28px;
   font-family: var(--p-font);
   font-size: 15px;
+  line-height: calc(19 / 15);
+  text-align: center;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -608,6 +632,15 @@ textarea:focus {
   transform: var(--p-lift-sm);
 }
 
+/* Checkboxes, radio buttons and disclosure summaries: the focus ring of links
+   and buttons, without the lift. */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible,
+summary:focus-visible {
+  outline: var(--p-border-width) solid var(--p-accent-2);
+  outline-offset: 2px;
+}
+
 
 /* ══════════════════════════════════════════
    STATUS MESSAGES
@@ -720,6 +753,11 @@ textarea:focus {
   color: var(--p-accent-2);
 }
 
+.navbar-light .navbar-menu > summary {
+  color: var(--p-accent-2);
+  border-color: var(--p-border);
+}
+
 .navbar-light .btn {
   color: var(--p-text-secondary);
   border-color: var(--p-border);
@@ -731,6 +769,135 @@ textarea:focus {
 }
 
 
+/* Navbar menu: a <details> whose summary looks like .navbar-user and opens a
+   panel in the dialog card language. Works without JavaScript; a script may
+   add Escape and closing from outside. Links and buttons in the panel are its
+   items; a form in it (e.g. Sign out) sits under a thin rule. */
+.navbar-menu { position: relative; }
+.navbar-menu > summary {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  max-width: min(14rem, 40vw);
+  /* The label truncates; the caret after it, in the right padding, never does. */
+  padding: 6px 28px 6px 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: var(--p-border-thin) solid var(--p-border-dark);
+  font: 600 11px/1.4 var(--p-font);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--p-accent-3);
+  list-style: none;
+  cursor: pointer;
+}
+.navbar-menu > summary::-webkit-details-marker { display: none; }
+.navbar-menu > summary::after {
+  content: '';
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  margin-top: -2px;
+  border: 4px solid transparent;
+  border-top-color: currentColor;
+  border-bottom: 0;
+}
+.navbar-menu > summary:hover,
+.navbar-menu[open] > summary { color: var(--p-accent-1); border-color: var(--p-accent-1); }
+.navbar-menu > summary:focus-visible { outline: 2px solid var(--p-accent-3); outline-offset: 2px; }
+
+/* Right-aligned under the summary: a navbar menu sits at the navbar's right. */
+.navbar-menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 100;
+  min-width: 14rem;
+  max-width: calc(100vw - 2 * var(--p-space-md));
+  display: grid;
+  padding: var(--p-space-xs) 0;
+  background: var(--p-surface);
+  color: var(--p-text);
+  border: var(--p-border-width) solid var(--p-text);
+  box-shadow: var(--p-shadow-md) var(--p-accent-2);
+}
+.navbar-menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; }
+.navbar-menu-label {
+  margin: 0;
+  padding: var(--p-space-sm) var(--p-space-md) var(--p-space-xs);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--p-text-faint);
+}
+.navbar-menu-panel a,
+.navbar-menu-panel button {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--p-space-sm) var(--p-space-md);
+  border: 0;
+  background: none;
+  font: 600 13px/1.4 var(--p-font);
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--p-text);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  /* No transition: a closed <details> does not render its content, so a
+     transition started there would never finish. */
+  transition: none;
+}
+.navbar-menu-panel a:hover,
+.navbar-menu-panel button:hover { background: var(--p-hover-bg); transform: none; box-shadow: none; }
+/* One focus style for links and buttons: the button lift would spill past the panel. */
+.navbar-menu-panel a:focus-visible,
+.navbar-menu-panel button:focus-visible {
+  outline: 2px solid var(--p-accent-2);
+  outline-offset: -2px;
+  color: var(--p-accent-2);
+  transform: none;
+  box-shadow: none;
+}
+/* The current item: a pink bar, beside any focus outline, never instead of it. */
+.navbar-menu-panel a[aria-current],
+.navbar-menu-panel a[aria-current]:focus-visible { box-shadow: inset 3px 0 0 var(--p-accent-1); }
+.navbar-menu-panel form,
+.navbar-menu-group {
+  margin: var(--p-space-xs) 0 0;
+  padding-top: var(--p-space-xs);
+  border-top: var(--p-border-thin) solid var(--p-border);
+}
+/* A group of items under a thin rule, with an optional .navbar-menu-label. */
+.navbar-menu-group { display: grid; }
+.navbar-menu-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
+/* A setting: its name on the left, a switch on the right, on and off from
+   aria-pressed. The switch is square-edged like everything else. */
+.navbar-menu-panel .navbar-menu-setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--p-space-md);
+}
+.navbar-menu-setting::after {
+  content: '';
+  flex: none;
+  width: 28px;
+  height: 16px;
+  border: var(--p-border-width) solid var(--p-text);
+  background: var(--p-surface) linear-gradient(var(--p-text), var(--p-text)) no-repeat left 2px center / 8px 8px;
+}
+.navbar-menu-setting[aria-pressed="true"]::after {
+  background: var(--p-accent-1) linear-gradient(var(--p-text), var(--p-text)) no-repeat right 2px center / 8px 8px;
+}
+@media (forced-colors: active) {
+  .navbar-menu-setting::after { forced-color-adjust: none; border-color: CanvasText; background-color: Canvas; background-image: linear-gradient(CanvasText, CanvasText); }
+  .navbar-menu-setting[aria-pressed="true"]::after { background-color: Highlight; }
+}
+
 /* ══════════════════════════════════════════
    TABLES
    ══════════════════════════════════════════ */