@wippy-fe/theme 0.0.60 → 0.0.61

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.0.61 (2026-10-05)
+
+### Fixed
+
+- Anchored PrimeVue dropdowns inside web components can open above their field when there is insufficient space below.
+- Dropdowns can flip horizontally and shrink to the available viewport width, keeping long options and search fields visible on narrow screens.
+- Filtering preserves the placement and width rules when PrimeVue updates the dropdown's inline styles.
+
+### Compatibility
+
+- CSS anchor placement is enabled only when the browser supports the required placement, flip and sizing features. Other browsers keep the existing placement path.

package/effective-contract.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.60",
+  "packageVersion": "0.0.61",
   "implementationRelease": "1.0.60",
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.61",
     "manifestSchemaVersion": "1.0.0",
     "implementationRelease": "1.0.60",
     "tailwindVersion": "3.4.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/theme",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components.",
   "type": "module",
   "main": "theme-config.css",
@@ -24,6 +24,7 @@
     "primevue-plugin.ts",
     "primevue/",
     "THEMING.md",
+    "CHANGELOG.md",
     "README.md"
   ],
   "dependencies": {

package/primevue-plugin.ts

@@ -47,9 +47,10 @@ function supportsTopLayer(): boolean {
  * SELF-ANCHORED overlay families whose PrimeVue panel aligns to the component root,
  * which is the Portal placeholder's DOM parent (`Select`, `MultiSelect`, `TreeSelect`,
  * `CascadeSelect` — live-verified on `Select`; the others share the same align-to-root
- * shape. `AutoComplete` is excluded — see {@link SELF_ANCHORED_OVERLAY}). Chrome/Edge
- * 125+, Firefox 147+, Safari 26+. Anything else (older engine, or menus / popovers that
- * align to an arbitrary caller-supplied target) keeps S1's pinned-layer positioning. S2 runs
+ * shape. `AutoComplete` is excluded — see {@link SELF_ANCHORED_OVERLAY}). S2 requires
+ * the anchor, placement, fallback and sizing features checked below. Engines that lack
+ * a required feature, and menus / popovers that align to an arbitrary caller-supplied
+ * target, keep S1's pinned-layer positioning. S2 runs
  * only behind this feature gate, and `applyAnchor` restores PrimeVue's own inline positioning
  * verbatim (S1) if a promoted overlay can't enter the top layer — so the stacking fix always
  * holds and positioning never regresses.
@@ -62,7 +63,10 @@ function supportsAnchor(): boolean {
     && typeof CSS !== 'undefined'
     && typeof CSS.supports === 'function'
     && CSS.supports('anchor-name: --a')
-    && CSS.supports('top', 'anchor(--a bottom)')
+    && CSS.supports('position-area', 'bottom span-right')
+    && CSS.supports('position-try-fallbacks', 'flip-block')
+    && CSS.supports('min-width', 'min(anchor-size(width), 100vw)')
+    && CSS.supports('max-width', 'stretch')
   )
 }
 
@@ -92,9 +96,12 @@ function setAnchorStyles(overlay: HTMLElement, anchorName: string): void {
   s.setProperty('inset', 'auto', 'important')
   s.setProperty('margin', '0', 'important')
   s.setProperty('position-anchor', anchorName)
-  s.setProperty('top', `anchor(${anchorName} bottom)`, 'important')
-  s.setProperty('left', `anchor(${anchorName} left)`, 'important')
-  s.setProperty('position-try-fallbacks', 'flip-block')
+  // Flip the placement area rather than important inset declarations. Important
+  // anchor() offsets override the fallback's offsets and leave the panel offscreen.
+  s.setProperty('position-area', 'bottom span-right')
+  s.setProperty('position-try-fallbacks', 'flip-block, flip-inline, flip-block flip-inline')
+  s.setProperty('min-width', 'min(anchor-size(width), 100vw)', 'important')
+  s.setProperty('max-width', 'stretch', 'important')
 }
 
 /**
@@ -106,8 +113,8 @@ function setAnchorStyles(overlay: HTMLElement, anchorName: string): void {
  * inline `style`. Since an inline style has ONE slot per property, that plain write
  * REPLACES our `!important` value+priority — so a one-shot write is not durable. We
  * therefore also watch the overlay's own `style` and re-apply whenever PrimeVue clobbers
- * it; the guard (`top` is no longer `!important`) makes the re-apply idempotent (never a
- * loop). The observer is released when the overlay leaves its layer ({@link releaseAnchor}).
+ * it; checking the expected neutral offsets and margin makes the re-apply idempotent.
+ * The observer is released when the overlay leaves its layer ({@link releaseAnchor}).
  */
 function applyAnchor(overlay: HTMLElement, anchorName: string): void {
   if (!SELF_ANCHORED_OVERLAY.test(overlay.className))
@@ -132,8 +139,16 @@ function applyAnchor(overlay: HTMLElement, anchorName: string): void {
   }
   if (!anchorStyleObservers.has(overlay)) {
     const obs = new MutationObserver(() => {
-      if (overlay.style.getPropertyPriority('top') !== 'important')
+      const s = overlay.style
+      if (s.top !== 'auto' || s.left !== 'auto' || s.margin !== '0px'
+        || s.getPropertyPriority('top') !== 'important'
+        || s.getPropertyPriority('left') !== 'important'
+        || s.getPropertyPriority('margin') !== 'important'
+        || s.getPropertyPriority('min-width') !== 'important'
+        || s.maxWidth !== 'stretch'
+        || s.getPropertyPriority('max-width') !== 'important') {
         setAnchorStyles(overlay, anchorName)
+      }
     })
     obs.observe(overlay, { attributes: true, attributeFilter: ['style'] })
     anchorStyleObservers.set(overlay, obs)

package/tailwind-contract.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.60",
+  "packageVersion": "0.0.61",
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.61",
     "manifestSchemaVersion": "1.0.0",
     "implementationRelease": "1.0.60",
     "tailwindVersion": "3.4.19",

package/tokens.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.60",
+  "packageVersion": "0.0.61",
   "implementationRelease": "1.0.60",
   "generatedFrom": [
     "theme-config.css",
     "contracts/theme-contract.json"
   ],
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.61",
     "manifestSchemaVersion": "1.0.0",
     "implementationRelease": "1.0.60",
     "tailwindVersion": "3.4.19",