@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/CHANGELOG.md

@@ -1,36 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.37-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.37-rc.0
-  - @akinon/theme-contract@2.0.37-rc.0
+## 2.0.37
+
+### Patch Changes
+
+- 9fc516ac: ZERO-4705: Add the commerce block and section vocabulary — product, listing, basket, account, auth and content renderers a designer can place, with their content still commerce-driven
+  - @akinon/next@2.0.37
+  - @akinon/theme-contract@2.0.37
 
 ## 2.0.36
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.37-rc.0",
+  "version": "2.0.37",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.37-rc.0",
+    "@akinon/next": "2.0.37",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.37-rc.0",
+    "@akinon/theme-contract": "2.0.37",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.37-rc.0",
+    "@akinon/next": "2.0.37",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/__snapshots__/facet-filters-block.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`default render is frozen renders an opened dropdown unchanged 1`] = `"<div data-facet-filters="" data-facet-layout="dropdown" data-part="list" style="display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--facet-filters-gap, 16px);"><div data-facet-group="color" data-part="group" style="min-width: 180px; position: relative;" data-state="open"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; border-style: solid; border-width: 1px; padding: 10px 12px;" data-state="open"><span>Renk</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" style="transform: rotate(180deg); transition: transform 150ms;" data-state="open"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="panel" data-state="open" style="list-style: none; margin: 0px; padding: 12px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0px; min-width: 100%; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);"><li><button type="button" data-facet-choice="black" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Siyah</span><span data-part="count" style="opacity: 0.6;">(12)</span></button></li><li><button type="button" data-facet-choice="white" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Beyaz</span><span data-part="count" style="opacity: 0.6;">(7)</span></button></li><li><button type="button" data-facet-choice="navy" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Lacivert</span><span data-part="count" style="opacity: 0.6;">(3)</span></button></li></ul></div><div data-facet-group="size" data-part="group" style="min-width: 180px; position: relative;"><button type="button" data-facet-toggle="" aria-expanded="false" data-part="label" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; border-style: solid; border-width: 1px; padding: 10px 12px;"><span>Beden</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" style="transform: none; transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button></div></div>"`;
+
+exports[`default render is frozen renders an opened panel unchanged 1`] = `"<div data-facet-filters="" data-facet-layout="panel"><button type="button" data-facet-trigger="" data-part="trigger" aria-haspopup="dialog" aria-expanded="true" style="display: inline-flex; align-items: center; gap: var(--facet-filters-trigger-gap, 8px); background: none; padding: 0px; cursor: pointer;" data-state="open"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" data-part="trigger-icon"><path d="M3 5h18l-7 8v6l-4 2v-8L3 5z" stroke-linejoin="round"></path></svg><span data-facet-trigger-label="">Filters</span></button><div data-facet-panel-root="" style="position: fixed; inset: 0; z-index: 1000; display: flex; padding: 0px;"><div data-facet-backdrop="" data-part="backdrop" data-state="open" style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);"></div><div data-facet-panel="" data-facet-panel-mode="drawer" data-part="panel" data-state="open" role="dialog" aria-modal="true" aria-label="Filters" tabindex="-1" style="display: flex; flex-direction: column; text-align: left; outline: none; position: absolute; top: 0px; bottom: 0px; right: 0px; box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);"><div data-facet-panel-header="" data-part="panel-header" style="display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 12px 16px;"><span data-facet-panel-title="" data-part="panel-title" style="font-weight: 600;">Filters</span><button type="button" data-facet-panel-close="" data-part="close" aria-label="Close" style="display: inline-flex; background: none; padding: 4px; cursor: pointer;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><div data-facet-panel-body="" data-part="list" style="display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--facet-filters-gap, 16px); padding: 16px; overflow-y: auto;"><div data-facet-group="color" data-part="group" data-state="open"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Renk</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="black" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Siyah</span><span data-part="count" style="opacity: 0.6;">(12)</span></button></li><li><button type="button" data-facet-choice="white" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Beyaz</span><span data-part="count" style="opacity: 0.6;">(7)</span></button></li><li><button type="button" data-facet-choice="navy" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Lacivert</span><span data-part="count" style="opacity: 0.6;">(3)</span></button></li></ul></div><div data-facet-group="size" data-part="group" data-state="open"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Beden</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="s" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>S</span><span data-part="count" style="opacity: 0.6;">(9)</span></button></li><li><button type="button" data-facet-choice="m" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>M</span><span data-part="count" style="opacity: 0.6;">(4)</span></button></li></ul></div></div><div data-facet-panel-footer="" data-part="panel-footer" style="display: flex; gap: 8px; flex: 0 0 auto; padding: 12px 16px;"><button type="button" data-facet-clear="" data-part="clear" style="flex: 1 1 0px; padding: 10px 12px; background: none; border-style: solid; border-width: 1px; cursor: pointer;">Clear all</button><button type="button" data-facet-apply="" data-part="apply" style="flex: 1 1 0px; padding: 10px 12px; background: rgb(17, 24, 39); color: rgb(255, 255, 255); cursor: pointer;">Apply</button></div></div></div></div>"`;
+
+exports[`default render is frozen renders the pills layout unchanged 1`] = `"<div data-facet-filters="" data-facet-layout="pills" data-part="list" style="display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--facet-filters-gap, 16px);"><div data-facet-group="color" data-part="group" data-state="open"><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--facet-filters-pill-gap, 8px);"><li><a data-facet-choice="black" data-facet-selected="false" data-part="pill" href="/list?attributes_color=black" style="display: inline-flex; align-items: center; gap: 6px; border-radius: var(--facet-filters-pill-radius, 999px); text-decoration: none; cursor: pointer; white-space: nowrap;"><span>Siyah</span><span data-part="count" style="opacity: 0.6;">(12)</span></a></li><li><a data-facet-choice="white" data-facet-selected="false" data-part="pill" href="/list?attributes_color=white" style="display: inline-flex; align-items: center; gap: 6px; border-radius: var(--facet-filters-pill-radius, 999px); text-decoration: none; cursor: pointer; white-space: nowrap;"><span>Beyaz</span><span data-part="count" style="opacity: 0.6;">(7)</span></a></li><li><a data-facet-choice="navy" data-facet-selected="false" data-part="pill" href="/list?attributes_color=navy" style="display: inline-flex; align-items: center; gap: 6px; border-radius: var(--facet-filters-pill-radius, 999px); text-decoration: none; cursor: pointer; white-space: nowrap;"><span>Lacivert</span><span data-part="count" style="opacity: 0.6;">(3)</span></a></li></ul></div><div data-facet-group="size" data-part="group" data-state="open"><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--facet-filters-pill-gap, 8px);"><li><a data-facet-choice="s" data-facet-selected="false" data-part="pill" href="/list?attributes_size=s" style="display: inline-flex; align-items: center; gap: 6px; border-radius: var(--facet-filters-pill-radius, 999px); text-decoration: none; cursor: pointer; white-space: nowrap;"><span>S</span><span data-part="count" style="opacity: 0.6;">(9)</span></a></li><li><a data-facet-choice="m" data-facet-selected="false" data-part="pill" href="/list?attributes_size=m" style="display: inline-flex; align-items: center; gap: 6px; border-radius: var(--facet-filters-pill-radius, 999px); text-decoration: none; cursor: pointer; white-space: nowrap;"><span>M</span><span data-part="count" style="opacity: 0.6;">(4)</span></a></li></ul></div></div>"`;
+
+exports[`default render is frozen renders the sidebar layout unchanged 1`] = `"<div data-facet-filters="" data-facet-layout="sidebar" data-part="list" style="display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--facet-filters-gap, 16px);"><div data-facet-group="color" data-part="group" data-state="open"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Renk</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="black" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Siyah</span><span data-part="count" style="opacity: 0.6;">(12)</span></button></li><li><button type="button" data-facet-choice="white" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Beyaz</span><span data-part="count" style="opacity: 0.6;">(7)</span></button></li><li><button type="button" data-facet-choice="navy" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Lacivert</span><span data-part="count" style="opacity: 0.6;">(3)</span></button></li></ul></div><div data-facet-group="size" data-part="group" data-state="open"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Beden</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="s" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>S</span><span data-part="count" style="opacity: 0.6;">(9)</span></button></li><li><button type="button" data-facet-choice="m" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>M</span><span data-part="count" style="opacity: 0.6;">(4)</span></button></li></ul></div></div>"`;
+
+exports[`default render is frozen renders the topbar layout unchanged 1`] = `"<div data-facet-filters="" data-facet-layout="topbar" data-part="list" style="display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--facet-filters-gap, 16px);"><div data-facet-group="color" data-part="group" data-state="open" style="min-width: 180px;"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Renk</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="black" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Siyah</span><span data-part="count" style="opacity: 0.6;">(12)</span></button></li><li><button type="button" data-facet-choice="white" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Beyaz</span><span data-part="count" style="opacity: 0.6;">(7)</span></button></li><li><button type="button" data-facet-choice="navy" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>Lacivert</span><span data-part="count" style="opacity: 0.6;">(3)</span></button></li></ul></div><div data-facet-group="size" data-part="group" data-state="open" style="min-width: 180px;"><button type="button" data-facet-toggle="" aria-expanded="true" data-part="label" data-state="open" style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; cursor: pointer; font-weight: 600; padding: 8px 0px;"><span>Beden</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" data-part="icon" data-state="open" style="transform: rotate(180deg); transition: transform 150ms;"><path d="M6 9l6 6 6-6"></path></svg></button><ul data-facet-choices="" data-part="option-list" style="list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px;"><li><button type="button" data-facet-choice="s" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>S</span><span data-part="count" style="opacity: 0.6;">(9)</span></button></li><li><button type="button" data-facet-choice="m" data-facet-selected="false" aria-pressed="false" data-part="option" style="display: flex; align-items: center; gap: 8px; width: 100%; background: none; padding: 2px 0px; cursor: pointer; text-align: left; font-weight: 400;"><span aria-hidden="true" data-part="checkbox" style="width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 2px; background: transparent;"></span><span>M</span><span data-part="count" style="opacity: 0.6;">(4)</span></button></li></ul></div></div>"`;

