v3.71.0

- Updated IStep interface to include optional footerContent for step-specific actions.
- Implemented createAndShow static method for displaying stepper as an overlay with DeesWindowLayer.
- Refactored render method to wrap each step in a dees-tile, separating header, body, and footer content.
- Enhanced CSS for dual-mode operation, adjusting styles for overlay and inline modes.
- Added z-index management for overlay stepper to ensure proper stacking with window layer.
- Updated demo to include a button for launching the stepper as an overlay.

changelog.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 2026-04-11 - 3.71.0 - feat(dees-stepper)
+add footer menu actions with form-aware step validation
+
+- replace step footer submit handling with configurable menuOptions actions
+- disable the primary footer action until required form fields are completed and show a completion hint
+- dispatch form data before running primary step actions and clean up form subscriptions on destroy
+- adjust overlay host positioning so the stepper container controls viewport layering correctly
+
+## 2026-04-11 - 3.70.1 - fix(dees-modal)
+use icon font sizing for modal header buttons
+
+- replace fixed width and height on header button icons with font-size to align dees-icon rendering
+
+## 2026-04-08 - 3.70.0 - feat(dees-table)
+add opt-in flash highlighting for updated table cells
+
+- introduces highlight-updates and highlight-duration properties for diff-based cell update highlighting
+- adds a warning banner when flash highlighting is enabled without rowKey
+- keeps selection stable across data refreshes and avoids flashing user-edited cells
+- includes a live demo showcasing flashing updates and reduced-motion support
+
+## 2026-04-08 - 3.69.1 - fix(ui)
+refine heading emphasis and animate app dashboard subview expansion
+
+- Adjust heading color hierarchy so h1-h2 use primary text while h3-h6 use secondary text, and reduce h1 font weight for better visual balance
+- Replace app dashboard subview conditional rendering with animated expand/collapse behavior using grid transitions and inert state handling
+
 ## 2026-04-08 - 3.69.0 - feat(dees-heading)
 add numeric aliases for horizontal rule heading levels and refine heading spacing styles
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.69.0",
+  "version": "3.71.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

readme.plan.md

