@wippy-fe/theme 0.0.64 → 0.0.65

package/THEMING.md

@@ -680,10 +680,14 @@ The `tailwind.css` master file imports all component CSS files organized by cate
 
 PrimeVue overlays — `Dialog`, `Drawer`, `Select`, `Popover`, `Menu`, `MultiSelect`, … — teleport their panel through one shared primitive (`primevue/portal`) whose default target is `document.body`. Inside a **web component** that escapes the shadow root, so the panel loses the module's shadow-scoped CSS (and the injected `primeVueCssUrl`) and renders unstyled next to `<body>`.
 
-`PrimeVuePlugin` handles this for you: at `install()` it rewrites the shared Portal so the default `appendTo` (`'body'`) teleports each overlay to a per-shadow-root `position: fixed` zero-size anchor. The overlay stays **inside the shadow root** (so the shadow-scoped CSS and the injected `primeVueCssUrl` apply) and — because `appendTo` is not `'self'` — PrimeVue positions it with `absolutePosition` at the trigger, **unclipped** by any scrolling ancestor (e.g. a `Dialog` / `Drawer` body with `overflow: auto`). Outside a shadow root (the host SPA) it falls back to `document.body`. You do nothing per component.
+`PrimeVuePlugin` handles this for you: at `install()` it rewrites the shared Portal so the default `appendTo` (`'body'`) teleports each overlay to its own `position: fixed` zero-size layer in the component's shadow root. The overlay stays **inside the shadow root** (so the shadow-scoped CSS and the injected `primeVueCssUrl` apply) and — because `appendTo` is not `'self'` — PrimeVue positions it with `absolutePosition` at the trigger, **unclipped** by any scrolling ancestor (e.g. a `Dialog` / `Drawer` body with `overflow: auto`). Outside a shadow root (the host SPA) it falls back to `document.body`. You do nothing per component.
 
 The anchor is **measured, not assumed**. `absolutePosition` writes *document* coordinates, so the anchor must sit at the true viewport origin for an absolutely-positioned overlay to land correctly. A `position: fixed` element is only at the viewport origin when no ancestor establishes a containing block — but `transform` / `filter` / `perspective` / `will-change` / `contain` on any ancestor (a `translateZ(0)` GPU hint, a slide/scale animation, a virtualized list) makes *that* ancestor the containing block instead, and a scrolled window shifts it too. So the plugin reads the anchor's own `getBoundingClientRect()` and offsets it by `-scrollX / -scrollY` to pin it at viewport `(0,0)`, re-syncing when an overlay opens (a `MutationObserver`) and on scroll/resize. This is what keeps overlays aligned under a transformed ancestor or a scrolled page. A reactive `append-to` is honored (`resolvedTarget` is a computed). **`Tooltip` is the one exception** — it is a directive that appends to `document.body`, bypassing `primevue/portal`, so it renders in the light DOM and is not shadow-scoped by this plugin.
 
+**Overlays follow the component's forced theme.** The Host puts `w-theme-dark` or `w-theme-light` on the container a web component renders into, but each overlay's layer is a sibling of that container. Anything keyed on that class would miss the overlay: the Tailwind `dark:` utilities, and the in-shadow `.w-theme-*` rule that sets the `--p-*` tokens and `color-scheme`. A calendar or a Select opened in a dark-forced app would then paint in the operating system's scheme, which is white on a light system. So each layer copies the theme class of the nearest theme context above the overlay's trigger. A theme context is an element that carries a forced class, or one marked `data-wippy-theme-root`. The search runs through the ancestors inside the shadow root and ends at the host element, so a component that mirrors the class onto its host element and nowhere inside still works. The host element counts only when the shadow root has no theme root of its own: a marked container in Auto mode is the nearest context, and the layer then carries no class even if the host is forced. The layer keeps the copy in sync while the theme changes, including Auto following the operating system, and a nearer element that becomes themed later takes over. The page never counts. With no theme context, or an Auto-mode root, the layer carries no class.
+
+While the layer carries a theme class it also carries `data-wippy-theme-root`. The `.w-theme-*` rule declares every default `--p-*` token again on any element with the class, which would replace the facade's `cssVariables` overrides that the layer otherwise inherits from the host element. The variable bridge in `@wippy-fe/webcomponent-core` selects `:where([data-wippy-theme-root]).w-theme-*` and restores the inherited values, so the layer is treated like the container. A component does not need to mirror the class onto its overlays itself.
+
 > **Do not set `append-to="self"`.** `'self'` makes PrimeVue render the overlay *inline* and position it relatively, so an overlay whose trigger sits inside a scrolling `Dialog` / `Drawer` body gets clipped — this was the regression in `@wippy-fe/theme` ≤ 0.0.43 (web-host ≤ 1.0.43). With this plugin, leave `appendTo` unset and inherit the shadow-root portal. (PrimeVue 4 has no global `appendTo` config and the `@primeuix/utils` positioning helpers are immutable, but the shared Portal is a singleton rewritten once at install — no per-app `patch-package` needed.)
 >
 > **Residuals** (all uncommon; none affects a static, translation-only layout):
