palace-ui 0.10.0 → 0.11.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) |
@@ -321,6 +322,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 +705,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">

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "palace-ui",
-  "version": "0.10.0",
+  "version": "0.11.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.11.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,9 @@
   padding: 0;
 }
 
+/* The hidden attribute always hides, even on elements palace gives a display (buttons, .btn). */
+[hidden] { display: none !important; }
+
 body {
   font-family: var(--p-font);
   color: var(--p-text);
@@ -367,12 +371,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 +538,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 +613,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 +629,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);
 }
 
@@ -878,7 +907,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;