@@ -0,0 +1,352 @@
+# Plan: dees-stepper — adopt dees-tile + optional overlay window layer
+
+> First line (per CLAUDE.md): Please reread `/home/philkunz/.claude/CLAUDE.md` before continuing.
+
+## Context
+
+Today `dees-stepper` is an inline-only layout component: it hard-codes each step as a custom `.step` `<div>` with its own border / background / box-shadow / border-radius, and its `:host` is `position: absolute; width: 100%; height: 100%;` so it can only live inside a bounded parent container.
+
+The user wants it to behave more like `dees-modal`:
+
+1. Each step should be wrapped in a `<dees-tile>` — the unified "rounded on rounded" frame used by modals and panels — rather than a bespoke `.step` div.
+2. A `DeesWindowLayer` should be added behind the stepper, the same way `DeesModal.createAndShow` does, so the stepper can appear as an overlay on top of the page.
+
+User has confirmed (via AskUserQuestion in this session):
+- **API**: keep the current inline usage working AND add a static `createAndShow()` like dees-modal.
+- **Layout**: keep the current vertical stack + SweetScroll behavior inside the overlay (don't switch to single-tile swap).
+- **Nav placement**: split header/footer — goBack + step counter go into the `dees-tile` header slot; the title stays in the content area; the tile footer is used for optional next/submit buttons supplied per-step.
+
+No external consumers of `dees-stepper` were found inside this package (`grep dees-stepper|DeesStepper` only matches its own source, demo, index, changelog, readme). External consumers in dependent projects may exist — the refactor is kept backward-compatible for the inline path.
+
+## Current state (reference)
+
+**File:** `ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts` (lines 20–299)
+
+- `IStep` interface — `title`, `content: TemplateResult`, `validationFunc`, `onReturnToStepFunc`, internal flags (lines 20–27).
+- `:host { position: absolute; width: 100%; height: 100%; }` (lines 59–63).
+- `.stepperContainer` — absolute, 100% w/h, `overflow: hidden`, holds SweetScroll (lines 64–69).
+- `.step` — max-width 500, min-height 300, `border-radius: 12px`, theme background, theme border, `box-shadow: 0 8px 32px rgba(0,0,0,0.4)`, `filter: opacity(0.55) saturate(0.85)`, transform transition (lines 71–97). **These frame styles overlap with what `dees-tile` already provides.**
+- `.step.selected` — `filter: opacity(1) saturate(1)` (lines 89–93). **Scroll-through visual cue, keep.**
+- `.step.hiddenStep` — `filter: opacity(0)` (line 95). **Keep.**
+- `.step.entrance` — faster transition variant for first-render (lines 99–105). **Keep.**
+- `.step .stepCounter` — `position: absolute; top: 12px; right: 12px;` pill (lines 111–121). **Move into header slot as a flex child.**
+- `.step .goBack` — `position: absolute; top: 12px; left: 12px;` pill + icon + hover (lines 123–161). **Move into header slot as a flex child.**
+- `.step .title` — centered, 24px, 64px top padding (lines 163–171). **Keep inside the tile's content slot; remove the 64px top padding since goBack/counter no longer overlap it.**
+- `.step .content` — 32px padding (lines 173–175). **Keep.**
+- `render()` (lines 179–204) — maps `steps` to `.step` divs.
+- `setScrollStatus()` (lines 226–263) — SweetScroll container setup + step validation kick-off. **Keep mostly as-is; selectors still target `.step`/`.selected` so rename cautiously.**
+- `firstUpdated` (lines 210–218), `updated` (lines 220–222), `goBack` (lines 265–282), `goNext` (lines 284–298) — untouched in behavior, only DOM selectors may need adjusting.
+
+**Reference files (read, do not modify):**
+- `ts_web/elements/00group-overlay/dees-modal/dees-modal.ts` — canonical `createAndShow` + `destroy` + window-layer coordination + z-index registry usage.
+- `ts_web/elements/00group-layout/dees-tile/dees-tile.ts` — slot API: `slot="header"`, default slot, `slot="footer"`. Auto-hides footer when slotted nodes are empty. Uses `part="outer"`, `part="header"`, `part="content"`, `part="footer"` for external shadow-part styling.
+- `ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.ts` — `createAndShow({ blur })`, `destroy()`, dispatches `clicked` event on backdrop click, uses `zIndexRegistry`.
+- `ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts` — existing inline demo.
+
+## Target state
+
+### 1. IStep interface — add one optional field
+
+```ts
+export interface IStep {
+  title: string;
+  content: TemplateResult;
+  footerContent?: TemplateResult;   // NEW: optional, rendered in dees-tile footer slot
+  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
+  onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  validationFuncCalled?: boolean;
+  abortController?: AbortController;
+}
+```
+
+Form-based steps don't need `footerContent` — their `dees-form-submit` stays inside the form in the content slot (as today). `footerContent` is for non-form steps that need an explicit primary action, or for any step that wants buttons in the conventional tile footer location.
+
+### 2. New overlay-mode state + API on DeesStepper
+
+```ts
+@state() accessor overlay: boolean = false;
+@state() accessor stepperZIndex: number = 1000;
+private windowLayer?: DeesWindowLayer;
+
+public static async createAndShow(optionsArg: {
+  steps: IStep[];
+}): Promise<DeesStepper> {
+  const body = document.body;
+  const stepper = new DeesStepper();
+  stepper.steps = optionsArg.steps;
+  stepper.overlay = true;
+  stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
+  stepper.windowLayer.addEventListener('click', async () => {
+    await stepper.destroy();
+  });
+  body.append(stepper.windowLayer);   // (already appended inside createAndShow, but mirror dees-modal's pattern; see note)
+  body.append(stepper);
+  stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
+  zIndexRegistry.register(stepper, stepper.stepperZIndex);
+  return stepper;
+}
+
+public async destroy() {
+  const domtools = await this.domtoolsPromise;
+  const container = this.shadowRoot!.querySelector('.stepperContainer');
+  container?.classList.add('predestroy');
+  await domtools.convenience.smartdelay.delayFor(200);
+  if (this.parentElement) this.parentElement.removeChild(this);
+  if (this.windowLayer) await this.windowLayer.destroy();
+  zIndexRegistry.unregister(this);
+}
+```
+
+**Note on `body.append(windowLayer)`:** `DeesWindowLayer.createAndShow` already appends the window layer to `document.body` (line 27 of `dees-windowlayer.ts`). `dees-modal.ts:71` still calls `body.append(modal.windowLayer)` — that's either a no-op (already-attached nodes) or a re-parent to keep ordering. I will match dees-modal's exact sequence verbatim to avoid introducing subtle differences; if it's a bug in dees-modal it is out of scope for this task.
+
+**Minimum new scope for createAndShow:** just `steps` for now. No `onComplete`, no `showCloseButton`, no width options. Future-proofing via additional options is an explicit follow-up — this plan keeps scope razor-sharp (per CLAUDE.md). The caller can already wire completion via the last step's `validationFunc` calling back into their own code.
+
+### 3. Render template — wrap each step in `<dees-tile>`
+
+```ts
+public render() {
+  return html`
+    <div class="stepperContainer ${this.overlay ? 'overlay' : ''}" style="${this.overlay ? `z-index: ${this.stepperZIndex}` : ''}">
+      ${this.steps.map((stepArg, i) => {
+        const isSelected = stepArg === this.selectedStep;
+        const isHidden = this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
+        const isFirst = i === 0;
+        const stepNumber = i + 1;
+        return html`
+          <dees-tile
+            class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
+          >
+            <div slot="header" class="step-header">
+              ${!isFirst
+                ? html`<div class="goBack" @click=${this.goBack}>
+                    <span>&larr;</span> go to previous step
+                  </div>`
+                : html`<div class="goBack-spacer"></div>`}
+              <div class="stepCounter">Step ${stepNumber} of ${this.steps.length}</div>
+            </div>
+            <div class="step-body">
+              <div class="title">${stepArg.title}</div>
+              <div class="content">${stepArg.content}</div>
+            </div>
+            ${stepArg.footerContent
+              ? html`<div slot="footer" class="step-footer">${stepArg.footerContent}</div>`
+              : ''}
+          </dees-tile>
+        `;
+      })}
+    </div>
+  `;
+}
+```
+
+**Key detail:** on the first step, render a `.goBack-spacer` (empty div) in the header instead of nothing — so the `stepCounter` stays right-aligned via `justify-content: space-between`. Without a spacer, flex would left-align the counter on step 1.
+
+### 4. CSS changes
+
+**Remove from `.step`:**
+- `border-radius: 12px;`
+- `background: ${cssManager.bdTheme(...)};`
+- `border: 1px solid ${cssManager.bdTheme(...)};`
+- `color: ${cssManager.bdTheme(...)};`
+- `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);`
+- `overflow: hidden;`
+
+**Why:** `dees-tile` owns all of these now. The `.step` selector still exists (since `dees-tile` has `class="step ..."` on it), but it only controls the outer animation wrapper: `max-width`, `min-height`, `margin`, `filter`, `transform`, `transition`, `user-select`, `pointer-events`.
+
+**Keep on `.step`:**
+- `position: relative;`
+- `pointer-events: none;` + `.step.selected { pointer-events: all; }`
+- `max-width: 500px;` / `min-height: 300px;`
+- `margin: auto; margin-bottom: 20px;`
+- `filter: opacity(0.55) saturate(0.85);` + `.selected { filter: opacity(1) saturate(1); }`
+- `.hiddenStep { filter: opacity(0); }`
+- All the cubic-bezier transitions (transform/filter/box-shadow — but box-shadow is now a no-op since dees-tile provides the shadow; leave the transition spec in so we don't have to re-check browser parsing; or just drop `box-shadow` from the transition list — I'll drop it for cleanliness).
+- `.step.entrance` + `.step.entrance.hiddenStep { transform: translateY(16px); }`
+- `.step:last-child { margin-bottom: 100vh; }`
+
+**Add for dees-tile shadow enhancement:** use `::part(outer)` to apply the modal-style elevated shadow only when in overlay mode (optional polish — inline mode stays flat):
+```css
+.stepperContainer.overlay dees-tile.step::part(outer) {
+  box-shadow:
+    0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+    0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+    0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
+}
+```
+This exactly mirrors the dees-modal::part(outer) shadow stack (dees-modal.ts:157–161) so the overlay stepper reads as "same visual language as modal."
+
+**Restyle `.step-header` (NEW — the `<div slot="header">`):**
+```css
+.step-header {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  gap: 12px;
+}
+```
+
+**Restyle `.step .stepCounter` → `.step-header .stepCounter` (move from absolute to flex child):**
+- Drop `position: absolute; top: 12px; right: 12px;`
+- Keep everything else (padding, font-size, border-radius, background, border).
+
+**Restyle `.step .goBack` → `.step-header .goBack` (move from absolute to flex child):**
+- Drop `position: absolute; top: 12px; left: 12px;`
+- Keep everything else (padding, font-size, border-radius, background, border, hover/active states).
+
+**Add `.goBack-spacer`:**
+```css
+.goBack-spacer { width: 1px; }   /* placeholder so flex space-between works on step 1 */
+```
+
+**Restyle `.step .title`:**
+- Drop `padding-top: 64px;` — no longer overlaps anything since header is in its own slot.
+- Keep `text-align: center; font-family: 'Geist Sans', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: inherit;`
+- Add `padding-top: 32px;` (or similar) so there's consistent breathing room above the title inside the tile content.
+
+**Add `.step-footer` (new container for `stepArg.footerContent`):**
+```css
+.step-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+}
+```
+
+**Add overlay-mode positioning:**
+```css
+.stepperContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.stepperContainer.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+.stepperContainer.predestroy {
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+}
+```
+
+**Adjust `:host` for dual-mode:**
+```css
+:host {
+  position: absolute;      /* inline default */
+  width: 100%;
+  height: 100%;
+  font-family: ${cssGeistFontFamily};
+  color: var(--dees-color-text-primary);
+}
+:host([overlay]) {
+  position: fixed;         /* overlay mode */
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+The `overlay` @state needs to reflect to an attribute for the `:host([overlay])` selector to work. Since `@state` doesn't reflect attributes, use `@property({ type: Boolean, reflect: true })` instead — change the decorator accordingly.
+
+### 5. Imports to add in `dees-stepper.ts`
+
+```ts
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+import { zIndexRegistry } from '../../00zindex.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
+```
+
+`dees-tile` side-effect import registers the custom element. `cssGeistFontFamily` is only needed if I add it to `:host` (which I want, to match modal).
+
+### 6. SweetScroll selector stability
+
+`setScrollStatus()` selectors target `.step` and `.selected` (lines 228–229). These continue to match since I'm keeping those class names on the `<dees-tile>` elements. **No selector changes needed.**
+
+One subtlety: `offsetTop` / `offsetHeight` on `<dees-tile>` should still work — the tile's `:host` is `display: flex; flex-direction: column;` which participates in layout. I'll verify visually in the demo.
+
+### 7. Demo update
+
+**File:** `ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts`
+
+Current demo renders one inline stepper directly. I'll keep that and add an **overlay launcher button** above it:
+
+```ts
+export const stepperDemo = () => html`
+  <div style="padding: 16px;">
+    <dees-button @click=${async () => {
+      const stepper = await DeesStepper.createAndShow({
+        steps: [/* same steps as inline demo */],
+      });
+    }}>Open stepper as overlay</dees-button>
+  </div>
+  <dees-stepper .steps=${[/* ... existing inline demo steps ... */]}></dees-stepper>
+`;
+```
+
+Extract the step definitions into a `const demoSteps = [...]` above the template so both the inline and overlay paths reuse them (DRY). Import `DeesStepper` at the top of the demo file.
+
+## Files to modify
+
+1. **`ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts`** — main refactor (IStep, imports, render, styles, createAndShow, destroy, overlay state).
+2. **`ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts`** — add overlay launcher button, extract shared `demoSteps` const, import `DeesStepper`.
+
+**Files explicitly NOT modified:**
+- `dees-tile.ts` — used as-is via its slot API.
+- `dees-windowlayer.ts` — used as-is via `createAndShow` / `destroy` / `click` event.
+- `dees-modal.ts` — reference only.
+- `00zindex.ts` — reference only.
+
+## Verification
+
+1. **Build**: `pnpm run build` — must pass with no TS errors. Pure refactor, no new dependencies, no lib-check regressions expected.
+
+2. **Inline demo (backward compat)**:
+   - Start the demo server (port 8080 is already running) and navigate to the dees-stepper demo page.
+   - Confirm the stepper renders inline exactly like before: first step centered, subsequent steps dimmed below, scroll-through animation on goNext / goBack.
+   - Fill out the first form, submit → stepper scrolls to step 2. Click goBack → scrolls back.
+   - Confirm the `dees-tile` frame is visible on each step (rounded, bordered, themed) and that the title + form are inside the tile's content area.
+   - Confirm goBack button + step counter sit in the tile's header row, space-between, left/right respectively.
+
+3. **Overlay demo (new path)**:
+   - Click the "Open stepper as overlay" button.
+   - Confirm a `dees-windowlayer` with blur appears behind the stepper.
+   - Confirm the stepper fills the viewport (fixed, 100vw×100vh).
+   - Confirm z-index stacking: stepper above window layer above page content.
+   - Click the window layer (outside the tile) → stepper animates out, then destroys along with the window layer.
+   - Re-open and step through forward & back — behavior identical to inline mode.
+
+4. **Playwright visual check** (per CLAUDE.md: screenshots MUST go in `.playwright-mcp/`):
+   - `.playwright-mcp/dees-stepper-inline.png` — inline mode, step 1 with form.
+   - `.playwright-mcp/dees-stepper-overlay.png` — overlay mode, same step.
+   - `.playwright-mcp/dees-stepper-overlay-step3.png` — overlay mode mid-flow, to verify scroll-stack visual.
+   - Both light and dark themes if the demo has a theme toggle.
+
+5. **Grep sanity**:
+   - Confirm `dees-stepper` has no new unexpected match locations: `grep dees-stepper ts_web/` should still only match stepper's own files.
+   - Confirm no `.step` class collisions elsewhere (unlikely — `.step` is a plain class name; all usages should be shadow-scoped to `dees-stepper`).
+
+## Open assumptions & deferred scope
+
+These are explicit defaults in this plan. If the user wants different behavior for any of them, they should flag it on review — each is a simple follow-up but not in scope right now (CLAUDE.md: stay focused, no "while we're at it"):
+
+- **No close button on overlay stepper.** Clicking the window layer backdrop is the only way to dismiss. Matches how dees-modal with `showCloseButton: false` behaves. Can add a close button in a follow-up.
+- **No `onComplete` callback in `createAndShow`.** The last step doesn't auto-destroy the overlay — the app controls it via the step's `validationFunc`. Can add a callback option in a follow-up.
+- **No width/size options in `createAndShow`.** The step tile continues to use the stepper's existing `max-width: 500px`. Can parameterize in a follow-up.
+- **Box-shadow in the `.step` transition list** is dropped from the transition for cleanliness — the box-shadow is now on `dees-tile::part(outer)` and doesn't change between selected/hiddenStep, so transitioning it was already a no-op.
+- **`pnpm start` / dev server path**: I'll reuse the existing server on port 8080 that was already listening when this session began; if that server doesn't serve the stepper demo, I'll start wcctools manually.
+
+## Risk
+
+- **Low-medium.** The change is localized to one component and its demo. No API removal, only an additive `createAndShow` + an optional `footerContent` field. External consumers of the inline API continue to work if they only set `steps` + `selectedStep`.
+- **Biggest risk:** SweetScroll's `offsetTop` / `offsetHeight` measurements on `<dees-tile>` may compute differently than on the former `<div class="step">` because `dees-tile` has an internal `display: flex; flex-direction: column;` host and a `.tile-outer { flex: 1; min-height: 0; }` inner frame. If the scroll math drifts, the mitigation is to keep the `.step` wrapper as an outer `<div>` that **contains** a `<dees-tile>`, rather than putting the class directly on `<dees-tile>`. That preserves the exact box model SweetScroll was measuring. I'll try the direct-class approach first (simpler) and fall back to the wrapper approach if the scroll target looks off in the demo.
+- **Second risk:** The `:host([overlay])` attribute selector requires `overlay` to be a reflected `@property`, not `@state`. I've already accounted for this in the plan (decorator change).

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.69.0',
+  version: '3.71.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-dataview/dees-table/dees-table.demo.ts

@@ -1,6 +1,7 @@
 import { type ITableAction } from './dees-table.js';
 import * as plugins from '../../00plugins.js';
 import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
 
 interface ITableDemoData {
   date: string;
@@ -742,6 +743,71 @@ export const demoFunc = () => html`
           ] as ITableAction[]}
         ></dees-table>
       </div>
