palace-ui 0.11.0 → 0.12.0

package/SPEC.md

@@ -138,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

package/catalog.html

@@ -793,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,6 +1,6 @@
 {
   "name": "palace-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "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,16 @@
 /* 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);
@@ -720,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);
@@ -731,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
    ══════════════════════════════════════════ */