@wippy-fe/theme 0.0.60 → 0.0.62

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/contracts/theme-contract.json

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

package/effective-contract.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.60",
-  "implementationRelease": "1.0.60",
+  "packageVersion": "0.0.62",
+  "implementationRelease": "1.0.62",
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.62",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.60",
+    "implementationRelease": "1.0.62",
     "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": "3f34ccb7262d2d7bce60b629fdaa66a416d6413f4245ab6e52b8e7a0b3b369bb",
+      "themeContract": "12b153ce7e8c50f1ed3a9acacf7cca18a1879eb0263252ce82adde4c54cba724",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -35,7 +35,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "b93b3c2e4eb7a6bedb54f5e13760976efce7491d3c44cdfcf9be4c0970b0fad0",
+    "inputHash": "322274f50fc263f822a296425594e91841dc2a0826ddd7e733066d29cff6c41a",
     "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.60",
+  "version": "0.0.62",
   "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,10 +1,10 @@
 {
   "schemaVersion": "1.0.0",
-  "packageVersion": "0.0.60",
+  "packageVersion": "0.0.62",
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.62",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.60",
+    "implementationRelease": "1.0.62",
     "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": "3f34ccb7262d2d7bce60b629fdaa66a416d6413f4245ab6e52b8e7a0b3b369bb",
+      "themeContract": "12b153ce7e8c50f1ed3a9acacf7cca18a1879eb0263252ce82adde4c54cba724",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -34,7 +34,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "b93b3c2e4eb7a6bedb54f5e13760976efce7491d3c44cdfcf9be4c0970b0fad0",
+    "inputHash": "322274f50fc263f822a296425594e91841dc2a0826ddd7e733066d29cff6c41a",
     "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.60",
-  "implementationRelease": "1.0.60",
+  "packageVersion": "0.0.62",
+  "implementationRelease": "1.0.62",
   "generatedFrom": [
     "theme-config.css",
     "contracts/theme-contract.json"
   ],
   "compatibility": {
-    "themePackageVersion": "0.0.60",
+    "themePackageVersion": "0.0.62",
     "manifestSchemaVersion": "1.0.0",
-    "implementationRelease": "1.0.60",
+    "implementationRelease": "1.0.62",
     "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": "3f34ccb7262d2d7bce60b629fdaa66a416d6413f4245ab6e52b8e7a0b3b369bb",
+      "themeContract": "12b153ce7e8c50f1ed3a9acacf7cca18a1879eb0263252ce82adde4c54cba724",
       "runtimeAcceptanceRequirements": "6bac23fb52a87b18b1661b5ac73747a972e07f40af6961571b5f4dd831d4cb85",
       "themeConfig": "9b484e9da76871d11edda5a555b0d0443a262acd80fb42c74c4fd78e2b23b5ae",
       "tailwindConfig": "f1e862105254f082a78823ea685e3c6dc3ff5822516b7434a1e1141c976adc1d",
@@ -39,7 +39,7 @@
   "acceptance": {
     "status": "unverified",
     "evidenceSchemaVersion": "1.0.0",
-    "inputHash": "b93b3c2e4eb7a6bedb54f5e13760976efce7491d3c44cdfcf9be4c0970b0fad0",
+    "inputHash": "322274f50fc263f822a296425594e91841dc2a0826ddd7e733066d29cff6c41a",
     "requirements": "contracts/runtime-acceptance-requirements.json",
     "gate": "node scripts/build-theme-contract.mjs --check --acceptance --evidence <path> --evidence-sha256 <hash>"
   },