+
+      <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+        const tableEl = elementArg.querySelector('#demoLiveFlash') as any;
+        if (!tableEl) return;
+        // Guard against double-start if runAfterRender fires more than once
+        // (e.g. across hot-reload cycles).
+        if (tableEl.__liveFlashTimerId) {
+          window.clearInterval(tableEl.__liveFlashTimerId);
+        }
+        const tick = () => {
+          if (!Array.isArray(tableEl.data) || tableEl.data.length === 0) return;
+          const next = tableEl.data.map((r: any) => ({ ...r }));
+          const count = 1 + Math.floor(Math.random() * 3);
+          for (let i = 0; i < count; i++) {
+            const idx = Math.floor(Math.random() * next.length);
+            const delta = +((Math.random() * 2 - 1) * 3).toFixed(2);
+            const newPrice = Math.max(1, +(next[idx].price + delta).toFixed(2));
+            next[idx] = {
+              ...next[idx],
+              price: newPrice,
+              change: delta,
+              updatedAt: new Date().toLocaleTimeString(),
+            };
+          }
+          tableEl.data = next;
+        };
+        tableEl.__liveFlashTimerId = window.setInterval(tick, 1500);
+      }}>
+        <div class="demo-section">
+          <h2 class="demo-title">Live Updates with Flash Highlighting</h2>
+          <p class="demo-description">
+            Opt-in cell-flash via <code>highlight-updates="flash"</code>. The ticker below mutates
+            random rows every 1.5s and reassigns <code>.data</code>. Updated cells briefly flash
+            amber and fade out. Requires <code>rowKey</code> (here <code>"symbol"</code>). Honors
+            <code>prefers-reduced-motion</code>. Row selection persists across updates — click a
+            row, then watch it stay selected as the data churns.
+          </p>
+          <dees-table
+            id="demoLiveFlash"
+            .rowKey=${'symbol'}
+            highlight-updates="flash"
+            .selectionMode=${'multi'}
+            heading1="Live Market Feed"
+            heading2="Flashing cells indicate updated values"
+            .columns=${[
+              { key: 'symbol', header: 'Symbol', sortable: true },
+              { key: 'price', header: 'Price', sortable: true },
+              { key: 'change', header: 'Δ', sortable: true },
+              { key: 'updatedAt', header: 'Updated' },
+            ]}
+            .data=${[
+              { symbol: 'AAPL', price: 182.52, change: 0, updatedAt: '—' },
+              { symbol: 'MSFT', price: 414.18, change: 0, updatedAt: '—' },
+              { symbol: 'GOOG', price: 168.74, change: 0, updatedAt: '—' },
+              { symbol: 'AMZN', price: 186.13, change: 0, updatedAt: '—' },
+              { symbol: 'TSLA', price: 248.50, change: 0, updatedAt: '—' },
+              { symbol: 'NVDA', price: 877.35, change: 0, updatedAt: '—' },
+              { symbol: 'META', price: 492.96, change: 0, updatedAt: '—' },
+              { symbol: 'NFLX', price: 605.88, change: 0, updatedAt: '—' },
+              { symbol: 'AMD',  price: 165.24, change: 0, updatedAt: '—' },
+              { symbol: 'INTC', price:  42.15, change: 0, updatedAt: '—' },
+            ]}
+          ></dees-table>
+        </div>
+      </dees-demowrapper>
     </div>
   </div>
 `;

ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -214,6 +214,30 @@ export class DeesTable<T> extends DeesElement {
   @property({ type: Number, attribute: 'virtual-overscan' })
   accessor virtualOverscan: number = 8;
 
+  /**
+   * Opt-in visual indication of cell-value changes across data updates.
+   *
+   * - `'none'` (default): no diffing, zero overhead.
+   * - `'flash'`: when `data` is reassigned to a new array reference, diff the
+   *   new rows against the previous snapshot and briefly flash any cells
+   *   whose resolved value changed. Equality is strict `===`; object-valued
+   *   cells are compared by reference. The currently-edited cell is never
+   *   flashed. User-initiated cell edits do not flash.
+   *
+   * Requires `rowKey` to be set — without it, the feature silently no-ops
+   * and renders a visible dev warning banner. Honors `prefers-reduced-motion`
+   * (fades are replaced with a static background hint of the same duration).
+   */
+  @property({ type: String, attribute: 'highlight-updates' })
+  accessor highlightUpdates: 'none' | 'flash' = 'none';
+
+  /**
+   * Duration of the flash animation in milliseconds. Fed into the
+   * `--dees-table-flash-duration` CSS variable on the host.
+   */
+  @property({ type: Number, attribute: 'highlight-duration' })
+  accessor highlightDuration: number = 900;
+
   /**
    * When set, the table renders inside a fixed-height scroll container
    * (`max-height: var(--table-max-height, 360px)`) and the header sticks
@@ -268,6 +292,23 @@ export class DeesTable<T> extends DeesElement {
   @state()
   private accessor __floatingActive: boolean = false;
 
+  // ─── Flash-on-update state (only populated when highlightUpdates === 'flash') ──
+  /** rowId → set of colKey strings currently flashing. */
+  @state()
+  private accessor __flashingCells: Map<string, Set<string>> = new Map();
+
+  /** rowId → (colKey → last-seen resolved cell value). Populated per diff pass. */
+  private __prevSnapshot?: Map<string, Map<string, unknown>>;
+
+  /** Single shared timer that clears __flashingCells after highlightDuration ms. */
+  private __flashClearTimer?: ReturnType<typeof setTimeout>;
+
+  /** Monotonic counter bumped each flash batch so directives.keyed recreates the cell node and restarts the animation. */
+  private __flashTick: number = 0;
+
+  /** One-shot console.warn gate for missing rowKey in flash mode. */
+  private __flashWarnedNoRowKey: boolean = false;
+
   // ─── Render memoization ──────────────────────────────────────────────
   // These caches let render() short-circuit when the relevant inputs
   // (by reference) haven't changed. They are NOT @state — mutating them
@@ -557,6 +598,15 @@ export class DeesTable<T> extends DeesElement {
           </div>
         </div>
         <div class="headingSeparation"></div>
+        ${this.highlightUpdates === 'flash' && !this.rowKey
+          ? html`<div class="flashConfigWarning" role="alert">
+              <dees-icon .icon=${'lucide:triangleAlert'}></dees-icon>
+              <span>
+                <code>highlight-updates="flash"</code> requires
+                <code>rowKey</code> to be set. Flash is disabled.
+              </span>
+            </div>`
+          : html``}
         <div class="searchGrid hidden">
           <dees-input-text
             .label=${'lucene syntax search'}
@@ -606,9 +656,13 @@ export class DeesTable<T> extends DeesElement {
                   ${useVirtual && topSpacerHeight > 0
                     ? html`<tr aria-hidden="true" style="height:${topSpacerHeight}px"><td></td></tr>`
                     : html``}
-                  ${renderRows.map((itemArg, sliceIdx) => {
+                  ${directives.repeat(
+                    renderRows,
+                    (itemArg, sliceIdx) => `${this.getRowId(itemArg)}::${renderStart + sliceIdx}`,
+                    (itemArg, sliceIdx) => {
                     const rowIndex = renderStart + sliceIdx;
                     const rowId = this.getRowId(itemArg);
+                    const flashSet = this.__flashingCells.get(rowId);
                     return html`
                       <tr
                         data-row-idx=${rowIndex}
