palace-ui 0.12.1 → 0.13.0

package/SPEC.md

@@ -369,6 +369,16 @@ Inline form (input + button side by side):
 </div>
 ```
 
+A field with a button inside, at its right end (show/hide a password, paste, copy). The input reserves the button's width plus its 8px inset from the edge (`--input-action-width` is the button's width, default `4.75rem`); the button is centred in the input's box and lifts with the input on focus, so they stay aligned. Use `.btn-sm`, a real `<button type="button">`, and for a toggle let the visible text and the accessible name change together ("Show" / `aria-label="Show password"` and "Hide" / "Hide password"). Pick one way to say the state: a changing name, or a fixed name with `aria-pressed` — never both.
+
+```html
+<label for="pw">Password</label>
+<div class="input-action">
+  <input type="password" id="pw" autocomplete="off">
+  <button type="button" class="btn btn-sm btn-outline" aria-label="Show password">Show</button>
+</div>
+```
+
 ### Status Messages
 
 ```html
@@ -390,6 +400,8 @@ Inline form (input + button side by side):
 
 Use `role="alert"` for error and warning messages (assertive — interrupts the user). Use `role="status"` for success and info messages (polite — announced at the next opportunity). Omit the role for neutral/static messages that don't need to be announced.
 
+Status boxes carry palace's hard shadow (`--p-shadow-lg` in `--p-text`); leave room for it (4px right and below) inside containers that clip.
+
 Show/hide with JavaScript:
 ```js
 function showStatus(el, msg, type) {

package/catalog.html

@@ -495,6 +495,15 @@
     <input type="text" placeholder="Add a label" aria-label="Add a label" style="flex: 1;">
     <button class="btn btn-primary">Create</button>
   </div>
+
+  <h3 style="margin: 24px 0 12px;">Field with a Button Inside</h3>
+  <div data-source>
+    <label for="pw-demo">Password</label>
+    <div class="input-action">
+      <input type="password" id="pw-demo" autocomplete="off">
+      <button type="button" class="btn btn-sm btn-outline" aria-label="Show password">Show</button>
+    </div>
+  </div>
 </div>
 
 <!-- ════════════════════════════════════════ TABLES ════════════════════════════════════════ -->

package/package.json

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

package/palace.css

@@ -325,6 +325,10 @@ 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
@@ -632,6 +636,29 @@ textarea:focus {
   transform: var(--p-lift-sm);
 }
 
+/* A field with a button inside, at its right end (show/hide a password, paste,
+   copy). The input reserves the button's width plus its 8px inset; the button is centred in the
+   input's box and lifts with it, so the two stay aligned on focus. Set
+   --input-action-width to the button's width when it is wider. */
+.input-action {
+  position: relative;
+  --input-action-width: 4.75rem;
+}
+.input-action > input[type] { padding-inline-end: calc(var(--input-action-width) + 8px); }
+.input-action > .btn,
+.input-action > button {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 8px;
+  height: fit-content;
+  white-space: nowrap;
+  margin-block: auto;
+}
+.input-action > input:focus ~ .btn,
+.input-action > input:focus ~ button {
+  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,
@@ -652,6 +679,7 @@ summary:focus-visible {
   font-size: 13px;
   font-weight: 600;
   border: var(--p-border-width) solid var(--p-text);
+  box-shadow: var(--p-shadow-lg) var(--p-text);
 }
 
 .status-success {