@wippy-fe/theme 0.0.42 → 0.0.43

package/THEMING.md

@@ -676,6 +676,14 @@ The CSS files use theme variables via Tailwind classes. Example from `button.css
 
 The `tailwind.css` master file imports all component CSS files organized by category (form, button, data, overlay, menu, panel, file, message, media, misc).
 
+### Overlays render inside the shadow root
+
+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 flips the shared Portal's `appendTo` default from `'body'` to `'self'`, so every overlay renders **inline, inside the shadow root**, by default — you do nothing. A component that passes its own `appendTo` (e.g. `<Dialog appendTo="body">`) still wins; the override only changes the default. This matters most for `Drawer`, which hard-wires its Portal with no `appendTo` and so is the one overlay that otherwise *always* escapes.
+
+> PrimeVue 4 exposes no global overlay / `appendTo` config, and all overlays share the one Portal — so this single default-flip is the whole fix. No per-component `appendTo="self"` boilerplate and no per-app `patch-package` needed. (Requires `@wippy-fe/theme` with this behavior; see the package version.)
+
 ### Available PrimeVue component styles
 
 **Form**: autocomplete, cascadeselect, checkbox, colorpicker, datepicker, iconfield, iftalabel, inputgroup, inputnumber, inputotp, inputtext, floatlabel, knob, listbox, multiselect, password, radiobutton, rating, select, selectbutton, slider, textarea, togglebutton, toggleswitch, treeselect

package/package.json

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

package/primevue-plugin.ts

@@ -1,8 +1,33 @@
 import type { App } from 'vue'
 import PrimeVue from 'primevue/config'
+import Portal from 'primevue/portal'
+
+/**
+ * Make PrimeVue overlays render inside the shadow root by default.
+ *
+ * Every PrimeVue overlay (Dialog, Drawer, Select, Popover, Menu, …) teleports
+ * through the ONE shared `primevue/portal`, whose `appendTo` default is `'body'`.
+ * Inside a web component that escapes the shadow root, so the module's
+ * shadow-scoped CSS no longer styles the overlay. Most components expose
+ * `appendTo` (an app can pass `'self'`), but `Drawer` hard-wires its Portal with
+ * no `appendTo`, so it ALWAYS escapes — and PrimeVue 4 has no global config for
+ * this. Flipping the shared Portal's default to `'self'` fixes every overlay at
+ * once; the components that pass their own `appendTo` are unaffected.
+ *
+ * Must run before the first overlay renders (install time is early enough — Vue
+ * normalizes a component's prop defaults lazily on first instantiation).
+ */
+function keepOverlaysInShadowRoot(): void {
+  const appendTo = (Portal as any)?.props?.appendTo
+  if (appendTo && appendTo.default === 'body')
+    appendTo.default = 'self'
+}
 
 export const PrimeVuePlugin = {
-  install: (app: App) => app.use(PrimeVue, { theme: 'none' }),
+  install: (app: App) => {
+    keepOverlaysInShadowRoot()
+    app.use(PrimeVue, { theme: 'none' })
+  },
 }
 
 export default PrimeVuePlugin

package/tokens.json

@@ -1,6 +1,6 @@
 {
   "generatedFrom": "theme-config.css",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "grammar": "every color family = --p-<fam> + --p-<fam>-{50..950} + --p-<fam>-{color,contrast-color,hover-color,active-color}; --p-surface-<shade>; text/content/highlight semantic aliases; --p-font-<role>-<prop>",
   "families": [
     "primary",