@@ -640,6 +694,7 @@ export class DeesTable<T> extends DeesElement {
                             const isEditing =
                               this.__editingCell?.rowId === rowId &&
                               this.__editingCell?.colKey === editKey;
+                            const isFlashing = !!flashSet?.has(editKey);
                             const cellClasses = [
                               isEditable ? 'editable' : '',
                               isFocused && !isEditing ? 'focused' : '',
@@ -647,14 +702,22 @@ export class DeesTable<T> extends DeesElement {
                             ]
                               .filter(Boolean)
                               .join(' ');
+                            const innerHtml = html`<div
+                              class=${isFlashing ? 'innerCellContainer flashing' : 'innerCellContainer'}
+                            >
+                              ${isEditing ? this.renderCellEditor(itemArg, col) : content}
+                            </div>`;
                             return html`
                               <td
                                 class=${cellClasses}
                                 data-col-key=${editKey}
                               >
-                                <div class="innerCellContainer">
+                                ${isFlashing
-                                  ${isEditing ? this.renderCellEditor(itemArg, col) : content}
+                                  ? directives.keyed(
-                                </div>
+                                      `${rowId}:${editKey}:${this.__flashTick}`,
+                                      innerHtml
+                                    )
+                                  : innerHtml}
                               </td>
                             `;
                           })}
@@ -685,7 +748,8 @@ export class DeesTable<T> extends DeesElement {
                           }
                         })()}
                       </tr>`;
-                  })}
+                  }
+                  )}
                   ${useVirtual && bottomSpacerHeight > 0
                     ? html`<tr aria-hidden="true" style="height:${bottomSpacerHeight}px"><td></td></tr>`
                     : html``}
@@ -801,7 +865,7 @@ export class DeesTable<T> extends DeesElement {
                 const key = String(col.key);
                 if (col.filterable === false) return html`<th></th>`;
                 return html`<th>
