palace-ui 0.10.0 → 0.12.0

package/SPEC.md

@@ -9,7 +9,7 @@
 - **Retro-technical.** Hard edges (border-radius: 0 everywhere), thick 2px borders, chunky offset box-shadows. Gradients on text, thin decorative stripes (≤3px), and narrow fixed bars (e.g. sticky CTAs) only — never on large surfaces or card backgrounds.
 - **Three-color accent system.** Hot pink `#ff2d9b`, electric purple `#5b4cff`, cyan `#00e5ff`. These rotate across card lists and provide visual rhythm.
 - **Snappy interactions.** All transitions are `0.1s`. Hovers lift elements up-left and cast a hard shadow down-right. Fast, mechanical feedback.
-- **Uppercase everything.** All headings, labels, buttons, and status text are `text-transform: uppercase` with tracked letter-spacing. Body text is the exception.
+- **Uppercase everything.** All headings, labels and buttons are `text-transform: uppercase` with tracked letter-spacing. Body text and status messages, which are sentences, are the exception.
 - **Dark on light.** `#0a0a0a` text on `#f0f0f0` background. Cards are white `#fff`. Code blocks invert to dark `#0a0a0a` backgrounds.
 - **No border radius.** Ever. `border-radius: 0` is the rule, not the exception.
 - **Content-width containers.** Max-width `640px` for main content, `420px` for auth/narrow forms.
@@ -53,7 +53,8 @@ Or if consuming via npm with a build tool:
 | `--p-surface` | `#fff` | Card/container backgrounds |
 | `--p-surface-inset` | `#f7f7f7` | Inset/recessed surfaces |
 | `--p-dark` | `#0a0a0a` | Dark backgrounds (navbar, code, hover fills) |
-| `--p-error` | `#ff4444` | Error states, danger zones |
+| `--p-error` | `#ff4444` | Error states, danger zones: fills, borders, the error box |
+| `--p-error-text` | `#c40000` | Red text (danger buttons, error text): 6.3:1 on white, where `#ff4444` is 3.4:1 |
 | `--p-success` | `#00ff88` | Success states |
 | `--p-warning` | `#ffcc00` | Warning states |
 | `--p-info` | `var(--p-accent-3)` | Informational states (semantic alias for cyan) |
@@ -137,6 +138,27 @@ 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>
+```
+
+`.visually-hidden` hides text visually and keeps it for screen readers.
+
 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
@@ -321,6 +343,13 @@ Size modifiers compose with any color variant:
 </div>
 ```
 
+A `<select>` is styled like the text inputs, with a drawn chevron:
+
+```html
+<label for="direction">Direction</label>
+<select id="direction"><option>Anticlockwise</option><option>Clockwise</option></select>
+```
+
 Inline form (input + button side by side):
 
 ```html
@@ -697,12 +726,12 @@ Full container, no navbar. Hero section, then card list, then footer.
 - **accent-3 (cyan):** Navbar user name, code highlights, key reveal borders, third card
 - **Never mix** accent colors in a single element (except the gradient on h1 text)
 - **The 3-color rotation** applies to any list of sibling cards: 1=pink, 2=purple, 3=cyan, 4=pink...
-- **Error is always `#ff4444`**, success is always `#00ff88`, warning is `#ffcc00`, info is `#00e5ff`. Status colors are not accent colors.
+- **Error is always `#ff4444`**, success is always `#00ff88`, warning is `#ffcc00`, info is `#00e5ff`. Status colors are not accent colors. Text on a status color is always dark `--p-text`; red text uses `--p-error-text`, never `#ff4444`.
 
 ## Do's and Don'ts
 
 ### Do
-- Use uppercase for headings, labels, buttons, badges, and status messages
+- Use uppercase for headings, labels, buttons and badges; status messages are sentences in sentence case
 - Use the 3-color card rotation for any list of cards
 - Keep `border-radius: 0` everywhere
 - Use `2px solid` borders on cards, buttons, inputs

package/catalog.html

@@ -424,7 +424,7 @@
 <div class="container">
   <p class="eyebrow" style="color: var(--p-accent-1); margin-bottom: 8px;">Components</p>
   <h2 id="forms">Forms</h2>
-  <p class="subtitle" style="margin-bottom: 24px;">Labels, text inputs, number input, textarea.</p>
+  <p class="subtitle" style="margin-bottom: 24px;">Labels, text inputs, select, number input, textarea.</p>
 
   <div data-source class="card-static" style="margin-bottom: 16px;">
     <div class="stack-md">
