@north-light/crouter 0.3.197 → 0.3.198

package/dist/pages/elements/pages.js

@@ -20,8 +20,16 @@
  *
  * A single-step page renders no pager chrome at all — no progress, no forward/back — just
  * the submit affordance, because there is nothing to flip.
+ *
+ * Both elements paint entirely through `--crtr-page-*` component tokens — the same element
+ * scope `bundle.css` gives `crtr-pages` and `crtr-page`, because a person looking at the page
+ * sees one thing. The pager's buttons are the bundle's ordinary buttons, so their focus ring
+ * and their motion chain through the shared `--crtr-control-*` family before falling back to
+ * the kit default.
  */
+import { focusRingStyle } from '../controls.js';
 import { registerElement } from '../register.js';
+import { reportSlotResponses } from '../responses.js';
 function hostBridge() {
     return window.crtr;
 }
@@ -37,11 +45,15 @@ const PAGE_STYLE = `
 
   [part="page"] {
     display: grid;
-    gap: var(--crtr-space-3);
+    gap: var(--crtr-page-step-gap, var(--crtr-space-3));
   }
 
-  [part="page"]:focus {
-    outline: none;
+  /* A step takes focus programmatically when the pager flips to it, so it wears no ring by
+     default — a host that wants one sets the outline rather than patching around it. The
+     pager focuses the element itself, not the inner div, so the rule has to sit on the host:
+     on [part="page"] it would never match and every step change would paint a UA ring. */
+  :host(:focus) {
+    outline: var(--crtr-page-step-focus-outline, none);
   }
 `;
 const PAGES_STYLE = `
@@ -51,7 +63,7 @@ const PAGES_STYLE = `
 
   [part="container"] {
     display: grid;
-    gap: var(--crtr-space-4);
+    gap: var(--crtr-page-container-gap, var(--crtr-space-4));
   }
 
   [part="chrome"] {
@@ -59,9 +71,11 @@ const PAGES_STYLE = `
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: var(--crtr-space-3);
-    padding-top: var(--crtr-space-3);
-    border-top: 1px solid var(--crtr-color-border);
+    gap: var(--crtr-page-chrome-gap, var(--crtr-space-3));
+    padding-top: var(--crtr-page-chrome-padding-top, var(--crtr-space-3));
+    border-top: var(--crtr-page-chrome-border-width, 1px)
+      var(--crtr-page-chrome-border-style, solid)
+      var(--crtr-page-chrome-border-color, var(--crtr-color-border));
   }
 
   [part="container"][data-steps="1"] [part="chrome"] {
@@ -71,79 +85,83 @@ const PAGES_STYLE = `
   [part="progress"] {
     display: flex;
     align-items: center;
-    gap: var(--crtr-space-2);
-    color: var(--crtr-color-text-muted);
+    gap: var(--crtr-page-progress-gap, var(--crtr-space-2));
+    color: var(--crtr-page-progress-text-color, var(--crtr-color-text-muted));
   }
 
   [part="progress-track"] {
     display: flex;
     align-items: center;
-    gap: var(--crtr-space-1);
+    gap: var(--crtr-page-progress-track-gap, var(--crtr-space-1));
   }
 
   [part="progress-step"] {
-    width: var(--crtr-space-2);
-    height: var(--crtr-space-1);
-    border-radius: var(--crtr-radius-small);
-    background: var(--crtr-color-border);
+    width: var(--crtr-page-progress-step-width, var(--crtr-space-2));
+    height: var(--crtr-page-progress-step-height, var(--crtr-space-1));
+    border-radius: var(--crtr-page-progress-step-radius, var(--crtr-radius-small));
+    background: var(--crtr-page-progress-step-fill, var(--crtr-color-border));
   }
 
   [part="progress-step"][data-state="complete"] {
-    background: var(--crtr-color-text-muted);
+    background: var(--crtr-page-progress-step-complete-fill, var(--crtr-color-text-muted));
   }
 
   [part="progress-step"][data-state="current"] {
-    width: var(--crtr-space-4);
-    background: var(--crtr-color-accent);
+    width: var(--crtr-page-progress-step-current-width, var(--crtr-space-4));
+    background: var(--crtr-page-progress-step-current-fill, var(--crtr-color-accent));
   }
 
   [part="actions"] {
     display: flex;
     align-items: center;
-    gap: var(--crtr-space-2);
+    gap: var(--crtr-page-actions-gap, var(--crtr-space-2));
   }
 
   button {
-    font: inherit;
-    color: var(--crtr-color-text);
-    background: var(--crtr-color-surface);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-small);
-    padding: var(--crtr-space-2) var(--crtr-space-3);
+    font: var(--crtr-page-button-font, inherit);
+    color: var(--crtr-page-button-text-color, var(--crtr-color-text));
+    background: var(--crtr-page-button-fill, var(--crtr-color-surface));
+    border: var(--crtr-page-button-border-width, 1px)
+      var(--crtr-page-button-border-style, solid)
+      var(--crtr-page-button-border-color, var(--crtr-color-border));
+    border-radius: var(--crtr-page-button-radius, var(--crtr-radius-small));
+    padding: var(--crtr-page-button-padding, var(--crtr-space-2) var(--crtr-space-3));
     cursor: pointer;
+    transition: color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
+      background-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
+      border-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease));
   }
 
   button:hover:not(:disabled) {
-    background: var(--crtr-color-surface-hover);
-  }
-
-  button:focus-visible {
-    outline: 2px solid var(--crtr-color-focus);
-    outline-offset: 2px;
+    background: var(--crtr-page-button-hover-fill, var(--crtr-color-surface-hover));
   }
 