-                  <input type="text" placeholder="Filter..." .value=${this.columnFilters[key] || ''}
+                  <input type="text" placeholder="Filter..." data-col-key=${key} .value=${this.columnFilters[key] || ''}
                     @input=${(e: Event) => this.setColumnFilter(key, (e.target as HTMLInputElement).value)} />
                 </th>`;
               })}
@@ -957,6 +1021,84 @@ export class DeesTable<T> extends DeesElement {
     if (fh) fh.classList.remove('active');
   }
 
+  /**
+   * If a filter `<input>` inside the floating-header clone currently has
+   * focus, copy its value, caret, and selection range onto the matching
+   * input in the real header, then focus that real input. This lets the
+   * user keep typing uninterrupted when filter input causes the table to
+   * shrink below the viewport stick line and the floating header has to
+   * unmount.
+   *
+   * Safe to call at any time — it is a no-op unless an input inside the
+   * floating header is focused and has a `data-col-key` attribute that
+   * matches a real-header input.
+   */
+  private __transferFocusToRealHeader(): void {
+    const fh = this.__floatingHeaderEl;
+    if (!fh) return;
+    const active = this.shadowRoot?.activeElement as HTMLElement | null;
+    if (!active || !fh.contains(active)) return;
+    const colKey = active.getAttribute('data-col-key');
+    if (!colKey) return;
+    const fromInput = active as HTMLInputElement;
+    const real = this.shadowRoot?.querySelector(
+      `.tableScroll > table > thead input[data-col-key="${CSS.escape(colKey)}"]`
+    ) as HTMLInputElement | null;
+    if (!real || real === fromInput) return;
+    const selStart = fromInput.selectionStart;
+    const selEnd = fromInput.selectionEnd;
+    const selDir = fromInput.selectionDirection as any;
+    real.focus({ preventScroll: true });
+    try {
+      if (selStart != null && selEnd != null) {
+        real.setSelectionRange(selStart, selEnd, selDir || undefined);
+      }
+    } catch {
+      /* setSelectionRange throws on unsupported input types — ignore */
+    }
+  }
+
+  /**
+   * Symmetric counterpart to `__transferFocusToRealHeader`. When the
+   * floating header has just activated and a real-header filter input
+   * was focused (and is now scrolled off-screen behind the floating
+   * clone), move focus to the clone's matching input so the user keeps
+   * typing in the visible one.
+   *
+   * Called from `__syncFloatingHeader` inside the post-activation
+   * `updateComplete` callback — by then the clone subtree exists in the
+   * DOM and can receive focus.
+   */
+  private __transferFocusToFloatingHeader(): void {
+    const fh = this.__floatingHeaderEl;
+    if (!fh || !this.__floatingActive) return;
+    const active = this.shadowRoot?.activeElement as HTMLElement | null;
+    if (!active) return;
+    // Only handle focus that lives in the real header (not already in the clone).
+    const realThead = this.shadowRoot?.querySelector(
+      '.tableScroll > table > thead'
+    ) as HTMLElement | null;
+    if (!realThead || !realThead.contains(active)) return;
+    const colKey = active.getAttribute('data-col-key');
+    if (!colKey) return;
+    const fromInput = active as HTMLInputElement;
+    const clone = fh.querySelector(
+      `input[data-col-key="${CSS.escape(colKey)}"]`
+    ) as HTMLInputElement | null;
+    if (!clone || clone === fromInput) return;
+    const selStart = fromInput.selectionStart;
+    const selEnd = fromInput.selectionEnd;
+    const selDir = fromInput.selectionDirection as any;
+    clone.focus({ preventScroll: true });
+    try {
+      if (selStart != null && selEnd != null) {
+        clone.setSelectionRange(selStart, selEnd, selDir || undefined);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
   // ─── Virtualization ─────────────────────────────────────────────────
 
   /**
@@ -1062,6 +1204,15 @@ export class DeesTable<T> extends DeesElement {
     const shouldBeActive = tableRect.top < stick.top && distance > 0;
 
     if (shouldBeActive !== this.__floatingActive) {
+      if (!shouldBeActive) {
+        // Before we flag the clone for unmount, hand off any focused
+        // filter input to its counterpart in the real header. This is the
+        // "user is typing in a sticky filter input, filter shrinks the
+        // table so the floating header hides" case — without this
+        // handoff the user's focus (and caret position) would be lost
+        // when the clone unmounts.
+        this.__transferFocusToRealHeader();
+      }
       this.__floatingActive = shouldBeActive;
       fh.classList.toggle('active', shouldBeActive);
       if (!shouldBeActive) {
@@ -1072,8 +1223,14 @@ export class DeesTable<T> extends DeesElement {
       }
       if (shouldBeActive) {
         // Clone subtree doesn't exist yet — wait for the next render to
-        // materialize it, then complete geometry sync.
+        // materialize it, then complete geometry sync. Additionally, if a
-        this.updateComplete.then(() => this.__syncFloatingHeader());
+        // real-header filter input was focused when we activated, hand
+        // off to the clone once it exists so the user keeps typing in
+        // the visible (floating) input.
+        this.updateComplete.then(() => {
+          this.__syncFloatingHeader();
+          this.__transferFocusToFloatingHeader();
+        });
         return;
       }
     }
@@ -1127,6 +1284,10 @@ export class DeesTable<T> extends DeesElement {
   public async disconnectedCallback() {
     super.disconnectedCallback();
     this.teardownFloatingHeader();
+    if (this.__flashClearTimer) {
+      clearTimeout(this.__flashClearTimer);
+      this.__flashClearTimer = undefined;
+    }
   }
 
   public async firstUpdated() {
@@ -1134,9 +1295,141 @@ export class DeesTable<T> extends DeesElement {
     // table markup actually exists (it only renders when data.length > 0).
   }
 
+  /**
+   * Runs before each render. Drives two independent concerns:
+   *
+   * 1. **Selection rebind** — when `data` is reassigned to a fresh array
+   *    (typical live-data pattern), `selectedDataRow` still points at the
+   *    stale row object from the old array. We re-resolve it by rowKey so
+   *    consumers of `selectedDataRow` (footer indicator, header/footer
+   *    actions, copy fallback) see the live reference. `selectedIds`,
+   *    `__focusedCell`, `__editingCell`, `__selectionAnchorId` are all
+   *    keyed by string rowId and persist automatically — no change needed.
+   *    This runs regardless of `highlightUpdates` — it is a baseline
+   *    correctness fix for live data.
+   *
+   * 2. **Flash diff** — when `highlightUpdates === 'flash'`, diff the new
+   *    data against `__prevSnapshot` and populate `__flashingCells` with
+   *    the (rowId, colKey) pairs whose resolved cell value changed. A
+   *    single shared timer clears `__flashingCells` after
+   *    `highlightDuration` ms. Skipped if `rowKey` is missing (with a
+   *    one-shot console.warn; the render surface also shows a warning
+   *    banner).
+   */
+  public willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {
+    // --- Phase 1: selection rebind (always runs) ---
+    if (changedProperties.has('data') && this.selectedDataRow && this.rowKey) {
+      const prevId = this.getRowId(this.selectedDataRow);
+      let found: T | undefined;
+      for (const row of this.data) {
+        if (this.getRowId(row) === prevId) {
+          found = row;
+          break;
+        }
+      }
+      if (found) {
+        if (found !== this.selectedDataRow) this.selectedDataRow = found;
+      } else {
+        this.selectedDataRow = undefined as unknown as T;
+      }
+    }
+
+    // --- Phase 2: flash diff ---
+    if (this.highlightUpdates !== 'flash') {
+      // Mode was toggled off (or never on) — drop any lingering state so
+      // re-enabling later starts with a clean slate.
+      if (this.__prevSnapshot || this.__flashingCells.size > 0) {
+        this.__prevSnapshot = undefined;
+        if (this.__flashingCells.size > 0) this.__flashingCells = new Map();
+        if (this.__flashClearTimer) {
+          clearTimeout(this.__flashClearTimer);
+          this.__flashClearTimer = undefined;
+        }
+      }
+      return;
+    }
+    if (!this.rowKey) {
+      if (!this.__flashWarnedNoRowKey) {
+        this.__flashWarnedNoRowKey = true;
+        console.warn(
+          '[dees-table] highlightUpdates="flash" requires `rowKey` to be set. Flash is disabled. ' +
+          'Set the rowKey property/attribute to a stable identifier on your row data (e.g. `rowKey="id"`).'
+        );
+      }
+      return;
+    }
+    if (!changedProperties.has('data')) return;
+
+    const effectiveColumns = this.__getEffectiveColumns();
+    const visibleCols = effectiveColumns.filter((c) => !c.hidden);
+    const nextSnapshot = new Map<string, Map<string, unknown>>();
+    const newlyFlashing = new Map<string, Set<string>>();
+
+    for (const row of this.data) {
+      const rowId = this.getRowId(row);
+      const cellMap = new Map<string, unknown>();
+      for (const col of visibleCols) {
+        cellMap.set(String(col.key), getCellValueFn(row, col, this.displayFunction));
+      }
+      nextSnapshot.set(rowId, cellMap);
+
+      const prevCells = this.__prevSnapshot?.get(rowId);
+      if (!prevCells) continue; // new row — not an "update"
+      for (const [colKey, nextVal] of cellMap) {
+        if (prevCells.get(colKey) !== nextVal) {
+          // Don't flash the cell the user is actively editing.
+          if (
+            this.__editingCell &&
+            this.__editingCell.rowId === rowId &&
+            this.__editingCell.colKey === colKey
+          ) continue;
+          let set = newlyFlashing.get(rowId);
+          if (!set) {
+            set = new Set();
+            newlyFlashing.set(rowId, set);
+          }
+          set.add(colKey);
+        }
+      }
+    }
+
+    const hadPrev = !!this.__prevSnapshot;
+    this.__prevSnapshot = nextSnapshot;
+    if (!hadPrev) return; // first time seeing data — no flashes
+
+    if (newlyFlashing.size === 0) return;
+
+    // Merge with any in-flight flashes from a rapid second update so a cell
+    // that changes twice before its animation ends gets a single clean
+    // restart (via __flashTick / directives.keyed) instead of stacking.
+    for (const [rowId, cols] of newlyFlashing) {
+      const existing = this.__flashingCells.get(rowId);
+      if (existing) {
+        for (const c of cols) existing.add(c);
+      } else {
+        this.__flashingCells.set(rowId, cols);
+      }
+    }
+    this.__flashTick++;
+    // Reactivity nudge: we've mutated the Map in place, so give Lit a fresh
+    // reference so the @state change fires for render.
+    this.__flashingCells = new Map(this.__flashingCells);
+    if (this.__flashClearTimer) clearTimeout(this.__flashClearTimer);
+    this.__flashClearTimer = setTimeout(() => {
+      this.__flashingCells = new Map();
+      this.__flashClearTimer = undefined;
+    }, Math.max(0, this.highlightDuration));
+  }
+
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
 
+    // Feed highlightDuration into the CSS variable so JS and CSS stay in
+    // sync via a single source of truth.
+    if (changedProperties.has('highlightDuration')) {
+      this.style.setProperty('--dees-table-flash-duration', `${this.highlightDuration}ms`);
+    }
+
     // Only re-measure column widths when the data or schema actually changed
     // (or on first paint). `determineColumnWidths` is the single biggest
     // first-paint cost — it forces multiple layout flushes per row.
@@ -2090,6 +2383,10 @@ export class DeesTable<T> extends DeesElement {
     }
     if (parsed !== oldValue) {
       (item as any)[col.key] = parsed;
+      // Keep the flash-diff snapshot in sync so the next external update
+      // does not see this user edit as an external change (which would
+      // otherwise flash the cell the user just typed into).
+      this.__recordCellInSnapshot(item, col);
       this.dispatchEvent(
         new CustomEvent('cellEdit', {
           detail: { row: item, key, oldValue, newValue: parsed },
@@ -2103,6 +2400,24 @@ export class DeesTable<T> extends DeesElement {
     this.requestUpdate();
   }
 
+  /**
+   * Updates the flash diff snapshot for a single cell to match its current
+   * resolved value. Called from `commitCellEdit` so a user-initiated edit
+   * does not register as an external change on the next diff pass.
+   * No-op when flash mode is off or no snapshot exists yet.
+   */
+  private __recordCellInSnapshot(item: T, col: Column<T>): void {
+    if (this.highlightUpdates !== 'flash' || !this.__prevSnapshot) return;
+    if (!this.rowKey) return;
+    const rowId = this.getRowId(item);
+    let cellMap = this.__prevSnapshot.get(rowId);
+    if (!cellMap) {
+      cellMap = new Map();
+      this.__prevSnapshot.set(rowId, cellMap);
+    }
+    cellMap.set(String(col.key), getCellValueFn(item, col, this.displayFunction));
+  }
+
   /** Renders the appropriate dees-input-* component for this column. */
   private renderCellEditor(item: T, col: Column<T>): TemplateResult {
     const raw = (item as any)[col.key];

ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -373,6 +373,72 @@ export const tableStyles: CSSResult[] = [
         line-height: 24px;
       }
 
+      /* ---- Cell flash highlighting (opt-in via highlight-updates="flash") ----
+         Bloomberg/TradingView-style: the text itself briefly takes an accent
+         color then fades back to the default. No background tint, no layout
+         shift, no weight change. Readable, modern, subtle.
+         Consumers can override per instance:
+           dees-table#myTable { --dees-table-flash-color: hsl(142 76% 40%); }
+      */
+      :host {
+        --dees-table-flash-color: ${cssManager.bdTheme(
+          'hsl(32 95% 44%)',
+          'hsl(45 93% 62%)'
+        )};
+        --dees-table-flash-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
+      }
+
+      .innerCellContainer.flashing {
+        animation: dees-table-cell-flash
+                   var(--dees-table-flash-duration, 900ms)
+                   var(--dees-table-flash-easing);
+      }
+
+      /* Hold the accent color briefly, then fade back to the theme's default
+         text color. Inherits to child text and to SVG icons that use
+         currentColor. Cells with explicit color overrides in renderers are
+         intentionally unaffected. */
+      @keyframes dees-table-cell-flash {
+        0%,
+        35% { color: var(--dees-table-flash-color); }
+        100% { color: var(--dees-color-text-primary); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .innerCellContainer.flashing {
+          animation: none;
+          color: var(--dees-table-flash-color);
+        }
+      }
+
+      /* Dev-time warning banner shown when highlight-updates="flash" but
+         rowKey is missing. Consumers should never ship this to production. */
+      .flashConfigWarning {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 8px 16px 0;
+        padding: 8px 12px;
+        border-left: 3px solid ${cssManager.bdTheme('hsl(38 92% 50%)', 'hsl(48 96% 63%)')};
+        background: ${cssManager.bdTheme('hsl(48 96% 89% / 0.6)', 'hsl(48 96% 30% / 0.15)')};
+        color: ${cssManager.bdTheme('hsl(32 81% 29%)', 'hsl(48 96% 80%)')};
+        font-size: 12px;
+        line-height: 1.4;
+        border-radius: 4px;
+      }
+      .flashConfigWarning dees-icon {
+        width: 14px;
+        height: 14px;
+        flex: 0 0 auto;
+      }
+      .flashConfigWarning code {
+        padding: 1px 4px;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.6)', 'hsl(0 0% 0% / 0.3)')};
+        font-family: ${cssGeistFontFamily};
+        font-size: 11px;
+      }
+
       /* Editable cell affordances */
       td.editable {
         cursor: text;

ts_web/elements/00group-layout/dees-heading/dees-heading.ts

@@ -44,17 +44,30 @@ export class DeesHeading extends DeesElement {
         display: block;
       }
 
-      /* Heading styles */
+      /* Heading styles.
+       * Color hierarchy: h1-h2 stay prominent with text-primary; h3-h6 step
+       * down to text-secondary so they read as subheadings instead of
+       * mini-h1s. Keeps the visual loudness out of smaller headings. */
       h1, h2, h3, h4, h5, h6 {
         font-weight: 600;
+      }
+      h1, h2 {
         color: var(--dees-color-text-primary);
       }
+      h3, h4, h5, h6 {
+        color: var(--dees-color-text-secondary);
+      }
 
       /* Per-level typography + spacing.
        * Margin scales with importance: h1 gets the most breathing room,
        * h6 the least. Top margin > bottom margin so headings group with
        * the content that follows them. */
       h1 {
+        /* h1 uses weight 500, not 600: the Cal Sans display font is
+         * already stylized enough that bold + max contrast + 32px stacks
+         * too much emphasis. 500 keeps the typographic impact without
+         * shouting. */
+        font-weight: 500;
         font-size: 32px;
         font-family: ${cssCalSansFontFamily};
         letter-spacing: 0.025em;

ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts

@@ -1,134 +1,137 @@
 import { html } from '@design.estate/dees-element';
+import { DeesStepper, type IStep } from './dees-stepper.js';
+
+const demoSteps: IStep[] = [
+  {
+    title: 'Account Setup',
+    content: html`
+      <dees-form>
+        <dees-input-text key="email" label="Work Email" required></dees-input-text>
+        <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Profile Details',
+    content: html`
+      <dees-form>
+        <dees-input-text key="firstName" label="First Name" required></dees-input-text>
+        <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Contact Information',
+    content: html`
+      <dees-form>
+        <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
+        <dees-input-text key="company" label="Company"></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Team Size',
+    content: html`
+      <dees-form>
+        <dees-input-dropdown
+          key="teamSize"
+          label="How big is your team?"
+          .options=${[
+            { label: '1-5', value: '1-5' },
+            { label: '6-20', value: '6-20' },
+            { label: '21-50', value: '21-50' },
+            { label: '51+', value: '51+' },
+          ]}
+          required
+        ></dees-input-dropdown>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Goals',
+    content: html`
+      <dees-form>
+        <dees-input-multitoggle
+          key="goal"
+          label="Main objective"
+          .options=${[
+            { label: 'Onboarding', value: 'onboarding' },
+            { label: 'Analytics', value: 'analytics' },
+            { label: 'Automation', value: 'automation' },
+          ]}
+          required
+        ></dees-input-multitoggle>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Brand Preferences',
+    content: html`
+      <dees-form>
+        <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
+        <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Integrations',
+    content: html`
+      <dees-form>
+        <dees-input-list
+          key="integrations"
+          label="Integrations in use"
+          placeholder="Add integration"
+        ></dees-input-list>
+      </dees-form>
+    `,
+    menuOptions: [
+      { name: 'Continue', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+  {
+    title: 'Review & Launch',
+    content: html`
+      <dees-panel>
+        <p>Almost there! Review your selections and launch whenever you're ready.</p>
+      </dees-panel>
+    `,
+    menuOptions: [
+      { name: 'Launch', action: async (stepper) => stepper!.goNext() },
+    ],
+  },
+];
+
+const cloneSteps = (): IStep[] => demoSteps.map((step) => ({ ...step }));
 
 export const stepperDemo = () => html`