@@ -919,6 +923,7 @@ The resizable panel divider between main content and the right panel.
 | `.chat-input__attach-button` | Attachment button |
 | `.chat-input__send-button` | Send button |
 | `.chat-input__stop-button` | Stop generation button |
+| `.chat-input__stop-button--stopping` | Stop button after a click, while the Host waits for the turn to stop (also `aria-busy="true"`); the default style dims the icon |
 | `.chat-input__upload-list` | Upload queue list |
 | `.chat-input__prompts` | Suggested prompts area |
 

package/contracts/theme-contract.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": "1.0.0",
-  "implementationRelease": "1.0.64",
+  "implementationRelease": "1.0.65",
   "upstream": {
     "package": "@primeuix/themes",
     "version": "2.0.3",

package/effective-contract.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.64",
-  "implementationRelease": "1.0.64",
+  "packageVersion": "0.0.65",
+  "implementationRelease": "1.0.65",
   "compatibility": {
-    "themePackageVersion": "0.0.64",
+    "themePackageVersion": "0.0.65",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.64",
+    "implementationRelease": "1.0.65",
     "tailwindVersion": "3.4.19",
     "tailwindcssPrimeuiVersion": "0.6.1",
     "primevueVersion": "4.5.5",
@@ -14,7 +14,7 @@
     "referencePrimeuixThemesVersion": "2.0.3",
     "referencePrimeuixThemesIntegrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
     "sourceHashes": {
-      "themeContract": "a47fc609d0054e11f71cd21f64160c5be8b1e6ac0641329614da8c81fea87bed",
+      "themeContract": "6f45be1a33f15896b27923d9032fc24d4d0d11fd02dc677ea3c9571535253c42",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -35,7 +35,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "9fdbfaa932b0d0774028e43152812dbbb6a4150651ddb6f85a2e7dc03c56200d",
+    "inputHash": "dac4b887da9913a1872ef27a446e6032ec734dd7694410f7decaef1a7c21ab09",
     "requirements": "contracts/runtime-acceptance-requirements.json",
     "gate": "node scripts/build-theme-contract.mjs --check --acceptance --evidence <path> --evidence-sha256 <hash>"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/theme",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "description": "Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components.",
   "type": "module",
   "main": "theme-config.css",

package/primevue-plugin.ts

@@ -37,7 +37,7 @@ function supportsTopLayer(): boolean {
   return (
     isClient()
     && typeof HTMLElement !== 'undefined'
-    && Object.hasOwn(HTMLElement.prototype, 'popover')
+    && 'popover' in HTMLElement.prototype
   )
 }
 
@@ -229,6 +229,85 @@ const layerObservers = new WeakMap<HTMLElement, MutationObserver>()
 let viewportListenersAttached = false
 let viewportSyncScheduled = false
 
+/** The forced-theme classes the Host and `base-element` put on a themed element. */
+const THEME_MODE_CLASSES = ['w-theme-dark', 'w-theme-light']
+
+/**
+ * Marks a themed element as a theme root. `@wippy-fe/webcomponent-core`'s facade-variable
+ * bridge (`:where([data-wippy-theme-root]).w-theme-*`) keys on it, see {@link followTheme}.
+ */
+const THEME_ROOT_ATTR = 'data-wippy-theme-root'
+
+/** Per-layer observer that keeps the layer's theme class equal to its trigger context's. */
+const themeObservers = new WeakMap<HTMLElement, MutationObserver>()
+
+/**
+ * The elements above `from`, nearest first, up to and NOT past its shadow root. A shadow
+ * root is not an element, so the walk stops there instead of reaching the host element or
+ * the page: the caller decides whether the host element counts.
+ */
+function ancestorsInShadow(from: Node | null): Element[] {
+  const chain: Element[] = []
+  let node: Node | null = from ? from.parentNode : null
+  while (node && node.nodeType === 1) {
+    chain.push(node as Element)
+    node = node.parentNode
+  }
+  return chain
+}
+
+/**
+ * Gives `layer` the forced theme of the overlay's trigger context, and keeps it in sync.
+ *
+ * The Host puts `w-theme-dark` or `w-theme-light` on the container a web component renders
+ * into, but the layer is a sibling of that container. Rules keyed on the class (the Tailwind
+ * `dark:` utilities, the in-shadow `.w-theme-*` token block and its `color-scheme`) therefore
+ * miss the overlay, which paints in the OS scheme. The layer copies the class of the nearest
+ * theme context above the trigger, and a theme context is an element that carries a forced
+ * class or is marked {@link THEME_ROOT_ATTR}. The search runs through the ancestors inside the
+ * shadow root and ends at the shadow host element, which counts only when the shadow root has
+ * no theme root of its own, so a component that mirrors the class onto its host element and
+ * nowhere inside still works. A theme root with no forced class (Auto mode) ends the search
+ * and leaves the layer unthemed, because it is the nearest context. The page never counts.
+ *
+ * While themed the layer also carries {@link THEME_ROOT_ATTR}, so the variable bridge in
+ * `@wippy-fe/webcomponent-core` (`:where([data-wippy-theme-root]).w-theme-*`) restores the
+ * facade's `--p-*` overrides that the `.w-theme-*` block would replace. With no theme
+ * context the layer carries nothing. One observer watches the `class` and marker attributes of
+ * every element in the chain, and {@link unfollowTheme} disconnects it.
+ */
+function followTheme(layer: HTMLElement, trigger: Node | null, root: ShadowRoot): void {
+  const chain = [...ancestorsInShadow(trigger), root.host]
+  const sync = (): void => {
+    let themed: Element | undefined
+    for (const el of chain) {
+      if (THEME_MODE_CLASSES.some(name => el.classList.contains(name))) {
+        themed = el
+        break
+      }
+      if (el.hasAttribute(THEME_ROOT_ATTR))
+        break
+    }
+    for (const name of THEME_MODE_CLASSES)
+      layer.classList.toggle(name, Boolean(themed && themed.classList.contains(name)))
+    if (themed)
+      layer.setAttribute(THEME_ROOT_ATTR, '')
+    else
+      layer.removeAttribute(THEME_ROOT_ATTR)
+  }
+  sync()
+  const observer = new MutationObserver(sync)
+  for (const el of chain)
+    observer.observe(el, { attributes: true, attributeFilter: ['class', THEME_ROOT_ATTR] })
+  themeObservers.set(layer, observer)
+}
+
+/** Stop mirroring the theme onto `layer` (it is being removed, or already detached). */
+function unfollowTheme(layer: HTMLElement): void {
+  themeObservers.get(layer)?.disconnect()
+  themeObservers.delete(layer)
+}
+
 function syncActiveLayers(): void {
   viewportSyncScheduled = false
   for (const layer of activeLayers) {
@@ -241,6 +320,7 @@ function syncActiveLayers(): void {
       }
       activeLayers.delete(layer)
       layerObservers.get(layer)?.disconnect()
+      unfollowTheme(layer)
       continue
     }
     if (layer.childElementCount > 0)
@@ -255,11 +335,6 @@ function onViewportChange(): void {
   requestAnimationFrame(syncActiveLayers)
 }
 
-function syncLayerTheme(layer: HTMLElement, host: Element): void {
-  layer.classList.toggle('w-theme-light', host.classList.contains('w-theme-light'))
-  layer.classList.toggle('w-theme-dark', host.classList.contains('w-theme-dark'))
-}
-
 /**
  * Create a fresh per-OVERLAY layer (one per Portal instance, NOT shared per shadow root),
  * pinned to viewport origin and kept in sync as its overlay opens (a per-layer
@@ -268,13 +343,9 @@ function syncLayerTheme(layer: HTMLElement, host: Element): void {
  * for components that open several overlays at once; {@link teardownOverlayLayer} removes
  * it on unmount or a switch to inline.
  */
-function createLayer(root: ShadowRoot, themeSource: Element): HTMLElement {
+function createLayer(root: ShadowRoot): HTMLElement {
   const layer = document.createElement('div')
   layer.setAttribute(LAYER_ATTR, '')
-  // Forced-mode selectors need an in-shadow ancestor. The theme-root marker
-  // keeps their token defaults from masking inherited Facade custom values.
-  layer.setAttribute('data-wippy-theme-root', '')
-  syncLayerTheme(layer, themeSource)
   const topLayer = supportsTopLayer()
   // Inline reset of the UA `[popover]` styling — scoped to this one private element,
   // NEVER a global rule that could leak across modules. A shown popover gets the UA
@@ -327,7 +398,6 @@ function createLayer(root: ShadowRoot, themeSource: Element): HTMLElement {
   // observer is referenced only via the WeakMap, so it is disconnected when the layer
   // detaches (in syncActiveLayers) and otherwise GC'd with the layer.
   const observer = new MutationObserver((records) => {
-    syncLayerTheme(layer, themeSource)
     // S2: this layer serves exactly ONE overlay (one Portal instance), so its
     // `__wippyAnchorName` — the trigger anchor-name stamped by `setupOverlayLayer` — is unambiguous.
     // Anchor the overlay when it teleports in; release its style observer when it leaves.
@@ -348,7 +418,6 @@ function createLayer(root: ShadowRoot, themeSource: Element): HTMLElement {
       syncLayer(layer)
   })
   observer.observe(layer, { childList: true })
-  observer.observe(themeSource, { attributes: true, attributeFilter: ['class'] })
   layerObservers.set(layer, observer)
 
   activeLayers.add(layer)
@@ -402,8 +471,9 @@ function setupOverlayLayer(inst: PortalInstance): void {
     return
   // Eager: the layer is promoted to the top layer BEFORE the overlay opens, so PrimeVue
   // never measures a not-yet-promoted box.
-  const themeSource = inst.$el?.parentElement?.closest('[data-wippy-theme-root], .w-theme-light, .w-theme-dark') ?? inst.hostRoot.host
-  inst.layer = createLayer(inst.hostRoot, themeSource)
+  inst.layer = createLayer(inst.hostRoot)
+  // The layer is a sibling of the themed container, so it follows its trigger context's theme class.
+  followTheme(inst.layer, inst.$el, inst.hostRoot)
   // S2: stamp a unique `anchor-name` on the trigger (the placeholder's parent is the
   // component root the self-anchored families align to) and hand it to this layer.
   if (supportsAnchor()) {
@@ -431,6 +501,7 @@ function teardownOverlayLayer(inst: PortalInstance): void {
     }
     activeLayers.delete(inst.layer)
     layerObservers.get(inst.layer)?.disconnect()
+    unfollowTheme(inst.layer)
     inst.layer.remove()
     inst.layer = null
   }

package/tailwind-contract.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.64",
+  "packageVersion": "0.0.65",
   "compatibility": {
-    "themePackageVersion": "0.0.64",
+    "themePackageVersion": "0.0.65",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.64",
+    "implementationRelease": "1.0.65",
     "tailwindVersion": "3.4.19",
     "tailwindcssPrimeuiVersion": "0.6.1",
     "primevueVersion": "4.5.5",
@@ -13,7 +13,7 @@
     "referencePrimeuixThemesVersion": "2.0.3",
     "referencePrimeuixThemesIntegrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
     "sourceHashes": {
-      "themeContract": "a47fc609d0054e11f71cd21f64160c5be8b1e6ac0641329614da8c81fea87bed",
+      "themeContract": "6f45be1a33f15896b27923d9032fc24d4d0d11fd02dc677ea3c9571535253c42",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -34,7 +34,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "9fdbfaa932b0d0774028e43152812dbbb6a4150651ddb6f85a2e7dc03c56200d",
+    "inputHash": "dac4b887da9913a1872ef27a446e6032ec734dd7694410f7decaef1a7c21ab09",
     "requirements": "contracts/runtime-acceptance-requirements.json",
     "gate": "node scripts/build-theme-contract.mjs --check --acceptance --evidence <path> --evidence-sha256 <hash>"
   },

package/tokens.json

@@ -1,15 +1,15 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.64",
-  "implementationRelease": "1.0.64",
+  "packageVersion": "0.0.65",
+  "implementationRelease": "1.0.65",
   "generatedFrom": [
     "theme-config.css",
     "contracts/theme-contract.json"
   ],
   "compatibility": {
-    "themePackageVersion": "0.0.64",
+    "themePackageVersion": "0.0.65",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.64",
+    "implementationRelease": "1.0.65",
     "tailwindVersion": "3.4.19",
     "tailwindcssPrimeuiVersion": "0.6.1",
     "primevueVersion": "4.5.5",
@@ -18,7 +18,7 @@
     "referencePrimeuixThemesVersion": "2.0.3",
     "referencePrimeuixThemesIntegrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
     "sourceHashes": {
-      "themeContract": "a47fc609d0054e11f71cd21f64160c5be8b1e6ac0641329614da8c81fea87bed",
+      "themeContract": "6f45be1a33f15896b27923d9032fc24d4d0d11fd02dc677ea3c9571535253c42",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -39,7 +39,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "9fdbfaa932b0d0774028e43152812dbbb6a4150651ddb6f85a2e7dc03c56200d",
+    "inputHash": "dac4b887da9913a1872ef27a446e6032ec734dd7694410f7decaef1a7c21ab09",
     "requirements": "contracts/runtime-acceptance-requirements.json",
     "gate": "node scripts/build-theme-contract.mjs --check --acceptance --evidence <path> --evidence-sha256 <hash>"
   },