package/src/__tests__/custom-css.test.ts

@@ -0,0 +1,181 @@
+import { generateThemeCSS } from '../utils';
+import { readCustomCss, scopeCustomCss } from '../utils/custom-css';
+import type { Section } from '../theme-section';
+
+const SCOPE = '[data-block-id="blk-1"]';
+
+const sectionWithCustomCss = (customCss: unknown): Section[] =>
+  [
+    {
+      id: 'sec-1',
+      type: 'custom',
+      name: 'Section',
+      label: 'Section',
+      order: 0,
+      hidden: false,
+      properties: {},
+      styles: {},
+      blocks: [
+        {
+          id: 'blk-1',
+          type: 'variant-selector',
+          label: 'Variant selector',
+          order: 0,
+          hidden: false,
+          value: '',
+          properties: { customCss },
+          styles: {},
+          blocks: []
+        }
+      ]
+    }
+  ] as unknown as Section[];
+
+describe('scoped custom CSS', () => {
+  it('wraps bare declarations in the block scope', () => {
+    expect(scopeCustomCss('color: red;', SCOPE)).toContain(
+      `${SCOPE} {\ncolor: red;\n}`
+    );
+  });
+
+  it('substitutes & with the block', () => {
+    const css = scopeCustomCss(
+      '& [data-part="dropdown"] { border-radius: 0; }',
+      SCOPE
+    );
+
+    expect(css).toContain(`${SCOPE} [data-part="dropdown"] {`);
+  });
+
+  it('scopes a selector that does not mention the block', () => {
+    // Otherwise a stray `select { … }` would restyle every select on the page.
+    expect(scopeCustomCss('select { border: 0; }', SCOPE)).toContain(
+      `${SCOPE} select {`
+    );
+  });
+
+  it('scopes every selector in a list', () => {
+    const css = scopeCustomCss('a, button { color: blue; }', SCOPE);
+
+    expect(css).toContain(`${SCOPE} a`);
+    expect(css).toContain(`${SCOPE} button`);
+  });
+
+  it('scopes inside a media query and keeps the condition', () => {
+    const css = scopeCustomCss(
+      '@media (max-width: 768px) { & [data-part="option"] { flex: 1 1 100%; } }',
+      SCOPE
+    );
+
+    expect(css).toContain('@media (max-width: 768px) {');
+    expect(css).toContain(`${SCOPE} [data-part="option"] {`);
+  });
+
+  it('refuses CSS that closes the block early', () => {
+    // The classic break-out: finish my rule, then style the whole page.
+    expect(scopeCustomCss('color: red } body { display: none', SCOPE)).toBe('');
+  });
+
+  it('refuses unbalanced braces', () => {
+    expect(scopeCustomCss('& { color: red;', SCOPE)).toBe('');
+  });
+
+  it('refuses imports and script-ish values', () => {
+    expect(scopeCustomCss('@import url(evil.css);', SCOPE)).toBe('');
+    expect(
+      scopeCustomCss('& { background: url(javascript:alert(1)); }', SCOPE)
+    ).toBe('');
+    expect(scopeCustomCss('& { behavior: url(x.htc); }', SCOPE)).toBe('');
+  });
+
+  it('refuses a style tag breakout', () => {
+    expect(scopeCustomCss('</style><script>alert(1)</script>', SCOPE)).toBe('');
+  });
+
+  it('ignores comments used to smuggle a brace', () => {
+    expect(scopeCustomCss('/* } */ color: red;', SCOPE)).toContain('color: red');
+  });
+
+  it('reads the value per breakpoint', () => {
+    const properties = {
+      customCss: { desktop: 'color: red;', mobile: 'color: blue;' }
+    };
+
+    expect(readCustomCss(properties)).toBe('color: red;');
+    expect(readCustomCss(properties, 'mobile')).toBe('color: blue;');
+    expect(readCustomCss({}, 'mobile')).toBe('');
+  });
+
+  it('reaches the generated stylesheet', () => {
+    const css = generateThemeCSS(
+      sectionWithCustomCss({
+        desktop: '& [data-part="dropdown"] { border-radius: 0; }'
+      })
+    );
+
+    expect(css).toContain(`${SCOPE} [data-part="dropdown"]`);
+    expect(css).toContain('border-radius: 0');
+  });
+
+  it('drops unsafe custom CSS instead of emitting it', () => {
+    const css = generateThemeCSS(
+      sectionWithCustomCss({ desktop: 'color: red } body { display: none' })
+    );
+
+    expect(css).not.toContain('display: none');
+  });
+});
+
+describe('custom CSS across breakpoints', () => {
+  it('keeps the mobile bucket on the storefront', () => {
+    // The storefront has no target breakpoint — one stylesheet serves both —
+    // so reading a single bucket silently dropped everything written for
+    // mobile.
+    const css = generateThemeCSS(
+      sectionWithCustomCss({
+        desktop: '& { gap: 24px; }',
+        mobile: '& { gap: 8px; }'
+      })
+    );
+
+    expect(css).toContain('gap: 24px');
+    expect(css).toContain('@media (max-width: 1023px)');
+    expect(css).toContain('gap: 8px');
+  });
+
+  it('emits only the edited breakpoint in the designer', () => {
+    const css = generateThemeCSS(
+      sectionWithCustomCss({
+        desktop: '& { gap: 24px; }',
+        mobile: '& { gap: 8px; }'
+      }),
+      'mobile'
+    );
+
+    expect(css).toContain('gap: 8px');
+    expect(css).not.toContain('gap: 24px');
+  });
+
+  it('does not repeat an identical mobile value', () => {
+    const css = generateThemeCSS(
+      sectionWithCustomCss({ desktop: '& { gap: 24px; }', mobile: '& { gap: 24px; }' })
+    );
+
+    expect(css).not.toContain('@media');
+  });
+
+  it('lets an animation through unscoped', () => {
+    // Scoping a keyframe stop turns it into a dead at-rule, so a spinner
+    // could not be authored at all.
+    const css = generateThemeCSS(
+      sectionWithCustomCss({
+        desktop:
+          '@keyframes pz-spin { to { transform: rotate(360deg); } } & { animation: pz-spin 1s linear infinite; }'
+      })
+    );
+
+    expect(css).toContain('@keyframes pz-spin');
+    expect(css).toContain('rotate(360deg)');
+    expect(css).toContain('animation: pz-spin');
+  });
+});