-  <dees-stepper
+  <div style="position: absolute; inset: 0;">
-    .steps=${[
+    <div
-      {
+      style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
-        title: 'Account Setup',
+    >
-        content: html`
+      <dees-button
-          <dees-form>
+        @click=${async () => {
-            <dees-input-text key="email" label="Work Email" required></dees-input-text>
+          await DeesStepper.createAndShow({ steps: cloneSteps() });
-            <dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
+        }}
-            <dees-form-submit>Continue</dees-form-submit>
+      >Open stepper as overlay</dees-button>
-          </dees-form>
+    </div>
-        `,
+    <dees-stepper .steps=${cloneSteps()}></dees-stepper>
-        validationFunc: async (stepperArg, elementArg) => {
+  </div>
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Profile Details',
-        content: html`
-          <dees-form>
-            <dees-input-text key="firstName" label="First Name" required></dees-input-text>
-            <dees-input-text key="lastName" label="Last Name" required></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Contact Information',
-        content: html`
-          <dees-form>
-            <dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
-            <dees-input-text key="company" label="Company"></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Team Size',
-        content: html`
-          <dees-form>
-            <dees-input-dropdown
-              key="teamSize"
-              label="How big is your team?"
-              .options=${[
-                { label: '1-5', value: '1-5' },
-                { label: '6-20', value: '6-20' },
-                { label: '21-50', value: '21-50' },
-                { label: '51+', value: '51+' },
-              ]}
-              required
-            ></dees-input-dropdown>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Goals',
-        content: html`
-          <dees-form>
-            <dees-input-multitoggle
-              key="goal"
-              label="Main objective"
-              .options=${[
-                { label: 'Onboarding', value: 'onboarding' },
-                { label: 'Analytics', value: 'analytics' },
-                { label: 'Automation', value: 'automation' },
-              ]}
-              required
-            ></dees-input-multitoggle>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Brand Preferences',
-        content: html`
-          <dees-form>
-            <dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
-            <dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Integrations',
-        content: html`
-          <dees-form>
-            <dees-input-list
-              key="integrations"
-              label="Integrations in use"
-              placeholder="Add integration"
-            ></dees-input-list>
-            <dees-form-submit>Continue</dees-form-submit>
-          </dees-form>
-        `,
-        validationFunc: async (stepperArg, elementArg) => {
-          const deesForm = elementArg.querySelector('dees-form');
-          deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
-        },
-      },
-      {
-        title: 'Review & Launch',
-        content: html`
-          <dees-panel>
-            <p>Almost there! Review your selections and launch whenever you're ready.</p>
-          </dees-panel>
-        `,
-      },
-    ] as const}
-  ></dees-stepper>
 `;

ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts

@@ -1,5 +1,4 @@
 import * as plugins from '../../00plugins.js';
-import * as colors from '../../00colors.js';
 
 import {
   DeesElement,
@@ -16,10 +15,16 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { stepperDemo } from './dees-stepper.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { zIndexRegistry } from '../../00zindex.js';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+import type { DeesForm } from '../../00group-form/dees-form/dees-form.js';
+import '../dees-tile/dees-tile.js';
 
 export interface IStep {
   title: string;
   content: TemplateResult;
+  menuOptions?: plugins.tsclass.website.IMenuItem<DeesStepper>[];
   validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
   onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
   validationFuncCalled?: boolean;
@@ -34,9 +39,32 @@ declare global {
 
 @customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
+  // STATIC
   public static demo = stepperDemo;
   public static demoGroups = ['Layout', 'Form'];
 
+  public static async createAndShow(optionsArg: {
+    steps: IStep[];
+  }): Promise<DeesStepper> {
+    const body = document.body;
+    const stepper = new DeesStepper();
+    stepper.steps = optionsArg.steps;
+    stepper.overlay = true;
+    stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
+    stepper.windowLayer.addEventListener('click', async () => {
+      await stepper.destroy();
+    });
+    body.append(stepper.windowLayer);
+    body.append(stepper);
+
+    // Get z-index for stepper (should be above window layer)
+    stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(stepper, stepper.stepperZIndex);
+
+    return stepper;
+  }
+
+  // INSTANCE
   @property({
     type: Array,
   })
@@ -47,6 +75,25 @@ export class DeesStepper extends DeesElement {
   })
   accessor selectedStep!: IStep;
 
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  accessor overlay: boolean = false;
+
+  @property({ type: Number, attribute: false })
+  accessor stepperZIndex: number = 1000;
+
+  @property({ type: Object, attribute: false })
+  accessor activeForm: DeesForm | null = null;
+
+  @property({ type: Boolean, attribute: false })
+  accessor activeFormValid: boolean = true;
+
+  private activeFormSubscription?: { unsubscribe: () => void };
+
+  private windowLayer?: DeesWindowLayer;
+
   constructor() {
     super();
   }
@@ -60,7 +107,24 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
+        font-family: ${cssGeistFontFamily};
+        color: var(--dees-color-text-primary);
       }
+
+      /*
+       * In overlay mode the host is "transparent" to layout — the inner
+       * .stepperContainer.overlay is what pins to the viewport and carries the
+       * z-index. Keeping :host unpositioned avoids nesting the stacking context
+       * under an auto-z-index parent (which was trapping .stepperContainer
+       * below DeesWindowLayer's sibling layers). This mirrors how dees-modal
+       * keeps its own :host unpositioned and lets .modalContainer drive layout.
+       */
+      :host([overlay]) {
+        position: static;
+        width: 0;
+        height: 0;
+      }
+
       .stepperContainer {
         position: absolute;
         width: 100%;
@@ -68,101 +132,120 @@ export class DeesStepper extends DeesElement {
         overflow: hidden;
       }
 
-      .step {
+      .stepperContainer.overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+
+      .stepperContainer.predestroy {
+        opacity: 0;
+        transition: opacity 0.2s ease-in;
+      }
+
+      dees-tile.step {
         position: relative;
         pointer-events: none;
-        overflow: hidden;
-        transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), box-shadow 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1), border 0.7s cubic-bezier(0.87, 0, 0.13, 1);
         max-width: 500px;
         min-height: 300px;
-        border-radius: 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#0f0f11')};
-        border: 1px solid ${cssManager.bdTheme('#e2e8f0', '#272729')};
-        color: ${cssManager.bdTheme('#0f172a', '#f5f5f5')};
         margin: auto;
         margin-bottom: 20px;
         filter: opacity(0.55) saturate(0.85);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1);
         user-select: none;
       }
 
-      .step.selected {
+      dees-tile.step.selected {
         pointer-events: all;
         filter: opacity(1) saturate(1);
         user-select: auto;
       }
 
-      .step.hiddenStep {
+      dees-tile.step.hiddenStep {
         filter: opacity(0);
       }
 
-      .step.entrance {
+      dees-tile.step.entrance {
-        transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
+        transition: transform 0.35s ease, filter 0.35s ease;
       }
 
-      .step.entrance.hiddenStep {
+      dees-tile.step.entrance.hiddenStep {
         transform: translateY(16px);
       }
 
-      .step:last-child {
+      dees-tile.step:last-child {
         margin-bottom: 100vh;
       }
 
-      .step .stepCounter {
+      .stepperContainer.overlay dees-tile.step::part(outer) {
-        color: ${cssManager.bdTheme('#64748b', '#a1a1aa')};
+        box-shadow:
-        position: absolute;
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
-        top: 12px;
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
-        right: 12px;
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
-        padding: 6px 14px;
-        font-size: 12px;
-        border-radius: 999px;
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.5)', 'rgba(63, 63, 70, 0.45)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.7)', 'rgba(63, 63, 70, 0.6)')};
       }
 
-      .step .goBack {
+      .step-header {
-        position: absolute;
+        height: 36px;
-        top: 12px;
+        display: flex;
-        left: 12px;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 8px 0 12px;
+        gap: 12px;
+      }
+
+      .goBack-spacer {
+        width: 1px;
+      }
+
+      .step-header .goBack {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 6px 12px;
+        height: 24px;
+        padding: 0 8px;
         font-size: 12px;
         font-weight: 500;
-        border-radius: 999px;
+        line-height: 1;
-        border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.9)', 'rgba(63, 63, 70, 0.85)')};
+        border: none;
-        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.9)', 'rgba(39, 39, 42, 0.85)')};
+        background: transparent;
-        color: ${cssManager.bdTheme('#475569', '#d4d4d8')};
+        color: var(--dees-color-text-muted);
+        border-radius: 4px;
         cursor: pointer;
-        transition: border 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
+        transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
       }
 
-      .step .goBack:hover {
+      .step-header .goBack:hover {
-        color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
+        background: var(--dees-color-hover);
-        border-color: ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
+        color: var(--dees-color-text-secondary);
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.95)', 'rgba(63, 63, 70, 0.7)')};
         transform: translateX(-2px);
       }
 
-      .step .goBack:active {
+      .step-header .goBack:active {
-        color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
-        border-color: ${cssManager.bdTheme(colors.dark.blueActive, colors.dark.blueActive)};
-        background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.85)', 'rgba(63, 63, 70, 0.6)')};
       }
 
-      .step .goBack span {
+      .step-header .goBack span {
         transition: transform 0.2s ease;
         display: inline-block;
       }
 
-      .step .goBack:hover span {
+      .step-header .goBack:hover span {
         transform: translateX(-2px);
       }
 
-      .step .title {
+      .step-header .stepCounter {
+        color: var(--dees-color-text-muted);
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        padding: 0 8px;
+      }
+
+      .step-body .title {
         text-align: center;
-        padding-top: 64px;
+        padding-top: 32px;
         font-family: 'Geist Sans', sans-serif;
         font-size: 24px;
         font-weight: 600;
@@ -170,35 +253,142 @@ export class DeesStepper extends DeesElement {
         color: inherit;
       }
 
-      .step .content {
+      .step-body .content {
         padding: 32px;
       }
+
+      /* --- Footer: modal-style bottom buttons --- */
+      .bottomButtons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+      }
+
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
+      }
+
+      .bottomButtons .bottomButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
+      }
+
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
+      }
+
+      .bottomButtons .bottomButton.disabled {
+        pointer-events: none;
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .bottomButtons .bottomButton.disabled:hover {
+        background: transparent;
+        color: var(--dees-color-text-muted);
+      }
+
+      /* Hint shown on the left of the footer when the active step's form has
+         unfilled required fields. Uses margin-right: auto to push right-aligned
+         buttons to the right while keeping the hint flush-left. */
+      .bottomButtons .stepHint {
+        margin-right: auto;
+        padding: 0 16px;
+        font-size: 11px;
+        line-height: 1;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-muted);
+        display: flex;
+        align-items: center;
+        user-select: none;
+      }
     `,
   ];
 
   public render() {
     return html`
-      <div class="stepperContainer">
+      <div
-        ${this.steps.map(
+        class="stepperContainer ${this.overlay ? 'overlay' : ''}"
-          (stepArg) =>
+        style=${this.overlay ? `z-index: ${this.stepperZIndex};` : ''}
-            html`<div
+      >
-              class="step ${stepArg === this.selectedStep
+        ${this.steps.map((stepArg, stepIndex) => {
-                ? 'selected'
+          const isSelected = stepArg === this.selectedStep;
-                : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
+          const isHidden =
-                ? 'hiddenStep'
+            this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
-                : ''} ${this.getIndexOfStep(stepArg) === 0 ? 'entrance' : ''}"
+          const isFirst = stepIndex === 0;
-            >
+          return html`<dees-tile
-              ${this.getIndexOfStep(stepArg) > 0
+            class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
-                ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
+          >
-                : ``}
+            <div slot="header" class="step-header">
+              ${!isFirst
+                ? html`<div class="goBack" @click=${this.goBack}>
+                    <span style="font-family: Inter"><-</span> go to previous step
+                  </div>`
+                : html`<div class="goBack-spacer"></div>`}
               <div class="stepCounter">
-                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+                Step ${stepIndex + 1} of ${this.steps.length}
-                ${this.steps.length}
               </div>
+            </div>
+            <div class="step-body">
               <div class="title">${stepArg.title}</div>
               <div class="content">${stepArg.content}</div>
-            </div> `
+            </div>
-        )}
+            ${stepArg.menuOptions && stepArg.menuOptions.length > 0
+              ? html`<div slot="footer" class="bottomButtons">
+                  ${isSelected && this.activeForm !== null && !this.activeFormValid
+                    ? html`<div class="stepHint">Complete form to continue</div>`
+                    : ''}
+                  ${stepArg.menuOptions.map((actionArg, actionIndex) => {
+                    const isPrimary = actionIndex === stepArg.menuOptions!.length - 1;
+                    const isDisabled = isPrimary && this.activeForm !== null && !this.activeFormValid;
+                    return html`
+                      <div
+                        class="bottomButton ${isPrimary ? 'primary' : ''} ${isDisabled ? 'disabled' : ''}"
+                        @click=${() => this.handleMenuOptionClick(actionArg, isPrimary)}
+                      >${actionArg.name}</div>
+                    `;
+                  })}
+                </div>`
+              : ''}
+          </dees-tile>`;
+        })}
       </div>
     `;
   }
@@ -230,6 +420,7 @@ export class DeesStepper extends DeesElement {
     if (!selectedStepElement) {
       return;
     }
+    this.scanActiveForm(selectedStepElement);
     if (!stepperContainer.style.paddingTop) {
       stepperContainer.style.paddingTop = `${
         stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
@@ -296,4 +487,93 @@ export class DeesStepper extends DeesElement {
     nextStep.validationFuncCalled = false;
     this.selectedStep = nextStep;
   }
+
+  /**
+   * Scans the currently selected step for a <dees-form> in its content. When
+   * found, subscribes to the form's RxJS changeSubject so the primary
+   * menuOption button can auto-enable/disable as required fields are filled.
+   *
+   * If the form reference is the same as the previous activation (e.g. on a
+   * same-step re-render), we just recompute validity without re-subscribing.
+   */
+  private scanActiveForm(selectedStepElement: HTMLElement) {
+    const form = selectedStepElement.querySelector('dees-form') as DeesForm | null;
+    if (form === this.activeForm) {
+      this.recomputeFormValid();
+      return;
+    }
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = undefined;
+    this.activeForm = form;
+    if (!form) {
+      this.activeFormValid = true;
+      return;
+    }
+    // Initial check before subscribing, in case the form's firstUpdated fires
+    // synchronously between scan and subscribe.
+    this.recomputeFormValid();
+    this.activeFormSubscription = form.changeSubject.subscribe(() => {
+      this.recomputeFormValid();
+    });
+  }
+
+  /**
+   * Recomputes activeFormValid by checking every required field in the active
+   * form for a non-empty value. Mirrors dees-form.updateRequiredStatus's logic
+   * but stores the result on the stepper instead of mutating a submit button.
+   */
+  private recomputeFormValid() {
+    const form = this.activeForm;
+    if (!form) {
+      this.activeFormValid = true;
+      return;
+    }
+    const fields = form.getFormElements();
+    this.activeFormValid = fields.every(
+      (field) => !field.required || (field.value !== null && field.value !== undefined && field.value !== ''),
+    );
+  }
+
+  /**
+   * Click handler for menuOption buttons in the footer. For the primary (last)
+   * button, if an active form is present, gates on required-field validity and
+   * triggers the form's gatherAndDispatch() before running the action. The
+   * action is awaited so any async work (e.g. goNext → scroll animation)
+   * completes before the click handler returns.
+   */
+  private async handleMenuOptionClick(
+    optionArg: plugins.tsclass.website.IMenuItem<DeesStepper>,
+    isPrimary: boolean,
+  ) {
+    const form = this.activeForm;
+    if (isPrimary && form) {
+      if (!this.activeFormValid) return;
+      await new Promise<void>((resolve) => {
+        form.addEventListener('formData', () => resolve(), { once: true });
+        form.gatherAndDispatch();
+      });
+    }
+    await optionArg.action(this);
+  }
+
+  public async destroy() {
+    const domtools = await this.domtoolsPromise;
+    const container = this.shadowRoot!.querySelector('.stepperContainer');
+    container?.classList.add('predestroy');
+    await domtools.convenience.smartdelay.delayFor(200);
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+
+    // Tear down form subscription to avoid leaks when the overlay closes.
+    this.activeFormSubscription?.unsubscribe();
+    this.activeFormSubscription = undefined;
+    this.activeForm = null;
+
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+  }
 }

ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -268,9 +268,7 @@ export class DeesModal extends DeesElement {
       }
 
       .heading .header-button dees-icon {
-        width: 14px;
+        font-size: 14px;
-        height: 14px;
-        display: block;
       }
 
       .content {

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -269,12 +269,20 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .subViews {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-template-rows: 0fr;
-        gap: 2px;
+        margin-left: 12px;
-        margin: 2px 0 4px 12px;
-        padding-left: 12px;
         position: relative;
+        transition:
+          grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .subViews.expanded {
+        grid-template-rows: 1fr;
+        margin-top: 2px;
+        margin-bottom: 4px;
       }
 
       .subViews::before {
@@ -285,6 +293,21 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 4px;
         width: 1px;
         background: var(--dees-color-border-default);
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      .subViews.expanded::before {
+        opacity: 1;
+      }
+
+      .subViews-inner {
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding-left: 12px;
       }
 
       .viewTab.sub {
@@ -631,26 +654,31 @@ export class DeesSimpleAppDash extends DeesElement {
                       <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
                     ` : ''}
                   </div>
-                  ${hasSubs && groupActive ? html`
+                  ${hasSubs ? html`
-                    <div class="subViews">
+                    <div
-                      ${view.subViews!.map(
+                      class="subViews ${groupActive ? 'expanded' : ''}"
-                        (sub) => html`
+                      ?inert=${!groupActive}
-                          <div
+                    >
-                            class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
+                      <div class="subViews-inner">
-                            @click=${(e: Event) => {
+                        ${view.subViews!.map(
-                              e.stopPropagation();
+                          (sub) => html`
-                              this.loadView(sub);
+                            <div
-                            }}
+                              class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
-                          >
+                              @click=${(e: Event) => {
-                            ${sub.iconName ? html`
+                                e.stopPropagation();
-                              <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
+                                this.loadView(sub);
-                            ` : html`
+                              }}
-                              <dees-icon .icon="${'lucide:dot'}"></dees-icon>
+                            >
-                            `}
+                              ${sub.iconName ? html`
-                            <span>${sub.name}</span>
+                                <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
-                          </div>
+                              ` : html`
-                        `
+                                <dees-icon .icon="${'lucide:dot'}"></dees-icon>
-                      )}
+                              `}
+                              <span>${sub.name}</span>
+                            </div>
+                          `
+                        )}
+                      </div>
                     </div>
                   ` : ''}
                 `;