@@ -444,6 +444,10 @@
         <label for="cat-search">Search</label>
         <input type="search" id="cat-search" placeholder="Search...">
       </div>
+      <div>
+        <label for="cat-direction">Direction</label>
+        <select id="cat-direction"><option>Anticlockwise</option><option>Clockwise</option></select>
+      </div>
       <div>
         <label for="cat-num">Quantity</label>
         <input type="number" id="cat-num" value="5" min="0" max="99">
@@ -789,6 +793,24 @@
     </nav>
   </div>
 
+  <h3 style="margin-bottom: 12px;">With a navbar menu (open it)</h3>
+  <div data-source style="margin-bottom: 24px; padding-bottom: 180px;">
+    <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>
+            <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,8 +1,12 @@
 {
   "name": "palace-ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Retro-technical design system. Hard edges, vibrant gradients, chunky shadows.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jostsg/palace-ui.git"
+  },
   "type": "module",
   "main": "palace.css",
   "style": "palace.css",

package/palace.css

@@ -1,4 +1,4 @@
-/*! palace-ui v0.10.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)
@@ -41,6 +41,7 @@
 
   /* ── Status ── */
   --p-error: #ff4444;
+  --p-error-text: #c40000; /* red for text: 6.3:1 on white, where #ff4444 is 3.4:1 */
   --p-success: #00ff88;
   --p-warning: #ffcc00;
   --p-info: var(--p-accent-3);
@@ -110,6 +111,19 @@
   padding: 0;
 }
 
+/* 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. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 body {
   font-family: var(--p-font);
   color: var(--p-text);
@@ -367,12 +381,12 @@ button, .btn {
 
 .btn-danger {
   background: transparent;
-  color: var(--p-error);
+  color: var(--p-error-text);
   border-color: var(--p-error);
 }
 .btn-danger:hover {
   background: var(--p-error);
-  color: #fff;
+  color: var(--p-text);
   transform: var(--p-lift-sm);
   box-shadow: var(--p-shadow-sm) var(--p-dark);
 }
@@ -534,6 +548,32 @@ input[type="tel"]:focus {
   transform: var(--p-lift-sm);
 }
 
+select {
+  width: 100%;
+  appearance: none;
+  padding: 12px 2.5rem 12px 12px;
+  border: var(--p-border-width) solid var(--p-text);
+  border-radius: var(--p-radius);
+  background-color: var(--p-surface);
+  /* A chevron drawn with two gradients: no image, no font. */
+  background-image: linear-gradient(45deg, transparent 50%, var(--p-text) 50%), linear-gradient(135deg, var(--p-text) 50%, transparent 50%);
+  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
+  background-size: 0.35rem 0.35rem;
+  background-repeat: no-repeat;
+  font-family: var(--p-font);
+  font-size: 1rem;
+  color: var(--p-text);
+  outline: none;
+  transition: var(--p-transition);
+}
+select[multiple], select[size]:not([size="1"]) { padding-right: 12px; background-image: none; }
+
+select:focus {
+  border-color: var(--p-accent-2);
+  box-shadow: var(--p-shadow-md) var(--p-accent-2);
+  transform: var(--p-lift-sm);
+}
+
 input::placeholder {
   color: var(--p-border-dashed);
 }
@@ -583,12 +623,11 @@ textarea:focus {
    STATUS MESSAGES
    ══════════════════════════════════════════ */
 
+/* A status message is a sentence, so it reads in sentence case, like body text. */
 .status {
   padding: 12px;
   font-size: 13px;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
   border: var(--p-border-width) solid var(--p-text);
 }
 
@@ -600,7 +639,7 @@ textarea:focus {
 
 .status-error {
   background: var(--p-error);
-  color: #fff;
+  color: var(--p-text); /* 5.8:1 on #ff4444; white would be 3.4:1 */
   border-color: var(--p-text);
 }
 
@@ -691,6 +730,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);
@@ -702,6 +746,108 @@ 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 {
+  margin: var(--p-space-xs) 0 0;
+  padding-top: var(--p-space-xs);
+  border-top: var(--p-border-thin) solid var(--p-border);
+}
+
 /* ══════════════════════════════════════════
    TABLES
    ══════════════════════════════════════════ */
@@ -878,7 +1024,7 @@ pre {
    DANGER ZONE
    ══════════════════════════════════════════ */
 
-.danger-zone h2 { color: var(--p-error); }
+.danger-zone h2 { color: var(--p-error-text); }
 .danger-zone p {
   color: var(--p-text-muted);
   font-size: 13px;