palace-ui 0.12.0 → 0.12.2

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

@@ -157,7 +157,17 @@ A navbar menu for the signed-in user is a `<details class="navbar-menu">`: the s
 </nav>
 ```
 
-`.visually-hidden` hides text visually and keeps it for screen readers.
+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):
 
@@ -302,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 -->
@@ -626,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 ════════════════════════════════════════ -->
@@ -794,7 +836,7 @@
   </div>
 
   <h3 style="margin-bottom: 12px;">With a navbar menu (open it)</h3>
-  <div data-source style="margin-bottom: 24px; padding-bottom: 180px;">
+  <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">
@@ -804,6 +846,11 @@
             <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>

package/package.json

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

package/palace.css

@@ -114,11 +114,17 @@
 /* The hidden attribute always hides, even on elements palace gives a display (buttons, .btn). */
 [hidden] { display: none !important; }
 
-/* Text for screen readers only: off screen, still read. */
+/* 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;
@@ -319,14 +325,23 @@ button, .btn {
   border: var(--p-border-width) solid;
   border-radius: var(--p-radius);
   transition: var(--p-transition);
+  /* Only what a button's states change. A size that follows its container
+     (font size, padding, width) must never animate, or it passes through
+     sizes in between whenever the container settles. */
+  transition-property: background-color, border-color, color, box-shadow, transform, outline-color;
   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);
 }
@@ -334,6 +349,7 @@ button, .btn {
 .btn-lg {
   padding: 14px 28px;
   font-size: 15px;
+  line-height: calc(19 / 15);
   letter-spacing: 1px;
 }
 
@@ -397,6 +413,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;
@@ -618,6 +636,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
@@ -842,11 +869,38 @@ textarea:focus {
 /* 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-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