@estiva-app/ui 0.37.1 → 0.38.0

package/dist/looks.d.ts

@@ -11,7 +11,7 @@
  * much room it takes stay in the part.
  */
 /** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export declare const FIELD_BOX_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg";
+export declare const FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg";
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export declare const FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
 /** A field that cannot be used: TextInput, Textarea and Select. */
@@ -24,7 +24,7 @@ export declare const FIELD_SIZE_CLASSES: {
     readonly small: "h-6 min-h-6 px-2 text-caption";
 };
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export declare const FIELD_SHELL_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors";
+export declare const FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors";
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export declare const FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 /** A chip's words: Chip's label and Reaction's count. */

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,6GAA6G,CAAA;AAE3I,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,qGAAqG,CAAA;AAErI,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,wHAAwH,CAAA;AAEtJ,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,gHAAgH,CAAA;AAEhJ,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -53,6 +53,7 @@
     "test:watch": "vitest --project unit",
     "test:a11y": "vitest run --project storybook-signal --project storybook-ship",
     "test:stories": "vitest run --project storybook-draw",
+    "test:docs": "node scripts/docs-pages-draw.mjs",
     "typecheck": "tsc --noEmit",
     "prelint": "node build.mjs",
     "lint": "eslint .",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.37.1",
+    "packageVersion": "0.38.0",
     "exports": 88,
     "typeExports": 97,
     "files": null
@@ -952,7 +952,7 @@
       "app": null,
       "looks": [
         "bg-bg-elevated border border-border-subtle rounded-md",
-        "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "text-body-2 border-none bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
@@ -1889,7 +1889,7 @@
       "docPage": null,
       "app": null,
       "looks": [
-        "text-menu signal:font-mono signal:text-small signal:tracking-wider"
+        "text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider"
       ]
     },
     {
@@ -2607,9 +2607,23 @@
           "takes": "text",
           "required": false,
           "note": null
+        },
+        {
+          "name": "tone",
+          "takes": "default | tooltip",
+          "required": false,
+          "note": "`tooltip` draws the key in the tooltip's own key colours, for a theme whose tooltip is darker than its page (Katerina, 27 September)."
+        }
+      ],
+      "variants": [
+        {
+          "prop": "tone",
+          "values": [
+            "default",
+            "tooltip"
+          ]
         }
       ],
-      "variants": [],
       "ownsBehaviours": [],
       "status": "stable",
       "migrationStage": null,
@@ -2618,10 +2632,12 @@
       "docPage": "src/Kbd.mdx",
       "app": null,
       "looks": [
-        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small",
+        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small leaf:font-mono leaf:text-small",
+        "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small leaf:font-mono leaf:text-small border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key",
         "whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset font-sans text-caption text-text-secondary",
         "signal:border-b-2 signal:bg-bg-wash signal:font-mono signal:text-small",
-        "ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small"
+        "ship:border-b-2 ship:bg-bg-wash ship:font-mono ship:text-small",
+        "border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key"
       ]
     },
     {
@@ -2696,7 +2712,7 @@
       "docPage": "src/Lightbox.mdx",
       "app": null,
       "looks": [
-        "rounded-full bg-bg-elevated border border-border-strong text-text-secondary hover:text-text-primary"
+        "rounded-full bg-bg-tooltip border border-border-tooltip-key text-text-tooltip-key hover:text-text-tooltip"
       ]
     },
     {
@@ -4184,7 +4200,7 @@
       "docPage": "src/SearchInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors focus-within:border-border-strong",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-strong",
         "text-input-value bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
     },