+${focusRingStyle({ scope: 'page-button' }, 'button')}
   button:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--crtr-page-button-disabled-opacity, var(--crtr-control-disabled-opacity, 0.5));
   }
 
   [part="submit"] {
-    color: var(--crtr-color-accent-contrast);
-    background: var(--crtr-color-accent);
-    border-color: transparent;
+    color: var(--crtr-page-submit-text-color, var(--crtr-color-accent-contrast));
+    background: var(--crtr-page-submit-fill, var(--crtr-color-accent));
+    border-color: var(--crtr-page-submit-border-color, var(--crtr-color-accent));
   }
 
+  /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
+     dark one — a brightness filter moves the wrong way on one of them. */
   [part="submit"]:hover:not(:disabled) {
-    background: var(--crtr-color-accent);
-    filter: brightness(1.08);
+    background: var(--crtr-page-submit-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
+    border-color: var(--crtr-page-submit-hover-border-color, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
   }
 
   [part="notice"] {
-    color: var(--crtr-color-text-muted);
+    color: var(--crtr-page-notice-text-color, var(--crtr-color-text-muted));
+    font-size: var(--crtr-page-notice-font-size, 0.875em);
   }
 
   [part="notice"][data-state="error"] {
-    color: var(--crtr-color-danger);
+    color: var(--crtr-page-notice-error-text-color, var(--crtr-color-danger));
   }
 
   [hidden] {
@@ -266,6 +284,10 @@ class CrtrPagesElement extends HTMLElement {
         this.#error = null;
         this.#render();
         try {
+            // The host has only heard from the slots the person changed. A submit sends the whole
+            // page, so every response-bearing slot reports what it is currently showing first —
+            // an untouched slot's answer is what it shows, not an omission.
+            reportSlotResponses();
             await bridge.submit();
             this.#state = 'submitted';
         }

package/dist/pages/elements/slot.d.ts

@@ -17,5 +17,10 @@
  *
  * A mounted component owns its own answer: it talks to `window.crtr` itself, and this element
  * never invents a response shape for a kind whose shape only the product knows.
+ *
+ * The unavailable notice is the only thing this element paints, and every value in it is read
+ * through a `--crtr-slot-*` component token so a host can restyle the notice without touching
+ * crtr. There is no shared family behind these: nothing else in the bundle draws a notice, so
+ * each chain is one layer over the kit default.
  */
 export {};

package/dist/pages/elements/slot.js

@@ -17,6 +17,11 @@
  *
  * A mounted component owns its own answer: it talks to `window.crtr` itself, and this element
  * never invents a response shape for a kind whose shape only the product knows.
+ *
+ * The unavailable notice is the only thing this element paints, and every value in it is read
+ * through a `--crtr-slot-*` component token so a host can restyle the notice without touching
+ * crtr. There is no shared family behind these: nothing else in the bundle draws a notice, so
+ * each chain is one layer over the kit default.
  */
 import { mountWorkspaceComponent } from '../host.js';
 import { registerElement } from '../register.js';
@@ -26,13 +31,15 @@ const STYLE = `
     display: block;
   }
 
+  /* Flat: this sits in the flow of the page. A shadow in this bundle means floating. */
   [part="unavailable"] {
-    padding: var(--crtr-space-3);
-    color: var(--crtr-color-text-muted);
-    background: var(--crtr-color-surface);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
-    box-shadow: var(--crtr-shadow);
+    padding: var(--crtr-slot-unavailable-padding, var(--crtr-space-3));
+    color: var(--crtr-slot-unavailable-text-color, var(--crtr-color-text-muted));
+    background: var(--crtr-slot-unavailable-fill, var(--crtr-color-surface));
+    border: var(--crtr-slot-unavailable-border-width, 1px)
+      var(--crtr-slot-unavailable-border-style, solid)
+      var(--crtr-slot-unavailable-border-color, var(--crtr-color-border));
+    border-radius: var(--crtr-slot-unavailable-radius, var(--crtr-radius-medium));
   }
 
   [part="unavailable"][hidden] {
@@ -40,14 +47,14 @@ const STYLE = `
   }
 
   [part="kind"] {
-    color: var(--crtr-color-text);
-    font-family: var(--crtr-font-mono);
+    color: var(--crtr-slot-kind-text-color, var(--crtr-color-text));
+    font-family: var(--crtr-slot-kind-font-family, var(--crtr-font-mono));
   }
 
   [part="reason"] {
     display: block;
-    margin-top: var(--crtr-space-1);
-    font-size: 0.9em;
+    margin-top: var(--crtr-slot-reason-gap, var(--crtr-space-1));
+    font-size: var(--crtr-slot-reason-font-size, 0.875em);
   }
 `;
 class CrtrSlotElement extends HTMLElement {

package/dist/pages/elements/table.d.ts

@@ -15,5 +15,22 @@
  * Ported from the agent interaction kit's `agent-table.tsx` (northlight `3705fe9e2`), with the
  * kit's `classic-list-keys` grammar — j/k move, x selects, c comments — reimplemented here
  * over the shadow root.
+ *
+ * ## Styling
+ *
+ * Every styling value below is read through a `--crtr-table-*` component token, so a host
+ * restyles this element without touching crtr — custom properties inherit through the shadow
+ * boundary, which is the whole mechanism. The parts a person can name each own a scope:
+ * `container`, `caption`, `header`, `column-toggle`, `row`, `cell`, `selection` (the row
+ * control and the header's select-all, deliberately one thing), `comment-trigger`,
+ * `comment-editor`, `comment-input`, `comment-button` and its `comment-cancel` /
+ * `comment-save` paint, `notice`, `reason`, `empty`. Where a shared recipe draws the value the
+ * chain is `--crtr-table-<part>-<knob>` over the family's `--crtr-control-*` and then the kit
+ * default; every default stays inline at the rule that spends it, and no token is declared
+ * anywhere, which is what keeps the kit's own look when a host sets nothing.
+ *
+ * Layout and behaviour stay literal: `display`, positioning, the shrink-to-content column
+ * widths, text alignment, and the trigger's reveal-on-hover `opacity` are anatomy rather than
+ * paint, so they are not knobs.
  */
 export {};