@@ -4339,13 +4355,14 @@
       "docPage": "src/SectionLabel.mdx",
       "app": null,
       "looks": [
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest"
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        "leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest"
       ]
     },
     {
@@ -4468,15 +4485,15 @@
       "docPage": "src/Select.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-inset text-left border-border-default outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-inset text-left"
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left"
       ]
     },
     {
@@ -4723,7 +4740,7 @@
       "docPage": "src/Textarea.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted resize-none outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted resize-none outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4764,8 +4781,8 @@
       "docPage": "src/TextInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring",
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4847,11 +4864,11 @@
       "docPage": "src/Toast.mdx",
       "app": null,
       "looks": [
-        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
-        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
+        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
       ]
     },
     {
@@ -4896,11 +4913,11 @@
       "docPage": null,
       "app": null,
       "looks": [
-        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
-        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
+        "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+        "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
       ]
     },
     {
@@ -5316,7 +5333,7 @@
       "docPage": "src/Tooltip.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border border-border-default bg-bg-elevated shadow-lg"
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg border-border-tooltip bg-bg-tooltip"
       ]
     },
     {

package/src/AppShell.stories.tsx

@@ -66,9 +66,7 @@ const rail = (
 export const Solid: Story = {
   render: (args) => (
     <AppShell {...args} logo="Estiva" search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} identity={identity} nav={sidebar}>
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -92,9 +90,7 @@ export const SolidScrolls: Story = {
 export const SolidWithBanner: Story = {
   render: (args) => (
     <AppShell {...args} logo="Estiva" identity={identity} nav={sidebar} banner={<Banner tone="ok">Public key copied.</Banner>}>
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -111,9 +107,7 @@ export const Floating: Story = {
       identity={identity}
       nav={rail}
     >
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }
@@ -130,9 +124,7 @@ export const FloatingWithBanner: Story = {
       nav={rail}
       banner={<Banner tone="info">A new version is available. Reload when convenient.</Banner>}
     >
-      <div className="flex h-full items-center justify-center">
-        <EmptyState message="Nothing here yet." />
-      </div>
+      <EmptyState message="Nothing here yet." />
     </AppShell>
   ),
 }

package/src/AttachmentCard.tsx

@@ -390,7 +390,6 @@ export function AttachmentCard({
         {/* On Base UI's Button, as InputChip's ✕ is (Katerina, 2026-09-14): IconButton is a 24px square
             that fills on hover, and this is Peek's 20px round badge on the card's corner. */}
         {onRemove && (
-          // @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
           <BaseButton
             type="button"
             aria-label={`Remove ${name}`}

package/src/CommandPalette.tsx

@@ -175,7 +175,7 @@ type Key = [key: string, word: string]
 function Footer({ keys }: { keys: Key[] }) {
   const { where } = usePalette('The footer')
   return (
-    <div className="flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted">
+    <div className="flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted leaf:font-mono leaf:text-small">
       <span className="min-w-0 flex-1 truncate">{where}</span>
       {keys.map(([key, word]) => (
         <span key={key} className="flex shrink-0 items-center gap-1.5">

package/src/ErrorBoundary.mdx

@@ -16,7 +16,7 @@ page keeps working.
 - Around each part of the page that can break on its own: a column, a panel,
   a conversation — and once around the whole app.
 - `label` says what it holds, in the message and the console line: "Something
-  went wrong in the {label}."
+  went wrong in the \{label\}."
 - `fallbackClassName` is the room the message fills where no flex column
   holds it: the whole screen, for the app's own.
 - `frame` draws the message inside a frame of yours, in the same place.
@@ -48,7 +48,7 @@ import { ErrorBoundary } from '@estiva-app/ui'
   is given and centres itself in it.
 - Try again draws the part again. If what broke is still broken, the message
   comes back.
-- A crash is written to the console: "{label} crashed:", the error, and where
+- A crash is written to the console: "\{label\} crashed:", the error, and where
   it happened.
 
 ## What it owns

package/src/Kbd.tsx

@@ -24,15 +24,24 @@ import { cn } from './cn'
 export interface KbdProps {
   children: ReactNode
   className?: string
+  /**
+   * `tooltip` draws the key in the tooltip's own key colours, for a theme whose
+   * tooltip is darker than its page (Katerina, 27 September). `Tooltip` passes it
+   * for its shortcut; nothing else needs to.
+   */
+  tone?: 'default' | 'tooltip'
 }
 
-export function Kbd({ children, className }: KbdProps) {
+export function Kbd({ children, className, tone = 'default' }: KbdProps) {
   return (
     <kbd
       className={cn(
         'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-caption text-text-secondary',
         'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-small',
         'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small',
+        // Leaf sets its keys in mono, as Signal does (Katerina, 28 September): the type, not the key's shape.
+        'leaf:font-mono leaf:text-small',
+        tone === 'tooltip' && 'border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key',
         className,
       )}
     >

package/src/Lightbox.tsx

@@ -74,10 +74,12 @@ export function Lightbox({ src, alt, onClose, className }: LightboxProps) {
             onClick={(e) => e.stopPropagation()}
             className={cn('max-w-full max-h-full object-contain rounded-lg', className)}
           />
-          {/* @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button AttachmentCard's remove also draws; a part if a third appears */}
+          {/* On the dark scrim in every theme, so it wears the tooltip's dark colours (Katerina,
+              28 September: Leaf's white circle stood out); in the other themes they are the
+              elevated ground, the strong line and the secondary text it always had. */}
           <Dialog.Close
             aria-label="Close"
-            className="absolute top-4 right-4 size-8 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary"
+            className="absolute top-4 right-4 size-8 rounded-full bg-bg-tooltip border border-border-tooltip-key flex items-center justify-center text-text-tooltip-key hover:text-text-tooltip"
           >
             <IconX size={16} stroke={1.5} />
           </Dialog.Close>

package/src/Menu.tsx

@@ -552,7 +552,7 @@ export function EnterHint({ target }: { target?: string }) {
     <span className="flex shrink-0 items-center gap-1.5 text-text-muted">
       <Kbd>↩ Enter</Kbd>
       {target && (
-        <span className="text-menu signal:font-mono signal:text-small signal:tracking-wider">{target}</span>
+        <span className="text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider">{target}</span>
       )}
     </span>
   )

package/src/MenuItem.stories.tsx

@@ -48,15 +48,10 @@ export const WithAShortcut: Story = {
   args: { label: 'Copy link', leading: <IconCopy size={16} stroke={1.5} className="text-text-secondary" />, shortcut: 'Ctrl+C' },
 }
 
-/** The row opens another menu. */
-export const Submenu: Story = {
-  args: { label: 'Move to…', submenu: true },
-}
-
 /**
- * The submenu, working. The story above draws the row at rest — the chevron is
- * the whole affordance — but a row that opens another menu can only be tried
- * inside a real one, so here is one.
+ * A row that opens another menu, working: such a row can only be tried inside
+ * a real menu, so this is one (Katerina, 28 September: one story, the working
+ * one; the chevron is the row's whole affordance).
  *
  * Hover **Move to…**, or arrow onto it and press →. The panel opens beside the
  * row, flips to the other side at a screen edge, and stays open while you
@@ -66,7 +61,7 @@ export const Submenu: Story = {
  * into it, and ← closes it and puts the highlight back on the row. Measured in
  * that order — → then ← alone does nothing, because focus has not entered yet.
  */
-export const SubmenuLive: Story = {
+export const Submenu: Story = {
   parameters: { controls: { disable: true } },
   decorators: [(Story) => <Story />],
   render: () => (

package/src/Panel.stories.tsx

@@ -61,7 +61,7 @@ export const WithAFooter: Story = {
       footer={
         // A stand-in for whatever the footer holds: the part only keeps it in place.
         <div className="border-t border-border-subtle p-3">
-          <div className="flex h-10 items-center justify-center rounded-md bg-bg-elevated text-caption text-text-muted">Footer</div>
+          <div className="flex h-10 items-center justify-center rounded-md bg-bg-elevated text-caption text-text-secondary">Footer</div>
         </div>
       }
     >

package/src/Popover.stories.tsx

@@ -190,6 +190,9 @@ export const FromASelection: Story = {
           side="top"
           ariaLabel="Formatting"
           className="w-auto min-w-0 p-1"
+          /* No padding of the popup's own: the panel's 4px is the Toolbar's, and
+             the default 8px on top of it drew the panel 16px taller (Katerina, 28 September). */
+          contentClassName="p-0"
         >
           <Toolbar aria-label="Formatting" surface={false}>
             <ToolbarButton aria-label="Bold" tooltip="Bold">

package/src/SectionLabel.tsx

@@ -39,6 +39,8 @@ export function SectionLabel({
     <span
       className={cn(
         'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
+        // Leaf's section labels are Signal's type (Katerina, 28 September).
+        'leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest',
         tone === 'secondary' ? 'text-text-secondary' : tone === 'muted' ? 'text-text-muted' : 'text-text-primary',
         truncate && 'min-w-0 truncate',
         className,

package/src/Select.tsx

@@ -88,8 +88,8 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
            * `truncate` from ever engaging; in a block container max-w-full is
            * the cap. Full-width callers are unaffected.
            */
-          'flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left',
-          'border-border-default outline-none transition-colors',
+          'flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-field shadow-field text-left',
+          'border-border-field outline-none transition-colors',
           FIELD_TEXT_CLASSES,
           // The focused border survives a hover: hover alone strengthens the
           // hairline, but hover while focused must not grey the focus colour —

package/src/TextInput.test.tsx

@@ -40,6 +40,6 @@ describe('TextInput', () => {
     render(<TextInput aria-label="Title" />)
     const classes = screen.getByRole('textbox').className.split(' ')
     // Both survive cn(); Tailwind emits focus after hover, so the order in CSS decides, not here.
-    for (const c of ['border-border-default', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
+    for (const c of ['border-border-field', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
   })
 })

package/src/Toast.tsx

@@ -44,13 +44,14 @@ export interface ToastProps {
 }
 
 // Signal: every toast is the same dark overlay pill (v3) — the type lives in
-// the icon color + glow, not the surface.
+// the icon color + glow, not the surface. Leaf draws them the same way, on its
+// own greys (Katerina, 28 September).
 const SURFACE_STYLES: Record<ToastType, string> = {
-  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md',
-  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
-  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md',
+  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
+  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md',
 }
 
 /**

package/src/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { IconArchive, IconPin, IconTrash } from '@tabler/icons-react'
 import { Button } from './Button'
 import { IconButton } from './IconButton'
 import { Tooltip, WithTooltip } from './Tooltip'
-import { Card } from './Card'
+import { Toolbar, ToolbarButton } from './Toolbar'
 
 const meta = {
   title: 'Primitives/Tooltip',
@@ -100,16 +100,16 @@ export const OnADisabledControl: Story = {
 export const InAToolbar: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <Card fill="elevated" className="flex items-center gap-1 p-1">
-      <IconButton aria-label="Pin" tooltip="Pin">
+    <Toolbar aria-label="Actions">
+      <ToolbarButton aria-label="Pin" tooltip="Pin">
         <IconPin size={16} stroke={1.5} />
-      </IconButton>
-      <IconButton aria-label="Archive" tooltip="Archive">
+      </ToolbarButton>
+      <ToolbarButton aria-label="Archive" tooltip="Archive">
         <IconArchive size={16} stroke={1.5} />
-      </IconButton>
-      <IconButton aria-label="Delete" tooltip="Delete" tooltipShortcut="Del">
+      </ToolbarButton>
+      <ToolbarButton aria-label="Delete" tooltip="Delete" tooltipShortcut="Del">
         <IconTrash size={16} stroke={1.5} />
-      </IconButton>
-    </Card>
+      </ToolbarButton>
+    </Toolbar>
   ),
 }

package/src/Tooltip.test.tsx

@@ -39,7 +39,7 @@ describe('Tooltip, the surface', () => {
     render(<Tooltip label="Bold" className="w-40" />)
     const tip = screen.getByRole('tooltip')
     expect(tip.className).toContain('w-40')
-    expect(tip.className).toContain('bg-bg-elevated')
+    expect(tip.className).toContain('bg-bg-tooltip')
   })
 })
 

package/src/Tooltip.tsx

@@ -73,9 +73,9 @@ export interface TooltipProps extends Omit<ComponentPropsWithRef<'div'>, 'childr
  */
 export function Tooltip({ label, shortcut, className, ...props }: TooltipProps) {
   return (
-    <div role="tooltip" className={cn(FLOATING_SURFACE_CLASSES, 'min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1', className)} {...props}>
-      <span className="min-w-0 text-caption text-text-primary break-words">{label}</span>
-      {shortcut && <Kbd>{shortcut}</Kbd>}
+    <div role="tooltip" className={cn(FLOATING_SURFACE_CLASSES, 'border-border-tooltip bg-bg-tooltip', 'min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1', className)} {...props}>
+      <span className="min-w-0 text-caption text-text-tooltip break-words">{label}</span>
+      {shortcut && <Kbd tone="tooltip">{shortcut}</Kbd>}
     </div>
   )
 }

package/src/cn.ts

@@ -29,7 +29,7 @@ const FONT_SIZE_TOKENS = [
  * `shadow-glow-warning` beside `shadow-md` kept both (measured 2026-09-06).
  * `cn.test.ts` pins these to the preset too.
  */
-const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
+const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'field', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
 const DROP_SHADOW_TOKENS = ['glow-success', 'glow-accent', 'glow-warning']
 
 const twMerge = extendTailwindMerge({

package/src/eslint/index.ts

@@ -28,6 +28,7 @@ import { noRawElement } from './no-raw-element'
 import { noRebuiltBehaviour } from './no-rebuilt-behaviour'
 import { noRestyledPart } from './no-restyled-part'
 import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
+import { APP_RULE_IDS, PLUGIN_KEY, type AppRuleName } from './rule-ids'
 
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
 export { OWNED_BEHAVIOURS, type OwnedBehaviour } from './no-rebuilt-behaviour'
@@ -37,14 +38,15 @@ export { MIN_COVER, MIN_SHARED } from './looks-of'
 
 const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
 
-/** The name the configs register the plugin under, so every rule id is `estiva/<rule>`. */
-export const PLUGIN_KEY = 'estiva'
+export { APP_RULE_IDS, PLUGIN_KEY }
 
 /**
  * The rules an **app** runs: they say an app must not build what the package
  * already has — a raw control (UIG-7), or a behaviour one of its parts owns
  * (UIG-8) — nor restyle a part it uses (UIG-9). `recommended` and `strict`
- * carry these and only these.
+ * carry these and only these. Their names live in `rule-ids.ts`, which
+ * `create-estiva-app` reads without loading a rule; `satisfies` fails the
+ * typecheck when a rule is missing from either.
  */
 const appRules = {
   'no-raw-element': noRawElement,
@@ -54,7 +56,7 @@ const appRules = {
   'no-handmade-empty-state': noHandmadeEmptyState,
   'no-native-title': noNativeTitle,
   'no-copied-look': noCopiedLook,
-}
+} satisfies Record<AppRuleName, unknown>
 
 /**
  * The rules the **package itself** runs, pointed inward (UIG-5): don't bury a
@@ -94,8 +96,6 @@ const plugin = {
   configs: {} as { recommended: Linter.Config; strict: Linter.Config; package: Linter.Config },
 } satisfies ESLint.Plugin
 
-/** The ids `recommended` and `strict` carry — what an app's gate runs and counts. */
-export const APP_RULE_IDS = Object.keys(appRules).map((name) => `${PLUGIN_KEY}/${name}`)
 /** The ids `package` carries — what this package's own gate runs and counts (UIG-5). */
 export const PACKAGE_RULE_IDS = Object.keys(packageRules).map((name) => `${PLUGIN_KEY}/${name}`)
 

package/src/eslint/no-restyled-part.ts

@@ -118,6 +118,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   FieldLine: ['tone'],
   IconButton: ['variant', 'pressed', 'glow'],
   InputChip: ['truncate'],
+  Kbd: ['tone'],
   Link: ['variant', 'truncate'],
   MenuItem: ['size', 'selected', 'destructive'],
   MenuSub: ['selected'],